swiss layout

package-lock.json

@@ -20,7 +20,7 @@
         "@vitejs/plugin-vue": "^6.0.4",
         "@vue/tsconfig": "^0.8.1",
         "typescript": "~5.9.3",
-        "vite": "^7.3.1",
+        "vite": "^7.3.5",
         "vue-tsc": "^3.1.5"
       }
     },
@@ -1544,9 +1544,9 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.3.2",
+      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.5.tgz",
-      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
+      "integrity": "sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -21,7 +21,7 @@
     "@vitejs/plugin-vue": "^6.0.4",
     "@vue/tsconfig": "^0.8.1",
     "typescript": "~5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^7.3.5",
     "vue-tsc": "^3.1.5"
   }
 }

src/components/sections/ImageSection.vue

@@ -13,10 +13,12 @@ import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import Flip from "gsap/dist/Flip";
 
+
 (gsap.registerPlugin(ScrollTrigger), gsap.registerPlugin(Flip));
 
 const section = ref(null);
 const gallery = ref(null);
+const img_daten = ref(null);
 
 let ctx;
 let flipCtx;
@@ -48,7 +50,10 @@ const createTween = () => {
     .add(flip);
 };
 
+
 onMounted(() => {
+  
+
   ctx = gsap.context(() => {
     createTween();
 
@@ -75,7 +80,7 @@ onUnmounted(() => {
         ref="gallery"
       >
         <div class="gallery__item">
-          <img :src="boxen" alt="" />
+          <img :src="img_daten" alt="" />
         </div>
         <div class="gallery__item">
           <img :src="gopro" alt="" />

src/components/sections/IntroductionSection.vue

@@ -2,9 +2,10 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import SplitText from "gsap/SplitText";
+// import SplitText from "gsap/SplitText";
+import ScrambleTextPlugin from "gsap/ScrambleTextPlugin";
 
-gsap.registerPlugin(ScrollTrigger, SplitText);
+gsap.registerPlugin(ScrollTrigger, ScrambleTextPlugin);
 
 const section = ref(null);
 
@@ -15,32 +16,43 @@ 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."
+
 function createTween() {
   animation?.kill();
-  split = SplitText.create(".text", {
+
-    type: "words",
+  
+  //use the defaults
+// gsap.to(".textblock__header", {duration: 1, scrambleText: "THIS IS NEW TEXT"});
+  animation = gsap.timeline();
+
+  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"
+  }
 });
 
-  animation = gsap.from(split.words, {
-    y: 30,
-    opacity: 0,
-    duration: 0.9,
-    ease: "power2.out",
-    stagger: 0.05,
-
-    scrollTrigger: {
-      trigger: section.value,
-      start: "top 10%",
-      toggleActions: "play none none none",
-    },
-  });
 }
 
 onMounted(() => {
   ctx = gsap.context(() => {
     createTween();
-
+    window.addEventListener(".text", handleResize);
-    window.addEventListener("resize", handleResize);
   }, section.value);
 
   requestAnimationFrame(() => {
@@ -65,6 +77,7 @@ onUnmounted(() => {
   window.removeEventListener("resize", handleResize);
   ctx?.revert();
   clearInterval(interval);
+
 });
 
 function getTimeDate() {
@@ -92,21 +105,19 @@ 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="textblock text">
-      <h4 class="textblock__subheader text">Tom Alexander Herpel</h4>
+      <h4 class="text fontStyle">Tom Alexander Herpel</h4>
 
       <h1 class="textblock__header text">
-        Welcome to my page. <br />
+        
-        This space is currently under construction.
       </h1>
 
-      <h4 class="textblock__subheader text">
+      <h4 class="textblock__subheader text fontStyle">
-        Here you’ll find creative projects and ideas that inspire me at the
+        
-        moment.
       </h4>
 
-      <p class="textblock__caption">Oldenburg, Germany <br /></p>
+      <p class="textblock__caption">Oldenburg, Germany <br /> {{time}} {{date.value}}</p>
     </div>
   </div>
 </template>
@@ -131,7 +142,7 @@ function getTimeDate() {
 .b-three,
 .b-four,
 .b-five {
-  background: var(--black-clr);
+  background: #ffffff;
 }
 
 .b-one {
@@ -156,7 +167,14 @@ function getTimeDate() {
 
 .b-five {
   grid-column: 30 / 34;
-  grid-row: 1 / 11;
+  grid-row: 4 / 11;
+}
+.b-six {
+
+  grid-column: 30 / 34;
+  grid-row: 12/ 13;
+  font-size: 0.85rem;
+
 }
 
 /* Textbereich */
@@ -168,7 +186,7 @@ function getTimeDate() {
   color: var(--black-clr);
 }
 
-.textblock__subheader {
+.fontStyle {
   font-size: 1rem;
   font-weight: 500;
   margin-bottom: 1rem;
@@ -193,4 +211,9 @@ function getTimeDate() {
   font-family: Courier New;
   font-size: clamp(1.5rem, 3vw, 5rem);
 }
+
+a {
+  color: #ffffff;
+  white-space:nowrap;
+}
 </style>