starting swiss layout

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}

allfiles.txt

@@ -0,0 +1,235 @@
+0ce11d135a638888fce20b75213f96d337fde83f
+111be4b602509674c2a51234f8a3b3fd50fbb599
+17975124d4f082ee1d5130aa2388cdc28dcfb6c0
+37cf67ad4f53178503b51c1f6f63ae88cd3f3a56
+3fdf89acdec1b6d13a372d726a9b222658f2f335
+4aabfc6b59b62a838747948fc2764d817082d692
+57927e44192eedc7f6d12f340a66aba5b52ffb95
+5b3ac4fb892e67b707d12eed077665c1ad65df1c
+71de712741dbfaa529384bb73996d69a16592958
+73aa4e0fcacd3e17fe3c2d92d5cb9247f400c9e0
+8bbf7a4c2b671154ceff6c4dd2381445a6c5b08e
+8c8568a4b56f3cb48c9d733345fa244397555441
+a4cff85c1010c6cc919511d3e429ecc42dbe528d
+ae0df5b86e8a696a0b396ce46e94cea18eb945bf
+b3bc957ec117d69bbbdbd0af5e589405071c5900
+b43676f131a64437b81239e2943090f563cdcb0f
+c45c80fc471ca1c0c791ebd3a4311807a04fd1e1
+c94d6081412bfaea3ba870cc9c33acfcf232ca7c
+cf4ba1e726e0d5fc89cee5356bbdcf2791126f79
+dfeddcaf4a5ebd1e105b135ea359e76096e3cf80
+e4cd6977a921ff059e31f345ccfa2dab61c52112
+fcfc497a54ab52e23598317ac1d71bba97ea4954
+03389b4589828c9a11587a4173d6bf4b7db37bca 
+080e9cfb20d2a6cd86eb4e612fc771c94123194e 
+1497e50cd5c9bc87652c7bc9b79d942fd17b640d 
+190aebad48ec35bd467d8aad98d48f521d0646b5 
+1c39a0b01032670b1e5d927ec0b8d8f2d0edff08 
+2747fc781043cf8df62ce1e587e83cb914bf1b70 
+285a8f8dbd13906bd5efb1a4d50757c2e8c5ecd1 
+2df8ccf1a40eccf80d82068fb3e676f08b923d41 
+4328c73f1bc803eb9e37198405a31c9e2a833ffb 
+5d0ff3092da2889e40213f22a1e1c2f8c849f09b 
+60e6bd048568d403f307461ea2073d80276f56bb 
+62b4430bb909db30f2f899738ffb462a78609912 
+62f86f9daed665b1f65845214c98d210f5f29e07 
+70c9b39355d78808b7fef41a89eeb13115ecfa35 
+76c5d58ed0ccd493b822df1d808ea8408e63f759 
+92bedbadddf9f5c4e00adb8fead81663ce0d422a 
+b610955736cd0335c76452626bbb892dc5a89ef2 
+c9dc7ce32a8d87168e01f17361e3e6ff520a5a84 
+d667e23142144f712d9a8320a2e2fc300049955a 
+d9d870b90e41ab11704746ae21d4a62bf8b0009b 
+f9f8a69b029f1c1db067653bdf157d66941b550d 
+a547bf36d8d11a4f89c59c144f24795749086dd1 .gitignore
+136d709ac9ba02bb49290bab3eb0699d0b1aa39d index.html
+5ea3825696665778a04779d8a94f0ab44a287945 index.html
+7c331399d16930a7312b5704c067bc4ac79ecaa8 index.html
+4575e8c56f42d1d28bd45bc98f7ac70177b9efcc package.json
+f60b6702a0627f27a164498efa85160dd9cc91ca package.json
+04dc048465cf78cbd6badb496108487e06fb2f6e package-lock.json
+d2427808249b6f0a7e5e0b8d86e55fe69b52539c package-lock.json
+15d9615bb8ef4752d728bd408f33344b465d8cc0 public
+9c98349767f1c3ff47633d728043f87d0c64d35f public
+ab9367b93047d752e13d0ab8707aff2bdfd5f9c6 public
+89b736a3c99c0114ff735c42257f93306f7668ea public/draco
+6629469b21328fc180e8385e324acaf85ce0d93d public/draco/draco_decoder.js
+e5a5e06eb51fb061a94a9682cc7e338038fae25c public/draco/draco_decoder.wasm
+2ace437282e9beeb7712143820fffa1937b2a41a public/draco/draco_encoder.js
+bb5b1224121134740fe6832a1aa8605bb128d2fd public/draco/draco_wasm_wrapper.js
+c231a9a9316ec267ff569bbd1bc8dd9e4355732b public/draco/gltf
+7c84b0be2aa46407df9f3f3371d574dc165b55f8 public/draco/gltf/draco_decoder.js
+469904ebcb7b83523db73913a19c349528105ff8 public/draco/gltf/draco_decoder.wasm
+a67cdf20607147c05c53de9d009653efa43ff7c0 public/draco/gltf/draco_encoder.js
+43f15568384c84f9506cd86fc4a8736e1ba2ec1f public/draco/gltf/draco_wasm_wrapper.js
+4d891646db2fad57251a676e3abaafee4eba0512 public/draco/README.md
+347d0c01e8f234b86366829b1749995174d8fa3b public/models
+a18a8e5569318dd2b68619883dd5afb51b17c042 public/models
+e9292c99d49ede8f102de5a9a990101519871964 public/models
+449ad52b23c632bc798227012b38be9446a486fe public/models/door_room_firstVersion_materials-draco.glb
+d78d265ad6a92cb0282e7c93a853b4da9486c938 public/models/LuebeckRoom_materials-draco.glb
+95b3fe16be00c0a53423e0ede50e977cc2480ba8 public/models/Monitor_draco.glb
+e7b8dfb1b2a60bd50538bec9f876511b9cac21e3 public/vite.svg
+33895ab2002862766f2df205d5783f14cd0c1d74 README.md
+2a5e2f98bd4fdb07cb8df90cc6dd0f5561687ae2 src
+45da9fa3ea114221428951c0be9b5aef71f1cad1 src
+4873860c349c784c4985c32c8d8e1beb67007390 src
+52ad0aa5b92ea6427cfab94150e7778658de205c src
+58b19f06e33a0dd76babcc6d1ebe365795281136 src
+6100926112de9f920aa172ef09f2ced5b44d10c5 src
+61673cead228f4dd47723aa185af40c97bf37c02 src
+6a08e7aa691e749b11b600de233f64671d694dae src
+6e963e4bf818cafcdbfc7fa0b2709fbacd385f9a src
+902e5d21cc5fee495095219d5505f71b6e2af826 src
+a8b2b7815158b45507ed87598011c085a0747fcc src
+af1543ac86f394f0b97fd3dc6cfa63783ad92eb0 src
+afddff341fb181bfca876499acf9827b5a7dbed9 src
+b29b6fe757c85d9178008c3f3707eecd32836ec7 src
+bd65a3496b8f5974de13e7e816419e3272634792 src
+c56ff1ff7d5ad41997caac1d2205d48bb5d50563 src
+caecba1f62ecb07fbfd91c90eaeb50eaa1bbda49 src
+e5b46e3dd6f9b9a704626525c1ac6ea6b92414b7 src
+eb3357fe3984b0ed9f089803e2ee0fa2b754947d src
+f6c5915948cb849f2ffea324b2d0367568297ad8 src
+fb73ceecc5a207f20aea5e93cfeb6a00ea043d95 src
+4b06fa68d6380dbc70d57fc3ec1173ce3b423d10 src/App.vue
+98177b4124b5557e48ac8a1aaa071c60b6da910f src/App.vue
+a87a34921e5cf2229e81e769c7875b263cbf621b src/App.vue
+b3ad18d772bd183635be05d759d46260f0f66374 src/App.vue
+c1b1d851e0700ac29d3e864981620f815d8a7ff2 src/App.vue
+d5b9f6c62e59dbac25989de5b3f90c9b57ad5c72 src/App.vue
+7914fc46ca34c7b3ab7ccaa753692be01369f9c6 src/assets
+bdde0ffb3d2d3e70e51a1f6ad445c52382fafcd6 src/assets
+cb158b9b5662bed03e1d6882d26c599913467c7f src/assets
+e0e4508082d5201cdd7b2bad7f78605626a0c34b src/assets
+4176be90aef97a4ea026ef1792b331fcb39d4ffa src/assets/background
+4852cc8c0f89161ca78e4d59a24961499241d669 src/assets/background
+92d087745bb930f060fb2d592d7ccbf31d755bc7 src/assets/background/blackwhite.jpg
+fbae418126d3d651ace8bd89bb0b210c5df40d21 src/assets/background/castle_ghotik.png
+cd78562faf7097546166ee929a88aa58c6ccda43 src/assets/background/dom.png
+03a4bea3229852803fe506895a306e4858dff246 src/assets/background/marmor.jpg
+5ef1153cbb79177bd3886380438031b4e452b885 src/assets/background/night.jpg
+1378fbe05e5a539bdb2acc24d3a2a8802c933896 src/assets/background/night.png
+00410e8d3d51909b13a8157706b45abfb5a4366e src/assets/background/paper.png
+595dc6b6df70365906ee3d9222cbda4eebf7d710 src/assets/background/pngwing.com(2).png
+c1c26a86cfe7b435746ad9f6bf93ea9815fff705 src/assets/background/pngwing.com(3).png
+8786d88057671a6676866d398f9a5ff98f6dce2b src/assets/background/wall.jpg
+ec8a605c8f5d9df31cd270b3cbed6b234d89c9a9 src/assets/bird-claw.svg
+f952376c69177a779ed5a7f241dffd942fbc509f src/assets/crow-dive-svgrepo-com.svg
+582ca198cd6a4a54d413f04ea7dbac54b70ad6a4 src/assets/fonts
+6bd0cf3c3d16ac75dd303b747e92794afbf22ecf src/assets/fonts/Art_Dystopia.woff2
+bf5007915d4886812517faaed9f264ac288415d3 src/assets/myself
+cbe015c86870f9747ee03d683a1b9f4ab1d7dd18 src/assets/myself
+1199694f78271cc3fd38a2efe6b2b17561906134 src/assets/myself/15.jpg
+c37abad9534b9945591255d2aa619e8efa8fa489 src/assets/myself/27-2.jpg
+91df257b67a11b4acd0503890cb0402611543f0a src/assets/myself/dark
+08f221f00ca28f2cc90fa6ee128bd5e48f78569f src/assets/myself/dark/italien.png
+a7caa73ef51ec7b286b80757a11ca2960dd6b023 src/assets/myself/dark/laub.png
+db697621cdb16d7c2d6dc2fc616d3211ad27ca70 src/assets/myself/dark/ski.png
+3bb4839332454c5e581df6f628685447861b263e src/assets/myself/dark/small.png
+586de70ad46999c6c91bd553bf8c09ed64996815 src/assets/myself/dark/smart.png
+b6af45d526a7afc56f93f7ecddb3a78121f64ece src/assets/myself/dark/suf.png
+6633fef12694a3048ec7a5a91eb5f795b707c5ef src/assets/myself/dark/wasser.png
+66e0cc9d52e0a0ec6f356af460e7f0d2125abda8 src/assets/myself/DSCN1921.jpg
+0763db8d0e06f6afacc4d5a0882f1032cec7cca3 src/assets/myself/GOPR0521.png
+ff749c394bdf19a257a5f578d0de7a34602ba350 src/assets/myself/HarzUrlaub.jpeg
+4fe6f1b0824327d008dc6671c651cbfcfaeab1ef src/assets/myself/ski.png
+95abebc5ec191097f7feedbb03abd85871fdef06 src/assets/myself/SmartTom.jpeg
+76b9381915191be4d420eca76ef475a60cfcab05 src/assets/myself/surf.png
+efaa096cf2cd21412ae02af531f541b7589d70e2 src/assets/myself/TOm.jpg
+5a48af5ea07eb0da1fe73e1ee8083346c65e589b src/assets/retro_cursor.svg
+248655b4094ca26aeb19c4d9353750eaab396aa8 src/assets/RetroGamePixel.png
+2424808be48cd70d29d15475eac1ab9ce243fa96 src/components
+28adb7b60137e3027d8c5cbfa9b41cd47d65b4e8 src/components
+3a358c808f1a89c74c94612f2a3f9e8402685c06 src/components
+43df3fa648df3fcecca5215ac813c7a0de424195 src/components
+7ba6e1c05dfbb0c7aca0e432d2a26373c14d75d2 src/components
+7ef4b3b97bb7895b36a29d3e62105186ecc32f90 src/components
+89d25245f7eff9e9011dc3b332bab7c94adfb833 src/components
+a02e3191c341faf784cfb796fecde6e910e6be09 src/components
+a65f019820387977e4c6568cafdeeb82a969b7c1 src/components
+be9dcb0ea35a33e64c218e11ac2ff5daf7cb7364 src/components
+c9d535b1d52802492ffe9c75a09ec6846b520c32 src/components
+cd6fb364bde160bf183035e798b926df6085644b src/components
+da594cc860c7fd25096ba347e7c28190bc86e33b src/components
+ddc5ada1dbfb0dc097763dbea2d4677afea36c26 src/components
+e1d9a4e82f4c9272cc5ce06d85a8ac07e3e2ffaa src/components
+1db742e3db0d15319eb4b31956284dc47b8a2d4d src/components/sections
+3ec0f1784d6d6e49fc0824f1db7a81c949d1a0ca src/components/sections
+4ad59d2a4771d8314d78b195ca1deb86273aecf4 src/components/sections
+4ba6a1f3bc8f00b1ee014cb2141a6c802f76acd1 src/components/sections
+531476957d0a570862a96a32d9297515412e0712 src/components/sections
+741eb5ccd383cdcbc9cd1b55d8e84e043859ccca src/components/sections
+8c6068534f7bfd8a5605822e082b832c9cdba32c src/components/sections
+93a9cfff90f225eebacc57de28d89c02f4b77db6 src/components/sections
+962ecd12368e0dfade4ec7a2d7fc54a93b037daa src/components/sections
+9f7370a9e2bc25757eebe1699a57c9baeb7d40bd src/components/sections
+bb60180a3ed2c66d0d3a84de7174f4f7c0412864 src/components/sections
+cb727be89a77d74298ee44a7bfccddc0d4db700d src/components/sections
+d4b041eba4bea2df7e7a91cf79311f145d4bebba src/components/sections
+ec3837a2ab6a34e12a9aade9144914e269a63b43 src/components/sections
+fce2825a127fc70b2703368c39f9bdc42314bf3f src/components/sections
+30b8d0dbad6497645c2dfee9e3a83ff597b6e68b src/components/sections/HeroSection.vue
+4e08aa34977bbe7fbfba7a249e4933a4666ea6fd src/components/sections/HeroSection.vue
+5f7506c9eee09e95ad21c239218b7bb80c0ae522 src/components/sections/HeroSection.vue
+70c3cbffcf44eceda1b66c21adbb804671037a5f src/components/sections/HeroSection.vue
+7b54f5437051c3356480b2328a46d39ddfd260ff src/components/sections/HeroSection.vue
+872eff60b3a1c27c7ad52a9ae373acd07ab01c80 src/components/sections/HeroSection.vue
+8da33f072f2dcf083411282b0be32cd1c056a234 src/components/sections/HeroSection.vue
+b4f99b868c400191675f7fec81cef8c2c61e3ce7 src/components/sections/HeroSection.vue
+b90437913c409ca0cdbea2e07be72af901867ec0 src/components/sections/HeroSection.vue
+bf44a53bbc22c9a63f051dad46608e4eff981be1 src/components/sections/HeroSection.vue
+e6f6d2ff909cefe1a1ba1a0a073e7dfbeec9987a src/components/sections/HeroSection.vue
+19301f6d897b4f4882180865ea1adfde724fd871 src/components/sections/ImageSection.vue
+1f856794aea4ec51b2aeaf151653491982556278 src/components/sections/ImageSection.vue
+33fc09a0e2cc4d79d3760c67cb524f59a3645813 src/components/sections/ImageSection.vue
+878c3b55f7342556b6bd8b0d958e08930f572c4e src/components/sections/ImageSection.vue
+d6fc818093c121431caa80ec13264a30ef34f11b src/components/sections/ImageSection.vue
+10707c20295975f53b6c6a7cf1d679562bf8ea6b src/components/sections/TextSection.vue
+3d9c31c0088a3f7e8b5887bc42150bf3f458abb9 src/components/sections/TextSection.vue
+687291e80171b749bf54cd8aea0f6e27f90b7358 src/components/sections/TextSection.vue
+87de6df17aabcc039f89b71a1993b7393df930b7 src/components/sections/TextSection.vue
+f5886a4c4c90b0d0afb39d2e22a1d93e59623ee7 src/components/sections/TextSection.vue
+ea3b363c5c361d7a84efcbdff37311170e052894 src/components/sections/WelcomeSection.vue
+16c33b222f901ff6157b467dfe82caa7f3e6e2de src/composables
+64dca85fea1aab12daf3ef69eb4d1eee37ede994 src/composables
+8d99f06e6134fa836b9eaebe60f1ac5898d2ad20 src/composables
+f91368d83e7af1421db3b3b6483d0f86699858d3 src/composables
+859000d6adb466bb6a42ee366633afec7f24cdca src/composables/gsap.ts
+426656656f083334474d78707d9bb13f4a009451 src/composables/useScrollAnimations.ts
+d61feabac1b4fde620c7d1f413480f82497f6d18 src/composables/useScrollAnimations.ts
+e9981267a7fec8094d55516703cf5ee6d505bea1 src/composables/useScrollAnimations.ts
+6c5842fb6c879aebd441589137ab9482595e9f56 src/env.d.ts
+c5f7670796bd99d7ea2dd36242215ce3eedbec27 src/main.ts
+eed305bc1656db9f786354ad387ae6c3ca07d3df src/main.ts
+07fd78d044aa7a5b9e035d6da884f42dbf00c463 src/router
+fded7ddce02642df75cbc54f8b5aea6565a00024 src/router
+6a06374bc40ca4f80f61a62fa69d16498235afd3 src/router/index.ts
+b8ccc434b7f9d49e720ec6d2bc6faefe836436d8 src/router/index.ts
+ecdaa224f2ad85d14e189b431ee22e8af330b6f0 src/store
+a2e3436378f0da0bc1b586b1dfbfe233eb4e13d5 src/store/useActiveSection.ts
+04b4bbed7263ef7397c7a0e16900cabf785f79e4 src/style.css
+f6913154345dbceb3a705e2583ed9afb3857924e src/style.css
+dd3d31535bb9d4be6bdd37554b48e6cf02833203 src/utils
+7fc086457a9c78c0cb81c110bf1aafb07b1d69e4 src/utils/gsap.js
+34684b1a69ee3fdeae59894dc05db68168601135 src/views
+5a6d92827bed4f8e40275946d7fa2c5904ed3cdb src/views
+75fc2a050e4b654fb39a4c86caf3adac70c44666 src/views
+88d8b978cad6ac97d57b0b30e8f33f17aadc1e9c src/views
+cc44a91f30c239f2cbdb52fbccaafad265abcdd9 src/views
+e74b6f8caf0e780b56be40528b4c6b6696ca3b77 src/views
+eb37657f648bb4e521c354f111ec2ad7e2d025a7 src/views
+1f0b1210b289a0ce37aab794dd0d642c86571576 src/views/ExperienceView.vue
+40ced89afc434f3677cc2c73ba6f32313b3f4801 src/views/ExperienceView.vue
+16959248fc60d1ae99f37d670ea986e9b3739404 src/views/HomeView.vue
+49a3d59e7f1d07532dd6abe143d335805f619d9b src/views/HomeView.vue
+75c0785550179322d4cd21fb3b61feebb1ac1b8e src/views/HomeView.vue
+8d7573085c962371a6d0bafa8c400c2fbe1f5f78 src/views/HomeView.vue
+bcef94f366a74d56984bb694c549f4c1ccb6f232 src/views/HomeView.vue
+ce2b339c7ac72bae4ca773e68da0aea1d7517066 src/views/HomeView.vue
+8d16e42551288b3f0b3b830282e1bbc7bb7b7c2c tsconfig.app.json
+1ffef600d959ec9e396d5a260bd3f5b927b2cef8 tsconfig.json
+8a67f62f4ceebff3424e6e8cd4b3c25b17347546 tsconfig.node.json
+bbcf80cca93e72ac5583c66d220957216a001f94 vite.config.ts
+0c065b924bb5fa4111890dc78b76d68cc1d6d403 .vscode
+a7cea0b0678120a1b590d1b6592c7318039b9179 .vscode/extensions.json

