diff --git a/dist/css/main.css b/dist/css/main.css index f9ff008..d24626d 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{--mainHue:80;--mainSat:60%;--mainLight:50%;--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, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}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:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]: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[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}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)}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form .formControl.passwordControl{display:block}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}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;color:#fff;z-index:1}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:hsla(0,0%,67%,.58);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{margin-bottom:5rem}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%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#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)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#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)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{border-right:2px solid var(--mutedGrey);padding:0 2.5em 5em 0}section#allProjects img,section#projects img{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#allProjects #otherProj .oProjItem,section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:.75em 1em}section#projects .otherProj>div .oProjItem{margin:0 auto}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#allProjects{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5em}section#allProjects #mainProj{display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--grey);box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1.5em 2em;margin:3em 2.5rem 0;width:50%}section#allProjects #mainProj img{width:100%;max-width:30rem}section#allProjects #otherProj{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:wrap;gap:2rem;border-top:2px solid var(--grey);padding:5em 2.5rem 0}section#allProjects #otherProj .oProjItem{flex-direction:column;width:30%;height:auto}section#allProjects #otherProj img{width:100%;max-width:20rem}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em;width:100%}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em;margin-bottom:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@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:0}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}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#allProjects #otherProj .oProjItem{width:45%}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}section#allProjects #mainProj{width:auto}section#allProjects #otherProj{flex-direction:column;align-items:center}section#allProjects #otherProj .oProjItem{width:auto}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@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}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}} \ 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:80;--mainSat:60%;--mainLight:50%;--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, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}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-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]: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[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}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)}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form .formControl.passwordControl{display:block}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}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;color:#fff;z-index:1}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:hsla(0,0%,67%,.58);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{margin-bottom:5rem}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%}section#curriculumVitae .cvGrid h2{text-align:center}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae #work{margin:0 auto 0 8rem}section#curriculumVitae .timeline:before{content:"";position:absolute;height:100%;border:4px var(--timelineItemBrdr) solid;right:194px;top:0}section#curriculumVitae .timeline:after{content:"";display:table;clear:both}section#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)}.timelineItem:after,section#curriculumVitae .timelineItem:before{content:'';position:absolute}section#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)}section#curriculumVitae .timelineItem:nth-child(2n){margin-left:21em}section#curriculumVitae .timelineItem:nth-child(2n):before{right:auto;left:-20px;border-color:transparent transparent var(--timelineItemBrdr) var(--timelineItemBrdr)}section#curriculumVitae .timelineItem h3{font-weight:400}section#curriculumVitae .timelineItem span{color:#e5e5e5}section#projects{display:flex;flex-direction:row;padding:0 2.5rem;border-bottom:2px solid var(--mutedGrey)}section#projects .mainProj,section#projects .otherProj{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}section#projects .mainProj{border-right:2px solid var(--mutedGrey);padding:0 2.5em 5em 0}section#allProjects img,section#projects img{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;display:block;margin:1em auto}section#projects .mainProj img{width:100%;max-width:40rem}section#projects .mainProj .flexRow{display:flex;flex-direction:row;gap:4em}section#projects .mainProj .flexCol{display:flex;flex-direction:column;gap:2.5em}section#projects .otherProj>a{margin:5rem 0}section#projects .otherProj>div{display:flex;flex-direction:column;gap:2em}section#allProjects #otherProj .oProjItem,section#projects .otherProj>div .oProjItem{display:flex;justify-content:center;align-items:center;flex-direction:row;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:.75em 1em}section#projects .otherProj>div .oProjItem{margin:0 auto}section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:row-reverse}section#projects .otherProj .oProjItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .oProjItem .flexCol div:nth-child(2){display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .flexCol div:nth-child(2) .btn{padding:.25em .5em}section#allProjects{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5em}section#allProjects #mainProj{display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid var(--grey);box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1.5em 2em;margin:3em 2.5rem 0;width:50%}section#allProjects #mainProj img{width:100%;max-width:30rem}section#allProjects #otherProj{display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;flex-wrap:wrap;gap:2rem;border-top:2px solid var(--grey);padding:5em 2.5rem 0}section#allProjects #otherProj .oProjItem{flex-direction:column;width:30%;height:auto}section#allProjects #otherProj img{width:100%;max-width:20rem}section#contact{display:flex;flex-direction:row;padding:0 2.5em}div#findMe,div#sayHello{width:50%;display:flex;flex-direction:column;align-items:center;gap:1em}div#findMe .findMeContainer{display:flex;flex-direction:row;justify-content:space-around;align-items:center;gap:2em;width:100%;height:100%;margin:5em 0}div#findMe .findMeContainer .profile{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}div#findMe .socialIcons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2em}div#findMe .socialIcons div{display:flex;flex-direction:column;gap:1.5em}div#findMe .socialIcons div svg{width:2.5em;fill:var(--primaryDefault);font-size:2em}div#findMe .socialIcons div a:hover svg{fill:var(--primaryHover)}div#sayHello #contactForm{display:flex;flex-direction:column;justify-content:center;align-items:center}#contactForm .flName{display:flex;flex-direction:row;gap:1em;width:100%}div.message{background:var(--primaryDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em;margin-bottom:1em}div.message.error{background:var(--errorDefault)}div.message button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.message.hidden{opacity:0;visibility:hidden;height:0}div.message button:hover{text-shadow:-1px 2px var(--mutedBlack)}footer{background-color:var(--primaryDefault);margin-top:5em;padding:2em;display:flex;color:#fff}footer .spacer{width:100%;margin-right:auto}footer p{margin:auto;width:100%;text-align:center}footer .button{margin-left:auto;width:100%;text-align:center}footer .button button{border:5px solid #fff;background:0 0;font-size:3em;padding:.5rem 1rem;width:2em;color:#fff;-webkit-border-radius:.25em;-moz-border-radius:.25em;border-radius:.25em;cursor:pointer}@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:0}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}section#curriculumVitae .cvGrid{padding:0}section#projects{flex-direction:column;justify-content:center;align-items:center}section#projects .mainProj{border-right:0;padding:0;width:100%;margin:0 5em}section#projects .mainProj img{padding:0 1em}section#projects .mainProj .flexRow{flex-direction:column;margin:0 2.5em}section#projects .mainProj .flexCol{flex-direction:row;justify-content:center;align-items:center}section#projects .otherProj{width:100%}section#projects .otherProj .btn{width:10em;text-align:center}section#projects .otherProj>div .oProjItem,section#projects .otherProj>div .oProjItem:nth-child(2){flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){justify-content:center;margin-left:0;margin-bottom:1em}section#projects .otherProj>a{margin-left:3em;margin-right:3em;text-align:center}section#allProjects #otherProj .oProjItem{width:45%}section#contact{flex-direction:column;justify-content:center;align-items:center}div#findMe,div#sayHello{width:100%}div#findMe .findMeContainer{flex-direction:column;justify-content:center}div#findMe .socialIcons{flex-direction:row}div#findMe .socialIcons div{flex-direction:row}}@media screen and (max-width:55em){section#curriculumVitae .cvGrid .timeline,section#curriculumVitae .cvGrid .timeline#work{margin:0 auto;width:100%}section#curriculumVitae .timeline:before{border:none}section#curriculumVitae .timelineItem,section#curriculumVitae .timelineItem:nth-child(2n){width:95%;padding:0;margin:0 auto}section#curriculumVitae .timelineItem:before{right:unset;left:unset;border:none}section#allProjects #mainProj{width:auto}section#allProjects #otherProj{flex-direction:column;align-items:center}section#allProjects #otherProj .oProjItem{width:auto}div#findMe .socialIcons{flex-direction:column}#contactForm .flName{flex-direction:column;gap:0;width:100%}}@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}section#projects .mainProj .flexCol{flex-direction:column}section#projects .oProjItem .flexCol div:nth-child(2){flex-direction:column;justify-content:center;align-items:center}} \ No newline at end of file diff --git a/dist/editor/css/main.css b/dist/editor/css/main.css index 19de5fc..6d241b3 100644 --- a/dist/editor/css/main.css +++ b/dist/editor/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{--mainHue:80;--mainSat:60%;--mainLight:50%;--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, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}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:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]: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[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}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)}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form .formControl.passwordControl{display:block}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.error{background:var(--errorDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover{text-shadow:-1px 2px var(--mutedBlack)}div.btnContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li .active span,nav.sideNav ul li a:hover span{visibility:visible}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}textarea{resize:none}section#curriculumVitae,section#projects{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer,div.projectsGrid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:2em;margin-bottom:.5em}div.editorContainer>*,div.projectsGrid>*{width:45%}section#projects{display:none}section#curriculumVitae{display:block}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em;width:100%}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem,section#projects .projItem{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1rem;position:relative}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);color:#fff;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em}section#curriculumVitae .timelineItem.editing{background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}section#projects #projList .projItem{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack)}section#projects #projList{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}section#projects #projList .projItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .projItem .linkContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .linkContainer .btn{padding:.25em .5em}section#projects #isMainProject{width:auto}section#projects form.projItem.editing div.linkContainer,section#projects form.projItem.editing img.displayedImage,section#projects form.projItem:not(.editing) div.formControl.gitContainer,section#projects form.projItem:not(.editing) div.formControl.imageContainer,section#projects form.projItem:not(.editing) div.formControl.isMainProject,section#projects form.projItem:not(.editing) div.formControl.viewProjContainer,section#projects form.projItem:not(.editing) input[type=submit]{display:none}section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{font-size:1.17em;font-weight:700}section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{color:#000}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}} \ 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:80;--mainSat:60%;--mainLight:50%;--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, calc(var(--mainSat) + 10%),calc(var(--mainLight) + 10%), 1);--errorHover:hsla(0, calc(var(--mainSat) + 10%), calc(var(--mainLight) - 10%), 1);--grey:hsla(0, 0%, 39%, 1);--notAvailableDefault:hsla(0, 0%, 39%, 1);--notAvailableHover:hsla(0, 0%,32%, 1);--mutedGrey:hsla(0, 0%, 78%, 1);--mutedBlack:hsla(0, 0%, 0%, 0.25);--navBack:hsla(0, 0%, 30%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}*{box-sizing:border-box}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-flex;padding:1em 2em;border-radius:.625em;border:.3215em solid var(--primaryDefault);color:#fff;text-align:center;align-items:center;max-height:4em}form input[type=submit]{padding:1.1em 2em}a.btn:hover,form input[type=submit]: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[disabled]{pointer-events:none;background:var(--notAvailableDefault);border:.3215em solid var(--notAvailableDefault)}a.btnPrimary[disabled]:hover{background:var(--notAvailableHover);border:.3215em solid var(--notAvailableHover)}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)}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl textarea:focus{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}form .formControl.passwordControl{display:block}form input[type=submit]{align-self:flex-start}form .formControl input:not([type=submit]),form .formControl textarea{width:100%;border:4px solid var(--primaryDefault);background:0 0;outline:0;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:.5em;padding:0 .5em}form .formControl textarea{padding:.5em}form .formControl input:not([type=submit]).invalid:invalid,form .formControl textarea.invalid:invalid{border:4px solid var(--errorDefault)}form .formControl input:not([type=submit]).invalid:invalid:focus,form .formControl textarea.invalid:invalid:focus{border:4px solid var(--errorHover);box-shadow:0 4px 2px 0 var(--mutedBlack)}form .formControl input:not([type=submit]):focus,form .formControl input:not([type=submit]):hover,form .formControl textarea:focus,form .formControl textarea:hover{border:4px solid var(--primaryHover)}form .formControl input:not([type=submit]){height:3em}form .formControl i.fa-eye,form .formControl i.fa-eye-slash{margin-left:-40px;cursor:pointer;color:var(--primaryDefault)}form .formControl input:not([type=submit]):focus+i.fa-eye,form .formControl input:not([type=submit]):focus+i.fa-eye-slash{color:var(--primaryHover)}form .formControl .checkContainer{display:block;position:relative;margin-bottom:1.25em;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}form .formControl .checkContainer input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}form .formControl .checkContainer .checkmark{position:absolute;top:1.25em;left:0;height:25px;width:25px;background-color:var(--mutedGrey)}form .formControl .checkContainer:hover input~.checkmark{background-color:var(--grey)}form .formControl .checkContainer input:checked~.checkmark{background-color:var(--primaryDefault)}form .formControl .checkContainer input:checked:hover~.checkmark{background-color:var(--primaryHover)}form .formControl .checkContainer .checkmark:after{content:"";position:absolute;display:none}form .formControl .checkContainer input:checked~.checkmark:after{display:block}form .formControl .checkContainer .checkmark:after{left:9px;top:5px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}form .formControl input[type=file]{padding:0;cursor:pointer}form .formControl input[type=file]::file-selector-button{background-color:var(--primaryDefault);color:#fff;border:0;border-right:5px solid var(--mutedBlack);padding:15px;margin-right:20px;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}form .formControl input[type=file]:hover::file-selector-button{background-color:var(--primaryHover)}section#about,section#curriculumVitae h1{padding:0 5rem}h1{text-transform:none}body,html{height:100%}main.login{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:radial-gradient(var(--primaryDefault),#597226)}div.container{flex-direction:column;justify-content:center;align-items:center;background-color:#fff;padding:2em 5em;-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em;box-shadow:0 6px 4px 0 var(--mutedBlack);-webkit-transform:translateX(-150vw);-moz-transform:translateX(-150vw);-ms-transform:translateX(-150vw);-o-transform:translateX(-150vw);transform:translateX(-150vw);-webkit-transition:transform .4s ease-in-out;-moz-transition:transform .4s ease-in-out;-ms-transition:transform .4s ease-in-out;-o-transition:transform .4s ease-in-out;transition:transform .4s ease-in-out;overflow:hidden}div.container.shown{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}div.container form{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}div#login #password{font-family:Verdana,serif;letter-spacing:.125em}div#login input[type=submit]{margin:0}div.error{background:var(--errorDefault);color:#fff;padding:.5em .8em;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;display:flex;justify-content:center;align-items:center;align-self:flex-start;flex-direction:row-reverse;position:relative;height:75px;visibility:visible;overflow:hidden;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:1;margin-top:1em}div.error button{border:none;background:0 0;outline:0;cursor:pointer;color:#fff;font-size:1.25rem;margin-top:-5px;position:absolute;transform:translate(0,0);transform-origin:0 0;right:10px;top:10px}div.error.hidden{opacity:0;visibility:hidden;height:0;margin:0;padding:0}div.error button:hover{text-shadow:-1px 2px var(--mutedBlack)}div.btnContainer{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}div.btnContainer a:not(.btn){color:#000}nav{font-size:var(--headingFS)}nav.sideNav{height:100%;width:250px;z-index:1;position:fixed;top:0;left:0;background-color:var(--primaryHover);overflow-x:hidden;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;padding-top:60px}nav.sideNav ul li{list-style:none}nav.sideNav a{padding:8px 8px 8px 0;text-decoration:none;color:#fff;display:block;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}nav.sideNav .closeBtn{position:absolute;top:0;right:25px;margin-left:50px;font-size:var(--titleFS);display:none}nav.sideNav ul li span{visibility:hidden}nav.sideNav ul li .active span,nav.sideNav ul li a:hover span{visibility:visible}span#navOpen{font-size:var(--titleFS);cursor:pointer}main.editor{margin-left:250px}.title{display:flex;flex-direction:column;justify-content:center;align-items:center}#navOpen{visibility:hidden;padding:.25em 0 0 .25em;align-self:flex-start}textarea{resize:none}section#curriculumVitae,section#projects{margin:0 2em}input[type=submit]{margin-top:2em}.delete,.edit{border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;outline:0;background-color:var(--primaryDefault);color:#fff;cursor:pointer}.timelineHeader{font-weight:400}div.editorContainer,div.projectsGrid{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:2em;margin-bottom:.5em}div.editorContainer>*,div.projectsGrid>*{width:45%}section#projects{display:none}section#curriculumVitae{display:block}div.modifyBtnContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:.5em;width:100%}div.companyAreaContainer,div.dateContainer{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1em;margin-bottom:.5em}section#curriculumVitae .timeline{position:relative;max-width:30em;gap:1em;display:flex;flex-direction:column;height:100%}section#curriculumVitae .timelineItem,section#projects .projItem{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:1rem;position:relative}section#curriculumVitae .timelineItem{border:2px solid var(--timelineItemBrdr);color:#fff;background-color:var(--primaryHover)}section#curriculumVitae .timelineItem.editing{color:#000;border:5px solid var(--primaryDefault);padding:.5em}section#curriculumVitae .timelineItem.editing{background-color:#fff}form div.gradeContainer.formControl{display:flex;flex-direction:row;justify-content:flex-start;align-items:center}section#curriculumVitae form.timelineItem:not(.editing) .delete,section#curriculumVitae form.timelineItem:not(.editing) .edit{color:var(--primaryHover);background-color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.dateContainer{display:none}section#curriculumVitae form.timelineItem.editing .timelineHeader{display:none}section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl{gap:1em;margin-bottom:.5em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{outline:0;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl>*,section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl>*{color:#e5e5e5}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText{color:#fff}section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input{padding:0 .25em}section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,section#curriculumVitae form.timelineItem:not(.editing) div.formControl .courseText{padding:0}section#curriculumVitae form.timelineItem:not(.editing) input[type=submit]{display:none}.courseText{resize:none}section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer input{width:30%}section#projects #projList .projItem{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;width:90%;border:1px solid var(--grey);gap:1em;box-shadow:0 6px 4px 0 var(--mutedBlack)}section#projects #projList{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1em}section#projects #projList .projItem img{max-width:15rem;width:100%;padding:0 1em}section#projects .projItem .linkContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:3em;margin-left:2em}section#projects .linkContainer .btn{padding:.25em .5em}section#projects #isMainProject{width:auto}section#projects form.projItem.editing div.linkContainer,section#projects form.projItem.editing img.displayedImage,section#projects form.projItem:not(.editing) div.formControl.gitContainer,section#projects form.projItem:not(.editing) div.formControl.imageContainer,section#projects form.projItem:not(.editing) div.formControl.isMainProject,section#projects form.projItem:not(.editing) div.formControl.viewProjContainer,section#projects form.projItem:not(.editing) input[type=submit]{display:none}section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{font-size:1.17em;font-weight:700}section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea,section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input{color:#000}@media only screen and (max-width:75em){nav.sideNav .closeBtn{display:block}} \ No newline at end of file diff --git a/dist/js/index.js b/dist/js/index.js index f3f86c7..028f236 100644 --- a/dist/js/index.js +++ b/dist/js/index.js @@ -1 +1 @@ -const scrollLimit=150;function getTimelineData(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t

