Initial commit

src/components/sections/TextSection.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue"
+import gsap from "gsap"
+import ScrollTrigger from "gsap/ScrollTrigger"
+
+gsap.registerPlugin(ScrollTrigger)
+
+const section = ref(null)
+let ctx
+
+onMounted(() => {
+  ctx = gsap.context(() => {
+
+    gsap.from(".fade-text", {
+      opacity: 0,
+      y: 50,
+      duration: 1,
+      scrollTrigger: {
+        trigger: section.value,
+        start: "top 70%"
+      }
+    })
+
+    gsap.to(".highlight", {
+      backgroundSize: "100% 100%",
+      scrollTrigger: {
+        trigger: ".highlight",
+        start: "top 80%",
+        end: "top 50%",
+        scrub: true
+      }
+    })
+
+  }, section)
+})
+
+onUnmounted(() => ctx.revert())
+</script>
+
+<template>
+  <section ref="section" class="text-section">
+    <h2 class="fade-text">
+      Do you want to see where I used to study?
+      <!-- A blog that <span class="highlight">moves with you</span> -->
+    </h2>
+    <p class="fade-text">
+    </p>
+    <router-link to="/experience">
+    <button class="btn">Zur Experience</button>
+  </router-link>
+  </section>
+</template>
+
+<style scoped>
+.text-section {
+  min-height: 100vh;
+  background: #111;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 6rem 10%;
+}
+
+h2 {
+  font-size: 3rem;
+  margin-bottom: 2rem;
+}
+
+.highlight {
+  background: linear-gradient(90deg, #ffffff, #ffffff);
+  background-repeat: no-repeat;
+  background-size: 0% 100%;
+  background-position: left;
+  padding: 0 0.3rem;
+}
+.btn {
+  background-color: white;
+  color: #1a1a2e; /* dunkler Text */
+  border: none;
+  padding: 0.6rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+
+.btn:hover {
+  background-color: #f0f0f0;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+.btn:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+</style>