naja neon

src/components/sections/IntroductionSection.vue

@@ -13,22 +13,51 @@ let split;
 let animation;
 
 function createTween() {
-  split = SplitText.create(".text", { type: "chars,words,lines" });
+  split = SplitText.create(".text", { type: "words" });
 
-  animation = gsap.from(split.lines, {
-    rotationX: -100,
-    transformOrigin: "50% 50% -160px",
-    opacity: 0,
-    duration: 0.8,
-    ease: "power3",
-    stagger: 0.25,
+  const tl = gsap.timeline({
     scrollTrigger: {
       trigger: ".text",
-      start: "top 80%",
+      start: "top 75%",
       toggleActions: "play none none none",
-      // markers: true
     },
   });
+
+  tl.set(".block", {
+    borderColor: "#fff",
+    boxShadow: "0 0 0px #fff",
+    opacity: 0.3,
+  });
+
+  // Flicker
+  tl.to(".block", {
+    opacity: 1,
+    duration: 0.05,
+    stagger: 0.1,
+  })
+    .to(".block", { opacity: 0.4, duration: 0.05, stagger: 0.1 })
+    .to(".block", { opacity: 1, duration: 0.1 })
+    .to(".block", { opacity: 0.6, duration: 0.05 })
+    .to(".block", { opacity: 1, duration: 0.2 });
+
+  // Glow aufbauen
+  tl.to(
+    ".block",
+    {
+      boxShadow: "0 0 20px #fff, 0 0 10px #fff",
+      duration: 0.6,
+      ease: "power2.out",
+    },
+    "-=0.3",
+  );
+
+  tl.from(split.words, {
+    y: 30, // kleine Bewegung statt Rotation
+    opacity: 0,
+    duration: 0.8,
+    ease: "power2.out", // weicher als power3
+    stagger: 0.05, // subtiler
+  });
 }
 
 onMounted(() => {
@@ -51,51 +80,76 @@ function handleResize() {
 
 onUnmounted(() => {
   window.removeEventListener("resize", handleResize);
-  ctx?.revert(); // killt ALLES inkl. ScrollTrigger & SplitText sauber
+  ctx?.revert();
 });
 </script>
 <template>
   <div class="container">
-    <div class="text">
-      Welcome to my page!<br />
-      This site is currently under construction, and I’ll be adding new things
-      over time.<br />
-      I’m a full-stack developer who wants to improve in design and front-end
-      development.<br />
-      This space is where I’ll build projects, experiment, and share what I
-      create along the way.
+    <div class="grid">
+      <div class="block header text">
+        Welcome to my page!<br />
+        This site is currently under construction, and I’ll be adding new things
+        over time.
+      </div>
+
+      <div class="block mid text">
+        I’m a full-stack developer who wants to improve in design and front-end
+        development.<br />
+      </div>
+
+      <div class="block sidebar text">
+        This space is where I’ll build projects, experiment, and share what I
+        create along the way.
+      </div>
+
+      <!-- <div class="block footer">Footer</div> -->
     </div>
   </div>
 </template>
-
 <style scoped>
 .container {
-  position: relative;
   width: 100vw;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-evenly;
-  border-radius: 9px;
+  min-height: 1vh;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: auto 1fr auto;
+  gap: 40px;
+  height: 100%;
+}
+
+.block {
+  border: 2px solid #fff;
+  padding: 20px;
+  border-radius: 8px;
+  color: white;
 }
 
 .text {
   font-family: Courier New;
-  color: #ffffff;
-  font-size: clamp(2rem, 4vw, 9rem);
-  line-height: 1.2;
-  box-sizing: border-box;
-  padding: 5%;
-  width: 100%;
-  text-align: center;
+  font-size: clamp(1.5rem, 3vw, 5rem);
+}
+.header {
+  grid-column: 1 / -1;
   perspective: 500px;
 }
 
-.button-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  flex-wrap: wrap;
+.mid {
+  grid-column: 2;
+  line-height: 1.2;
+  perspective: 500px;
+}
+
+.sidebar {
+  grid-column: 1/ -1;
+  perspective: 500px;
+}
+
+.footer {
+  grid-column: 1 / -1;
 }
 </style>