index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>th</title>

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "gsap": "^3.14.2",
+        "lenis": "^1.3.21",
         "pinia": "^3.0.4",
         "three": "^0.183.2",
         "vue": "^3.5.29",
@@ -1256,6 +1257,37 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/lenis": {
+      "version": "1.3.21",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.21.tgz",
+      "integrity": "sha512-RXWTYm7KQE4Kv8ezxL6wvK0Oiv7aRr6FDo+eNaaniTeu7pLdHokqMIJ5CXO4x5ezvd+9ONdpSFkprLpXsVWmEw==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "playground",
+        "playground/*"
+      ],
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1316,9 +1348,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1512,9 +1544,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "gsap": "^3.14.2",
+    "lenis": "^1.3.21",
     "pinia": "^3.0.4",
     "three": "^0.183.2",
     "vue": "^3.5.29",

src/App.vue

@@ -1,7 +1,6 @@
-<script setup lang="js">
-</script>
+<script setup lang="js"></script>
 <template>
-      <router-view />
+  <router-view />
 </template>
 
 <style>
@@ -26,5 +25,8 @@ body {
   background: #0f0f0f;
   color: white;
   overflow-x: hidden;
+  cursor:
+    url("/src/assets/retro_cursor.svg") 2 0,
+    auto;
 }
