test

index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />    
-    
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>th</title>
   </head>

src/components/sections/IntroductionSection.vue

@@ -16,8 +16,10 @@ 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();
@@ -28,30 +30,31 @@ function createTween() {
       pin: true,
       markers: true,
       start: "top top",
-      end : "+=500"
-    }
-  })
+      end: "+=500",
+    },
+  });
 
-  animation.to(".textblock__header", {
+  animation
+    .to(".textblock__header", {
       duration: 1,
       scrambleText: {
         text: textHeader,
         chars: "TH",
         revealDelay: 0.5,
         speed: 0.7,
-    newClass: "myClass"
-  }
-}).to(".textblock__subheader", {
+        newClass: "myClass",
+      },
+    })
+    .to(".textblock__subheader", {
       duration: 1,
       scrambleText: {
         text: texteSub,
         chars: "TH",
         revealDelay: 0.5,
         speed: 0.7,
-    newClass: "myClass"
-  }
+        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 class="textblock__header text"></h1>
 
-      </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 */

src/components/sections/WelcomeSection.vue

@@ -83,7 +83,6 @@ onMounted(async () => {
 });
 onUnmounted(() => {
   ctx?.revert();
-
   lenis?.destroy();
 });
 </script>