From ab50e9630ef593c977a9b153fe64e7fe5ac37db1 Mon Sep 17 00:00:00 2001 From: Timothy Pew Date: Mon, 19 Sep 2022 00:27:23 -0700 Subject: [PATCH] update styles & javascript Scrollbars were jumping the gutter in chromium browsers. Set scrollbar to always be present but styled to be less obtrusive. Switched per-button event handlers to a delegate on the document. --- app.js | 28 +- styles/styles.css | 90 ++-- styles/styles.css.map | 2 +- styles/styles.scss | 1159 +++++++++++++++++++++-------------------- 4 files changed, 660 insertions(+), 619 deletions(-) diff --git a/app.js b/app.js index df97f58c..031157b7 100644 --- a/app.js +++ b/app.js @@ -1,13 +1,15 @@ -(function () { - [...document.querySelectorAll(".control")].forEach(button => { - button.addEventListener("click", function() { - document.querySelector(".active-btn").classList.remove("active-btn"); - this.classList.add("active-btn"); - document.querySelector(".active").classList.remove("active"); - document.getElementById(button.dataset.id).classList.add("active"); - }) - }); - document.querySelector(".theme-btn").addEventListener("click", () => { - document.body.classList.toggle("light-mode"); - }) -})(); +;(function () { + document.addEventListener('click', function (e) { + if (e.target.matches('.control')) { + document.querySelector('.active-btn').classList.remove('active-btn') + e.target.classList.add('active-btn') + document.querySelector('.active').classList.remove('active') + document.getElementById(e.target.dataset.id).classList.add('active') + return + } + if (e.target.matches('.theme-btn')) { + document.body.classList.toggle('light-mode') + return + } + }) +})() diff --git a/styles/styles.css b/styles/styles.css index 39aa6c58..c790f6fd 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -5,10 +5,22 @@ list-style: none; } +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track { + background-color: var(--color-grey-5); +} + +::-webkit-scrollbar-thumb { + background-color: var(--color-grey-4); +} + :root { --color-primary: #191d2b; - --color-secondary: #27AE60; - --color-white: #FFFFFF; + --color-secondary: #27ae60; + --color-white: #ffffff; --color-black: #000; --color-grey0: #f8f8f8; --color-grey-1: #dbe1e8; @@ -18,12 +30,12 @@ --color-grey-5: #2a2e35; --color-grey-6: #12181b; --br-sm-2: 14px; - --box-shadow-1: 0 3px 15px rgba(0,0,0,.3); + --box-shadow-1: 0 3px 15px rgba(0, 0, 0, 0.3); } .light-mode { - --color-primary: #FFFFFF; - --color-secondary: #F56692; + --color-primary: #ffffff; + --color-secondary: #f56692; --color-white: #454e56; --color-black: #000; --color-grey0: #f8f8f8; @@ -41,6 +53,9 @@ body { font-size: 1.1rem; color: var(--color-white); transition: all 0.4s ease-in-out; + scrollbar-gutter: stable; + scroll-behavior: smooth; + overflow-y: scroll; } a { @@ -75,9 +90,18 @@ section { .active { display: block; - animation: appear 1s ease-in-out; + -webkit-animation: appear 1s ease-in-out; + animation: appear 1s ease-in-out; transform: translateY(0) scaleY(1); } +@-webkit-keyframes appear { + 0% { + transform: translateY(-100%) scaleY(0); + } + 100% { + transform: translateY(0) scaleY(1); + } +} @keyframes appear { 0% { transform: translateY(-100%) scaleY(0); @@ -168,7 +192,8 @@ section { left: 0; top: 0; z-index: -1; - clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); + -webkit-clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); + clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); } .header-content .left-header .image { border-radius: var(--br-sm-2); @@ -181,7 +206,8 @@ section { .header-content .left-header .image img { width: 100%; height: 100%; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; transition: all 0.4s ease-in-out; filter: grayscale(100%); } @@ -414,7 +440,8 @@ section { .portfolios .portfolio-item img { width: 100%; height: 300px; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; border-radius: 15px; } .portfolios .portfolio-item .hover-items { @@ -498,7 +525,8 @@ section { .blogs .blog img { width: 100%; height: 300px; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; border-top-left-radius: 5px; border-top-right-radius: 5px; filter: grayscale(100%); @@ -594,7 +622,8 @@ section { .contact-content-con .right-contact .input-control { margin: 1.5rem 0; } -.contact-content-con .right-contact .input-control input, .contact-content-con .right-contact .input-control textarea { +.contact-content-con .right-contact .input-control input, +.contact-content-con .right-contact .input-control textarea { border-radius: 30px; font-weight: inherit; font-size: inherit; @@ -698,21 +727,17 @@ section { header { padding: 0 !important; } - .theme-btn { width: 50px; height: 50px; } - .header-content { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; } - .left-header .h-shape { display: none; } - .right-header { grid-row: 1; padding-right: 0rem !important; @@ -724,12 +749,10 @@ section { text-align: center; padding-top: 3rem; } - .header-content .left-header .image { margin: 0 auto; width: 90%; } - .controls { top: auto; bottom: 0; @@ -743,7 +766,6 @@ section { .controls .control { margin: 1rem 0.3rem; } - .about-container { grid-template-columns: repeat(1, 1fr); } @@ -757,31 +779,25 @@ section { .about-container .left-about p { padding-left: 0; } - .timeline { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; } - .container { padding: 2rem 2.5rem !important; } - .about-stats .progress-bars { grid-template-columns: repeat(1, 1fr); } - .portfolios { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; margin-top: 1rem; } - .blogs { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; } - .contact-content-con { flex-direction: column; } @@ -789,20 +805,16 @@ section { margin-left: 0; margin-top: 2.5rem; } - .contact-content-con .right-contact .i-c-2 { flex-direction: column; } - .contact-content-con .right-contact .i-c-2 :last-child { margin-left: 0; margin-top: 1.5rem; } - .contact-content-con .right-contact { margin-bottom: 6rem; } - .contact-item { flex-direction: column; margin: 1rem 0; @@ -817,7 +829,6 @@ section { .contact-item .icon { grid-template-columns: 25px 1fr; } - .main-title h2 { font-size: 2rem; } @@ -832,7 +843,6 @@ section { .container { padding: 7rem 11rem; } - .contact-content-con { flex-direction: column; } @@ -840,20 +850,16 @@ section { margin-left: 0; margin-top: 2.5rem; } - .contact-content-con .right-contact .i-c-2 { flex-direction: column; } - .contact-content-con .right-contact .i-c-2 :last-child { margin-left: 0; margin-top: 1.5rem; } - .contact-content-con .right-contact { margin-bottom: 6rem; } - .main-title h2 .bg-text { font-size: 5.5rem; } @@ -863,11 +869,9 @@ section { grid-template-columns: repeat(2, 1fr); margin-top: 6rem; } - .portfolios { grid-template-columns: repeat(2, 1fr); } - .header-content .right-header { padding-right: 9rem; } @@ -876,7 +880,6 @@ section { .blogs { grid-template-columns: repeat(1, 1fr); } - .portfolios { grid-template-columns: repeat(1, 1fr); } @@ -888,7 +891,6 @@ section { .about-container .right-about { padding-top: 2.5rem; } - .main-title h2 { font-size: 4rem; } @@ -903,16 +905,13 @@ section { .container { padding: 7rem 6rem; } - .about-container .left-about { padding-right: 0rem; } - .header-content { grid-template-columns: repeat(1, 1fr); padding-bottom: 6rem; } - .left-header .h-shape { display: none; } @@ -920,7 +919,6 @@ section { width: 90% !important; margin: 0 auto !important; } - .right-header { grid-row: 1; padding-right: 0rem !important; @@ -937,19 +935,15 @@ section { .container { padding: 7rem 3rem; } - .about-stats .progress-bars { grid-template-columns: repeat(1, 1fr); } - .about-container .right-about { grid-template-columns: repeat(1, 1fr); } - .timeline { grid-template-columns: repeat(1, 1fr); } - .main-title h2 { font-size: 3rem; } @@ -959,6 +953,4 @@ section { .main-title h2 .bg-text { font-size: 4rem; } -} - -/*# sourceMappingURL=styles.css.map */ +}/*# sourceMappingURL=styles.css.map */ \ No newline at end of file diff --git a/styles/styles.css.map b/styles/styles.css.map index 39653e31..aa232e65 100644 --- a/styles/styles.css.map +++ b/styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["styles.scss","_media.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;AACA;EACI;IAAI;;EACJ;IAAM;;;;AAKd;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EAAI;;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACI;EACA;EACA;;;AAKR;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAO;;AAEX;EACI;EACA;;;AAKZ;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOpB;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;;AAKZ;EACI;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAAQ;;AACR;EAAO;;AACP;EAAM;;AACN;EAAQ;;AACR;EAAO;;AACP;EAAS;;;AAM7B;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EAAG;;;AAKX;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AACA;EAAI;;;AAQ5B;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAU;;AAEd;EACI;EACA;EACA;;;AAQhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAIA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;;AACA;EACI;;AAGR;EACI;EACA;;;AAMZ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAY;;AACZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAMZ;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAO;;AACP;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzpBZ;EACI;;;AAGJ;EACI;IACI;;;EAEJ;IACI;IACA;;;EAEJ;IACI;IACA;;;EAIA;IACI;;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;EAGR;IACI;IACA;;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACI;;;EAIR;IACI;;EACA;IACI;IACA;;EAEJ;IACI;;EACA;IACI;;;EAKZ;IACI;IACA;;;EAGJ;IACI;;;EAIA;IACI;;;EAIR;IACI;IACA;IACA;;;EAGJ;IACI;IACA;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAGJ;IACI;IACA;;EACA;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;;EAMJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAKI;IACI;;;AAUhB;EACI;IACI;IACA;;;EAEJ;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;EACA;IACI;;;EAIJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;IACA;;;EAIA;IACI;;EAEJ;IACI;IACA;;;EAIR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;AAIZ;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;;;EAGJ;IACI;;;EAGA;IACI;;EACA;IACI;;EAEJ;IACI","file":"styles.css"} \ No newline at end of file +{"version":3,"sources":["styles.scss","styles.css","_media.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file diff --git a/styles/styles.scss b/styles/styles.scss index 8c325ebd..12e9f586 100644 --- a/styles/styles.scss +++ b/styles/styles.scss @@ -1,671 +1,718 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; - list-style: none; + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; +} + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track { + background-color: var(--color-grey-5); +} + +::-webkit-scrollbar-thumb { + background-color: var(--color-grey-4); } :root { - --color-primary: #191d2b; - --color-secondary: #27AE60; - --color-white: #FFFFFF; - --color-black: #000; - --color-grey0: #f8f8f8; - --color-grey-1: #dbe1e8; - --color-grey-2: #b2becd; - --color-grey-3: #6c7983; - --color-grey-4: #454e56; - --color-grey-5: #2a2e35; - --color-grey-6: #12181b; - --br-sm-2: 14px; - --box-shadow-1: 0 3px 15px rgba(0,0,0,.3); + --color-primary: #191d2b; + --color-secondary: #27ae60; + --color-white: #ffffff; + --color-black: #000; + --color-grey0: #f8f8f8; + --color-grey-1: #dbe1e8; + --color-grey-2: #b2becd; + --color-grey-3: #6c7983; + --color-grey-4: #454e56; + --color-grey-5: #2a2e35; + --color-grey-6: #12181b; + --br-sm-2: 14px; + --box-shadow-1: 0 3px 15px rgba(0, 0, 0, 0.3); } .light-mode { - --color-primary: #FFFFFF; - --color-secondary: #F56692; - --color-white: #454e56; - --color-black: #000; - --color-grey0: #f8f8f8; - --color-grey-1: #6c7983; - --color-grey-2: #6c7983; - --color-grey-3: #6c7983; - --color-grey-4: #454e56; - --color-grey-5: #f8f8f8; - --color-grey-6: #12181b; + --color-primary: #ffffff; + --color-secondary: #f56692; + --color-white: #454e56; + --color-black: #000; + --color-grey0: #f8f8f8; + --color-grey-1: #6c7983; + --color-grey-2: #6c7983; + --color-grey-3: #6c7983; + --color-grey-4: #454e56; + --color-grey-5: #f8f8f8; + --color-grey-6: #12181b; } body { - background-color: var(--color-primary); - font-family: 'Poppins', sans-serif; - font-size: 1.1rem; - color: var(--color-white); - transition: all .4s ease-in-out; + background-color: var(--color-primary); + font-family: 'Poppins', sans-serif; + font-size: 1.1rem; + color: var(--color-white); + transition: all 0.4s ease-in-out; + scrollbar-gutter: stable; + scroll-behavior: smooth; + overflow-y: scroll; } a { - display: inline-block; - text-decoration: none; - color: inherit; - font-family: inherit; + display: inline-block; + text-decoration: none; + color: inherit; + font-family: inherit; } header { - min-height: 100vh; - color: var(--color-white); - overflow: hidden; - padding: 0 !important; + min-height: 100vh; + color: var(--color-white); + overflow: hidden; + padding: 0 !important; } section { - min-height: 100vh; - width: 100%; - position: absolute; - left: 0; - top: 0; - padding: 3rem 18rem; + min-height: 100vh; + width: 100%; + position: absolute; + left: 0; + top: 0; + padding: 3rem 18rem; } .container { - display: none; - transform: translateY(-100%) scale(0); - transition: all .4s ease-in-out; - background-color: var(--color-primary); + display: none; + transform: translateY(-100%) scale(0); + transition: all 0.4s ease-in-out; + background-color: var(--color-primary); } - .active { - display: block; - animation: appear 1s ease-in-out; - transform: translateY(0) scaleY(1); - @keyframes appear { - 0%{ transform: translateY(-100%) scaleY(0); } - 100%{ transform: translateY(0) scaleY(1); } + display: block; + animation: appear 1s ease-in-out; + transform: translateY(0) scaleY(1); + @keyframes appear { + 0% { + transform: translateY(-100%) scaleY(0); + } + 100% { + transform: translateY(0) scaleY(1); } + } } //Controls .controls { - position: fixed; - z-index: 10; - top: 50%; - right: 3%; + position: fixed; + z-index: 10; + top: 50%; + right: 3%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transform: translateY(-50%); + .control { + padding: 1rem; + cursor: pointer; + background-color: var(--color-grey-4); + width: 55px; + height: 55px; + border-radius: 50%; display: flex; - flex-direction: column; - align-items: center; justify-content: center; - transform: translateY(-50%); - .control{ - padding: 1rem; - cursor: pointer; - background-color: var(--color-grey-4); - width: 55px; - height: 55px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - margin: .7rem 0; - box-shadow: var(--box-shadow-1) ; - i { - font-size: 1.2rem; - color: var(--color-grey-2); - pointer-events: none; - } + align-items: center; + margin: 0.7rem 0; + box-shadow: var(--box-shadow-1); + i { + font-size: 1.2rem; + color: var(--color-grey-2); + pointer-events: none; } - .active-btn { - background-color: var(--color-secondary); - transition: all .4s ease-in-out; - i { color: var(--color-white); } + } + .active-btn { + background-color: var(--color-secondary); + transition: all 0.4s ease-in-out; + i { + color: var(--color-white); } + } } .theme-btn { - top: 5%; - right: 3%; - width: 70px; - height: 70px; - border-radius: 50%; - background-color: var(--color-grey-4); - cursor: pointer; - position: fixed; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0 3px 15px rgba(0,0,0,.3); - transition: all .1s ease-in-out; - &:active{ transform: translateY(-3px); } - i{ - font-size: 1.4rem; - color: var(--color-grey-2); - pointer-events: none; - } + top: 5%; + right: 3%; + width: 70px; + height: 70px; + border-radius: 50%; + background-color: var(--color-grey-4); + cursor: pointer; + position: fixed; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3); + transition: all 0.1s ease-in-out; + &:active { + transform: translateY(-3px); + } + i { + font-size: 1.4rem; + color: var(--color-grey-2); + pointer-events: none; + } } - /*Header-content*/ .header-content { - display: grid; - grid-template-columns: repeat(2, 1fr); - min-height: 100vh; - .left-header { - display: flex; - align-items: center; - position: relative; - .h-shape { - transition: all .4s ease-in-out; - width: 65%; - height: 100%; - background-color: var(--color-secondary); - position: absolute; - left: 0; - top: 0; - z-index: -1; - clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); - } - .image { - border-radius: var(--br-sm-2); - height: 90%; - width: 68%; - margin-left: 4rem; - background-color: var(--color-black); - transition: all .4s ease-in-out; - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: all .4s ease-in-out; - filter: grayscale(100%); - &:hover{ - filter: grayscale(0); - } - } + display: grid; + grid-template-columns: repeat(2, 1fr); + min-height: 100vh; + .left-header { + display: flex; + align-items: center; + position: relative; + .h-shape { + transition: all 0.4s ease-in-out; + width: 65%; + height: 100%; + background-color: var(--color-secondary); + position: absolute; + left: 0; + top: 0; + z-index: -1; + clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); + } + .image { + border-radius: var(--br-sm-2); + height: 90%; + width: 68%; + margin-left: 4rem; + background-color: var(--color-black); + transition: all 0.4s ease-in-out; + img { + width: 100%; + height: 100%; + object-fit: cover; + transition: all 0.4s ease-in-out; + filter: grayscale(100%); + &:hover { + filter: grayscale(0); } + } } + } - .right-header { - display: flex; - flex-direction: column; - justify-content: center; - padding-right: 18rem; - .name { - font-size: 3rem; - span { color: var(--color-secondary); } - } - p { - margin: 1.5rem 0; - line-height: 2rem; - } + .right-header { + display: flex; + flex-direction: column; + justify-content: center; + padding-right: 18rem; + .name { + font-size: 3rem; + span { + color: var(--color-secondary); + } } + p { + margin: 1.5rem 0; + line-height: 2rem; + } + } } /*About*/ .about-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-top: 3.5rem; + padding-bottom: 5rem; + .right-about { display: grid; grid-template-columns: repeat(2, 1fr); - padding-top: 3.5rem; - padding-bottom: 5rem; - .right-about { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2rem; - .about-item { - border: 1px solid var(--color-grey-5); - border-radius: 5px; - transition: all .4s ease-in-out; - box-shadow: 1px 2px 15px rgba(0,0,0,.1); - &:hover { - cursor: default; - transform: translateY(-5px); - border: 1px solid var(--color-secondary); - box-shadow: 1px 4px 15px rgba(0,0,0,.32); - } - .abt-text { - padding: 1.5rem; - display: flex; - flex-direction: column; - .large-text { - font-size: 3rem; - font-weight: 700; - color: var(--color-secondary); - } - .small-text { - padding-left: 3rem; - position: relative; - text-transform: uppercase; - font-size: 1.2rem; - color: var(--color-grey-1); - letter-spacing: 2px; - &::before { - content: ''; - position: absolute; - left: 0; - top: 15px; - width: 2rem; - height: 2px; - background-color: var(--color-grey-5); - } - } - } - } - } - - .left-about { - padding-right: 5rem; - p { - line-height: 2rem; - padding: 1rem; - color: var(--color-grey-1); + grid-gap: 2rem; + .about-item { + border: 1px solid var(--color-grey-5); + border-radius: 5px; + transition: all 0.4s ease-in-out; + box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1); + &:hover { + cursor: default; + transform: translateY(-5px); + border: 1px solid var(--color-secondary); + box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32); + } + .abt-text { + padding: 1.5rem; + display: flex; + flex-direction: column; + .large-text { + font-size: 3rem; + font-weight: 700; + color: var(--color-secondary); } - h4 { - font-size: 2rem; - text-transform: uppercase; + .small-text { + padding-left: 3rem; + position: relative; + text-transform: uppercase; + font-size: 1.2rem; + color: var(--color-grey-1); + letter-spacing: 2px; + &::before { + content: ''; + position: absolute; + left: 0; + top: 15px; + width: 2rem; + height: 2px; + background-color: var(--color-grey-5); + } } + } } -} - -.about-stats { - padding-bottom: 4rem; - .progress-bars { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-gap: 2rem; - .progress-bar { - display: flex; - flex-direction: column; - .prog-title { - text-transform: uppercase; - font-weight: 500; - } - .progress-con { - display: flex; - align-items: center; - .prog-text { - color: var(--color-grey-2); - } - .progress { - width: 100%; - height: .45rem; - background-color: var(--color-grey-4); - margin-left: 1rem; - position: relative; - span { - position: absolute; - top: 0; - left: 0; - height: 100%; - background-color: var(--color-secondary); - transition: all .4s ease-in-out; - width: 60%; - } - .html { width: 80%; } - .css { width: 95%; } - .js { width: 75%; } - .react{ width: 60%; } - .node{ width: 87%; } - .python{ width: 70%; } - } - } - } + } + + .left-about { + padding-right: 5rem; + p { + line-height: 2rem; + padding: 1rem; + color: var(--color-grey-1); } -} -.stat-title { - text-transform: uppercase; - font-size: 1.4rem; - text-align: center; - padding: 3.5rem 0; - position: relative; - &::before { - content: ''; - position: absolute; - left: 50%; - top: 0; - width: 40%; - height: 1px; - background-color: var(--color-grey-5); - transform: translateX(-50%); + h4 { + font-size: 2rem; + text-transform: uppercase; } + } } -/*Timeline*/ -.timeline { +.about-stats { + padding-bottom: 4rem; + .progress-bars { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; - padding-bottom: 3rem; - .timeline-item { - position: relative; - padding-left: 3rem; - border-left: 1px solid var(--color-grey-5); - .tl-icon { + .progress-bar { + display: flex; + flex-direction: column; + .prog-title { + text-transform: uppercase; + font-weight: 500; + } + .progress-con { + display: flex; + align-items: center; + .prog-text { + color: var(--color-grey-2); + } + .progress { + width: 100%; + height: 0.45rem; + background-color: var(--color-grey-4); + margin-left: 1rem; + position: relative; + span { position: absolute; - left: -27px; top: 0; + left: 0; + height: 100%; background-color: var(--color-secondary); - width: 50px; - height: 50px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - i { font-size: 1.3rem; } - } - .tl-duration { - padding: .2rem .6rem; - background-color: var(--color-grey-5); - border-radius: 15px; - display: inline-block; - font-size: .8rem; - text-transform: uppercase; - font-weight: 500; - } - h5 { - padding: 1rem 0; - text-transform: uppercase; - font-size: 1.3rem; - font-weight: 600; - span { - color: var(--color-grey-2); - font-weight: 500; - font-size: 1.2rem; - } + transition: all 0.4s ease-in-out; + width: 60%; + } + .html { + width: 80%; + } + .css { + width: 95%; + } + .js { + width: 75%; + } + .react { + width: 60%; + } + .node { + width: 87%; + } + .python { + width: 70%; + } } - p{ color: var(--color-grey-2); } + } } + } +} +.stat-title { + text-transform: uppercase; + font-size: 1.4rem; + text-align: center; + padding: 3.5rem 0; + position: relative; + &::before { + content: ''; + position: absolute; + left: 50%; + top: 0; + width: 40%; + height: 1px; + background-color: var(--color-grey-5); + transform: translateX(-50%); + } +} + +/*Timeline*/ +.timeline { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + padding-bottom: 3rem; + .timeline-item { + position: relative; + padding-left: 3rem; + border-left: 1px solid var(--color-grey-5); + .tl-icon { + position: absolute; + left: -27px; + top: 0; + background-color: var(--color-secondary); + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + i { + font-size: 1.3rem; + } + } + .tl-duration { + padding: 0.2rem 0.6rem; + background-color: var(--color-grey-5); + border-radius: 15px; + display: inline-block; + font-size: 0.8rem; + text-transform: uppercase; + font-weight: 500; + } + h5 { + padding: 1rem 0; + text-transform: uppercase; + font-size: 1.3rem; + font-weight: 600; + span { + color: var(--color-grey-2); + font-weight: 500; + font-size: 1.2rem; + } + } + p { + color: var(--color-grey-2); + } + } } //Portfolios .port-text { - padding: 2rem 0; - text-align: center; + padding: 2rem 0; + text-align: center; } .portfolios { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 2rem; - margin-top: 3rem; - .portfolio-item { - position: relative; - border-radius: 15px; - img { - width: 100%; - height: 300px; - object-fit: cover; - border-radius: 15px; - } - .hover-items { - width: 100%; - height: 100%; - background-color: var(--color-secondary); - position: absolute; - left: 0; - top: 0; - border-radius: 15px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - opacity: 0; - transform: scale(0); - transition: all .4s ease-in-out; - h3 { - font-size: 1.5rem; - color: var(--color-white); - margin-bottom: 1.5rem; - } - .icons { - display: flex; - justify-content: center; - align-items: center; - .icon { - background-color: var(--color-primary); - border-radius: 50%; - width: 50px; - height: 50px; - display: flex; - align-items: center; - justify-content: center; - margin: 0 1rem; - cursor: pointer; - transition: all .4s ease-in-out; - i { - font-size: 1.5rem; - color: var(--color-white); - margin: 0 1rem; - } - &:hover { - background-color: var(--color-white); - i { color: var(--color-primary); } - } - } + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + margin-top: 3rem; + .portfolio-item { + position: relative; + border-radius: 15px; + img { + width: 100%; + height: 300px; + object-fit: cover; + border-radius: 15px; + } + .hover-items { + width: 100%; + height: 100%; + background-color: var(--color-secondary); + position: absolute; + left: 0; + top: 0; + border-radius: 15px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + opacity: 0; + transform: scale(0); + transition: all 0.4s ease-in-out; + h3 { + font-size: 1.5rem; + color: var(--color-white); + margin-bottom: 1.5rem; + } + .icons { + display: flex; + justify-content: center; + align-items: center; + .icon { + background-color: var(--color-primary); + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 1rem; + cursor: pointer; + transition: all 0.4s ease-in-out; + i { + font-size: 1.5rem; + color: var(--color-white); + margin: 0 1rem; + } + &:hover { + background-color: var(--color-white); + i { + color: var(--color-primary); } + } } + } } + } } .portfolio-item:hover .hover-items { - opacity: 1; - transform: scale(1); + opacity: 1; + transform: scale(1); } //Blogs Section .blogs { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 2rem; - margin-top: 3rem; - .blog { - position: relative; - background-color: var(--color-grey-5); - border-radius: 5px; - box-shadow: 1px 1px 20px rgba(0,0,0,.1); - transition: all .4s ease-in-out; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 2rem; + margin-top: 3rem; + .blog { + position: relative; + background-color: var(--color-grey-5); + border-radius: 5px; + box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1); + transition: all 0.4s ease-in-out; + &:hover { + box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3); + transform: translateY(-5px); + transition: all 0.4s ease-in-out; + img { + filter: grayscale(0); + transform: scale(1.1); + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8); + } + } + img { + width: 100%; + height: 300px; + object-fit: cover; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + filter: grayscale(100%); + transition: all 0.4s ease-in-out; + } + .blog-text { + margin-top: -7px; + padding: 1.1rem; + border-top: 8px solid var(--color-secondary); + h4 { + font-size: 1.5rem; + margin-bottom: 0.7rem; + transition: all 0.4s ease-in-out; + cursor: pointer; &:hover { - box-shadow: 1px 1px 20px rgba(0,0,0,.3); - transform: translateY(-5px); - transition: all .4s ease-in-out; - img { - filter: grayscale(0); - transform: scale(1.1); - box-shadow: 0px 4px 15px rgba(0,0,0,0.8); - } - } - img { - width: 100%; - height: 300px; - object-fit: cover; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - filter: grayscale(100%); - transition: all .4s ease-in-out; - } - .blog-text { - margin-top: -7px; - padding: 1.1rem; - border-top: 8px solid var(--color-secondary); - h4 { - font-size: 1.5rem; - margin-bottom: .7rem; - transition: all .4s ease-in-out; - cursor: pointer; - &:hover { color: var(--color-secondary); } - } - p{ - color: var(--color-grey-2); - line-height: 2rem; - padding-bottom: 1rem; - } + color: var(--color-secondary); } + } + p { + color: var(--color-grey-2); + line-height: 2rem; + padding-bottom: 1rem; + } } + } } - //Contact section .contact-content-con { - display: flex; - padding-top: 3.5rem; - .left-contact { - flex: 2; - h4 { - margin-top: 1rem; - font-size: 2rem; - text-transform: uppercase; - } - p { - margin: 1rem 0; - line-height: 2rem; - } + display: flex; + padding-top: 3.5rem; + .left-contact { + flex: 2; + h4 { + margin-top: 1rem; + font-size: 2rem; + text-transform: uppercase; + } + p { + margin: 1rem 0; + line-height: 2rem; + } - .contact-info { - .contact-item { - display: flex; - align-items: center; - justify-content: space-between; - p { - margin: .3rem 0 !important; - padding: 0 !important; - } - .icon { - display: grid; - grid-template-columns: 40px 1fr; - i { - display: flex; - align-items: center; - font-size: 1.3rem; - } - } - } + .contact-info { + .contact-item { + display: flex; + align-items: center; + justify-content: space-between; + p { + margin: 0.3rem 0 !important; + padding: 0 !important; } - - .contact-icon { + .icon { + display: grid; + grid-template-columns: 40px 1fr; + i { display: flex; - margin-top: 2rem; - a { - display: flex; - align-items: center; - color: var(--color-white); - background-color: var(--color-grey-5); - cursor: pointer; - justify-content: center; - width: 50px; - height: 50px; - border-radius: 50%; - margin: 0 .4rem; - transition: all .4s ease-in-out; - &:hover { - background-color: var(--color-secondary); - i { color: var(--color-primary); } - } - i { - display: flex; - align-items: center; - justify-content: center; - font-size: 1.3rem; - } - } + align-items: center; + font-size: 1.3rem; + } } + } } - .right-contact { - flex: 3; - margin-left: 3rem; - .input-control { - margin: 1.5rem 0; - input, textarea { - border-radius: 30px; - font-weight: inherit; - font-size: inherit; - font-family: inherit; - padding: .8rem 1.1rem; - outline: none; - border: none; - background-color: var(--color-grey-5); - width: 100%; - color: var(--color-white); - resize: none; - } - } - .i-c-2 { - display: flex; - :last-child{ - margin-left: 1.5rem; - } + .contact-icon { + display: flex; + margin-top: 2rem; + a { + display: flex; + align-items: center; + color: var(--color-white); + background-color: var(--color-grey-5); + cursor: pointer; + justify-content: center; + width: 50px; + height: 50px; + border-radius: 50%; + margin: 0 0.4rem; + transition: all 0.4s ease-in-out; + &:hover { + background-color: var(--color-secondary); + i { + color: var(--color-primary); + } } - .submit-btn { - display: flex; - justify-content: flex-start; + i { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.3rem; } + } + } + } + + .right-contact { + flex: 3; + margin-left: 3rem; + .input-control { + margin: 1.5rem 0; + input, + textarea { + border-radius: 30px; + font-weight: inherit; + font-size: inherit; + font-family: inherit; + padding: 0.8rem 1.1rem; + outline: none; + border: none; + background-color: var(--color-grey-5); + width: 100%; + color: var(--color-white); + resize: none; + } + } + .i-c-2 { + display: flex; + :last-child { + margin-left: 1.5rem; + } } + .submit-btn { + display: flex; + justify-content: flex-start; + } + } } - /*Independed components*/ .btn-con { - display: flex; - align-self: flex-start; + display: flex; + align-self: flex-start; } .main-btn { - border-radius: 30px; - color: inherit; - font-weight: 600; - position: relative; - border: 1px solid var(--color-secondary); + border-radius: 30px; + color: inherit; + font-weight: 600; + position: relative; + border: 1px solid var(--color-secondary); + display: flex; + align-self: flex-start; + align-items: center; + overflow: hidden; + .btn-text { + padding: 0 2rem; + } + .btn-icon { + background-color: var(--color-secondary); display: flex; - align-self: flex-start; align-items: center; - overflow: hidden; - .btn-text { padding: 0 2rem; } - .btn-icon { - background-color: var(--color-secondary); - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - padding: 1rem; - } + justify-content: center; + border-radius: 50%; + padding: 1rem; + } + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + transform: translateX(100%); + transition: all 0.4s ease-out; + z-index: -1; + } + &:hover { + transition: all 0.4s ease-out; &::before { - content: ''; - position: absolute; - top: 0; - right: 0; - transform: translateX(100%); - transition: all .4s ease-out; - z-index: -1; + width: 100%; + height: 100%; + background-color: var(--color-secondary); + transform: translateX(0); + transition: all 0.4s ease-out; } - &:hover { - transition: all .4s ease-out; - &::before { - width: 100%; - height: 100%; - background-color: var(--color-secondary); - transform: translateX(0); - transition: all .4s ease-out; - } - } - + } } .main-title { - text-align: center; - h2 { - position: relative; - text-transform: uppercase; - font-size: 4rem; - font-weight: 700; - span { color: var(--color-secondary); } - .bg-text { - position: absolute; - top: 50%; - left: 50%; - color: var(--color-grey-5); - transition: all .4s ease-in-out; - z-index: -1; - transform: translate(-50%, -50%); - font-weight: 800; - font-size: 6.3rem; - } + text-align: center; + h2 { + position: relative; + text-transform: uppercase; + font-size: 4rem; + font-weight: 700; + span { + color: var(--color-secondary); + } + .bg-text { + position: absolute; + top: 50%; + left: 50%; + color: var(--color-grey-5); + transition: all 0.4s ease-in-out; + z-index: -1; + transform: translate(-50%, -50%); + font-weight: 800; + font-size: 6.3rem; } + } } -@import './media'; \ No newline at end of file +@import './media';