-</style>
+</style>

src/assets/retro_cursor.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="38" viewBox="0 0 25 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 0H0.5V34H4.5V32H6.5V30H8.5V28H10.5V32H12.5V36H14.5V38H18.5V36H20.5V32H18.5V28H16.5V26H24.5V22H22.5V20H20.5V18H18.5V16H16.5V14H14.5V12H12.5V10H10.5V8H8.5V6H6.5V4H4.5V2H2.5V0Z" fill="#131313"/>
+<path d="M4.5 4H2.5V32H4.5V30H6.5V28H8.5V26H10.5V28H12.5V32H14.5V36H18.5V32H16.5V28H14.5V24H22.5V22H20.5V20H18.5V18H16.5V16H14.5V14H12.5V12H10.5V10H8.5V8H6.5V6H4.5V4Z" fill="#EFEEEC"/>
+</svg>

src/components/sections/HeroSection.vue

@@ -1,20 +1,16 @@
 <script setup lang="js">
-import { onMounted, onUnmounted, ref } from "vue"
-import gsap from "gsap"
-
-import ScrollTrigger from "gsap/ScrollTrigger"
-gsap.registerPlugin(ScrollTrigger)
-
+import { onMounted, onUnmounted, ref } from "vue";
+import gsap from "gsap";
 
