From eef972c8d5610585e3f2caa4005f3069edccfd27 Mon Sep 17 00:00:00 2001
From: T-A-H-prog <tomherpel.de>
Date: Tue, 11 Aug 2026 18:04:38 +0200
Subject: [PATCH] test

---
 index.html                                    |  3 +-
 .../sections/IntroductionSection.vue          | 93 ++++++++++---------
 src/components/sections/WelcomeSection.vue    |  1 -
 3 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index a574307..eaa5a5c 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    
+    <meta charset="UTF-8" />    
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>th</title>
   </head>
diff --git a/src/components/sections/IntroductionSection.vue b/src/components/sections/IntroductionSection.vue
index 014557f..645225a 100644
--- a/src/components/sections/IntroductionSection.vue
+++ b/src/components/sections/IntroductionSection.vue
@@ -16,42 +16,45 @@ const date = ref("--:--");
 const time = ref("");
 let interval;
 
-const textHeader = "Welcome to my page. This space is currently under construction."
-const texteSub = "Here you’ll find creative projects and ideas that inspire me at the moment."
+const textHeader =
+  "Welcome to my page. This space is currently under construction.";
+const texteSub =
+  "Here you’ll find creative projects and ideas that inspire me at the moment.";
 
 function createTween() {
   animation?.kill();
   //use the defaults
   animation = gsap.timeline({
     scrollTrigger: {
-      trigger : ".poster",
+      trigger: ".poster",
       pin: true,
       markers: true,
-      start : "top top",
-      end : "+=500"
-    }
-  })
-
-  animation.to(".textblock__header", {
-  duration: 1, 
-  scrambleText: {
-    text: textHeader, 
-    chars: "TH", 
-    revealDelay: 0.5, 
-    speed: 0.7, 
-    newClass: "myClass"
-  }
-}).to(".textblock__subheader", {
-  duration :1,
-  scrambleText: {
-    text: texteSub, 
-    chars: "TH", 
-    revealDelay: 0.5, 
-    speed: 0.7, 
-    newClass: "myClass"
-  }
-});
+      start: "top top",
+      end: "+=500",
+    },
+  });
 
+  animation
+    .to(".textblock__header", {
+      duration: 1,
+      scrambleText: {
+        text: textHeader,
+        chars: "TH",
+        revealDelay: 0.5,
+        speed: 0.7,
+        newClass: "myClass",
+      },
+    })
+    .to(".textblock__subheader", {
+      duration: 1,
+      scrambleText: {
+        text: texteSub,
+        chars: "TH",
+        revealDelay: 0.5,
+        speed: 0.7,
+        newClass: "myClass",
+      },
+    });
 }
 
 onMounted(() => {
@@ -82,7 +85,6 @@ onUnmounted(() => {
   window.removeEventListener("resize", handleResize);
   ctx?.revert();
   clearInterval(interval);
-
 });
 
 function getTimeDate() {
@@ -110,19 +112,23 @@ function getTimeDate() {
     <div class="b-three"></div>
     <div class="b-four"></div>
     <div class="b-five"></div>
-    <div class="b-six" text>Die Schweizer** <a href='https://en.wikipedia.org/wiki/Swiss_Style_(design)'> https://en.wikipedia.org/wiki/Swiss_Style_(design) </a></div>
+    <div class="b-six" text>
+      Die Schweizer**
+      <a href="https://en.wikipedia.org/wiki/Swiss_Style_(design)">
+        https://en.wikipedia.org/wiki/Swiss_Style_(design)
+      </a>
+    </div>
     <div class="textblock text">
       <h4 class="text fontStyle">Tom Alexander Herpel</h4>
 
-      <h1 class="textblock__header text">
-        
-      </h1>
+      <h1 class="textblock__header text"></h1>
 
-      <h4 class="textblock__subheader text fontStyle">
-        
-      </h4>
+      <h4 class="textblock__subheader text fontStyle"></h4>
 
-      <p class="textblock__caption">Oldenburg, Germany <br /> {{time}} {{date.value}}</p>
+      <p class="textblock__caption">
+        Oldenburg, Germany <br />
+        {{ time }} {{ date.value }}
+      </p>
     </div>
   </div>
 </template>
@@ -135,7 +141,6 @@ function getTimeDate() {
   width: 100%;
   height: 100vh;
 
-  background: var(--bg-clr);
   overflow: hidden;
   position: relative;
   padding: 2rem;
@@ -147,16 +152,16 @@ function getTimeDate() {
 .b-three,
 .b-four,
 .b-five {
-  background: #ffffff;
+  background: hsl(0, 0%, 100%);
 }
 
 .b-one {
-  grid-column: 1 / 4;
-  grid-row: 11 / 15;
+  grid-column: 1 / 3;
+  grid-row: 11 / 14;
 }
 
 .b-two {
-  grid-column: 4 / 12;
+  grid-column: 4 / 11;
   grid-row: 6 / 8;
 }
 
@@ -167,7 +172,7 @@ function getTimeDate() {
 
 .b-four {
   grid-column: 11 / 30;
-  grid-row: 15 / 17;
+  grid-row: 15 / 14;
 }
 
 .b-five {
@@ -175,11 +180,9 @@ function getTimeDate() {
   grid-row: 4 / 11;
 }
 .b-six {
-
   grid-column: 30 / 34;
   grid-row: 12/ 13;
   font-size: 0.85rem;
-
 }
 
 /* Textbereich */
@@ -219,6 +222,6 @@ function getTimeDate() {
 
 a {
   color: #ffffff;
-  white-space:nowrap;
+  white-space: nowrap;
 }
 </style>
diff --git a/src/components/sections/WelcomeSection.vue b/src/components/sections/WelcomeSection.vue
index 0faf97b..11e6fc6 100644
--- a/src/components/sections/WelcomeSection.vue
+++ b/src/components/sections/WelcomeSection.vue
@@ -83,7 +83,6 @@ onMounted(async () => {
 });
 onUnmounted(() => {
   ctx?.revert();
-
   lenis?.destroy();
 });
 </script>