Skip to content

Commit dd666fe

Browse files
sid-devspotsid-devspot
committed
Added animation and responsive
1 parent 1b41a69 commit dd666fe

9 files changed

Lines changed: 207 additions & 178 deletions

‎docs/3rdpartylicenses.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
9292
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
9393

9494

95+
gsap
96+
Standard 'no charge' license: https://gsap.com/standard-license.
97+
9598
rxjs
9699
Apache-2.0
97100
Apache License

‎docs/index.html‎

Lines changed: 3 additions & 3 deletions
Large diffs are not rendered by default.

‎docs/main.129fe68782aa8511.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.61a752362ba2d199.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

docs/styles.85f0be19d1bc1746.css renamed to docs/styles.6e3441ac17296b57.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app.component.html‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h3>
2929
</div>
3030
</section>
3131

32-
<section class="app-about">
32+
<section class="app-about reveal">
3333
<header>
3434
<h2>What I Use & How I Build</h2>
3535
<p>
@@ -125,7 +125,7 @@ <h2>The Idea</h2>
125125
real financial scenarios.
126126
</p>
127127
</header>
128-
<div class="idea-set">
128+
<div class="idea-set reveal-group">
129129
<div class="idea-item">
130130
<img src="./assets/walrec-assets/img02-1.svg" alt="" />
131131
</div>
@@ -192,18 +192,6 @@ <h2>Product Overview</h2>
192192
<img src="./assets/walrec-assets/img03.svg" alt="" />
193193
</div>
194194
</div>
195-
196-
<div class="project-set project-set-05">
197-
<header>
198-
<h2>Tech Stack</h2>
199-
</header>
200-
<ul>
201-
<li>Angular</li>
202-
<li>Firebase</li>
203-
<li>React Native (Expo)</li>
204-
<li>Chart Libraries</li>
205-
</ul>
206-
</div>
207195
</section>
208196

209197
<section class="app-project app-travel app-top-space">

‎src/app/app.component.ts‎

Lines changed: 73 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,170 +1,101 @@
11
import {
22
Component,
3-
ElementRef,
4-
HostListener,
53
OnInit,
6-
QueryList,
7-
ViewChildren,
4+
AfterViewInit,
5+
HostListener,
86
} from '@angular/core';
97

