Skip to content

Commit d95ffe3

Browse files
LnleiteLnleite
committed
2 parents 4ea6783 + 07fbcc4 commit d95ffe3

File tree

5 files changed

+469
-389
lines changed

5 files changed

+469
-389
lines changed

‎css/index.css‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -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;
@@ -458,7 +458,7 @@ header .jumboTxt p {
458458
position: relative;
459459
z-index: 5;
460460
background: rgba(255, 251, 245, 0.9);
461-
padding: 40px;
461+
padding: 40px 5%;
462462
}
463463
.home #about .main p {
464464
font-size: 1.5rem;
@@ -487,7 +487,7 @@ header .jumboTxt p {
487487
.home #projects .project {
488488
width: 260px;
489489
height: 400px;
490-
margin: 30px 6%;
490+
margin: 30px 6% 30px 0;
491491
float: left;
492492
perspective: 1000px;
493493
}
@@ -498,9 +498,6 @@ header .jumboTxt p {
498498
transform: translateZ(-130px);
499499
transition: transform 350ms 200ms;
500500
}
501-
.home #projects .pro:hover {
502-
transform: rotateY(-78deg) translateZ(20px);
503-
}
504501
.home #projects .pro .poster,
505502
.home #projects .pro .info {
506503
position: absolute;
@@ -515,6 +512,10 @@ header .jumboTxt p {
515512
.home #projects .pro .lambdanotes {
516513
background-image: url(../images/lambdaNotesImg.PNG);
517514
}
515+
.home #projects .pro .oerbookr {
516+
background-image: url(../images/OERBookr.PNG);
517+
background-position: center;
518+
}
518519
.home #projects .pro .poster {
519520
transform: translateZ(130px);
520521
background-size: cover;
@@ -560,8 +561,11 @@ header .jumboTxt p {
560561
.home #projects .pro .info .skills p {
561562
padding: 0 2%;
562563
}
564+
.home #projects .pro:hover {
565+
transform: rotateY(-78deg) translateZ(20px);
566+
}
563567
.home #projects .pro::after {
564-
content: "";
568+
content: '';
565569
width: 260px;
566570
height: 260px;
567571
position: absolute;
@@ -587,6 +591,11 @@ header .jumboTxt p {
587591
.home #projects .pro:hover .info {
588592
box-shadow: inset 0px 0px 40px rgba(0, 0, 0, 0);
589593
}
594+
@media (max-width: 501px) {
595+
.home #experience h2 {
596+
font-size: 4.7rem;
597+
}
598+
}
590599
.home #experience .exp {
591600
display: flex;
592601
justify-content: space-between;

‎images/OERBookr.PNG‎

672 KB
Loading

‎index.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,36 @@ <h2>About</h2>
7878
<h2>Projects</h2>
7979
<div class="wrapper">
8080
<ul class="stage">
81+
<a href="https://oerbookr2br.netlify.com/" target="_blank">
82+
<li class="project">
83+
<div class="pro">
84+
<div class="poster oerbookr">
85+
<div class="overlay"></div>
86+
<h4>OERBookr</h4>
87+
</div>
88+
<div class="info">
89+
<p>
90+
OERBookr is an open educatoinal resources textbook website for teacher. It was built within a
91+
week with the help of five developers from different experinece levels.
92+
My responsibility as Scrum Master let me work, guide, and code in every
93+
area of the project to complete it on time.
94+
</p>
95+
<div>
96+
<h5>Skills</h5>
97+
<div class="skills">
98+
<p>HTML</p>
99+
<p>LESS</p>
100+
<p>React</p>
101+
<p>Redux</p>
102+
<p>Node.js</p>
103+
<p>Express</p>
104+
<p>SQLite</p>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</li>
110+
</a>
81111
<a href="https://www.mappajob.com/" target="_blank">
82112
<li class="project">
83113
<div class="pro">
@@ -381,7 +411,7 @@ <h2>Tech</h2>
381411
<div class="container">
382412
<div class="main">
383413
<p>Contact me at:</p>
384-
<img src="./images/emailImg.PNG" alt="email">
414+
<img src="./images/emailImg.PNG" alt="email" onclick="location.href='mailto:[email protected]';">
385415
<div class="links">
386416
<a href="https://www.linkedin.com/in/laurendubose/"><i class="fab fa-linkedin"></i></a>
387417
<a href="https://twitter.com/lndubose13"><i class="fab fa-twitter-square"></i></a>

