start education animation

axherrm · Dec 5, 2023 · 6df6a50 · 6df6a50
1 parent 21fe92b
commit 6df6a50
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 101 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -11,7 +11,8 @@
       <h1 id="main-heading" class="text-color-grey-dark-1">Curriculum Vitae - Axel Herrmann</h1>
       <h2 id="main-subheading" class="text-color-grey-dark-2">Software Engineer</h2>
       <div id="profile-pic-container">
-        <img id="profile-pic" ngSrc="assets/profile-pic.jpeg" alt="Profile photo of Axel Herrmann" width="450" height="450" priority="">
+        <img id="profile-pic" ngSrc="assets/profile-pic.jpeg" alt="Profile photo of Axel Herrmann" width="450"
+             height="450" priority="">
       </div>
     </div>
     <heading-section #personal_infos id="personal-infos" heading="Persönliches" width="70vh">
@@ -26,64 +27,81 @@ <h2 id="main-subheading" class="text-color-grey-dark-2">Software Engineer</h2>
         <div class="personal-text"><a href="mailto:[email protected]">axel-herrmann&#64;gmx.net</a></div>
       </div>
       <div class="personal-container">
-        <img class="personal-icon svg-color-filter" ngSrc="assets/github-mark.svg" height="96" width="98" alt="GitHub Logo"/>
+        <img class="personal-icon svg-color-filter" ngSrc="assets/github-mark.svg" height="96" width="98"
+             alt="GitHub Logo"/>
         <div class="vr"></div>
         <div class="personal-text"><a href="https://github.com/axherrm">github.com/axherrm</a></div>
       </div>
       <div class="personal-container">
-        <img class="personal-icon svg-color-filter" ngSrc="assets/linkedin.svg" height="24" width="24" alt="LinkedIn Logo"/>
+        <img class="personal-icon svg-color-filter" ngSrc="assets/linkedin.svg" height="24" width="24"
+             alt="LinkedIn Logo"/>
         <div class="vr"></div>
         <div class="personal-text"><a href="https://www.linkedin.com/in/axherrm/">linkedin.com/in/axherrm/</a></div>
       </div>
     </heading-section>
   </div>
 
-<!--  Similar to TextSplit: https://github.com/ayhanexe/gsap-class-based-splitText-plugin-->
   <div style="overflow-x: hidden">
-    <div #right_side id="right-side" style="width: calc(50% - 2vw); margin-left: 50%; padding-right: 1vw; padding-left: 1vw">
+    <div #right_side id="right-side"
+         style="width: calc(50% - 2vw); margin-left: 50%; padding-right: 1vw; padding-left: 1vw">
       <div style="height: 80px"></div>
       <!--    <div class="dot">TODO</div>-->
