duck and books

src/components/sections/IntroductionSection.vue

@@ -21,11 +21,16 @@ const texteSub = "Here you’ll find creative projects and ideas that inspire me
 
 function createTween() {
   animation?.kill();
-
-  
   //use the defaults
-// gsap.to(".textblock__header", {duration: 1, scrambleText: "THIS IS NEW TEXT"});
+  animation = gsap.timeline({
-  animation = gsap.timeline();
+    scrollTrigger: {
+      trigger : ".poster",
+      pin: true,
+      markers: true,
+      start : "top top",
+      end : "+=500"
+    }
+  })
 
   animation.to(".textblock__header", {
   duration: 1, 

src/components/sections/TextSection.vue

@@ -69,20 +69,20 @@ window.addEventListener("resize", createTimeline);
 
       <div class="container second">
         <div class="experience-text">
-          <h2>Do you want to see where I used to study?</h2>
+          <h2>Enten?</h2>
         </div>
         <div class="marker"></div>
-        <router-link to="/experience">
+        <router-link to="/books">
-          <button class="btn second-btn">Zur Experience</button>
+          <button class="btn second-btn">Books i've read</button>
         </router-link>
       </div>
       <div class="container third">
         <div class="experience-text">
-          <h2>Spotify recommendation project</h2>
+          <h2>Enten?</h2>
         </div>
         <div class="marker"></div>
-        <router-link to="/recommSpotify">
+        <router-link to="/ducks">
-          <button class="btn third-btn">Zur recommSpotify</button>
+          <button class="btn third-btn">zu den Enten</button>
         </router-link>
       </div>
 

src/router/index.ts

@@ -1,13 +1,17 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import ExperienceView from '../views/ExperienceView.vue'
+import DucksInfo from '../views/InfoDucks.vue'
+import BooksShow from '../views/BooksShow.vue'
 
 
 const routes: RouteRecordRaw[] = [
   { path: '/', component: HomeView },
-  { path: '/recommSpotify',
+  {path: '/ducks', component: DucksInfo},
-     component: ExperienceView,
+  {path: '/books', component: BooksShow}
-    props: { modelUrl: '/models/door_room_firstVersion_materials-draco.glb', dracoPath: '/draco/' } }
+
+  // { path: '/ducks',
+  //    component: DucksInfo,
+  //   props: { modelUrl: '/models/door_room_firstVersion_materials-draco.glb', dracoPath: '/draco/' } }
 ]
 
 const router = createRouter({

src/views/BooksShow.vue

@@ -0,0 +1,184 @@
+<template>
+  
+<div class="parent">
+        <div class="div2">Ordnung: 	Gänsevögel </div>
+    <div class="div3"><img class="mainImg" :src=mainDuck></div>
+    <div class="div4" style="text-align: center;"> <h2 >Books</h2></div>
+    <div class="div5">Familie: 	Entenvögel (Anatidae)</div>
+    <div class="div6">Unterfamilie: 	Anatinae</div>
+    <div class="div8">Tribus: 	Schwimmenten (Anatini)</div>
+    <div class="div9">9</div>
+    <div class="div10">10</div>
+    <div class="div11">11</div>
+    <div class="div12">12</div>
+    <div class="div13">13</div>
+    <div class="div14">14</div>
+    <div class="div15">15</div>
+    <div class="div16">16</div>
+    <div class="div17">17</div>
+    <div class="div18">18</div>
+    <div class="div19">19</div>
+    <div class="div20">20</div>
+    <div class="div21">21</div>
+    <div class="div22">22</div>
+    <div class="div23">23</div>
+    <div class="div24">24</div>
+    <div class="div25">25</div>
+    <div class="div26">26</div>
+</div>
+    
+
+</template>
+
+<script setup lang="js">
+
+import mainDuck from './../assets/ducks/stockEnteMain.jpg'
+
+
+</script>
+
+<style lang="scss" scoped>
+
+
+
+.parent {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(7, 1fr);
+    gap: 9px;
+}
+    
+.div2 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 1;
+    grid-row-start: 2;
+}
+
+.div3 {
+    grid-column: span 4 / span 4;
+    grid-row: span 4 / span 4;
+    grid-column-start: 4;
+    grid-row-start: 2;
+}
+
+.div4 {
+    grid-column: span 4 / span 4;
+    grid-column-start: 4;
+    grid-row-start: 1;
+}
+
+.div5 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 1;
+    grid-row-start: 3;
+}
+
+.div6 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 8;
+    grid-row-start: 2;
+}
+
+.div8 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 8;
+    grid-row-start: 3;
+}
+
+.div9 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 8;
+    grid-row-start: 4;
+}
+
+.div10 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 1;
+    grid-row-start: 4;
+}
+
+.div11 {
+    grid-column-start: 3;
+    grid-row-start: 6;
+}
+
+.div12 {
+    grid-column-start: 2;
+    grid-row-start: 6;
+}
+
+.div13 {
+    grid-column-start: 2;
+    grid-row-start: 7;
+}
+
+.div14 {
+    grid-column-start: 3;
+    grid-row-start: 7;
+}
+
+.div15 {
+    grid-column-start: 4;
+    grid-row-start: 7;
+}
+
+.div16 {
+    grid-column-start: 4;
+    grid-row-start: 6;
+}
+
+.div17 {
+    grid-column-start: 5;
+    grid-row-start: 6;
+}
+
+.div18 {
+    grid-column-start: 5;
+    grid-row-start: 7;
+}
+
+.div19 {
+    grid-column-start: 6;
+    grid-row-start: 7;
+}
+
+.div20 {
+    grid-column-start: 6;
+    grid-row-start: 6;
+}
+
+.div21 {
+    grid-column-start: 7;
+    grid-row-start: 6;
+}
+
+.div22 {
+    grid-column-start: 7;
+    grid-row-start: 7;
+}
+
+.div23 {
+    grid-column-start: 8;
+    grid-row-start: 7;
+}
+
+.div24 {
+    grid-column-start: 8;
+    grid-row-start: 6;
+}
+
+.div25 {
+    grid-column-start: 9;
+    grid-row-start: 6;
+}
+
+.div26 {
+    grid-column-start: 9;
+    grid-row-start: 7;
+}
+
+.mainImg {
+    width: 100%;
+}
+        
+</style>

