diff --git a/app.js b/app.js index a55ed59..14662b9 100644 --- a/app.js +++ b/app.js @@ -10,7 +10,7 @@ particlesJS('particles-js', } }, "color": { - "value": "#619b8A" + "value": "#5A6954" }, "shape": { "type": "circle", @@ -28,7 +28,7 @@ particlesJS('particles-js', } }, "opacity": { - "value": 0.5, + "value": 0.8, "random": false, "anim": { "enable": false, @@ -38,25 +38,25 @@ particlesJS('particles-js', } }, "size": { - "value": 5, + "value": 6, "random": true, "anim": { "enable": false, - "speed": 40, + "speed": 10, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, - "distance": 150, - "color": "#a1c181", - "opacity": 0.7, - "width": 1 + "distance": 125, + "color": "#5A6954", + "opacity": 1, + "width": 2 }, "move": { "enable": true, - "speed": 6, + "speed": 4, "direction": "none", "random": false, "straight": false, @@ -112,7 +112,7 @@ particlesJS('particles-js', "background_color": "#b61924", "background_image": "", "background_position": "50% 50%", - "background_repeat": "no-repeat", + "background_repeat": "repeat", "background_size": "cover" } } diff --git a/css/experience.css b/css/experience.css index 9f3294e..b55ffc1 100644 --- a/css/experience.css +++ b/css/experience.css @@ -16,7 +16,6 @@ line-height: 1.5; min-height: 100vh; font-family: "Outfit", sans-serif; - padding-bottom: 20vh; } .experience:hover .section_header h1 { @@ -84,11 +83,11 @@ } .experience .timeline-item:hover .card .button .hover-orange { - filter: invert(88%) sepia(94%) saturate(1799%) hue-rotate(305deg) brightness(101%) contrast(101%); + filter: invert(60%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); } .experience .timeline-item:hover .icon { - filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); + filter: invert(60%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); } .experience .timeline-item-icon { diff --git a/css/nav_home.css b/css/nav_home.css index 63e5f5a..2ebfd54 100644 --- a/css/nav_home.css +++ b/css/nav_home.css @@ -99,7 +99,7 @@ nav .nav-links a:last-child:hover::before { /* Styling for the welcome text and image */ .welcome-section { text-align: center; - padding: 6vh 0vh 0vh 0vh; + padding: 12vh 0vh 4vh 0vh; width: 100%; height: max-content; } @@ -203,18 +203,22 @@ nav .nav-links a:last-child:hover::before { margin: 0px 8px; } -#particles-js { - width: 100%; - height: 84vh; +#particles-js canvas { + display: block; + vertical-align: bottom; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + opacity: 1; + -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease; + transition: opacity .8s ease, transform 1.4s ease } -#particles-js .container { - position: absolute; - left: 0; - right: 0; - padding: 13vh 13vh 0vh 13vh; - height: 82vh; - margin-left: auto; - margin-right: auto; - width: max-content; +#particles-js { + width: 100%; + height: 100%; + position: fixed; + z-index: -10; + top: 0; + left: 0 } \ No newline at end of file diff --git a/css/utlities.css b/css/utlities.css index 084bbfd..35279b7 100644 --- a/css/utlities.css +++ b/css/utlities.css @@ -45,6 +45,10 @@ a { /*filter: invert(60%) sepia(64%) saturate(494%) hue-rotate(342deg) brightness(102%) contrast(101%);*/ --orange: #ff7f2d; /* filter: invert(55%) sepia(73%) saturate(1298%) hue-rotate(339deg) brightness(101%) contrast(102%); */ + + --light-green: #d7e8ba; + --green: #a1c181; + --dark-green: #5A6954; } ::-webkit-scrollbar { @@ -89,4 +93,17 @@ a { margin-bottom: 3rem; width: max-content; -} \ No newline at end of file +} + +footer { + padding: 2vh 0vh; +} + +footer p { + width: max-content; + margin-left: auto; + margin-right: auto; + font-weight: 700; + color: var(--orange); +} + diff --git a/index.html b/index.html index c56dd27..2c8dffb 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@
+ -