layer 3

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

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",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1512,9 +1544,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.3.1",
+      "version": "7.3.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "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,5 +1,4 @@
-<script setup lang="js">
+<script setup lang="js"></script>
-</script>
 <template>
   <router-view />
 </template>
@@ -26,5 +25,8 @@ body {
   background: #0f0f0f;
   color: white;
   overflow-x: hidden;
+  cursor:
+    url("/src/assets/retro_cursor.svg") 2 0,
+    auto;
 }
 </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 { onMounted, onUnmounted, ref } from "vue";
-import gsap from "gsap"
+import gsap from "gsap";
-
-import ScrollTrigger from "gsap/ScrollTrigger"
-gsap.registerPlugin(ScrollTrigger)
-
 
+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 centerX = window.innerWidth / 2;
-  const centerY = window.innerHeight / 2
+  const centerY = window.innerHeight / 2;
-  const radius = 250
+  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
+      stagger: 0.05,
-    }).to(".title", {
+    }).to(
+      ".title",
+      {
         y: window.innerHeight - 130,
         ease: "power2.out",
-        duration: 6.0
+        duration: 6.0,
-      }, 0)
+      },
-
+      0,
-  }, main.value)
+    );
+  }, 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">
@@ -124,17 +118,12 @@ onUnmounted(() => {
       <div class="box">o</div>
       <div class="box">T</div>
       <div class="box">r</div>
-      
-      
-       
-
     </div>
   </section>
 </template>
 
 <style scoped>
-
+.container {
-  .container {
   background: radial-gradient(
     129% 99% at 20% 85%,
     rgb(54, 54, 54) 20%,
@@ -147,14 +136,12 @@ onUnmounted(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  }
+}
-
 
 .content-wrapper {
   position: relative;
   width: 100%;
   height: 80vh;
-
 }
 
 .title {
@@ -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>

src/components/sections/WelcomeSection.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { onMounted, onUnmounted } from "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;
+
+function initParallax() {
+  const layers = [
+    { layer: "1", yPercent: 70 },
+    { layer: "2", yPercent: 50 },
+    { layer: "3", yPercent: 30 },
+    { layer: "4", yPercent: 10 },
+  ];
+
+  const triggerElement = document.querySelector(".parallax");
+
+  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 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(() => {
+  ctx = gsap.context(() => {
+    initParallax();
+    initLenis();
+  });
+});
+
+onUnmounted(() => {
+  ctx?.revert();
+  lenis?.destroy();
+});
+</script>
+<template>
+  <div 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">WELCOM</h2>
+          </div>
+
+          <img data-parallax-layer="4" class="parallax__layer-img" />
+        </div>
+
+        <div class="parallax__fade"></div>
+      </div>
+    </section>
+
+    <section class="parallax__content"></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: 100svh;
+  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;
+}
+
+.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/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";
 
@@ -27,7 +29,8 @@ onMounted(async () => {
 <template>
   <div id="smooth-wrapper">
     <div id="smooth-content">
-      <HeroSection id="hero" />
+      <WelcomeSection id="welcome" />
+      <!-- <HeroSection id="hero" /> -->
       <ImageSection id="image" />
       <TextSection id="text" />
     </div>