Implement scrolling tracks active link.

src/app/components/about/about.component.html

@@ -1,42 +1,44 @@
-<h1>About</h1>
-<hr>
-
-<!-- I am a software engineer, leader, and follower. I'm passionate about facilitating success through clear communication and calculated risk taking. -->
-
-<!-- I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through strong practices, effective communication and calculated risk taking. -->
-
-<!-- I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through strong communication, strong practices,  and calculated risk taking. -->
-
-<!--         I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through  communication, effective practices, and asymmetric risk taking. -->
-<p>
-  I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through strong communication, effective practices, and asymmetric risk taking.
-</p>
-
-<!--         I grew through a career as a member of tight teams in risky and high velocity initiatives. I've had lots of experience building digital products in a variety of environments. I've also had experience coordinating teams. -->
-
-<!--         I grew through a career as a member of tight teams in fast-paced initiatives. I've had experience building unique products in a diverse range of environments, from non-profits, government, and commercial. -->
-<p>
-  I grew through a career as a member of tight teams in fast-paced initiatives. I've had experience building unique products in a range of environments, from non-profits to government and commercial.
-</p>
-
-<!-- variations I measure my success through the discipline of team to journey into the waters of the new and uncertain. -->
-<!-- My greatest passion is graceful growth,  -->
-<!-- My greatest passion is graceful communication,  -->
-<!-- My greatest passion is discovering the simple in the complex, and committing to the unwavering truth and -->
-<!-- My greatest passion is distilling the simplicity from the complex, being open to learn, and discovering the unwavering truth and possibility in trusting and authenticity in effectively communicating teams. -->
-<!-- My greatest passion is distilling the simplicity from the complex, being open to learn, and discovering the authenticity and power in effectively communicating teams. -->
-
-<!-- Synthesized -->
-<!-- I measure my success by the strength of my team to embrace the uncertain. My greatest passion is in embracing simplicity, being open to learn, and journeying through the power of authentically communicating teams. -->
-<!-- I measure my success by the strength of my team to embrace the uncertain. My greatest passion is in embracing simplicity, being open to learn, and journeying through the dance of authentic and trusting teams. -->
-<!-- I measure my success through the consistency of my team to journey into the uncertain. My greatest passion is sustainable growth, and my strongest traits are my knack for learning, my devotion to honesty, and my eagerness to experiment. -->
-<!--         I measure my success through the strength of my team to embrace the uncertain. My greatest passion is in embracing simplicity, being open to learn, and journeying through the dance of authentic and trusting teams. -->
-<!-- I measure my success by the strength of those around me to embrace the uncomfortable. My greatest passion is in embracing simplicity, being open to learn, and journeying through the dance of authentic and trusting teams. -->
-
-<!--         I measure my success by the strength of those around me in times of uncertainty. My greatest passion is to be open to learn, discover simplicity, and embrace the dance of authentically and trustfully communicating teams. -->
-
-<!--         I measure my success by the strength of those around me. My greatest passion is to be open to learn, discover simplicity, and embrace the dance of authentically and trustfully communicating teams. -->
-<p>
-  I measure my success by the strength of those around me. My greatest passion is to be open to learn, discover simplicity, and embrace the dance of authentically and trustfully communicating teams.
-</p>
-<button (click)="navService.goTo(navService.Links.resume)">View My Resume</button>
+<div #main>
+  <h1>About</h1>
+  <hr>
+
+  <!-- I am a software engineer, leader, and follower. I'm passionate about facilitating success through clear communication and calculated risk taking. -->
+
+  <!-- I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through strong practices, effective communication and calculated risk taking. -->
+
+  <!-- I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through strong communication, strong practices,  and calculated risk taking. -->
+
+  <!--         I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through  communication, effective practices, and asymmetric risk taking. -->
+  <p>
+    I am a multi-disciplinary engineer, leader, and student. I'm passionate about success through strong communication, effective practices, and asymmetric risk taking.
+  </p>
+
+  <!--         I grew through a career as a member of tight teams in risky and high velocity initiatives. I've had lots of experience building digital products in a variety of environments. I've also had experience coordinating teams. -->
+
+  <!--         I grew through a career as a member of tight teams in fast-paced initiatives. I've had experience building unique products in a diverse range of environments, from non-profits, government, and commercial. -->
+  <p>
+    I grew through a career as a member of tight teams in fast-paced initiatives. I've had experience building unique products in a range of environments, from non-profits to government and commercial.
+  </p>
+
+  <!-- variations I measure my success through the discipline of team to journey into the waters of the new and uncertain. -->
+  <!-- My greatest passion is graceful growth,  -->
+  <!-- My greatest passion is graceful communication,  -->
+  <!-- My greatest passion is discovering the simple in the complex, and committing to the unwavering truth and -->
+  <!-- My greatest passion is distilling the simplicity from the complex, being open to learn, and discovering the unwavering truth and possibility in trusting and authenticity in effectively communicating teams. -->
+  <!-- My greatest passion is distilling the simplicity from the complex, being open to learn, and discovering the authenticity and power in effectively communicating teams. -->
+
+  <!-- Synthesized -->
+  <!-- I measure my success by the strength of my team to embrace the uncertain. My greatest passion is in embracing simplicity, being open to learn, and journeying through the power of authentically communicating teams. -->
+  <!-- I measure my success by the strength of my team to embrace the uncertain. My greatest passion is in embracing simplicity, being open to learn, and journeying through the dance of authentic and trusting teams. -->
+  <!-- I measure my success through the consistency of my team to journey into the uncertain. My greatest passion is sustainable growth, and my strongest traits are my knack for learning, my devotion to honesty, and my eagerness to experiment. -->
+  <!--         I measure my success through the strength of my team to embrace the uncertain. My greatest passion is in embracing simplicity, being open to learn, and journeying through the dance of authentic and trusting teams. -->
+  <!-- I measure my success by the strength of those around me to embrace the uncomfortable. My greatest passion is in embracing simplicity, being open to learn, and journeying through the dance of authentic and trusting teams. -->
+
+  <!--         I measure my success by the strength of those around me in times of uncertainty. My greatest passion is to be open to learn, discover simplicity, and embrace the dance of authentically and trustfully communicating teams. -->
+
+  <!--         I measure my success by the strength of those around me. My greatest passion is to be open to learn, discover simplicity, and embrace the dance of authentically and trustfully communicating teams. -->
+  <p>
+    I measure my success by the strength of those around me. My greatest passion is to be open to learn, discover simplicity, and embrace the dance of authentically and trustfully communicating teams.
+  </p>
+  <button (click)="navService.goTo(navService.Links.resume)">View My Resume</button>
+</div>

