starting swiss layout

src/components/sections/IntroductionSection.vue

@@ -11,53 +11,29 @@ const section = ref(null);
 let ctx;
 let split;
 let animation;
+const date = ref("--:--");
+const time = ref("");
+let interval;
 
 function createTween() {
-  split = SplitText.create(".text", { type: "words" });
+  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,
 
-  const tl = gsap.timeline({
     scrollTrigger: {
-      trigger: ".text",
+      trigger: section.value,
-      start: "top 75%",
+      start: "top 10%",
       toggleActions: "play none none none",
     },
   });
-
-  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(() => {
@@ -70,86 +46,151 @@ onMounted(() => {
   requestAnimationFrame(() => {
     ScrollTrigger.refresh();
   });
+  getTimeDate();
+  interval = setInterval(() => {
+    getTimeDate();
+  }, 1000);
+  console.log(date.value);
 });
 
 function handleResize() {
   split && split.revert();
-  createTween();
+  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="container">
+  <div class="poster">
-    <div class="grid">
+    <div class="b-one"></div>
-      <div class="block header text">
+    <div class="b-two"></div>
-        Welcome to my page!<br />
+    <div class="b-three"></div>
-        This site is currently under construction, and I’ll be adding new things
+    <div class="b-four"></div>
-        over time.
+    <div class="b-five"></div>
-      </div>
 
-      <div class="block mid text">
+    <div class="textblock text">
-        I’m a full-stack developer who wants to improve in design and front-end
+      <h4 class="textblock__subheader text">Tom Alexander Herpel</h4>
-        development.<br />
-      </div>
 
-      <div class="block sidebar text">
+      <h1 class="textblock__header text">
-        This space is where I’ll build projects, experiment, and share what I
+        Welcome to my page. <br />
-        create along the way.
+        This space is currently under construction.
-      </div>
+      </h1>
 
-      <!-- <div class="block footer">Footer</div> -->
+      <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>
-.container {
+.poster {
-  width: 100vw;
-  min-height: 1vh;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.grid {
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: repeat(33, 1fr);
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: repeat(16, 1fr);
-  gap: 40px;
+
-  height: 100%;
+  width: 100%;
+  height: 100vh;
+
+  background: var(--bg-clr);
+  overflow: hidden;
+  position: relative;
+  padding: 2rem;
 }
 
-.block {
+/* Schwarze Blöcke */
-  border: 2px solid #fff;
+.b-one,
-  padding: 20px;
+.b-two,
-  border-radius: 8px;
+.b-three,
-  color: white;
+.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);
 }
-.header {
-  grid-column: 1 / -1;
-  perspective: 500px;
-}
-
-.mid {
-  grid-column: 2;
-  line-height: 1.2;
-  perspective: 500px;
-}
-
-.sidebar {
-  grid-column: 1/ -1;
-  perspective: 500px;
-}
-
-.footer {
-  grid-column: 1 / -1;
-}
 </style>

src/components/sections/WelcomeSection.vue

@@ -167,7 +167,7 @@ onUnmounted(() => {
 .parallax__content {
   justify-content: center;
   align-items: center;
-  min-height: 100svh;
+  min-height: 50svh;
   display: flex;
   position: relative;
 }
@@ -229,6 +229,7 @@ onUnmounted(() => {
   font-weight: 800;
   line-height: 1;
   position: relative;
+  /* color: #e84b3d; 633a34 */
 }
 
 .parallax__radial-gradient {