texte und scroll fix

src/components/slim/AboutMe.vue

@@ -32,17 +32,18 @@
         </div>
 
         <p class="intro">
-          Designerin, Creative Thinker und jemand, der gute Ideen gerne einfach
+          25 Jahre jung <br />
-          macht.
+          Interessen: Linux, Selfhosting, Coding and Sport
         </p>
       </section>
 
       <!-- RED STATEMENT -->
       <section class="div4">
         <p class="statement">
-          how <br />
+          Have <br />
-          am <br />
+          You <br />
-          i<br />
+          Met<br />
+          Tom <br />
           ?
         </p>
       </section>
@@ -57,10 +58,12 @@
           <span class="label">Skills</span>
 
           <ul class="skill-list">
-            <li>Branding</li>
+            <li>Vue.js</li>
-            <li>Art Direction</li>
+            <li>Java</li>
-            <li>Web Design</li>
+            <li>Gsap</li>
-            <li>Typography</li>
+            <li>Three.js</li>
+            <li>Blender</li>
+            <li>Linux-Administration</li>
           </ul>
         </div>
       </section>
@@ -86,7 +89,7 @@
         <span class="copyright"> © 2026 </span>
 
         <nav class="footer-links">
-          <a href="#">Instagram ↗</a>
+          <a href="#">Git ↗</a>
           <a href="#">Mail ↗</a>
         </nav>
       </footer>
@@ -114,10 +117,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   font-family: Arial, Helvetica, sans-serif;
 }
 
-/* --------------------------------
-   VARIABLES
--------------------------------- */
-
 .page {
   --cream: #f3eee3;
   --beige-light: #efe8d9;
@@ -139,10 +138,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   color: var(--black);
 }
 
-/* --------------------------------
-   GRID
--------------------------------- */
-
 .parent {
   min-height: calc(100vh - 44px);
 
@@ -152,10 +147,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   gap: var(--gap);
 }
 
-/* --------------------------------
-   GRID ELEMENTS
--------------------------------- */
-
 .div2 {
   grid-column: span 4 / span 4;
   grid-row: span 6 / span 6;
@@ -269,10 +260,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   letter-spacing: 0.08em;
 }
 
-/* --------------------------------
-   TYPOGRAPHY
--------------------------------- */
-
 .eyebrow {
   margin: 0 0 14px;
 
@@ -336,10 +323,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   letter-spacing: 0.08em;
 }
 
-/* --------------------------------
-   PORTRAIT
--------------------------------- */
-
 .portrait {
   width: 100%;
   height: 42%;
@@ -351,10 +334,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   overflow: hidden;
 }
 
-/* --------------------------------
-   RED STATEMENT
--------------------------------- */
-
 .statement {
   margin: 0;
 
@@ -365,10 +344,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   text-transform: uppercase;
 }
 
-/* --------------------------------
-   SKILLS
--------------------------------- */
-
 .skill-list {
   margin: 18px 0 0;
   padding: 0;
@@ -390,10 +365,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   border-bottom: 1px solid rgba(41, 37, 31, 0.35);
 }
 
-/* --------------------------------
-   FOOTER
--------------------------------- */
-
 .footer-links {
   display: flex;
   gap: 25px;
@@ -420,10 +391,6 @@ import tom_img from "../../assets/myself/SmartTom.jpeg";
   font-weight: 700;
 }
 
-/* --------------------------------
-   HOVER
--------------------------------- */
-
 .div2,
 .div4,
 .div5,

src/components/slim/Main.vue

@@ -52,8 +52,16 @@
           <span class="project-number">01</span>
 
           <h2>
-            Digital<br />
+            Willkommen. Schau dich gerne um.<br />
-            Systems
+            Wenn du am PC bist, empfehle ich dir die
+            <div
+              class="interactive-link"
+              @mouseenter="isInteractiveHovered = true"
+              @mouseleave="isInteractiveHovered = false"
+            >
+              interaktive Version.
+            </div>
+            <br />
           </h2>
         </div>
 
@@ -68,8 +76,8 @@
 
         <div class="info-content">
           <p>
-            Independent creative developer working between design, technology
+            Vermehrung des menschlichen Glücks wird nur durch Vermehrung der
-            and interaction.
+            Liebe möglich. - Leo Tolstoi (1828 - 1910)
           </p>
         </div>
       </section>
@@ -80,12 +88,16 @@
         <span class="arrow">↓</span>
       </section>
 
-      <section class="div22 location" @click="$router.push('/motion')">
+      <section
-        <span>Location</span>
+        class="div22 location"
+        :class="{ 'div22-active': isInteractiveHovered }"
+        @click="$router.push('/motion')"
+      >
+        <span>View</span>
 
         <div class="location-name">
-          <span>DE</span>
+          <span>03D</span>
-          <strong>Oldenburg</strong>
+          <strong>Interactive</strong>
         </div>
 
         <span>53°08' N</span>
@@ -94,7 +106,11 @@
   </main>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref } from "vue";
+
+const isInteractiveHovered = ref(true);
+</script>
 
 <style scoped>
 .landing-page {
@@ -143,6 +159,30 @@
 
   border: 1px solid #29251f;
 }
+.div22,
+.div21 {
+  transition:
+    transform 0.25s ease,
+    background-color 0.25s ease,
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+.div22:hover,
+.div21:hover {
+  transform: translate(-4px, -4px);
+  background: var(--beige-light);
+}
+
+.interactive-link {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.div22-active {
+  transform: translate(-8px, -8px);
+  background: var(--beige-light);
+}
 
 .eyebrow,
 .nav-item,
@@ -317,13 +357,13 @@
 .project-title h2 {
   margin: 0;
 
-  font-size: clamp(28px, 3vw, 46px);
+  font-size: clamp(28px, 3vw, 36px);
 
   line-height: 0.9;
 
   letter-spacing: -0.05em;
 
-  font-weight: 500;
+  font-weight: 100;
 }
 
 .div20 {

src/views/HomeBig.vue

@@ -18,10 +18,10 @@ let smoother: ScrollSmoother | null = null;
 onMounted(async () => {
   await nextTick();
 
-  ScrollSmoother.create({
+  smoother = ScrollSmoother.create({
     wrapper: "#smooth-wrapper",
     content: "#smooth-content",
-    smooth: 0.2,
+    smooth: 1.5,
     effects: true,
   });
 
@@ -31,8 +31,6 @@ onMounted(async () => {
 onUnmounted(() => {
   smoother?.kill();
   smoother = null;
-
-  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
 });
 </script>
 

src/views/HomeSlime.vue

@@ -2,21 +2,31 @@
 import Main from "../components/slim/Main.vue";
 import AboutMe from "../components/slim/AboutMe.vue";
 
-import { onMounted, nextTick } from "vue";
+import { onMounted, onUnmounted, nextTick } from "vue";
 import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
 import ScrollSmoother from "gsap/ScrollSmoother";
 
-gsap.registerPlugin(ScrollSmoother);
+gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
+
+let smoother: ScrollSmoother | null = null;
 
 onMounted(async () => {
   await nextTick();
 
-  ScrollSmoother.create({
+  smoother = ScrollSmoother.create({
     wrapper: "#smooth-wrapper",
     content: "#smooth-content",
     smooth: 1.5,
     effects: true,
   });
+
+  ScrollTrigger.refresh();
+});
+
+onUnmounted(() => {
+  smoother?.kill();
+  smoother = null;
 });
 </script>