diff --git a/dist/css/main.css b/dist/css/main.css
index 2399bc6..7008f18 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}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{text-align:center;height:5.125rem}section#about{padding:0 .5em}section#about div{padding:.1em 1em}}
\ 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{--mainHue:79;--mainSat:62%;--mainLight:51%;--primaryDefault:hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);--primaryHover:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);--timelineItemBrdr:hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);--errorDefault:hsla(0, var(--mainSat), var(--mainLight), 1);--grey:hsla(0, 0%, 39%, 1);--mutedGrey:hsla(0, 0%, 67%, 0.58);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--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)}section#about,section#curriculumvitae h1{padding:0 5rem}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);z-index:1}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 div{padding:.1em 5em}section#curriculumvitae{background-color:var(--primaryDefault);color:#fff;padding:2em 0}section#curriculumvitae .cvGrid{display:flex;flex-direction:row;padding:0 1.5rem;flex-wrap:wrap}section#curriculumvitae .cvGrid>div{width:45%;display:flex;flex-direction:column;min-height:100%}#curriculumvitae .cvGrid h2{text-align:center}#curriculumvitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;margin:0 auto;height:100%}#curriculumvitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}#curriculumvitae .timeline:after{content:"";display:table;clear:both}#curriculumvitae .timelineItem{border:2px solid var(--timelineItemBrdr);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0 1rem;width:50%;position:relative;background-color:var(--primaryHover)}#curriculumvitae .timelineItem:before,.timelineItem:after{content:'';position:absolute}#curriculumvitae .timelineItem:before{content:'';right:-20px;top:calc(50% - 5px);border-style:solid;border-color:var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;border-width:20px;transform:rotate(45deg)}#curriculumvitae .timelineItem:nth-child(2n){margin-left:21em}#curriculumvitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}#curriculumvitae .timelineItem h3{font-weight:400}#curriculumvitae .timelineItem span{color:#e5e5e5}@media screen and (max-width:90em){section#curriculumvitae .cvGrid{flex-direction:column;justify-content:center;align-items:center}section#curriculumvitae .cvGrid>div{width:100%}section#curriculumvitae .cvGrid>div:first-child{padding-bottom:2.5em;margin-bottom:2.5em;border-bottom:5px #fff solid}section#curriculumvitae .cvGrid h2{margin-left:5em}section#curriculumvitae .cvGrid .timeline{margin:0 auto}}@media screen and (max-width:75em){section#about,section#curriculumvitae h1{padding:0 1em}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 div{padding:.1em 2.5em}}@media screen and (max-width:31em){section#about,section#curriculumvitae h1{padding:0 1em}header div h1{text-align:center;height:5.125rem}section#about div{padding:.1em 1em}}
\ No newline at end of file
diff --git a/dist/index.html b/dist/index.html
index a92e103..3b034d2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1 +1 @@
-
Document 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.
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!
\ No newline at end of file
+Document 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 Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
Work Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
Grade: D*D*D* Chelmsford College - BTEC Level 3 in IT
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.
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!
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
index ce7ce81..622dfce 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -5,13 +5,17 @@
/****** Root Style ******/
:root {
/* Colours */
- --primaryDefault: hsla(79, 62%, 51%, 1);
- --primaryHover: hsla(79, 75%, 41%, 1);
- --errorDefault: hsla(0, 62%, 51%, 1);
+ --mainHue: 79;
+ --mainSat: 62%;
+ --mainLight: 51%;
+ --primaryDefault: hsla(var(--mainHue), var(--mainSat), var(--mainLight), 1);
+ --primaryHover: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 10%), 1);
+ --timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
+ --errorDefault: hsla(0, var(--mainSat), var(--mainLight), 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%);
+ --navBack: hsla(0, 0%, 30%, 1);
/* Font Sizes */
--titleFS: 2.25rem;
@@ -79,7 +83,6 @@ a.btnOutline {
a.btnPrimary:hover, form input[type="submit"]:hover {
background: var(--primaryHover);
-
}
a.btn:active, form input[type="submit"]:active {
@@ -98,6 +101,10 @@ a.btn:active, form input[type="submit"]:active {
text-shadow: 0 6px 4px var(--mutedBlack);
}
+section#about, section#curriculumvitae h1 {
+ padding: 0 5rem;
+}
+
/*** Navigation Styles **/
header {
@@ -122,6 +129,7 @@ nav {
nav.scrolled {
background-color: var(--navBack);
+ z-index: 1;
}
nav #nav-check {
@@ -203,20 +211,149 @@ div h1 span {
/***** About Styles *****/
-section#about {
- padding: 0 5em;
-}
-
section#about div {
padding: 0.1em 5em;
}
+/****** CV Styles *******/
+
+section#curriculumvitae{
+ background-color: var(--primaryDefault);
+ color: #FFFFFF;
+ padding: 2em 0;
+}
+
+section#curriculumvitae .cvGrid {
+ display: flex;
+ flex-direction: row;
+ padding: 0 1.5rem;
+ flex-wrap: wrap;
+}
+
+section#curriculumvitae .cvGrid > div {
+ width: 45%;
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+
+}
+
+#curriculumvitae .cvGrid h2 {
+ text-align: center;
+}
+
+#curriculumvitae .timeline {
+ position: relative;
+ max-width: 30em;
+ gap: 1em;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ height: 100%;
+}
+
+#curriculumvitae .timeline:before {
+ content: "";
+ position: absolute;
+ height: 100%;
+ border: 4px var(--timelineItemBrdr) solid;
+ /*border-bottom: 4;*/
+ right: 194px;
+ top: 0;
+}
+
+#curriculumvitae .timeline:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+#curriculumvitae .timelineItem {
+ border: 2px solid var(--timelineItemBrdr);
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ padding: 0 1rem;
+ width: 50%;
+ position: relative;
+ background-color: var(--primaryHover);
+}
+
+#curriculumvitae .timelineItem:before, .timelineItem:after {
+ content: '';
+ position: absolute;
+}
+
+#curriculumvitae .timelineItem:before{
+ content: '';
+ right: -20px;
+ top: calc(50% - 5px);
+ border-style: solid;
+ border-color: var(--timelineItemBrdr) var(--timelineItemBrdr) transparent transparent;
+ border-width: 20px;
+ transform: rotate(45deg);
+}
+#curriculumvitae .timelineItem:nth-child(2n) {
+ margin-left: 21em;
+}
+
+#curriculumvitae .timelineItem:nth-child(2n):before {
+ right: auto;
+ left: -20px;
+ border-color: transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr);
+}
+
+#curriculumvitae .timelineItem h3 {
+ font-weight: normal;
+}
+
+#curriculumvitae .timelineItem span {
+ color: hsl(0, 0%, 90%);
+}
+
/**** Media Queries *****/
+@media screen and (max-width: 90em) {
+
+ /****** CV Styles *******/
+
+ section#curriculumvitae .cvGrid {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ section#curriculumvitae .cvGrid > div {
+ width: 100%;
+ }
+
+ section#curriculumvitae .cvGrid > div:first-child {
+ padding-bottom: 2.5em;
+ margin-bottom: 2.5em;
+ border-bottom: 5px #FFFFFF solid;
+ }
+
+ section#curriculumvitae .cvGrid h2 {
+ margin-left: 5em;
+ }
+
+ section#curriculumvitae .cvGrid .timeline {
+ margin: 0 auto;
+ }
+}
+
@media screen and (max-width: 75em) {
+ /*** Template Styles ****/
+
+ section#about, section#curriculumvitae h1 {
+ padding: 0 1em;
+ }
+
/*** Navigation Styles **/
+ /** Default Nav Styles **/
+
nav {
display: block;
height: 50px;
@@ -380,16 +517,19 @@ section#about div {
/***** About Styles *****/
- section#about {
- padding: 0 1em;
- }
-
section#about div {
padding: 0.1em 2.5em;
}
}
@media screen and (max-width: 31em) {
+
+ /*** Template Styles ****/
+
+ section#about, section#curriculumvitae h1 {
+ padding: 0 1em;
+ }
+
/*** Navigation Styles **/
header div h1 {
@@ -399,10 +539,6 @@ section#about div {
/***** 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 d249974..a2a2cc7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -26,7 +26,7 @@
< about>
- < cv>
+ < cv>
< projects>
< contact>
< blog>
@@ -52,16 +52,59 @@
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!
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
Work
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
+
+
Grade: D*D*D*
+
Chelmsford College - BTEC Level 3 in IT
+
+
diff --git a/src/js/main.js b/src/js/main.js
index 608b738..2d7c572 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -41,45 +41,55 @@ window.onscroll = () =>
document.addEventListener('DOMContentLoaded', () =>
{
- // array with texts to type in typewriter
- var dataText = [ "full stack developer", "web designer", "student", "gamer", "drummer"];
+ // 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) {
- // chekc if text isn't finished yet
- if (i < (text.length)) {
- // add next character to h1
- document.querySelector("header div h1").innerHTML = text.substring(0, i+1) +'_ ';
+ // type one text in the typwriter
+ // keeps calling itself until the text is finished
+ function typeWriter(text, i, fnCallback)
+ {
+ // chekc if text isn't finished yet
+ if (i < (text.length))
+ {
+ // add next character to h1
+ document.querySelector("header div h1").innerHTML = text.substring(0, i + 1) + "_ ";
- // wait for a while and call this function again for next character
- setTimeout(function() {
- typeWriter(text, i + 1, fnCallback)
- }, 100);
- }
- // text finished, call callback if there is a callback function
- else if (typeof fnCallback == 'function') {
- // call callback after timeout
- setTimeout(fnCallback, 700);
- }
- }
- // start a typewriter animation for a text in the dataText array
- function StartTextAnimation(i) {
- if (typeof dataText[i] === 'undefined'){
- setTimeout(function() {
- StartTextAnimation(0);
- }, 1500);
- // StartTextAnimation(0);
- }
- else if (i < dataText[i].length) {
- // text exists! start typewriter animation
- typeWriter(dataText[i], 0, function(){
- // after callback (and whole text has been animated), start next text
- setTimeout(StartTextAnimation, 1500, i + 1);
- });
- }
- }
- // start the text animation
- StartTextAnimation(0);
+ // wait for a while and call this function again for next character
+ setTimeout(function ()
+ {
+ typeWriter(text, i + 1, fnCallback)
+ }, 100);
+ }
+ // text finished, call callback if there is a callback function
+ else if (typeof fnCallback == "function")
+ {
+ // call callback after timeout
+ setTimeout(fnCallback, 700);
+ }
+ }
+
+ // start a typewriter animation for a text in the dataText array
+ function StartTextAnimation(i)
+ {
+ if (typeof dataText[i] === "undefined")
+ {
+ setTimeout(function ()
+ {
+ StartTextAnimation(0);
+ }, 1500);
+ }
+ else if (i < dataText[i].length)
+ {
+ // text exists! start typewriter animation
+ typeWriter(dataText[i], 0, function ()
+ {
+ // after callback (and whole text has been animated), start next text
+ setTimeout(StartTextAnimation, 1500, i + 1);
+ });
+ }
+ }
+
+ // start the text animation
+ StartTextAnimation(0);
});