+import ScrollTrigger from "gsap/ScrollTrigger";
+gsap.registerPlugin(ScrollTrigger);
 
 const main = ref(null);
 let tl;
 let ctx;
 
-
 function setBoxes() {
-
-  const wrapper = main.value.querySelector('.content-wrapper');
+  const wrapper = main.value.querySelector(".content-wrapper");
   const rect = wrapper.getBoundingClientRect();
 
   const boxes = gsap.utils.toArray(".box");
@@ -22,7 +18,6 @@ function setBoxes() {
   gsap.set(".title", { y: 200 });
 
   boxes.forEach((box) => {
-
     const randomX = gsap.utils.random(0, rect.width);
     const randomY = gsap.utils.random(0, rect.height);
 
@@ -30,44 +25,45 @@ function setBoxes() {
       x: randomX,
       y: randomY,
       xPercent: -50,
-      yPercent: -50
+      yPercent: -50,
     });
-
   });
 }
 
 function toggleTimeline() {
-    tl.reversed(!tl.reversed())
+  tl.reversed(!tl.reversed());
 }
 function startNextAnimation() {
-  const centerX = window.innerWidth / 2
-  const centerY = window.innerHeight / 2
-  const radius = 250
+  const centerX = window.innerWidth / 2;
+  const centerY = window.innerHeight / 2;
+  const radius = 250;
 
   ctx = gsap.context(() => {
-    const boxes = gsap.utils.toArray(".box")
+    const boxes = gsap.utils.toArray(".box");
     tl = gsap.timeline({
       scrollTrigger: {
-
         start: "top top",
         end: "+=100%",
         scrub: true,
         pin: true,
-      }
-    })
+      },
+    });
 
     tl.to(boxes, {
       y: () => gsap.utils.random(-400, -150),
       rotate: () => gsap.utils.random(-180, 180),
       ease: "none",
-      stagger: 0.05
-    }).to(".title", {
+      stagger: 0.05,
+    }).to(
+      ".title",
+      {
         y: window.innerHeight - 130,
         ease: "power2.out",
-        duration: 6.0
-      }, 0)
-
-  }, main.value)
+        duration: 6.0,
+      },
+      0,
+    );
+  }, main.value);
 }
 
 onMounted(() => {
@@ -76,11 +72,9 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  ctx?.revert()
+  ctx?.revert();
   // scrollTrigger.getAll().forEach(t => t.kill())
-}) 
-
-
+});
 </script>
 <template>
   <section class="container" ref="main">
