diff --git a/.gitignore b/.gitignore
index 2079cff..4422fa2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,14 +29,14 @@
 # When using Gradle or Maven with auto-import, you should exclude module files,
 # since they will be recreated, and may cause churn.  Uncomment if using
 # auto-import.
-# .idea/artifacts
-# .idea/compiler.xml
-# .idea/jarRepositories.xml
-# .idea/modules.xml
-# .idea/*.iml
-# .idea/modules
-# *.iml
-# *.ipr
+ .idea/artifacts
+ .idea/compiler.xml
+ .idea/jarRepositories.xml
+ .idea/modules.xml
+ .idea/*.iml
+ .idea/modules
+ *.iml
+ *.ipr
 
 # CMake
 cmake-build-*/
diff --git a/dist/css/main.css b/dist/css/main.css
index afd926f..b99df8b 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}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
+/*! 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}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--generalFS);line-height:1.625rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:var(--titleFS);line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:var(--headingFS);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)}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}}section#about{padding:0 5em}section#about div{padding:.1em 5em}@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)}section#about{padding:0 1em}section#about div{padding:.1em 2.5em}}@media screen and (max-width:31em){header div h1{width:min-content}section#about{padding:0 .5em}section#about div{padding:.1em 1em}}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index bbf2f34..a92e103 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script><script src="js/main.js"></script></head><body><header><nav><input type="checkbox" id="nav-check"> <a href="/"><h1>rohit pai</h1></a><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li><li><a href="#curiculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li><li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li><li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li><li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li></ul></nav><div><h1>full stack developer</h1><a href="" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="#about"><i class="fas fa-chevron-down"></i></a></div></header><main><section id="about"><h1>about</h1><p>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.</p><a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section><section id="curiculumvitae"><h1>curriculum vitae</h1><div class="cvGrid"><div><h2>Education</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!</div></div><div><h2>Work</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!</div></div></div></section><section id="projects"><div class="mainProj"><h1>project title to be generated</h1><div><img src="" alt=""><div class="flexRow"><p>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.</p><div class="flexCol"><a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a></div></div></div></div><div class="otherProj"><h1>other projects</h1><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p></div><div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p></div><div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p></div><div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a></div></div></div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div></section><section id="contact"><div id="findme"><h1>find me</h1><div class="flexRow socialIcons"><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div></div><img src="" alt="" class="profile"></div><div id="sayhello"><h1>say hello</h1><form action="" id="contactForm"><div class="flName"><div class="formControl"><label for="fName">First Name</label> <input type="text" name="fName" id="fName"></div><div class="formControl"><label for="lName">Last Name</label> <input type="text" name="lName" id="lName"></div></div><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><div class="formControl"><label for="message">Message</label> <textarea name="message" id="message" cols="30" rows="10"></textarea></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello"></form></div></section><footer class="flexRow"><p>&copy; 2021 Rohit Pai all rights reserved</p><button class="goBackToTop"></button></footer></main></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script><script src="js/main.js"></script></head><body><header><nav><input type="checkbox" id="nav-check"> <a href="/"><h1>rohit pai</h1></a><div class="nav-btn"><label for="nav-check"><span></span> <span></span> <span></span></label></div><ul><li><a href="#about" class="textShadow active"><span>&lt;</span>about<span>&gt;</span></a></li><li><a href="#curiculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li><li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li><li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li><li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li></ul></nav><div><h1>full stack developer</h1><a href="" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a> <a href="#about"><i class="fas fa-chevron-down"></i></a></div></header><main><section id="about"><h1>about</h1><div><p>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.</p><a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a></div></section><section id="curiculumvitae"><h1>curriculum vitae</h1><div class="cvGrid"><div><h2>Education</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!</div></div><div><h2>Work</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!</div></div></div></section><section id="projects"><div class="mainProj"><h1>project title to be generated</h1><div><img src="" alt=""><div class="flexRow"><p>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.</p><div class="flexCol"><a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a></div></div></div></div><div class="otherProj"><h1>other projects</h1><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p></div><div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p></div><div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p></div><div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a> <a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a></div></div></div><a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div></section><section id="contact"><div id="findme"><h1>find me</h1><div class="flexRow socialIcons"><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div></div><img src="" alt="" class="profile"></div><div id="sayhello"><h1>say hello</h1><form action="" id="contactForm"><div class="flName"><div class="formControl"><label for="fName">First Name</label> <input type="text" name="fName" id="fName"></div><div class="formControl"><label for="lName">Last Name</label> <input type="text" name="lName" id="lName"></div></div><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><div class="formControl"><label for="message">Message</label> <textarea name="message" id="message" cols="30" rows="10"></textarea></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello"></form></div></section><footer class="flexRow"><p>&copy; 2021 Rohit Pai all rights reserved</p><button class="goBackToTop"></button></footer></main></body></html>
\ No newline at end of file
diff --git a/dist/js/main.js b/dist/js/main.js
index 8f6aa2e..30a3620 100644
--- a/dist/js/main.js
+++ b/dist/js/main.js
@@ -1 +1 @@
-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<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,o+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1e3):n<e[n].length&&t(e[n],0,(function(){setTimeout(o,1500,n+1)}))}(0)}));
\ 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<e.length?(document.querySelector("header div h1").innerHTML=e.substring(0,o+1)+'<span aria-hidden="true">_</span>',setTimeout((function(){t(e,o+1,n)}),100)):"function"==typeof n&&setTimeout(n,700)}!function o(n){void 0===e[n]?setTimeout((function(){o(0)}),1500):n<e[n].length&&t(e[n],0,(function(){setTimeout(o,1500,n+1)}))}(0)}));
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
index ac975f6..0e3acae 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,10 +1,10 @@
-/******** Imports ********/
+/******** Imports *******/
 @import "/node_modules/normalize.css/normalize.css";
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
 
 /****** Root Style ******/
 :root {
-    /* colours */
+    /* Colours */
     --primaryDefault: hsla(79, 62%, 51%, 1);
     --primaryHover: hsla(79, 75%, 41%, 1);
     --errorDefault: hsla(0, 62%, 51%, 1);
@@ -13,7 +13,7 @@
     --mutedBlack: hsla(0, 0%, 0%, 0.25);
     --navBack: hsl(0, 0%, 30%);
 
-    /* font sizes */
+    /* Font Sizes */
     --titleFS: 2.25rem;
     --generalFS: 1.125rem;
     --headingFS: 1.5rem;
@@ -29,7 +29,7 @@ body {
     font-family: Noto Sans KR, sans-serif;
     font-style: normal;
     font-weight: 500;
-    font-size: 1.125rem;
+    font-size: var(--generalFS);
     line-height: 1.625rem;
 }
 
@@ -41,7 +41,7 @@ h1, nav {
     font-family: Share Tech Mono, monospace;
     font-style: normal;
     font-weight: normal;
-    font-size: 2.25rem;
+    font-size: var(--titleFS);
     line-height: 2.5625rem;
     text-transform: lowercase;
 }
@@ -50,7 +50,7 @@ h2 {
     font-family: Noto Sans KR, sans-serif;
     font-style: normal;
     font-weight: 500;
-    font-size: 1.5rem;
+    font-size: var(--headingFS);
     line-height: 2.1875rem;
 }
 
@@ -201,10 +201,21 @@ div h1 span {
     }
 }
 
