introduction section

src/components/sections/IntroductionSection.vue

@@ -0,0 +1,101 @@
+<script setup lang="js">
+import { onMounted, onUnmounted, ref } from "vue";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import SplitText from "gsap/SplitText";
+
+gsap.registerPlugin(ScrollTrigger, SplitText);
+
+const section = ref(null);
+
+let ctx;
+let split;
+let animation;
+
+function createTween() {
+  split = SplitText.create(".text", { type: "chars,words,lines" });
+
+  animation = gsap.from(split.lines, {
+    rotationX: -100,
+    transformOrigin: "50% 50% -160px",
+    opacity: 0,
+    duration: 0.8,
+    ease: "power3",
+    stagger: 0.25,
+    scrollTrigger: {
+      trigger: ".text",
+      start: "top 80%",
+      toggleActions: "play none none none",
+      // markers: true
+    },
+  });
+}
+
+onMounted(() => {
+  ctx = gsap.context(() => {
+    createTween();
+
+    window.addEventListener("resize", handleResize);
+  }, section.value);
+
+  requestAnimationFrame(() => {
+    ScrollTrigger.refresh();
+  });
+});
+
+function handleResize() {
+  split && split.revert();
+  createTween();
+  ScrollTrigger.refresh();
+}
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  ctx?.revert(); // killt ALLES inkl. ScrollTrigger & SplitText sauber
+});
+</script>
+<template>
+  <div class="container">
+    <div class="text">
+      Welcome to my page!<br />
+      This site is currently under construction, and I’ll be adding new things
+      over time.<br />
+      I’m a full-stack developer who wants to improve in design and front-end
+      development.<br />
+      This space is where I’ll build projects, experiment, and share what I
+      create along the way.
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  position: relative;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  border-radius: 9px;
+}
+
+.text {
+  font-family: Courier New;
+  color: #ffffff;
+  font-size: clamp(2rem, 4vw, 9rem);
+  line-height: 1.2;
+  box-sizing: border-box;
+  padding: 5%;
+  width: 100%;
+  text-align: center;
+  perspective: 500px;
+}
+
+.button-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+</style>