src/views/InfoDucks.vue

@@ -0,0 +1,184 @@
+<template>
+  
+<div class="parent">
+        <div class="div2">Ordnung: 	Gänsevögel </div>
+    <div class="div3"><img class="mainImg" :src=mainDuck></div>
+    <div class="div4" style="text-align: center;"> <h2 >Stockente</h2></div>
+    <div class="div5">Familie: 	Entenvögel (Anatidae)</div>
+    <div class="div6">Unterfamilie: 	Anatinae</div>
+    <div class="div8">Tribus: 	Schwimmenten (Anatini)</div>
+    <div class="div9">9</div>
+    <div class="div10">10</div>
+    <div class="div11">11</div>
+    <div class="div12">12</div>
+    <div class="div13">13</div>
+    <div class="div14">14</div>
+    <div class="div15">15</div>
+    <div class="div16">16</div>
+    <div class="div17">17</div>
+    <div class="div18">18</div>
+    <div class="div19">19</div>
+    <div class="div20">20</div>
+    <div class="div21">21</div>
+    <div class="div22">22</div>
+    <div class="div23">23</div>
+    <div class="div24">24</div>
+    <div class="div25">25</div>
+    <div class="div26">26</div>
+</div>
+    
+
+</template>
+
+<script setup lang="js">
+
+import mainDuck from './../assets/ducks/stockEnteMain.jpg'
+
+
+</script>
+
+<style lang="scss" scoped>
+
+
+
+.parent {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(7, 1fr);
+    gap: 9px;
+}
+    
+.div2 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 1;
+    grid-row-start: 2;
+}
+
+.div3 {
+    grid-column: span 4 / span 4;
+    grid-row: span 4 / span 4;
+    grid-column-start: 4;
+    grid-row-start: 2;
+}
+
+.div4 {
+    grid-column: span 4 / span 4;
+    grid-column-start: 4;
+    grid-row-start: 1;
+}
+
+.div5 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 1;
+    grid-row-start: 3;
+}
+
+.div6 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 8;
+    grid-row-start: 2;
+}
+
+.div8 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 8;
+    grid-row-start: 3;
+}
+
+.div9 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 8;
+    grid-row-start: 4;
+}
+
+.div10 {
+    grid-column: span 3 / span 3;
+    grid-column-start: 1;
+    grid-row-start: 4;
+}
+
+.div11 {
+    grid-column-start: 3;
+    grid-row-start: 6;
+}
+
+.div12 {
+    grid-column-start: 2;
+    grid-row-start: 6;
+}
+
+.div13 {
+    grid-column-start: 2;
+    grid-row-start: 7;
+}
+
+.div14 {
+    grid-column-start: 3;
+    grid-row-start: 7;
+}
+
+.div15 {
+    grid-column-start: 4;
+    grid-row-start: 7;
+}
+
+.div16 {
+    grid-column-start: 4;
+    grid-row-start: 6;
+}
+
+.div17 {
+    grid-column-start: 5;
+    grid-row-start: 6;
+}
+
+.div18 {
+    grid-column-start: 5;
+    grid-row-start: 7;
+}
+
+.div19 {
+    grid-column-start: 6;
+    grid-row-start: 7;
+}
+
+.div20 {
+    grid-column-start: 6;
+    grid-row-start: 6;
+}
+
+.div21 {
+    grid-column-start: 7;
+    grid-row-start: 6;
+}
+
+.div22 {
+    grid-column-start: 7;
+    grid-row-start: 7;
+}
+
+.div23 {
+    grid-column-start: 8;
+    grid-row-start: 7;
+}
+
+.div24 {
+    grid-column-start: 8;
+    grid-row-start: 6;
+}
+
+.div25 {
+    grid-column-start: 9;
+    grid-row-start: 6;
+}
+
+.div26 {
+    grid-column-start: 9;
+    grid-row-start: 7;
+}
+
+.mainImg {
+    width: 100%;
+}
+        
+</style>