Skip to content

Commit f593503

Browse files
committed
Add scroll effect to start the angler animation
2 parents f84f343 + 51dc329 commit f593503

File tree

6 files changed

+398
-412
lines changed

6 files changed

+398
-412
lines changed

css/index.css

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ html.sr .load-hidden {
183183
.navigation .nav .hamburger p {
184184
width: 35px;
185185
height: 3px;
186-
background-color: rgba(255, 251, 245, 0.9);
186+
background-color: #000000;
187187
margin: 4px 0;
188188
}
189189
.navigation .sideNav {
@@ -449,7 +449,7 @@ header .jumboTxt p {
449449
padding: 1px;
450450
}
451451
.home h2 {
452-
font-family: 'Yellowtail', 'cursive';
452+
font-family: "Yellowtail", "cursive";
453453
}
454454
.home .area {
455455
background: #cfc7bb;
@@ -460,21 +460,10 @@ header .jumboTxt p {
460460
background: rgba(255, 251, 245, 0.9);
461461
padding: 40px;
462462
}
463-
.home #about .main {
464-
display: flex;
465-
justify-content: space-around;
466-
align-items: center;
467-
}
468-
@media (max-width: 751px) {
469-
.home #about .main {
470-
flex-direction: column;
471-
}
472-
}
473463
.home #about .main p {
474464
font-size: 1.5rem;
475465
line-height: 1.5;
476466
padding-top: 20px;
477-
font-weight: bold;
478467
}
479468
.home #projects a {
480469
text-decoration: none;
@@ -572,7 +561,7 @@ header .jumboTxt p {
572561
padding: 0 2%;
573562
}
574563
.home #projects .pro::after {
575-
content: '';
564+
content: "";
576565
width: 260px;
577566
height: 260px;
578567
position: absolute;
@@ -620,6 +609,7 @@ header .jumboTxt p {
620609
.home #experience .exp .block .date {
621610
font-style: italic;
622611
font-size: 0.9rem;
612+
margin: 7px 0;
623613
}
624614
.home #experience .exp .block .description {
625615
font-size: 1.1rem;

index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ <h2>About</h2>
5757
<div class="main">
5858
<p>I am a full stack web developer with practical experience in building web apps with React, Node, and
5959
SQLite. My burning curiosity for web development began after my realization that I was joining the wrong
60-
field. Immediately after, I started to look at programs and classes to learn about coding. Now I have an
60+
field. Immediately after, I started to look at programs and classes to learn about coding.</p>
61+
<p>Now I have an
6162
appetite for learning new languages and frameworks to develop my knowledge about Front-end and Back-end
6263
engineering. Whenever I am not learning new concepts, I enjoy hanging out with friends and family or
6364
playing video games. Presently, I am seeking a position where I will work with a tight knit team and build
@@ -146,7 +147,7 @@ <h5>Skills</h5>
146147
<img class="seahorse fish" src="./images/fish/seahorse.svg" alt="shark">
147148
<img src="" alt="">
148149
<div class="container area left">
149-
<h2>Professional Experience</h2>
150+
<h2>Experience</h2>
150151
<div class="exp">
151152
<div class="job block">
152153
<h3>Section Lead</h3>

js/main.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,12 @@ let slideLeft = {
1313
origin: 'left',
1414
opacity: 0,
1515
delay: '400',
16-
duration: '1500',
1716
};
1817
let slideRight = {
1918
distance: '150%',
2019
origin: 'right',
2120
opacity: 0,
2221
delay: '400',
23-
duration: '1500',
2422
};
2523

2624
ScrollReveal().reveal('.left', slideLeft);
@@ -82,16 +80,19 @@ const hamburger = document.querySelector('.hamburger');
8280
const fishNav = document.querySelector('.navFish');
8381
const sideNav = document.querySelector('.sideNav');
8482
const sections = document.querySelectorAll('nav a');
83+
const home = document.querySelector('.home');
84+
const header = document.querySelector('header');
8585

8686
hamburger.addEventListener('click', function() {
8787
let tl = new TimelineLite();
8888
sideNav.style.display = 'block';
89-
tl.to(hamburger, 0.2, {
89+
open = true;
90+
tl.to(hamburger, 0.1, {
9091
scale: 0.7,
9192
})
9293
.fromTo(
9394
sideNav,
94-
1.5,
95+
0.75,
9596
{
9697
x: '100%',
9798
},
@@ -105,7 +106,19 @@ hamburger.addEventListener('click', function() {
105106
},
106107
}
107108
)
108-
.to(hamburger, 0.5, { display: 'none' }, '-=1.6');
109+
.to(hamburger, 0.5, { display: 'none' }, '-=1');
110+
});
111+
112+
home.addEventListener('click', function() {
113+
if (open) {
114+
closeNav();
115+
}
116+
});
117+
118+
header.addEventListener('click', function() {
119+
if (open) {
120+
closeNav();
121+
}
109122
});
110123

111124
fishNav.addEventListener('click', closeNav);
@@ -117,8 +130,8 @@ sections.forEach(el => {
117130
function closeNav() {
118131
let tl = new TimelineLite();
119132
tl.to(hamburger, 0.01, { scale: 1 })
120-
.to(fishNav, 1, { x: -30, rotationY: 180 })
121-
.to(sideNav, 1.5, { x: '120%' })
133+
.to(fishNav, 0.5, { x: -30, rotationY: 180 })
134+
.to(sideNav, 0.75, { x: '120%' })
122135
.to(hamburger, 0.5, { display: 'flex' }, '-=1')
123136
.to(fishNav, 0.01, { rotationY: 0, x: 0 });
124137
}

0 commit comments

Comments
 (0)