-      <heading-section #general heading="Allgemein" style="transform: scale(0.9)">
-        <p class="capitalize text">
-          Axel Herrmann - wer ist das?
-          Momentan bin ich ein 21-jähriger Student an der <i>Universität Stuttgart</i> im Studiengang <i>Software Engineering B.Sc.</i>, der seine Bachelorthesis schreibt.
-          Doch meine Geschichte mit Informatik beginnt viel früher, denn ich konnte mich schon früh für Informatik begeistern.
-          Bereits in der 7. Klasse hat mein Vater mir einen Online-Blog über Java gezeigt, durch den ich meine ersten Zeilen Java Code geschrieben habe.
-          Als ich dann in der 10. Klasse das erste Mal die Chance hatte, Informatikunterricht zu besuchen, wusste ich sofort, was ich in Zukunft machen will.
-          Immer auf der Suche nach echten Aufgaben, bei denen ich programmieren kann, habe ich 2018 mit Freunden am #IoT Hackthon meiner Schule teilgenommen.
-          Da mein Informatik-Lehrer sah, wie viel Spaß mir das machte, gab er mir als einzigem Schüler die Möglichkeit, an der Verwaltungssoftware für das Schulprojekt Schule als Staat (SaS) mit ihm zu entwickeln.
-          Als erstes etwas größeres Projekt, an dem ich gearbeitet habe, hat das meine Entscheidung gefestigt, Informatik studieren zu wollen.
-          So habe ich nach der Schule direkt damit angefangen.
-          Besonders viel Spaß haben mir dabei immer die Module gemacht, bei denen ich programmieren konnte.
-        </p>
-        <p class="text">
-          Um mehr Bezug zur Praxis zu haben und Erfahrung zu sammeln, suchte ich mir bereits im 3. Semester meines Studiums eine Werkstudentenstelle.
-          So bin ich bei <i>levigo solutions</i> gelandet, wo ich ab Beginn 2022 1,5 Jahre am Produkt <i>jadice flow</i> mitentwickelt habe.
-          Hier konnte ich erste Erfahrungen mit renomierten Technologien wie Docker und Kubernetes sammeln und hatte viel Spaß bei der Arbeit.
-        </p>
-      </heading-section>
+      <div #general_pin>
+        <heading-section #general heading="Allgemein" style="transform: scale(0.9)">
+          <p class="capitalize text">
+            Axel Herrmann - wer ist das?
+            Momentan bin ich ein 21-jähriger Student an der <i>Universität Stuttgart</i> im Studiengang <i>Software
+            Engineering B.Sc.</i>, der seine Bachelorthesis schreibt.
+            Doch meine Geschichte mit Informatik beginnt viel früher, denn ich konnte mich schon früh für Informatik
+            begeistern.
+            Bereits in der 7. Klasse hat mein Vater mir einen Online-Blog über Java gezeigt, durch den ich meine ersten
+            Zeilen Java Code geschrieben habe.
+            Als ich dann in der 10. Klasse das erste Mal die Chance hatte, Informatikunterricht zu besuchen, wusste ich
+            sofort, was ich in Zukunft machen will.
+            Immer auf der Suche nach echten Aufgaben, bei denen ich programmieren kann, habe ich 2018 mit Freunden am
+            #IoT Hackthon meiner Schule teilgenommen.
+            Da mein Informatik-Lehrer sah, wie viel Spaß mir das machte, gab er mir als einzigem Schüler die
+            Möglichkeit, an der Verwaltungssoftware für das Schulprojekt Schule als Staat (SaS) mit ihm zu entwickeln.
+            Als erstes etwas größeres Projekt, an dem ich gearbeitet habe, hat das meine Entscheidung gefestigt,
+            Informatik studieren zu wollen.
+            So habe ich nach der Schule direkt damit angefangen.
+            Besonders viel Spaß haben mir dabei immer die Module gemacht, bei denen ich programmieren konnte.
+          </p>
+          <p class="text">
+            Um mehr Bezug zur Praxis zu haben und Erfahrung zu sammeln, suchte ich mir bereits im 3. Semester meines
+            Studiums eine Werkstudentenstelle.
+            So bin ich bei <i>levigo solutions</i> gelandet, wo ich ab Beginn 2022 1,5 Jahre am Produkt <i>jadice
+            flow</i> mitentwickelt habe.
+            Hier konnte ich erste Erfahrungen mit renomierten Technologien wie Docker und Kubernetes sammeln und hatte
+            viel Spaß bei der Arbeit.
+          </p>
+        </heading-section>
+      </div>
 
-      <heading-section #education heading="Bildungsweg">
-        <lifeline-entry
-          title="Allgemeine Hochschulreife"
-          subTitle="Schönbuch-Gymnasium Holzgerlingen"
-          date="09/2012 - 07/2020"
-          [bulletPoints]="['Abschlussnote: 1,4']"
-        >
-          Neben der allgemeinen Bildung habe ich hier meine ersten Erfahrungen in der Informatik sammeln können.
-          Ab der Oberstufe habe ich Informatikunterricht besucht.
-        </lifeline-entry>
+      <div #education_pin>
+        <heading-section #education heading="Bildungsweg" style="transform: scale(0.9)">
+          <lifeline-entry
+            title="Allgemeine Hochschulreife"
+            subTitle="Schönbuch-Gymnasium Holzgerlingen"
+            date="09/2012 - 07/2020"
+            [bulletPoints]="['Abschlussnote: 1,4']"
+          >
+            Neben der allgemeinen Bildung habe ich hier meine ersten Erfahrungen in der Informatik sammeln können.
+            Ab der Oberstufe habe ich Informatikunterricht besucht.
+          </lifeline-entry>
 
