From e7c045f9e2714f982bacd89a1fdd20d8a80007e2 Mon Sep 17 00:00:00 2001 From: rodude123 Date: Sat, 31 Jul 2021 16:32:18 +0100 Subject: [PATCH] added in typewriter effect to header --- dist/css/main.css | 2 +- dist/index.html | 2 +- dist/js/main.js | 2 +- src/css/main.css | 11 ++++++++ src/index.html | 2 +- src/js/main.js | 70 ++++++++++++++++++++++++++++++++++++++++------- 6 files changed, 75 insertions(+), 14 deletions(-) diff --git a/dist/css/main.css b/dist/css/main.css index e09208d..afd926f 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--primaryDefault:hsla(79, 62%, 51%, 1);--primaryHover:hsla(79, 75%, 41%, 1);--errorDefault:hsla(0, 62%, 51%, 1);--grey:hsla(0, 0%, 39%, 1);--mutedGrey:hsla(0, 0%, 67%, 0.58);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsl(0, 0%, 30%);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}html{scroll-behavior:smooth}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:2.25rem;line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:1.5rem;line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1rem 2rem;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff}a.btn:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:1.125rem;line-height:1.625rem}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack)}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:var(--mutedGrey);font-size:3.75em;margin:1.5rem 0}@media screen and (max-width:75em){nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}}@media screen and (max-width:31em){header div h1{width:min-content}} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--primaryDefault:hsla(79, 62%, 51%, 1);--primaryHover:hsla(79, 75%, 41%, 1);--errorDefault:hsla(0, 62%, 51%, 1);--grey:hsla(0, 0%, 39%, 1);--mutedGrey:hsla(0, 0%, 67%, 0.58);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsl(0, 0%, 30%);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}html{scroll-behavior:smooth}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:2.25rem;line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:1.5rem;line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1rem 2rem;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff}a.btn:hover{border:.3215em solid var(--primaryHover)}a.btnPrimary,form input[type=submit]{background:var(--primaryDefault);cursor:pointer}a.btnOutline{background:#fff;color:var(--primaryDefault)}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover)}a.btn:active,form input[type=submit]:active{padding:.8rem 1.8rem}.boxShadowOut:hover{box-shadow:0 6px 4px 0 var(--mutedBlack)}.boxShadowIn:active{box-shadow:inset 0 6px 4px 0 var(--mutedBlack)}.textShadow:hover{text-shadow:0 6px 4px var(--mutedBlack)}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:1.125rem;line-height:1.625rem}header{background:#6a6a6a url(../imgs/hero.jpg) no-repeat bottom;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%);position:relative}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em;position:fixed;top:0;width:100%;transition:background-color .4s ease-in}nav.scrolled{background-color:var(--navBack)}nav #nav-check{display:none}nav .nav-btn{display:none}nav h1{margin:0}nav a{text-decoration:none;color:#fff}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:flex-end;align-items:flex-end}nav ul li{list-style:none}nav ul li span{visibility:hidden}nav ul li .active span,nav ul li a:hover span{visibility:visible}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:var(--mutedGrey);font-size:3.75em;margin:1.5rem 0}div h1 span{visibility:visible;animation:caret 1s steps(1) infinite}@keyframes caret{50%{visibility:hidden}}@media screen and (max-width:75em){nav{display:block;height:50px;width:100%;background-color:var(--navBack);position:fixed;top:0;padding:0}nav a h1{margin-left:1ch}nav .nav-btn{display:inline-block;position:absolute;right:75px;top:-360px}nav ul{position:fixed;display:block;width:100%;background-color:#333;transition:all .4s ease-in;overflow-y:hidden;padding-left:0;margin-top:7px}nav ul li a{display:block;width:100%;transform:translateX(-30px);transition:all .4s ease-in;opacity:0}.nav-btn label{display:inline-block;cursor:pointer;width:60px;height:50px;position:fixed;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.5s ease-in;-moz-transition:.5s ease-in;-o-transition:.5s ease-in;transition:.5s ease-in}.nav-btn label span{display:block;position:absolute;height:5px;width:100%;background-color:#fff;opacity:1;right:0;top:20px;-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);-webkit-transition:.25s ease-in;-moz-transition:.25s ease-in;-o-transition:.25s ease-in;transition:.25s ease-in}nav #nav-check:not(:checked)~ul{height:auto;max-height:0}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(1){top:8px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(2){top:23px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:not(:checked)~.nav-btn label span:nth-child(3){top:38px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;transform-origin:left center}nav #nav-check:checked~.nav-btn label,nav .nav-btn label:hover{background-color:rgba(-1,0,0,.3)}nav #nav-check:checked~ul{max-height:50vh;overflow-y:hidden}nav #nav-check:checked~ul li a{opacity:1;transform:translateX(0)}nav #nav-check:checked~ul li:nth-child(1) a{transition-delay:.15s}nav #nav-check:checked~ul li:nth-child(2) a{transition-delay:.25s}nav #nav-check:checked~ul li:nth-child(3) a{transition-delay:.35s}nav #nav-check:checked~ul li:nth-child(4) a{transition-delay:.45s}nav #nav-check:checked~ul li:nth-child(5) a{transition-delay:.55s}nav #nav-check:checked~.nav-btn label span:first-child{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}nav #nav-check:checked~.nav-btn label span:nth-child(2){width:0;opacity:0}nav #nav-check:checked~.nav-btn label span:last-child{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}}@media screen and (max-width:31em){header div h1{width:min-content}} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index c931c3d..bbf2f34 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1 +1 @@ -Document

full stack developer_

Contact Me

about

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi nostrum odio sed sunt tempora totam voluptatem voluptatibus.

Download CV

curriculum vitae

Education

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!

Work

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!

project title to be generated

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit, repudiandae.

testing testing

other projects

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.

Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.

Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!

find me

say hello

© 2021 Rohit Pai all rights reserved

\ No newline at end of file +Document

full stack developer

Contact Me

about

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi nostrum odio sed sunt tempora totam voluptatem voluptatibus.

Download CV

curriculum vitae

Education

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!

Work

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!

project title to be generated

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit, repudiandae.

testing testing

other projects

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.

Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.

Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!

find me

say hello

© 2021 Rohit Pai all rights reserved

\ No newline at end of file diff --git a/dist/js/main.js b/dist/js/main.js index b1b86ce..321865b 100644 --- a/dist/js/main.js +++ b/dist/js/main.js @@ -1 +1 @@ -window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((l=>{const t=l.offsetTop;window.pageYOffset>=t-60&&(e=l.getAttribute("id"))})),document.querySelectorAll("nav ul li").forEach((l=>{l.firstChild.classList.remove("active"),l.firstChild.href.includes(e)&&""!==e?l.firstChild.classList.add("active"):""===e&&document.querySelector("nav ul li").firstChild.classList.add("active")}))}; \ No newline at end of file +const scrollLimit=150;window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let e="";document.querySelectorAll("section").forEach((t=>{const o=t.offsetTop;window.pageYOffset>=o-60&&(e=t.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((t=>{t.classList.remove("active"),t.href.includes(e)&&""!==e?t.classList.add("active"):""===e&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{var e=["full stack developer","web designer","student","gamer","drummer"];function t(e,o,n){o