${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}

\n\t\t\t\t\tGrade: ${e.grade}\n\t\t\t\t\t

${e.course}

\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o="0000-00-00"===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t

${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}

\n\t\t\t\t\t${e.companyName} - ${e.area}\n\t\t\t\t\t

${e.title}

\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{if(t.ok)for(let t=0;t<4;t++)1!==e[t].isMainProject?document.querySelector("#otherProj div").innerHTML+=`\n
\n \n
\n
\n \t

${e[t].title}

\n

${e[t].information}

\n
\n
\n View Project\n ${"N/A"===e[t].githubLink?'disabled="disabled"':""}Git\n
\n
\n
\n `:document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t

${e[t].title}

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

${item.information}

\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tView Project\n\t\t\t\t\t\t\t\t\tGit\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t`}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let t="";document.querySelectorAll("section").forEach((e=>{const n=e.offsetTop;window.pageYOffset>=n-60&&(t=e.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((e=>{e.classList.remove("active"),e.href.includes(t)&&""!==t?e.classList.add("active"):""===t&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{getTimelineData(),getProjectData(),document.getElementById("year").innerHTML=(new Date).getFullYear().toString()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))})); \ No newline at end of file +const scrollLimit=150;function getTimelineData(){let t={year:"numeric",month:"short"};fetch("/api/timelineData/edu").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem"),n.innerHTML=`\n\t\t\t\t\t

${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${new Date(e.endPeriod).toLocaleString("en-gb",t)}

\n\t\t\t\t\tGrade: ${e.grade}\n\t\t\t\t\t

${e.course}

\n\t\t\t\t`,document.getElementById("edu").appendChild(n)}))}))})),fetch("/api/timelineData/work").then((e=>{e.json().then((n=>{e.ok&&n.forEach((e=>{let n=document.createElement("div");n.classList.add("timelineItem");let o="0000-00-00"===e.endPeriod?"Present":new Date(e.endPeriod).toLocaleString("en-gb",t);n.innerHTML=`\n\t\t\t\t\t

${new Date(e.startPeriod).toLocaleString("en-gb",t)} - ${o}

\n\t\t\t\t\t${e.companyName} - ${e.area}\n\t\t\t\t\t

${e.title}

\n\t\t\t\t`,document.getElementById("work").appendChild(n)}))}))}))}function getProjectData(){fetch("/api/projectData").then((t=>{t.json().then((e=>{if(t.ok)for(let t=0;t<4;t++)1!==e[t].isMainProject?document.querySelector("#otherProj div").innerHTML+=`\n
\n \n
\n
\n \t

${e[t].title}

\n

${e[t].information}

\n
\n
\n View Project\n ${"N/A"===e[t].githubLink?'disabled="disabled"':""}Git\n
\n
\n
\n `:document.getElementById("mainProj").innerHTML=`\n\t\t\t\t\t\t

${e[t].title}

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

${e[t].information}\n\t\t\t\t\t\t\t\t\tView Project\n\t\t\t\t\t\t\t\t\tGit\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t`}))}))}window.onscroll=()=>{document.body.scrollTop>=150||document.documentElement.scrollTop>=150?document.querySelector("nav").classList.add("scrolled"):document.querySelector("nav").classList.remove("scrolled");let t="";document.querySelectorAll("section").forEach((e=>{const n=e.offsetTop;window.pageYOffset>=n-60&&(t=e.getAttribute("id"))})),document.querySelectorAll("nav ul li a").forEach((e=>{e.classList.remove("active"),e.href.includes(t)&&""!==t?e.classList.add("active"):""===t&&document.querySelector("nav ul li a").classList.add("active")}))},document.addEventListener("DOMContentLoaded",(()=>{getTimelineData(),getProjectData(),document.getElementById("year").innerHTML=(new Date).getFullYear().toString()})),document.querySelector("#contactError .close").addEventListener("click",(()=>document.querySelector("#contactError").classList.toggle("hidden"))),document.querySelector("#goBackToTop").addEventListener("click",(()=>{window.scrollTo(0,0)})),document.querySelector("#contactForm").addEventListener("submit",(t=>{t.preventDefault();let e=new FormData;e.append("fName",document.querySelector("#fName").value),e.append("lName",document.querySelector("#lName").value),e.append("email",document.querySelector("#email").value),e.append("subject",document.querySelector("#subject").value),e.append("message",document.querySelector("#message").value);let n=!1;if(["#fName","#lName","#email","#subject","#message"].forEach((t=>{const e=document.querySelector(t);0===e.value.length?(e.classList.add("invalid"),n=!0):(e.classList.remove("invalid"),document.querySelector("#contactError").classList.remove("error"))})),n)return document.querySelector("#contactError").classList.add("error"),document.querySelector("#contactError").classList.remove("hidden"),void(document.querySelector("#contactError div").innerText="Please fill out all fields.");fetch("/api/contact",{method:"POST",body:e}).then((t=>{t.ok&&(document.querySelector("#contactError").classList.remove("hidden"),document.querySelector("#contactError div").innerText="Thanks for contacting me, I will get back to you as soon as possible.")}))})); \ No newline at end of file diff --git a/src/css/templateStyles.css b/src/css/templateStyles.css index 10da737..ca7c240 100644 --- a/src/css/templateStyles.css +++ b/src/css/templateStyles.css @@ -64,12 +64,14 @@ h2 { a.btn, form input[type="submit"] { text-decoration: none; - display: inline-block; + display: inline-flex; padding: 1em 2em; border-radius: 0.625em; border: 0.3215em solid var(--primaryDefault); color: #FFFFFF; text-align: center; + align-items: center; + max-height: 4em; } form input[type="submit"] { diff --git a/src/js/index.js b/src/js/index.js index 80b5f35..d2aa1dd 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -112,7 +112,7 @@ function getProjectData()
-

${item["information"]}

+

${json[i]["information"]}

View Project Git