.png)
Personal Website Project
The webpages you are seeing here were created to showcase my best work, skills and experience.
This project took a total of four weeks to complete from start to finish. The time could be cut down considerably if attempted a second time as it took a little bit of time to refresh my HTML, CSS and JavaScript knowledge.
Vertical Header
Using a small JavaScript function I was able to create a verticle header that appears when the user scrolls below the top threshold. Additioanlly the header lowers itself in relation to how far down the page the user is.
1 function scrollMovement() {
2 var vHeader = document.querySelector(".vertical-header");
3 var scrollPosition = window.scrollY || window.pageYOffset
4 var totalPageHeight = document.body.scrollHeight - window.innerHeight;
5 var maxPosition = 20;
6
7 var newPosition = 0;
8
9 if (scrollPosition > 0) {
10 newPosition = (Math.min(scrollPosition / totalPageHeight, 1)) * maxPosition + 8;
11 }
12
13 vHeader.style.top = newPosition + "%";
14 }
15 window.addEventListener("scroll", scrollMovement);
1 .skills-inner-container {
2 position: relative;
3 justify-content: center;
4 align-items: center;
5 display: flex;
6 flex-direction: column;
7
8 width: 30%;
9 height: 650px;
10 background-color: rgb(7, 7, 7);
11
12 gap: 1rem;
13 border-radius: 15px;
14
15 transition: ease-in-out 0.7s all;
16 }
17
18 .skills-inner-container:hover {
19 transform: translateY(30px);
20 transition: ease-in-out 0.7s all;
21 }
22
23 .skills-inner-container:hover > .skills-inner-container-title {
24 transform: translateY(70px);
25 transition: ease-in-out 0.7s all;
26 color: rgb(32, 162, 179);
27 }
28
29 .skills-inner-container-text {
30 width: 100%;
31 height: 100%;
32 position: absolute;
33 align-items: center;
34 display: flex;
35 flex-direction: column;
36
37 text-align: center;
38 opacity: 0;
39
40 padding: 2rem 1rem 1rem 1rem;
41
42 transition: ease-in-out 0.7s all;
43
44 z-index: 999;
45 }
46
47 .skills-inner-container-text:hover {
48 transition: ease-in-out 0.7s all;
49 opacity: 1;
50 }
51
52 .skills-inner-container-title {
53 transition: ease-in-out 0.7s all;
54 }
Skills Animation
Using CSS was suffiecient enough to complete this task using CSS :hover tag to animate the opacity and location of the elements.Projects Animation
Similar to the skills animation shown above, the projects animation was done using CSS with the addition of using the @keyframes tag to control the animation.
1 .projects-inner-container:hover > .projects-inner-container-overlay {
2 animation: forwards revealProject 0.7s;
3 }
4
5 .projects-inner-container:hover > .projects-inner-container-overlay > p {
6 animation: forwards revealText 0.7s;
7 animation-delay: 0.5s;
8 }
9
10 .projects-inner-container-overlay {
11 width: 100%;
12 height: 100%;
13 background-color: rgb(20, 20, 20);
14
15 display: flex;
16 justify-content: center;
17 align-items: center;
18
19 position: absolute;
20
21 z-index: 1000;
22 opacity: 0;
23 }
24
25 @keyframes revealProject {
26 0% {opacity: 0; width: 0%; left: 0;}
27 100% {opacity: 1; width: 100%; left: 0;}
28 }
29
30 @keyframes revealText {
31 0% {opacity: 0;}
32 100% {opacity: 1;}
33 }