fix some bugs

axherrm · Dec 3, 2023 · fde8500 · fde8500
1 parent 456fa46
commit fde8500
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 35 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -30,12 +30,12 @@ <h2 id="main-subheading" class="text-color-grey-dark-2">Software Engineer</h2>
         <div class="personal-text"><a href="mailto:axel-herrmann@gmx.net">axel-herrmann&#64;gmx.net</a></div>
       </div>
       <div class="personal-container">
-        <img class="personal-icon" 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" 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>
@@ -44,8 +44,8 @@ <h2 id="main-subheading" class="text-color-grey-dark-2">Software Engineer</h2>
 
 <!--  Similar to TextSplit: https://github.com/ayhanexe/gsap-class-based-splitText-plugin-->
   <div id="right-side" style="width: calc(50% - 80px); margin-left: 50%; padding-right: 40px; padding-left: 40px">
-    <div #general>
-      <div style="height: 80px"></div>
+    <div style="height: 80px"></div>
+    <div #general style="transform: scale(0.9)">
       <heading-box text="Allgemein"></heading-box>
       <p class="capitalize general-text">
         Axel Herrmann - wer ist das?

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -49,6 +49,11 @@
   width: var(--icon-height);
   height: var(--icon-height);
   position: relative;
+  color: #262626;
+}
+// solution from: https://stackoverflow.com/a/53336754/19199839
+.svg-color-filter {
+  filter: brightness(0) saturate(100%) invert(12%) sepia(1%) saturate(2411%) hue-rotate(22deg) brightness(99%) contrast(93%);
 }
 .vr {
   background-color: var(--color-grey-dark-2);
@@ -64,6 +69,7 @@
   float: left;
   width: 14vw;
   margin: 0;
+  text-align: left;
 }
 .capitalize::first-letter {
   font-size: xx-large;
@@ -75,6 +81,13 @@
   margin-left: 20px;
   margin-right: 20px;
 }
+.dot {
+  height: 20px;
+  width: 20px;
+  background-color: var(--color-grey-dark-1);
+  border-radius: 50%;
+  display: inline-block;
+}
 #main-background {
   width: 100%;
   height: 100%;

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -29,33 +29,15 @@ export class AppComponent {
       this.animationsAtStart();
     }
     this.scroll1fadeIn();
-    this.scroll2ScaleUp();
-  }
-
-  scroll2ScaleUp(): void {
-    const timeline: gsap.core.Timeline = gsap.timeline({
-      scrollTrigger: {
-        start: 1200,
-        trigger: this.backgroundDiv.nativeElement,
-        end: "+=600",
-        // markers: true, // TODO remove
-        scrub: true,
-        pin: this.general.nativeElement
-      }
-    });
-    timeline.to(this.general.nativeElement, {
-      scale: 1,
-      duration: 1
-    });
   }
 
   scroll1fadeIn(): void {
     const timeline: gsap.core.Timeline = gsap.timeline({
       scrollTrigger: {
         start: 0,
         trigger: this.backgroundDiv.nativeElement,
-        end: "+=1200",
-        // markers: true, // TODO remove
+        end: "+=1500",
+        markers: true, // TODO remove
         scrub: true,
         pin: this.general.nativeElement
       }
@@ -67,27 +49,22 @@ export class AppComponent {
         xPercent: 50,
         yPercent: 20,
         scale: 1.3,
-        duration: 1,
+        duration: 100,
         ease: "power2.out"
       })
       .to(this.arrowDown.nativeElement, {
         opacity: 0,
-        duration: 0.5
+        duration: 50
       }, "start")
-    timeline.fromTo(this.general.nativeElement, {
-      scale: 0.9
-    }, {
-      scale: 0.9
-    }, "start")
 
     const generalChildren = this.general.nativeElement.children;
     for (let i = 0; i < generalChildren.length; i++) {
       const textPart = generalChildren[i];
       timeline.from(textPart, {
         xPercent: 120,
         scale: 0.2,
-        duration: 0.6
-      }, "<0.2");
+        duration: 60
+      }, 10 + i * 30);
     }
 
     const personalChildren = this.personal.nativeElement.children;
@@ -96,10 +73,15 @@ export class AppComponent {
       timeline.from(personalPart, {
         xPercent: -120,
         scale: 0.2,
-        duration: 0.6
-      }, 0.1 + i*0.2);
+        duration: 60
+      }, 10 + i* 15);
     }
 
+    timeline.to(this.general.nativeElement, {
+      scale: 1,
+      duration: 60
+    });
+
     // this.childrenAnimationFrom(this.general, timeline, {
     //   xPercent: -120,
     //   scale: 0.2,