@@ -103,8 +97,8 @@ onUnmounted(() => {
       <div class="box">x</div>
       <div class="box">m</div>
       <div class="box">o</div>
-      <div class="box">T</div>      
-      <div class="box">r</div>   
+      <div class="box">T</div>
+      <div class="box">r</div>
       <div class="box">l</div>
       <div class="box">e</div>
       <div class="box">e</div>
@@ -122,43 +116,36 @@ onUnmounted(() => {
       <div class="box">x</div>
       <div class="box">m</div>
       <div class="box">o</div>
-      <div class="box">T</div>      
-      <div class="box">r</div>   
-      
-      
-       
-
+      <div class="box">T</div>
+      <div class="box">r</div>
     </div>
   </section>
 </template>
 
 <style scoped>
-
-  .container {
-    background: radial-gradient(
-      129% 99% at 20% 85%,
-      rgb(54, 54, 54) 20%,
-      rgb(0, 0, 0) 90%
-    );
+.container {
+  background: radial-gradient(
+    129% 99% at 20% 85%,
+    rgb(54, 54, 54) 20%,
+    rgb(0, 0, 0) 90%
+  );
   background-blend-mode: color-dodge;
-    min-height: 100vh;
+  min-height: 100vh;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  }
-
+}
 
 .content-wrapper {
   position: relative;
   width: 100%;
-  height: 80vh;          
-
+  height: 80vh;
 }
 
 .title {
-  position: relative;   
+  position: relative;
   z-index: 1;
   text-align: center;
 
@@ -166,10 +153,7 @@ onUnmounted(() => {
   margin: 0;
 }
 
-
-
 .box {
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -181,9 +165,4 @@ onUnmounted(() => {
   will-change: transform;
   position: absolute;
 }
-
-
-
-
-
-</style>
+</style>

src/components/sections/ImageSection.vue

@@ -101,78 +101,59 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="text">
-      <h2>Here is some content</h2>
+      <h2>Was ist Kunst?</h2>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
+        Nach Schelling ist die Kunst das Erzeugnis oder die Folge jener
+        Weltanschauung, nach der das Subjekt sich in sein Objekt verwandelt oder
+        das Objekt selbst 45 zum Subjekt wird. Die Schönheit ist die Darstellung
+        des Unendli- chen im Endlichen. Und der Grundcharakter eines Kunstwerkes
+        ist die bewußtlose Unendlichkeit. Die Kunst ist die Vereinigung des
+        Subjektiven mit dem Objektiven, – der Natur mit der Vernunft, der
+        Bewußtlosigkeit mit dem Bewußten. Und deshalb ist die Kunst das höchste
+        Mittel der Erkenntnis. Die Schönheit ist die Betrachtung der Dinge an
+        sich, wie sie in Urbildern sind. Das Schöne erzeugt nicht der Künstler
+        vermöge seines Wissens oder seines Willens, sondern die Idee der
+        Schönheit selbst schafft in ihm. (Schaßler)
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
+        In der Welt erblicken wir nur die Entartung der Grundidee, die Kunst
+        jedoch kann ver- möge der Phantasie sich bis zur Höhe der Grundidee
+        erheben. Und deshalb ist die Kunst das Ebenbild der Schöpfung
+        (Schaßler).
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
+        Nach einem anderen Anhänger Schellings, Krause (1781–1832), ist die
+        wahre reale Schönheit die Erzeugung der Idee in der indivi- duellen
+        Form; die Kunst ist aber die Verwirklichung der Schönheit in der Sphäre
+        des freien menschlichen Geistes. Die höchste Stufe der Kunst ist die
+        Kunst des Lebens, die ihre Thätigkeit auf die Verschö- nerung des Lebens
+        richtet, damit dies ein schön belebter Wohnort für die selber in
+        Schönheit vollendete Menschheit sei. (Ebd.)
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
+        Nach Hegel (1770–1831) offenbart sich Gott in Natur und Kunst unter der
+        Form der Schönheit. Gott äußert sich auf zweierlei Weise: in dem Objekt
+        und in dem Subjekt, – in der Natur und im Geiste. Die Schönheit ist
+        jedoch das Durch- scheinen der Idee durch den Stoff. Das wahrhaft Schöne
+        ist nur der Geist und alles das, was dem Geiste teilhaftig ist. Deshalb
+        ist die Schönheit der Natur nur der Schein der dem Geiste eigenen Schön-
+        heit: das Schöne hat nur als Geistiges wahrhaften Gehalt. Aber das
+        Geistige muß in der sinnlichen Form erscheinen. Die sinnliche Äu- ßerung
+        des Geistes jedoch ist nur der Schein. Und dieser Schein ist die
+        eigentliche Wirklichkeit des Schönen. Sodaß die Kunst die 46
+        Verwirklichung dieses Scheines der Idee und zugleich mit der Reli- gion
+        und Philosophie das Mittel ist, die tiefsten Interessen der Men- schen
+        und die umfassendsten Wahrheiten des Geistes zum Bewußt- sein zu bringen
+        und auszusprechen. Wahrheit und Schönheit sind nach Hegel ein und
+        dasselbe: der Unterschied besteht nur darin, daß die Wahrheit die Idee
+        ist, wie diese an sich und dem allgemeinen Prinzip nach ist und als
+        solches gedacht wird. Die Idee jedoch, die äußerlich existiert, wird für
+        das Bewußtsein nicht blos wahr, son- dern auch schön. Das Schöne ist das
+        Scheinen der Idee
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
+        --- Was ist Kunst?, Leo N. Tolstoi, Aus dem Russischen von Michail
+        Feofanov (1902) ---
       </p>
     </div>
   </section>
@@ -261,6 +242,7 @@ p {
 }
 
 .text {
+  font-family: Courier New;
   padding: 2rem 5rem;
 }
 </style>

src/components/sections/IntroductionSection.vue

@@ -0,0 +1,196 @@
+<script setup lang="js">
+import { onMounted, onUnmounted, ref } from "vue";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import SplitText from "gsap/SplitText";
+
+gsap.registerPlugin(ScrollTrigger, SplitText);
+
+const section = ref(null);
+
+let ctx;
+let split;
+let animation;
+const date = ref("--:--");
+const time = ref("");
+let interval;
+
+function createTween() {
+  animation?.kill();
+  split = SplitText.create(".text", {
+    type: "words",
+  });
+
+  animation = gsap.from(split.words, {
+    y: 30,
+    opacity: 0,
+    duration: 0.9,
+    ease: "power2.out",
+    stagger: 0.05,
+
+    scrollTrigger: {
+      trigger: section.value,
+      start: "top 10%",
+      toggleActions: "play none none none",
+    },
+  });
+}
+
+onMounted(() => {
+  ctx = gsap.context(() => {
+    createTween();
+
+    window.addEventListener("resize", handleResize);
+  }, section.value);
+
+  requestAnimationFrame(() => {
+    ScrollTrigger.refresh();
+  });
+  getTimeDate();
+  interval = setInterval(() => {
+    getTimeDate();
+  }, 1000);
+  console.log(date.value);
+});
+
+function handleResize() {
+  split && split.revert();
+  split = SplitText.create(".text", {
+    type: "words",
+  });
+  ScrollTrigger.refresh();
+}
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  ctx?.revert();
+  clearInterval(interval);
+});
+
+function getTimeDate() {
+  const now = new Date();
+
+  time.value = now.toLocaleTimeString("de-DE", {
+    timeZone: "Europe/Berlin",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  date.value = now.toLocaleDateString("de-DE", {
+    timeZone: "Europe/Berlin",
+    weekday: "long",
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  });
+}
+</script>
+<template>
+  <div class="poster">
+    <div class="b-one"></div>
+    <div class="b-two"></div>
+    <div class="b-three"></div>
+    <div class="b-four"></div>
+    <div class="b-five"></div>
+
+    <div class="textblock text">
+      <h4 class="textblock__subheader text">Tom Alexander Herpel</h4>
+
+      <h1 class="textblock__header text">
+        Welcome to my page. <br />
+        This space is currently under construction.
+      </h1>
+
+      <h4 class="textblock__subheader text">
+        Here you’ll find creative projects and ideas that inspire me at the
+        moment.
+      </h4>
+
+      <p class="textblock__caption">Oldenburg, Germany <br /></p>
+    </div>
+  </div>
+</template>
+<style scoped>
+.poster {
+  display: grid;
+  grid-template-columns: repeat(33, 1fr);
+  grid-template-rows: repeat(16, 1fr);
+
+  width: 100%;
+  height: 100vh;
+
+  background: var(--bg-clr);
+  overflow: hidden;
+  position: relative;
+  padding: 2rem;
+}
+
+/* Schwarze Blöcke */
+.b-one,
+.b-two,
+.b-three,
+.b-four,
+.b-five {
+  background: var(--black-clr);
+}
+
+.b-one {
+  grid-column: 1 / 4;
+  grid-row: 11 / 15;
+}
+
+.b-two {
+  grid-column: 4 / 12;
+  grid-row: 6 / 8;
+}
+
+.b-three {
+  grid-column: 16 / 18;
+  grid-row: 8 / 11;
+}
+
+.b-four {
+  grid-column: 11 / 30;
+  grid-row: 15 / 17;
+}
+
+.b-five {
+  grid-column: 30 / 34;
+  grid-row: 1 / 11;
+}
+
+/* Textbereich */
+.textblock {
+  grid-column: 6 / 28;
+  grid-row-end: 14;
+
+  align-self: center;
+  color: var(--black-clr);
+}
+
+.textblock__subheader {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.textblock__header {
+  font-size: 4rem;
+  line-height: 1;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  max-width: 900px;
+}
+
+.textblock__caption {
+  font-size: 0.85rem;
+  line-height: 1.7;
+  max-width: 600px;
+}
+.text {
+  font-family: Courier New;
+  font-size: clamp(1.5rem, 3vw, 5rem);
+}
+</style>

src/components/sections/MonitorModel.vue

@@ -0,0 +1,252 @@
+<script setup lang="js">
+import { onMounted, onUnmounted, ref } from "vue";
+import * as THREE from "three";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+import surf_video from "/vids/Aus_dem_wasser.mp4";
+import ski_video from "/vids/ski.mp4";
+
+const canvasRef = ref(null);
+let renderer, scene, camera, model, controls, gsapCtx;
+let screen1, screen3, screen4;
+
+const video_surf = document.createElement("video");
+const video_ski = document.createElement("video");
+
+video_surf.src = surf_video;
+video_surf.loop = true;
+video_surf.muted = true;
+
+video_ski.src = ski_video;
+video_ski.loop = true;
+video_ski.muted = true;
+
+function initThree(canvas) {
+  renderer = new THREE.WebGLRenderer({
+    canvas,
+    antialias: true,
+    alpha: true,
+  });
+
+  renderer.setPixelRatio(1); //TODO
+
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(45, 2, 0.1, 100);
+
+  const light = new THREE.DirectionalLight(0xffe0b0, 0.9);
+  light.position.set(-1, 4, 5);
+  scene.add(light);
+
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.enabled = false;
+
+  // controls.minDistance = 5;
+  // controls.maxDistance = 5;
+  controls.maxPolarAngle = Math.PI / 2;
+  controls.minAzimuthAngle = -Math.PI / 2;
+  controls.maxAzimuthAngle = Math.PI / 2;
+
+  scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+
+  loadModel();
+
+  gsap.ticker.add(render);
+}
+
+function loadModel() {
+  if (model) {
+    scene.remove(model);
+  }
+  let modelUrl = "/models/room-draco.glb";
+  let dracoPath = "/draco/";
+
+  const dracoLoader = new DRACOLoader();
+  dracoLoader.setDecoderPath(dracoPath);
+
+  const loader = new GLTFLoader();
+  loader.setDRACOLoader(dracoLoader);
+
+  loader.load(
+    modelUrl,
+    (gltf) => {
+      model = gltf.scene;
+
+      const box = new THREE.Box3().setFromObject(model);
+      const center = box.getCenter(new THREE.Vector3());
+      const size = box.getSize(new THREE.Vector3());
+      const texture_surf_video = new THREE.VideoTexture(video_surf);
+      const texure_ski = new THREE.VideoTexture(video_ski);
+      screen1 = model.getObjectByName("fernseher1Bild");
+      screen4 = model.getObjectByName("fernseher4Bild");
+      screen3 = model.getObjectByName("fernseher3Bild");
+
+      texture_surf_video.flipY = false;
+      texure_ski.flipY = false;
+      texure_ski.offset.set(-0.3, -0.2);
+
+      screen1.material = new THREE.MeshBasicMaterial({
+        map: texture_surf_video,
+      });
+      screen4.material = new THREE.MeshBasicMaterial({
+        map: texure_ski,
+      });
+      screen3.material = new THREE.MeshBasicMaterial({
+        map: texure_ski,
+      });
+      const maxSize = Math.max(size.x, size.y, size.z);
+      const distance = maxSize * 2;
+
+      camera.position.set(center.x, center.y, center.z + distance);
+      controls.target.copy(center);
+      controls.update();
+
+      console.log(scene);
+      model.position.set(0, 0, 0);
+      scene.add(model);
+      gsapCtx = scrollCamreaGsap(center);
+
+      document.title = "Model geladen";
+    },
+    (progress) => {
+      const percent = ((progress.loaded / progress.total) * 100).toFixed(1);
+      console.log(`Loading: ${percent}%`);
+      document.title = `${percent}%`;
+    },
+    (error) => {
+      console.error("Fehler beim Laden des Modells:", error);
+      document.title = "Fehler beim Laden!";
+    },
+  );
+}
+
+function render() {
+  if (!renderer) return;
+
+  controls.update();
+
+  renderer.render(scene, camera);
+}
+function onResize() {
+  if (!renderer || !canvasRef.value) return;
+  const r = canvasRef.value.getBoundingClientRect();
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+  const width = canvasRef.value.clientWidth;
+  const height = canvasRef.value.clientHeight;
+
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+  renderer.setSize(width, height, false);
+
+  camera.aspect = (r.width || 1) / (r.height || 1);
+  camera.updateProjectionMatrix();
+}
+
+function scrollCamreaGsap(center) {
+  gsap.registerPlugin(ScrollTrigger);
+
+  const ctx = gsap.context(() => {
+    gsap.to(camera.position, {
+      z: center.z + 5,
+      ease: "none",
+      scrollTrigger: {
+        trigger: canvasRef.value,
+        start: "top top",
+        end: "+=2000",
+        scrub: 1,
+        pin: true,
+        anticipatePin: 1,
+        onUpdate: (self) => {
+          if (self.progress >= 0.8) {
+            controls.enabled = true;
+
+            controls.enableRotate = true;
+            controls.enableZoom = false;
+            controls.enablePan = false;
+
+            screen1.visible = true;
+            screen3.visible = true;
+            screen4.visible = true;
+            setVideoActive(true);
+          } else {
+            controls.enabled = false;
+            screen1.visible = false;
+            screen3.visible = false;
+            screen4.visible = false;
+            setVideoActive(false);
+          }
+        },
+      },
+    });
+  }, canvasRef.value);
+
+  return ctx;
+}
+
+function setVideoActive(active) {
+  if (active) {
+    video_surf.play();
+    video_ski.play();
+  } else {
+    video_surf.pause();
+    video_ski.pause();
+  }
+}
+
+const resizeObserver = new ResizeObserver(onResize);
+
+onMounted(() => {
+  initThree(canvasRef.value);
+  onResize();
+
+  resizeObserver.observe(canvasRef.value);
+  window.addEventListener("resize", onResize);
+});
+
+onUnmounted(() => {
+  gsap.ticker.remove(render);
+  window.removeEventListener("resize", onResize);
+  resizeObserver.disconnect();
+  renderer?.dispose();
+  gsapCtx?.revert();
+  ScrollTrigger.getAll().forEach((t) => t.kill());
+});
+</script>
+<template>
+  <div class="wrapper">
+    <!-- <div class="spacer"></div> -->
+
+    <canvas class="canvas" ref="canvasRef"></canvas>
+  </div>
+  <div class="scroll-buffer"></div>
+  <div class="spacer"></div>
+</template>
+
+<style>
+.spacer {
+  width: 100%;
+  height: 200vh;
+  display: grid;
+  place-items: center;
+  font-weight: 600;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100vh;
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+.scroll-buffer {
+  height: 100vh;
+}
+</style>

src/components/sections/TextSection.vue

@@ -48,45 +48,54 @@ const createTimeline = () => {
 
 onMounted(() => {
   createTimeline();
-
-  window.addEventListener("resize", createTween);
+  window.addEventListener("resize", createTimeline);
   ScrollTrigger.refresh();
 });
 
 onUnmounted(() => {
   flipCtx?.revert();
-  window.removeEventListener("resize", createTween);
-  gsap.ticker.remove(updateMorph);
+  window.removeEventListener("resize", createTimeline);
 });
 
 window.addEventListener("resize", createTimeline);
 </script>
 
 <template>
-  <div class="main">
-    <div class="container initial">
-      <div class="circle"></div>
-    </div>
-
-    <div class="container second">
-      <div class="experience-text">
-        <h2>Do you want to see where I used to study?</h2>
+  <section class="text-section">
+    <div class="main">
+      <div class="container initial">
+        <div class="circle"></div>
       </div>
-      <div class="marker"></div>
-      <router-link to="/experience">
-        <button class="btn second-btn">Zur Experience</button>
-      </router-link>
-    </div>
 
-    <div class="container third">
-      <div class="experience-text">
-        <h2>Here is the final step!</h2>
+      <div class="container second">
+        <div class="experience-text">
+          <h2>Do you want to see where I used to study?</h2>
+        </div>
+        <div class="marker"></div>
+        <router-link to="/experience">
+          <button class="btn second-btn">Zur Experience</button>
+        </router-link>
+      </div>
+      <div class="container third">
+        <div class="experience-text">
+          <h2>Spotify recommendation project</h2>
+        </div>
+        <div class="marker"></div>
+        <router-link to="/recommSpotify">
+          <button class="btn third-btn">Zur recommSpotify</button>
+        </router-link>
+      </div>
+
+      <div class="container fourth">
+        <div class="experience-text">
+          <h2>Here is the final step!</h2>
+        </div>
+        <div class="marker"></div>
+        <button class="btn fourth-btn">Next</button>
       </div>
-      <div class="marker"></div>
-      <button class="btn third-btn">Next</button>
     </div>
-  </div>
-  <div class="spacer final"></div>
+    <div class="spacer final"></div>
+  </section>
 </template>
 
 <style scoped>
@@ -228,4 +237,14 @@ body {
   width: 100px;
   height: 100px;
 }
+
+.fourth {
+  left: 10%;
+  top: 750%;
+}
+
+.fourth .marker {
+  width: 100px;
+  height: 100px;
+}
 </style>

src/components/sections/WelcomeSection.vue

@@ -0,0 +1,276 @@
+<script setup>
+import { onMounted, onUnmounted, ref, nextTick } from "vue";
+
+import MonitorModel from "/src/components/sections/MonitorModel.vue";
+
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+import parallax_night from "/src/assets/background/night2.png";
+import parallax_castle from "/src/assets/background/dom.png";
+import Lenis from "lenis";
+
+gsap.registerPlugin(ScrollTrigger);
+
+let ctx, lenis;
+const childRef = ref(null);
+const parallaxRef = ref(null);
+
+function initParallax(triggerElement) {
+  const layers = [
+    { layer: "1", yPercent: 70 },
+    { layer: "2", yPercent: 50 },
+    { layer: "3", yPercent: 30 },
+    { layer: "4", yPercent: 10 },
+  ];
+
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: triggerElement,
+      start: "top top",
+      end: "bottom top",
+      scrub: true,
+    },
+  });
+
+  layers.forEach((layerObj, idx) => {
+    tl.to(
+      triggerElement.querySelectorAll(
+        `[data-parallax-layer="${layerObj.layer}"]`,
+      ),
+      {
+        yPercent: layerObj.yPercent,
+        ease: "none",
+      },
+      idx === 0 ? 0 : "<",
+    );
+  });
+}
+
+function initChild() {
+  gsap.to(childRef.value, {
+    scrollTrigger: {
+      trigger: childRef.value,
+      start: "top center",
+    },
+    scale,
+  });
+}
+
+function initLenis() {
+  lenis = new Lenis({
+    duration: 1.1,
+    smoothWheel: true,
+    smoothTouch: false,
+  });
+
+  lenis.on("scroll", ScrollTrigger.update);
+
+  gsap.ticker.add((time) => {
+    lenis.raf(time * 1000);
+  });
+
+  gsap.ticker.lagSmoothing(0);
+}
+onMounted(async () => {
+  await nextTick();
+
+  ctx = gsap.context(() => {
+    initParallax(parallaxRef.value);
+    // initChild();
+    initLenis();
+  });
+});
+onUnmounted(() => {
+  ctx?.revert();
+
+  lenis?.destroy();
+});
+</script>
+<template>
+  <div ref="parallaxRef" class="parallax">
+    <section class="parallax__header">
+      <div class="parallax__visuals">
+        <div class="parallax__layers">
+          <img
+            :src="parallax_night"
+            data-parallax-layer="1"
+            class="parallax__layer-img"
+          />
+
+          <img
+            :src="parallax_castle"
+            data-parallax-layer="2"
+            class="parallax__layer-img"
+          />
+
+          <div data-parallax-layer="3" class="parallax__layer-title">
+            <h2 class="parallax__title">TOM HERPEL</h2>
+          </div>
+
+          <img data-parallax-layer="4" class="parallax__layer-img" />
+        </div>
+
+        <div class="parallax__fade"></div>
+      </div>
+    </section>
+
+    <section class="parallax__content">
+      <!-- <div ref="childRef" class="model__wrapper">
+        <MonitorModel />
+      </div> -->
+    </section>
+  </div>
+</template>
+<style scoped>
+.parallax__fade {
+  --dark: 0, 0, 0;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60vh;
+
+  background: linear-gradient(
+    to top,
+    rgba(var(--dark), 1) 0%,
+    rgba(var(--dark), 0.9) 10%,
+    rgba(var(--dark), 0.75) 20%,
+    rgba(var(--dark), 0.55) 35%,
+    rgba(var(--dark), 0.35) 50%,
+    rgba(var(--dark), 0.2) 65%,
+    rgba(var(--dark), 0.1) 80%,
+    rgba(var(--dark), 0.04) 90%,
+    rgba(var(--dark), 0.01) 96%,
+    transparent 100%
+  );
+
+  pointer-events: none;
+}
+
+.parallax__header {
+  z-index: 2;
+
+  justify-content: center;
+  align-items: center;
+  min-height: 100svh;
+  display: flex;
+  position: relative;
+}
+
+.parallax {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.parallax__content {
+  justify-content: center;
+  align-items: center;
+  min-height: 50svh;
+  display: flex;
+  position: relative;
+}
+
+.parallax__visuals {
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 120%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.parallax__placeholder {
+  z-index: 0;
+  opacity: 0;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.parallax__layers {
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.parallax__fade {
+  z-index: 30;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 20%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.parallax__title {
+  pointer-events: auto;
+  text-align: center;
+  text-transform: none;
+  margin-top: 0;
+  margin-bottom: 0.1em;
+  margin-right: 0.075em;
+  /* font-family:
+    PP Neue Corp Wide,
+    sans-serif; */
+  font-family: "ArtDystopia", sans-serif;
+
+  font-size: 11vw;
+  font-weight: 800;
+  line-height: 1;
+  position: relative;
+  /* color: #e84b3d; 633a34 */
+}
+
+.parallax__radial-gradient {
+  z-index: 10;
+  background-image: radial-gradient(
+    circle farthest-corner at 50% 50%,
+    transparent,
+    #0c0c0c
+  );
+  opacity: 0.5;
+  pointer-events: none;
+  mix-blend-mode: multiply;
+  position: fixed;
+  inset: 0;
+}
+.parallax__layer-title {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100svh;
+  display: flex;
+  position: absolute;
+  overflow: visible;
+  top: 0;
+  left: 0;
+}
+.parallax__layer-img {
+  pointer-events: none;
+  object-fit: cover;
+  width: 100%;
+  max-width: none;
+  height: 269.5%;
+  position: absolute;
+  top: -17.5%;
+  left: 0;
+}
+
+@font-face {
+  font-family: "ArtDystopia";
+  src: url("/src/assets/fonts/Art_Dystopia.woff2") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+</style>

src/router/index.ts

@@ -5,7 +5,7 @@ import ExperienceView from '../views/ExperienceView.vue'
 
 const routes: RouteRecordRaw[] = [
   { path: '/', component: HomeView },
-  { path: '/experience',
+  { path: '/recommSpotify',
      component: ExperienceView,
     props: { modelUrl: '/models/door_room_firstVersion_materials-draco.glb', dracoPath: '/draco/' } }
 ]

src/views/ExperienceView.vue

@@ -119,7 +119,7 @@ onUnmounted(() => {
   dispose();
 });
 
-function loadModel(url) {
+function loadModel() {
   if (model) {
     scene.remove(model);
   }

src/views/HomeView.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import HeroSection from "../components/sections/HeroSection.vue";
+import WelcomeSection from "../components/sections/WelcomeSection.vue";
+// import HeroSection from "../components/sections/HeroSection.vue";
+
 import ImageSection from "../components/sections/ImageSection.vue";
 import TextSection from "../components/sections/TextSection.vue";
 
@@ -7,6 +9,8 @@ import { onMounted, nextTick } from "vue";
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import ScrollSmoother from "gsap/ScrollSmoother";
+import MonitorModel from "../components/sections/MonitorModel.vue";
+import IntroductionSection from "../components/sections/IntroductionSection.vue";
 
 gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
@@ -27,7 +31,10 @@ onMounted(async () => {
 <template>
   <div id="smooth-wrapper">
     <div id="smooth-content">
-      <HeroSection id="hero" />
+      <WelcomeSection id="welcome" />
+      <IntroductionSection id="welcome" />
+      <MonitorModel id="model" />
+      <!-- <HeroSection id="hero" /> -->
       <ImageSection id="image" />
       <TextSection id="text" />
     </div>