src/app/components/about/about.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { Links } from 'src/app/forms/view';
 import { NavigationService } from 'src/app/services/navigation.service';
@@ -11,6 +11,8 @@ import { NavigationService } from 'src/app/services/navigation.service';
 export class AboutComponent {
   link: Links;
   private _unsubscribe$ = new Subject<void>();
+  @ViewChild('main') elementRef: ElementRef;
+  intersectionObserver: IntersectionObserver;
 
   constructor(public navService: NavigationService) {}
 
@@ -28,4 +30,9 @@ export class AboutComponent {
     .pipe(takeUntil(this._unsubscribe$))
     .subscribe((link: Links) => this.link = link);
   }
+
+  ngAfterViewInit() {
+    this.intersectionObserver = this.navService.checkIfComponentIsVisible(Links.about, 0.15);
+    this.intersectionObserver.observe(this.elementRef.nativeElement);
+  }
 }

src/app/components/contact/contact/contact.component.html

@@ -1,10 +1,12 @@
-<h1>Contact</h1>
-<hr>
-<a href= "mailto: [email protected]"> [email protected] </a>
-<!-- @TODO: [email protected] set up the domain. -->
-<!-- Other domains: manishere.com, manisher.com -->
-<br>
-<a href="tel:15712288302">+1 (571) 228-8302</a>
-<br>
-<p>Alexandria, Virginia</p>
-<button (click)="navService.goTo(navService.Links.home)">Back To Home</button>
+<div #main>
+    <h1>Contact</h1>
+    <hr>
+    <a href= "mailto: [email protected]"> [email protected] </a>
+    <!-- @TODO: [email protected] set up the domain. -->
+    <!-- Other domains: manishere.com, manisher.com -->
+    <br>
+    <a href="tel:15712288302">+1 (571) 228-8302</a>
+    <br>
+    <p>Alexandria, Virginia</p>
+    <button (click)="navService.goTo(navService.Links.home)">Back To Home</button>
+</div>

src/app/components/contact/contact/contact.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { Links } from 'src/app/forms/view';
 import { NavigationService } from 'src/app/services/navigation.service';
@@ -11,6 +11,8 @@ import { NavigationService } from 'src/app/services/navigation.service';
 export class ContactComponent {
   link: Links;
   private _unsubscribe$ = new Subject<void>();
+  @ViewChild('main') elementRef: ElementRef;
+  intersectionObserver: IntersectionObserver;
 
   constructor(public navService: NavigationService) {}
 
@@ -29,4 +31,9 @@ export class ContactComponent {
     .subscribe((link: Links) => this.link = link);
   }
 
+  ngAfterViewInit() {
+    this.intersectionObserver = this.navService.checkIfComponentIsVisible(Links.contact, 0.2);
+    this.intersectionObserver.observe(this.elementRef.nativeElement);
+  }
+
 }

src/app/components/home/home/home.component.html

@@ -1,4 +1,4 @@
-<div #introDiv>
+<div #main>
     <h1>Mannan Javid</h1>
     <hr>
     <!-- Holistic engineer specializing in advancing people through technology and communication. -->

src/app/components/home/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { NavigationService } from 'src/app/services/navigation.service';
 import { Links } from 'src/app/forms/view';
@@ -11,6 +11,8 @@ import { Links } from 'src/app/forms/view';
 export class HomeComponent {
   link: Links;
   private _unsubscribe$ = new Subject<void>();
+  @ViewChild('main') elementRef: ElementRef;
+  intersectionObserver: IntersectionObserver;
 
   constructor(public navService: NavigationService) {}
 
@@ -20,7 +22,8 @@ export class HomeComponent {
 
   ngOnDestroy(): void {
     this._unsubscribe$.next();
-    this._unsubscribe$.complete();      
+    this._unsubscribe$.complete();     
+    this.intersectionObserver.disconnect();
   }
 
   _getData(): void {
@@ -29,4 +32,8 @@ export class HomeComponent {
     .subscribe((link: Links) => this.link = link);
   }
 
+  ngAfterViewInit() {
+    this.intersectionObserver = this.navService.checkIfComponentIsVisible(Links.home, 0.2);
+    this.intersectionObserver.observe(this.elementRef.nativeElement);
+  }
 }