introduction section

src/components/sections/ImageSection.vue

@@ -101,15 +101,34 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="text">
-      <h2>Here is some content</h2>
+      <h2>Was ist Kunst?</h2>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        Nach Schelling ist die Kunst das Erzeugnis oder die Folge jener
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        Weltanschauung, nach der das Subjekt sich in sein Objekt verwandelt oder
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        das Objekt selbst 45 zum Subjekt wird. Die Schönheit ist die Darstellung
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        des Unendli- chen im Endlichen. Und der Grundcharakter eines Kunstwerkes
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        ist die bewußtlose Unendlichkeit. Die Kunst ist die Vereinigung des
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        Subjektiven mit dem Objektiven, – der Natur mit der Vernunft, der
-        mollit anim id est laborum.
+        Bewußtlosigkeit mit dem Bewußten. Und deshalb ist die Kunst das höchste
+        Mittel der Erkenntnis. Die Schönheit ist die Betrachtung der Dinge an
+        sich, wie sie in Urbildern sind. Das Schöne erzeugt nicht der Künstler
+        vermöge seines Wissens oder seines Willens, sondern die Idee der
+        Schönheit selbst schafft in ihm. (Schaßler)
+      </p>
+      <p>
+        In der Welt erblicken wir nur die Entartung der Grundidee, die Kunst
+        jedoch kann ver- möge der Phantasie sich bis zur Höhe der Grundidee
+        erheben. Und deshalb ist die Kunst das Ebenbild der Schöpfung
+        (Schaßler).
+      </p>
+      <p>
+        Nach einem anderen Anhänger Schellings, Krause (1781–1832), ist die
+        wahre reale Schönheit die Erzeugung der Idee in der indivi- duellen
+        Form; die Kunst ist aber die Verwirklichung der Schönheit in der Sphäre
+        des freien menschlichen Geistes. Die höchste Stufe der Kunst ist die
+        Kunst des Lebens, die ihre Thätigkeit auf die Verschö- nerung des Lebens
+        richtet, damit dies ein schön belebter Wohnort für die selber in
+        Schönheit vollendete Menschheit sei. (Ebd.)
       </p>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -121,58 +140,29 @@ onUnmounted(() => {
         mollit anim id est laborum.
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        Nach Hegel (1770–1831) offenbart sich Gott in Natur und Kunst unter der
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        Form der Schönheit. Gott äußert sich auf zweierlei Weise: in dem Objekt
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        und in dem Subjekt, – in der Natur und im Geiste. Die Schönheit ist
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        jedoch das Durch- scheinen der Idee durch den Stoff. Das wahrhaft Schöne
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        ist nur der Geist und alles das, was dem Geiste teilhaftig ist. Deshalb
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        ist die Schönheit der Natur nur der Schein der dem Geiste eigenen Schön-
-        mollit anim id est laborum.
+        heit: das Schöne hat nur als Geistiges wahrhaften Gehalt. Aber das
+        Geistige muß in der sinnlichen Form erscheinen. Die sinnliche Äu- ßerung
+        des Geistes jedoch ist nur der Schein. Und dieser Schein ist die
+        eigentliche Wirklichkeit des Schönen. Sodaß die Kunst die 46
+        Verwirklichung dieses Scheines der Idee und zugleich mit der Reli- gion
+        und Philosophie das Mittel ist, die tiefsten Interessen der Men- schen
+        und die umfassendsten Wahrheiten des Geistes zum Bewußt- sein zu bringen
+        und auszusprechen. Wahrheit und Schönheit sind nach Hegel ein und
+        dasselbe: der Unterschied besteht nur darin, daß die Wahrheit die Idee
+        ist, wie diese an sich und dem allgemeinen Prinzip nach ist und als
+        solches gedacht wird. Die Idee jedoch, die äußerlich existiert, wird für
+        das Bewußtsein nicht blos wahr, son- dern auch schön. Das Schöne ist das
+        Scheinen der Idee
       </p>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        --- Was ist Kunst?, Leo N. Tolstoi, Aus dem Russischen von Michail
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        Feofanov (1902) ---
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </p>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
       </p>
     </div>
   </section>
@@ -261,6 +251,7 @@ p {
 }
 
 .text {
+  font-family: Courier New;
   padding: 2rem 5rem;
 }
 </style>

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>

src/components/sections/TextSection.vue

@@ -76,13 +76,22 @@ window.addEventListener("resize", createTimeline);
           <button class="btn second-btn">Zur Experience</button>
         </router-link>
       </div>
-
       <div class="container third">
+        <div class="experience-text">
+          <h2>Spotify recommendation project</h2>
+        </div>
+        <div class="marker"></div>
+        <router-link to="/recommSpotify">
+          <button class="btn third-btn">Zur recommSpotify</button>
+        </router-link>
+      </div>
+
+      <div class="container fourth">
         <div class="experience-text">
           <h2>Here is the final step!</h2>
         </div>
         <div class="marker"></div>
-        <button class="btn third-btn">Next</button>
+        <button class="btn fourth-btn">Next</button>
       </div>
     </div>
     <div class="spacer final"></div>
@@ -228,4 +237,14 @@ body {
   width: 100px;
   height: 100px;
 }
+
+.fourth {
+  left: 10%;
+  top: 750%;
+}
+
+.fourth .marker {
+  width: 100px;
+  height: 100px;
+}
 </style>

src/components/sections/WelcomeSection.vue

@@ -167,7 +167,7 @@ onUnmounted(() => {
 .parallax__content {
   justify-content: center;
   align-items: center;
-  min-height: 200svh;
+  min-height: 100svh;
   display: flex;
   position: relative;
 }

src/router/index.ts

@@ -5,7 +5,7 @@ import ExperienceView from '../views/ExperienceView.vue'
 
 const routes: RouteRecordRaw[] = [
   { path: '/', component: HomeView },
-  { path: '/experience',
+  { path: '/recommSpotify',
      component: ExperienceView,
     props: { modelUrl: '/models/door_room_firstVersion_materials-draco.glb', dracoPath: '/draco/' } }
 ]

src/views/HomeView.vue

@@ -10,6 +10,7 @@ import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import ScrollSmoother from "gsap/ScrollSmoother";
 import MonitorModel from "../components/sections/MonitorModel.vue";
+import IntroductionSection from "../components/sections/IntroductionSection.vue";
 
 gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
@@ -31,6 +32,7 @@ onMounted(async () => {
   <div id="smooth-wrapper">
     <div id="smooth-content">
       <WelcomeSection id="welcome" />
+      <IntroductionSection id="welcome" />
       <MonitorModel id="model" />
       <!-- <HeroSection id="hero" /> -->
       <ImageSection id="image" />