-        <lifeline-entry
-          title="Software Engineering B.Sc."
-          subTitle="Universität Stuttgart"
-          date="01/2022 –09/2023"
-          [bulletPoints]="['Abschlussnote: 2,0']"
-        >
-          In Abgrenzung zum verwandten Studiengang Informatik konnte ich hier einige praktische Erfahrungen mehr sammeln.
-          Diese kleinen Programmierprojekte konnten mich im Studium bisher am meisten begeistern.
-        </lifeline-entry>
-      </heading-section>
+          <lifeline-entry
+            title="Software Engineering B.Sc."
+            subTitle="Universität Stuttgart"
+            date="01/2022 –09/2023"
+            [bulletPoints]="['Abschlussnote: 2,0']"
+          >
+            In Abgrenzung zum verwandten Studiengang Informatik konnte ich hier einige praktische Erfahrungen mehr
+            sammeln.
+            Diese kleinen Programmierprojekte konnten mich im Studium bisher am meisten begeistern.
+          </lifeline-entry>
+        </heading-section>
+      </div>
 
       <heading-section #experience heading="Erfahrung">
         <lifeline-entry
@@ -92,15 +110,17 @@ <h2 id="main-subheading" class="text-color-grey-dark-2">Software Engineer</h2>
           date="2018"
           [bulletPoints]="[]"
         >
-          Im Rahmen des Hackathon habe ich das erste Mal etwas praktischere Erfahrungen in der Softwareentwicklung gesammelt.
+          Im Rahmen des Hackathon habe ich das erste Mal etwas praktischere Erfahrungen in der Softwareentwicklung
+          gesammelt.
         </lifeline-entry>
         <lifeline-entry
           title="Entwicklung Verwaltungssoftware SaS"
           subTitle="Schönbuch-Gymnasium Holzgerlingen"
           date="2018-2019"
           [bulletPoints]="[]"
         >
-          Dank meines Informatik-Lehrers habe ich als einziger Schüler die Möglichkeit bekommen, mit an der Verwaltungssoftware für das Schulprojekt „Schule als Staat“ zu entwickeln.
+          Dank meines Informatik-Lehrers habe ich als einziger Schüler die Möglichkeit bekommen, mit an der
+          Verwaltungssoftware für das Schulprojekt „Schule als Staat“ zu entwickeln.
           Dabei wurde eine Webseite in PHP realisiert.
         </lifeline-entry>
         <lifeline-entry
@@ -109,10 +129,12 @@ <h2 id="main-subheading" class="text-color-grey-dark-2">Software Engineer</h2>
           date="01/2022 –09/2023"
           [bulletPoints]="[]"
         >
-          Im Rahmen dieser Anstellung hatte ich das erste Mal die Gelegenheit, professionelle praktische Erfahrungen zu sammeln.
+          Im Rahmen dieser Anstellung hatte ich das erste Mal die Gelegenheit, professionelle praktische Erfahrungen zu
+          sammeln.
           Ich habe größtenteils am Backend des Produkts jadice flow gearbeitet.
           Dabei habe ich viel in Java und SpringBoot, teilweise auch in Java-/Typescript geschrieben.
-          Aufgrund der Microservices-Architektur des Produkts hatte ich viel Erfahrungen mit Docker gesammelt und erste Einblicke in Kubernetes bekommen.
+          Aufgrund der Microservices-Architektur des Produkts hatte ich viel Erfahrungen mit Docker gesammelt und erste
+          Einblicke in Kubernetes bekommen.
           Bei dem agilen Vorgehen in 2–3-wöchigen Sprints habe ich das erste Mal mit Scrum gearbeitet.
         </lifeline-entry>
         <lifeline-entry
@@ -121,7 +143,8 @@ <h2 id="main-subheading" class="text-color-grey-dark-2">Software Engineer</h2>
           date="09/2023 – 03/2024"
           [bulletPoints]="[]"
         >