‎js/main.js‎

Lines changed: 111 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,143 @@
1-
let jumboImg = document.querySelector(".jumboImg");
1+
let jumboImg = document.querySelector('.jumboImg');
22

33
const fakeImage = new Image();
4-
fakeImage.src = "images/jumboImg.jpg";
4+
fakeImage.src = 'images/jumboImg.jpg';
55

6-
fakeImage.addEventListener("load", function() {
7-
jumboImg.classList.remove("loading");
6+
fakeImage.addEventListener('load', function() {
7+
jumboImg.classList.remove('loading');
88
});
99

1010
// Scroll Reveal
1111
let slideLeft = {
12-
distance: "150%",
13-
origin: "left",
14-
opacity: 0,
15-
delay: "400",
12+
distance: '150%',
13+
origin: 'left',
14+
opacity: 0,
15+
delay: '400',
1616
};
1717
let slideRight = {
18-
distance: "150%",
19-
origin: "right",
20-
opacity: 0,
21-
delay: "400",
18+
distance: '150%',
19+
origin: 'right',
20+
opacity: 0,
21+
delay: '400',
2222
};
2323

24-
ScrollReveal().reveal(".left", slideLeft);
25-
ScrollReveal().reveal(".right", slideRight);
24+
ScrollReveal().reveal('.left', slideLeft);
25+
ScrollReveal().reveal('.right', slideRight);
2626

2727
// Fish
28-
let fish = document.querySelector(".singleFish");
29-
let eye = document.querySelector(".eye");
28+
let fish = document.querySelector('.singleFish');
29+
let eye = document.querySelector('.eye');
3030

3131
function swim() {
32-
let main = document.querySelector("#contact .main");
33-
fish.classList.add("swimAngler");
34-
if (!main.style.opacity) {
35-
main.style.opacity = 1;
36-
}
32+
let main = document.querySelector('#contact .main');
33+
fish.classList.add('swimAngler');
34+
if (!main.style.opacity) {
35+
main.style.opacity = 1;
36+
}
3737
}
3838

39-
fish.addEventListener("mouseover", function(event) {
40-
eye.classList.add("openeye");
41-
TweenLite.to(fish, 8, {
42-
onStart: swim,
43-
ease: Circ.ease,
44-
x: "100%",
45-
delay: 1,
46-
onComplete: function() {
47-
fish.classList.remove("swimAngler");
48-
fish.style.opacity = 0;
49-
},
50-
});
51-
});
39+
window.onscroll = function() {
40+
let d = document.documentElement;
41+
let offset = d.scrollTop + window.innerHeight;
42+
let height = d.offsetHeight;
5243

53-
// Navigation
54-
const hamburger = document.querySelector(".hamburger");
55-
const fishNav = document.querySelector(".navFish");
56-
const sideNav = document.querySelector(".sideNav");
57-
const sections = document.querySelectorAll("nav a");
58-
const home = document.querySelector(".home");
59-
const header = document.querySelector("header");
60-
61-
hamburger.addEventListener("click", function() {
62-
let tl = new TimelineLite();
63-
sideNav.style.display = "block";
64-
open = true;
65-
tl.to(hamburger, 0.1, {
66-
scale: 0.7,
67-
})
68-
.fromTo(
69-
sideNav,
70-
0.75,
71-
{
72-
x: "100%",
73-
},
74-
{
75-
x: "0%",
76-
onStart: function() {
77-
fishNav.style.animation = "eat 2s";
78-
},
44+
if (offset === height) {
45+
if (offset === height) {
46+
}
47+
}
48+
};
49+
50+
function anglerMove() {
51+
eye.classList.add('openeye');
52+
TweenLite.to(fish, 8, {
53+
onStart: swim,
54+
ease: Circ.ease,
55+
x: '100%',
56+
delay: 1,
7957
onComplete: function() {
80-
fishNav.style.animation = "none";
58+
fish.classList.remove('swimAngler');
59+
fish.style.opacity = 0;
8160
},
82-
}
83-
)
84-
.to(hamburger, 0.5, { display: "none" }, "-=1");
61+
});
62+
}
63+
64+
window.onscroll = function() {
65+
let pageHeight = document.documentElement.offsetHeight,
66+
windowHeight = window.innerHeight,
67+
scrollPosition =
68+
window.scrollY ||
69+
window.pageYOffset ||
70+
document.body.scrollTop +
71+
((document.documentElement &&
72+
document.documentElement.scrollTop) ||
73+
0);
74+
75+
if (pageHeight <= windowHeight + scrollPosition) {
76+
anglerMove();
77+
}
78+
};
79+
80+
fish.addEventListener('mouseover', function() {
81+
anglerMove();
82+
});
83+
84+
// Navigation
85+
const hamburger = document.querySelector('.hamburger');
86+
const fishNav = document.querySelector('.navFish');
87+
const sideNav = document.querySelector('.sideNav');
88+
const sections = document.querySelectorAll('nav a');
89+
const home = document.querySelector('.home');
90+
const header = document.querySelector('header');
91+
92+
hamburger.addEventListener('click', function() {
93+
let tl = new TimelineLite();
94+
sideNav.style.display = 'block';
95+
open = true;
96+
tl.to(hamburger, 0.1, {
97+
scale: 0.7,
98+
})
99+
.fromTo(
100+
sideNav,
101+
0.75,
102+
{
103+
x: '100%',
104+
},
105+
{
106+
x: '0%',
107+
onStart: function() {
108+
fishNav.style.animation = 'eat 2s';
109+
},
110+
onComplete: function() {
111+
fishNav.style.animation = 'none';
112+
},
113+
}
114+
)
115+
.to(hamburger, 0.5, { display: 'none' }, '-=1');
85116
});
86117

87-
home.addEventListener("click", function() {
88-
if (open) {
89-
closeNav();
90-
}
118+
home.addEventListener('click', function() {
119+
if (open) {
120+
closeNav();
121+
}
91122
});
92123

93-
header.addEventListener("click", function() {
94-
if (open) {
95-
closeNav();
96-
}
124+
header.addEventListener('click', function() {
125+
if (open) {
126+
closeNav();
127+
}
97128
});
98129

99-
fishNav.addEventListener("click", closeNav);
130+
fishNav.addEventListener('click', closeNav);
100131
// sections.addEventListener("click", closeNav);
101132
sections.forEach(el => {
102-
el.addEventListener("click", closeNav);
133+
el.addEventListener('click', closeNav);
103134
});
104135

105136
function closeNav() {
106-
let tl = new TimelineLite();
107-
tl.to(hamburger, 0.01, { scale: 1 })
108-
.to(fishNav, 0.5, { x: -30, rotationY: 180 })
109-
.to(sideNav, 0.75, { x: "120%" })
110-
.to(hamburger, 0.5, { display: "flex" }, "-=1")
111-
.to(fishNav, 0.01, { rotationY: 0, x: 0 });
137+
let tl = new TimelineLite();
138+
tl.to(hamburger, 0.01, { scale: 1 })
139+
.to(fishNav, 0.5, { x: -30, rotationY: 180 })
140+
.to(sideNav, 0.75, { x: '120%' })
141+
.to(hamburger, 0.5, { display: 'flex' }, '-=1')
142+
.to(fishNav, 0.01, { rotationY: 0, x: 0 });
112143
}

0 commit comments

Comments
 (0)