Skip to content

Commit

Permalink
Implement scrolling tracks active link.
Browse files Browse the repository at this point in the history
  • Loading branch information
mannanj committed May 1, 2024
1 parent 7bec352 commit aff7c67
Show file tree
Hide file tree
Showing 10 changed files with 272 additions and 214 deletions.
86 changes: 44 additions & 42 deletions src/app/components/about/about.component.html
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 8 additions & 1 deletion src/app/components/about/about.component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) {}

Expand All @@ -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);
}
}
22 changes: 12 additions & 10 deletions src/app/components/contact/contact/contact.component.html
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 8 additions & 1 deletion src/app/components/contact/contact/contact.component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) {}

Expand All @@ -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);
}

}
2 changes: 1 addition & 1 deletion src/app/components/home/home/home.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div #introDiv>
<div #main>
<h1>Mannan Javid</h1>
<hr>
<!-- Holistic engineer specializing in advancing people through technology and communication. -->
Expand Down
11 changes: 9 additions & 2 deletions src/app/components/home/home/home.component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) {}

Expand All @@ -20,7 +22,8 @@ export class HomeComponent {

ngOnDestroy(): void {
this._unsubscribe$.next();
this._unsubscribe$.complete();
this._unsubscribe$.complete();
this.intersectionObserver.disconnect();
}

_getData(): void {
Expand All @@ -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);
}
}
Loading

0 comments on commit aff7c67

Please sign in to comment.