-          Insgesamt ein halbes Jahr habe ich bei levigo solutions meine Bachelorthesis über das Thema Refactoring von Microservices- Architekturen: Eine industrielle Fallstudie geschrieben.
+          Insgesamt ein halbes Jahr habe ich bei levigo solutions meine Bachelorthesis über das Thema Refactoring von
+          Microservices- Architekturen: Eine industrielle Fallstudie geschrieben.
           Dabei habe ich weiter an der Architektur des Produkts jadice flow entwickelt.
           Die Thesis wird in Zukunft öffentlich zu finden sein.
         </lifeline-entry>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -2,7 +2,7 @@ import {Component, ElementRef, ViewChild} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 
 import gsap from 'gsap'
-import { ScrollTrigger } from "gsap/ScrollTrigger"
+import {ScrollTrigger} from "gsap/ScrollTrigger"
 import {HeadingBoxComponent} from "./components/heading-box/heading-box.component";
 import {MatIconModule} from "@angular/material/icon";
 import Utils from "./utils/utils";
@@ -25,41 +25,84 @@ export class AppComponent {
   @ViewChild('arrow_down') arrowDown: ElementRef;
   @ViewChild('general', {read: HeadingSectionComponent}) general: HeadingSectionComponent;
   @ViewChild('general', {read: ElementRef}) generalElement: ElementRef;
+  @ViewChild('general_pin', {read: ElementRef}) generalPin: ElementRef;
   @ViewChild('right_side') rightSide: ElementRef;
   @ViewChild('personal_infos', {read: HeadingSectionComponent}) personal: HeadingSectionComponent;
+  @ViewChild('education', {read: HeadingSectionComponent}) education: HeadingSectionComponent;
+  @ViewChild('education', {read: ElementRef}) educationElement: ElementRef;
+  @ViewChild('education_pin', {read: ElementRef}) educationPin: ElementRef;
 
   ngAfterViewInit(): void {
-    if (window.scrollY < 10) {
-      this.animationsAtStart();
-    }
-    this.scroll1fadeIn();
-  }
-
-  scroll1fadeIn(): void {
-    const timeline: gsap.core.Timeline = gsap.timeline({
+    const section1Timeline: gsap.core.Timeline = gsap.timeline({
       scrollTrigger: {
         start: 0,
-        trigger: this.backgroundDiv.nativeElement,
+        trigger: this.generalPin.nativeElement,
+        end: "+=2100",
+        markers: true, // TODO remove
+        scrub: true,
+        pin: this.generalPin.nativeElement
+      }
+    });
+    this.animateArrowDown(section1Timeline);
+    this.animateLeftSide(section1Timeline)
+    this.animateGeneral(section1Timeline); // TODO fly out more quickly
+
+    const section2Timeline: gsap.core.Timeline = gsap.timeline({
+      scrollTrigger: {
+        start: "center center",
+        trigger: this.educationPin.nativeElement,
         end: "+=1500",
         markers: true, // TODO remove
         scrub: true,
-        pin: this.rightSide.nativeElement
+        pin: this.educationPin.nativeElement
       }
     });
 
+    this.animateEducation(section2Timeline);
+  }
+
+  animateArrowDown(timeline: gsap.core.Timeline): void {
+    if (window.scrollY < 10) {
+      gsap.from(this.arrowDown.nativeElement, {
+        opacity: 0,
+        duration: 2,
+      })
+        .play();
+      gsap.from(this.arrowDown.nativeElement, {
+        yPercent: -10,
+        delay: 1.5,
+        duration: 1,
+        ease: "bounce",
+      })
+        .play();
+    }
+    timeline
+      .to(this.arrowDown.nativeElement, {
+        opacity: 0,
+        duration: 50
+      }, 0);
+  }
+
+  animateLeftSide(timeline: gsap.core.Timeline): void {
     timeline
       .from(this.avatar.nativeElement, {
         xPercent: 50,
         yPercent: 20,
         scale: 1.3,
         duration: 100,
         ease: "power2.out"
-      })
-      .to(this.arrowDown.nativeElement, {
-        opacity: 0,
-        duration: 50
-      }, 0);
+      }, 0)
+    const personalParts = this.personal.getParts();
+    for (let i = 0; i < personalParts.length; i++) {
+      timeline.from(personalParts[i], {
+        xPercent: -120,
+        scale: 0.2,
+        duration: 60
+      }, 10 + i * 15);
+    }
+  }
 
+  animateGeneral(timeline: gsap.core.Timeline): void {
     const generalParts = this.general.getParts();
     for (let i = 0; i < generalParts.length; i++) {
       timeline.from(generalParts[i], {
@@ -74,28 +117,37 @@ export class AppComponent {
       duration: 60
     });
 
-    const personalParts = this.personal.getParts();
-    for (let i = 0; i < personalParts.length; i++) {
-      timeline.from(personalParts[i], {
-        xPercent: -120,
-        scale: 0.2,
+    const outStart = timeline.endTime();
+    for (let i = 0; i < generalParts.length; i++) {
+      timeline.to(generalParts[i], {
+        y: "-100vh",
         duration: 60
-      }, 10 + i * 15);
+      }, outStart + 5 * i);
+    }
+  }
+
+  animateEducation(timeline: gsap.core.Timeline): void {
+    // timeline.addLabel("education");
+    const educationParts = this.education.getParts();
+    for (let i = 0; i < educationParts.length; i++) {
+      timeline.from(educationParts[i], {
+        y: "100vh",
+        // scale: 0.2,
+        duration: 60
+      }, 10 + i * 30);
     }
 
-    // this.childrenAnimationFrom(this.general, timeline, {
-    //   xPercent: -120,
-    //   scale: 0.2,
-    //   duration: 0.6
-    // }, "start");
-
-    // Utils.forEachChild(this.general, (textPart) => {
-    //   timeline.from(textPart, {
-    //     xPercent: 120,
-    //     scale: 0.2,
-    //     duration: 0.6
-    //   }, "<0.2");
-    // });
+    timeline
+      .to(this.educationElement.nativeElement, {
+        scale: 1,
+        duration: 60
+      });
+    timeline.addLabel("full-visible");
+    timeline.to(this.educationElement.nativeElement, {
+        xPercent: 120,
+        duration: 100
+      }, "full-visible+=60");
+
   }
 
   // childrenAnimationFrom(parent: ElementRef, timeline: gsap.core.Timeline, vars: gsap.TweenVars, startLabel: string): void {
@@ -108,19 +160,4 @@ export class AppComponent {
   //   }
   // }
 
-  animationsAtStart(): void {
-    gsap.from(this.arrowDown.nativeElement, {
-      opacity: 0,
-      duration: 2,
-    })
-      .play();
-    gsap.from(this.arrowDown.nativeElement, {
-      yPercent: -10,
-      delay: 1.5,
-      duration: 1,
-      ease: "bounce",
-    })
-      .play();
-  }
-
 }
diff --git a/src/app/components/heading-section/heading-section.component.scss b/src/app/components/heading-section/heading-section.component.scss
@@ -1,3 +1,3 @@
 .heading-section-wrapper {
-  transform: inherit;
+  //transform: inherit; // TODO fix
 }
diff --git a/src/app/components/lifeline-entry/lifeline-entry.component.html b/src/app/components/lifeline-entry/lifeline-entry.component.html
@@ -1,4 +1,4 @@
-<div style="margin-bottom: 4vh;">
+<div class="lifeline-entry-wrapper">
   <h3 class="lifeline-entry-title text-color-grey-dark-1">{{ title }}</h3>
   <h4 class="lifeline-entry-subtitle text-color-grey-dark-1">
     <span style="text-align: left">{{ subTitle }}</span>

diff --git a/src/app/components/lifeline-entry/lifeline-entry.component.scss b/src/app/components/lifeline-entry/lifeline-entry.component.scss
@@ -1,3 +1,7 @@
+.lifeline-entry-wrapper {
+  margin-bottom: 4vh;
+  transform: inherit;
+}
 .lifeline-entry-title {
   letter-spacing: 2px;
 }