+/***** About Styles *****/
+
+section#about {
+    padding: 0 5em;
+}
+
+section#about div {
+    padding: 0.1em 5em;
+}
+
 /**** Media Queries *****/
 
 @media screen and (max-width: 75em) {
-    /*** Navigation styles **/
+
+    /*** Navigation Styles **/
 
     nav {
         display: block;
@@ -281,7 +292,7 @@ div h1 span {
         transition: .25s ease-in;
     }
 
-    /** burger not clicked **/
+    /** Burger Not Clicked **/
 
     nav  #nav-check:not(:checked) ~ ul{
         height: auto;
@@ -316,7 +327,7 @@ div h1 span {
         background-color: rgba(-1, 0, 0, 0.3);
     }
 
-    /**** burger clicked ****/
+    /**** Burger Clicked ****/
 
     nav #nav-check:checked ~ ul{
         max-height: 50vh;
@@ -366,12 +377,33 @@ div h1 span {
         -o-transform: rotate(-45deg);
         transform: rotate(-45deg);
     }
+
+    /***** About Styles *****/
+
+    section#about {
+        padding: 0 1em;
+    }
+
+    section#about div {
+        padding: 0.1em 2.5em;
+    }
 }
 
 @media screen and (max-width: 31em) {
-    /** not to squish name **/
+    /*** Navigation Styles **/
 
-    header div h1{
+    header div h1 {
         width: min-content;
     }
+
+    /***** About Styles *****/
+
+    section#about {
+        padding: 0 0.5em;
+    }
+
+    section#about div {
+        padding: 0.1em 1em;
+    }
+
 }
diff --git a/src/index.html b/src/index.html
index 754c829..d249974 100644
--- a/src/index.html
+++ b/src/index.html
@@ -41,13 +41,17 @@
     <main>
         <section id="about">
             <h1>about</h1>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias
+            <div>
+                <p>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.</p>
-            <a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></section>
+                <a href="other/rohitpaicv.pdf" class="btn btnOutline boxShadowIn boxShadowOut" download>Download CV</a>
+            </div>
+        </section>
         <section id="curiculumvitae">
             <h1>curriculum vitae</h1>
             <div class="cvGrid">
diff --git a/src/js/main.js b/src/js/main.js
index fc92d89..608b738 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () =>
 {
 	// array with texts to type in typewriter
 	var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"];
-	
+
 	// type one text in the typwriter
 	// keeps calling itself until the text is finished
 	function typeWriter(text, i, fnCallback) {
@@ -51,7 +51,7 @@ document.addEventListener('DOMContentLoaded', () =>
 		if (i < (text.length)) {
 			// add next character to h1
 			document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true">_</span>';
-			
+
 			// wait for a while and call this function again for next character
 			setTimeout(function() {
 				typeWriter(text, i + 1, fnCallback)