8+
import gsap from 'gsap';
9+
import { ScrollTrigger } from 'gsap/ScrollTrigger';
10+
11+
gsap.registerPlugin(ScrollTrigger);
12+
1013
@Component({
1114
selector: 'app-root',
1215
templateUrl: './app.component.html',
1316
styleUrls: ['./app.component.scss'],
1417
})
15-
export class AppComponent implements OnInit {
16-
currecntComp: string = 'home';
17-
@ViewChildren('sectionRef') sections!: QueryList<ElementRef<HTMLElement>>;
18+
export class AppComponent implements OnInit, AfterViewInit {
1819
screenWidth: number = window.innerWidth;
1920
screenHeight: number = window.innerHeight;
2021

21-
projects: any = {
22-
walrec: [
23-
{
24-
img: './assets/Walrec/screenshot-01.png',
25-
alt: 'Screenshot 01',
26-
title: 'Login & Signup',
27-
content: 'Basic username/password auth & Email',
28-
},
29-
{
30-
img: './assets/Walrec/screenshot-02.png',
31-
alt: 'Screenshot 02',
32-
title: 'Dashboard',
33-
content: 'Income & expenses in chart/calendar view',
34-
},
35-
{
36-
img: './assets/Walrec/screenshot-03.png',
37-
alt: 'Screenshot 03',
38-
title: 'Expense & Income',
39-
content: 'Add expenses with custom',
40-
},
41-
{
42-
img: './assets/Walrec/screenshot-04.png',
43-
alt: 'Screenshot 04',
44-
title: 'Budget',
45-
content: 'Track EMIs, subscriptions, etc.',
46-
},
47-
{
48-
img: './assets/Walrec/screenshot-05.png',
49-
alt: 'Screenshot 05',
50-
title: 'Record',
51-
content: 'Deatiled Record about Income and Expense',
52-
},
53-
{
54-
img: './assets/Walrec/screenshot-06.png',
55-
alt: 'Screenshot 06',
56-
title: 'Profile',
57-
content: 'Emoji-based avatar and user info',
58-
},
59-
],
60-
tarvellerSpond: [
61-
{
62-
img: './assets/Travellerspond/screenshot-01.png',
63-
alt: 'Screenshot 01',
64-
title: 'Home',
65-
content: 'Highlights travel categories with eye-catching visuals',
66-
},
67-
{
68-
img: './assets/Travellerspond/screenshot-02.png',
69-
alt: 'Screenshot 02',
70-
title: 'Tour Listings',
71-
content: 'Detailed international & domestic packages',
72-
},
73-
{
74-
img: './assets/Travellerspond/screenshot-03.png',
75-
alt: 'Screenshot 03',
76-
title: 'Tour Listings',
77-
content: 'Detailed international & domestic packages',
78-
},
79-
{
80-
img: './assets/Travellerspond/screenshot-04.png',
81-
alt: 'Screenshot 04',
82-
title: 'Contact',
83-
content: 'Users can submit queries for quick follow-up',
84-
},
85-
{
86-
img: './assets/Travellerspond/screenshot-05.png',
87-
alt: 'Screenshot 05',
88-
title: 'Admin Login',
89-
content: 'Authenticated access for travel agency staff',
90-
},
91-
{
92-
img: './assets/Travellerspond/screenshot-06.png',
93-
alt: 'Screenshot 06',
94-
title: 'Responsive Design',
95-
content: 'Mobile-optimized and touch-friendly UI',
96-
},
97-
],
98-
};
99-
100-
walrecCount = 0;
101-
walrectCurrentProject: any = this.projects.walrec[this.walrecCount];
102-
travellerCount = 0;
103-
travellerCurrentProject: any = this.projects.tarvellerSpond[this.travellerCount];
104-
10522
constructor() {}
10623

107-
ngOnInit() {}
24+
ngOnInit(): void {}
10825

10926
ngAfterViewInit(): void {
110-
const observer = new IntersectionObserver(
111-
(entries) => {
112-
entries.forEach((entry) => {
113-
const section = entry.target as HTMLElement;
114-
if (entry.isIntersecting) {
115-
section.classList.remove('inactive');
116-
} else {
117-
section.classList.add('inactive');
118-
}
119-
});
120-
},
121-
{
122-
threshold: 0.5,
123-
}
124-
);
125-
126-
this.sections.forEach((section) => observer.observe(section.nativeElement));
27+
this.initScrollAnimations();
12728
}
12829

129-
nextProject(param: string) {
130-
if (param === 'walrec') {
131-
if (this.walrecCount < this.projects.walrec.length - 1) {
132-
this.walrecCount++;
133-
this.walrectCurrentProject =
134-
this.projects.walrec[this.walrecCount];
135-
}
136-
}
137-
138-
if (param === 'travellerspond') {
139-
if (this.travellerCount < this.projects.tarvellerSpond.length - 1) {
140-
this.travellerCount++;
141-
this.travellerCurrentProject =
142-
this.projects.tarvellerSpond[this.travellerCount];
143-
}
144-
}
145-
}
30+
initScrollAnimations() {
31+
const sections = gsap.utils.toArray<HTMLElement>(
32+
'.app-home, .app-about, .app-project, .app-contact'
33+
);
14634

147-
previousProject(param: string) {
148-
if (param === 'walrec') {
149-
if (this.walrecCount > 0) {
150-
this.walrecCount--;
151-
this.walrectCurrentProject =
152-
this.projects.walrec[this.walrecCount];
153-
}
154-
}
35+
sections.forEach((section) => {
36+
// 🔹 MAIN REVEAL
37+
gsap.fromTo(
38+
section,
39+
{
40+
opacity: 0,
41+
y: 120,
42+
scale: 0.96,
43+
filter: 'blur(10px)',
44+
},
45+
{
46+
opacity: 1,
47+
y: 0,
48+
scale: 1,
49+
filter: 'blur(0px)',
50+
ease: 'power3.out',
51+
scrollTrigger: {
52+
trigger: section,
53+
start: 'top 85%',
54+
end: 'top 30%',
55+
scrub: true,
56+
},
57+
}
58+
);
15559

156-
if (param === 'travellerspond') {
157-
if (this.travellerCount > 0) {
158-
this.travellerCount--;
159-
this.travellerCurrentProject =
160-
this.projects.tarvellerSpond[this.travellerCount];
161-
}
162-
}
60+
ScrollTrigger.create({
61+
trigger: section,
62+
start: 'top 50%',
63+
end: 'bottom 50%',
64+
onEnter: () => {
65+
gsap.to(section, {
66+
opacity: 1,
67+
scale: 1,
68+
duration: 0.4,
69+
});
70+
},
71+
onLeave: () => {
72+
gsap.to(section, {
73+
opacity: 0.6,
74+
scale: 0.98,
75+
duration: 0.4,
76+
});
77+
},
78+
onEnterBack: () => {
79+
gsap.to(section, {
80+
opacity: 1,
81+
scale: 1,
82+
duration: 0.4,
83+
});
84+
},
85+
onLeaveBack: () => {
86+
gsap.to(section, {
87+
opacity: 0.6,
88+
scale: 0.98,
89+
duration: 0.4,
90+
});
91+
},
92+
});
93+
});
16394
}
16495

16596
@HostListener('window:resize', ['$event'])
16697
onResize(event: Event) {
16798
this.screenWidth = window.innerWidth;
16899
this.screenHeight = window.innerHeight;
169100
}
170-
}
101+
}

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>DevSpot</title>
6-
<base href="/devspot/" />
6+
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="favicon.ico" />
99
<link

0 commit comments

Comments
 (0)