1 line
12 KiB
CSS
1 line
12 KiB
CSS
.home{display:flex;align-items:center;flex-direction:column;background-color:dimgray;margin:0}.home header{width:100%}.home header h1{margin:0}.home header h1 a{display:block;font-size:1.5rem;text-decoration:none;color:#1d1f20;background-color:#d7b94c;border:2px solid #d7b94c;padding:2px 2px}.home header h1 a:hover{color:#d7b94c;background-color:unset}.home header nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;overflow:hidden;position:relative}.home header nav .icon.icon-menu{position:absolute;z-index:999;display:block;right:2rem;width:30px;height:30px;transition:right 100ms ease}@media screen and (min-width: 600px){.home header nav .icon.icon-menu{display:none}}.home header nav .icon.icon-menu:before{content:"";display:block;background-image:url("/icons/menu-grid.svg");background-size:100%;position:absolute;width:30px;height:30px}.home header nav .icon.icon-menu:hover{cursor:pointer}.home header nav .icon.icon-menu.open{right:200px}.home header nav .front-menu{display:flex;flex-direction:column;gap:1rem;overflow:hidden;position:fixed;right:-100%;top:1rem;margin:0;padding:0;transition:right 200ms ease;background-color:#d7b94c}.home header nav .front-menu.open{right:0}@media screen and (min-width: 600px){.home header nav .front-menu{flex-direction:row;position:relative;top:unset;right:unset;background-color:unset}}.home header nav .front-menu{list-style:none}.home header nav .front-menu li{display:block;padding:5px 10px}.home header nav .front-menu li a{display:block;font-family:Amarante;color:#fbfcff;font-size:1.5rem;text-decoration:none;padding-bottom:2px}@media(min-width: 600px){.home header nav .front-menu li a{color:#d7b94c}}.home header nav .front-menu li a:hover{border-bottom:2px solid #d7b94c;padding-bottom:0}.home #root.v1{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto;width:100%;margin:0 auto}.home #root.v1 section{margin:0;padding:1rem 0}.home #root.v1 section .title{margin:0}.home #root.v1 .top{display:flex;min-height:100vh;justify-content:center;align-items:flex-start;width:100%}@media(min-width: 600px){.home #root.v1 .top{align-items:center}}.home #root.v1 .top .computer{display:block;max-width:800px;max-height:400px;width:100%;height:100%;background-color:#1d1f20;border:2rem solid #a6a695;padding:1rem 1rem;box-shadow:0 0 5px 10px rgba(29,31,32,.45);margin-top:5rem}@media(min-width: 600px){.home #root.v1 .top .computer{margin-top:-2rem}}.home #root.v1 .top .computer .heading{margin:0;font-size:.85rem;font-family:Montserrat-Light;color:#d7b94c;position:relative;padding-left:1rem}@media screen and (min-width: 600px){.home #root.v1 .top .computer .heading{font-size:1rem}}.home #root.v1 .top .computer .heading:before{content:">";position:absolute;left:0;width:100%}.home #root.v1 .top .computer .heading:after{content:"|";position:absolute;right:0;width:100%;background:#1d1f20;animation:typing .5s steps(16) forwards,cursor 1s infinite}@media screen and (min-width: 600px){.home #root.v1 .top .computer .heading:after{animation:typing .5s steps(16) forwards,cursor 1s infinite}}.home #root.v1 .top .computer #intro{width:fit-content}.home #root.v1 .top .computer #intro .heading{width:260px}.home #root.v1 .top .computer #body{width:fit-content}.home #root.v1 .top .computer #body .about{opacity:0;animation:showText .1s forwards;animation-delay:1s;font-size:.95rem;color:#d7b94c}@media screen and (min-width: 600px){.home #root.v1 .top .computer #body .about{font-size:1.125rem;animation:showText .1s forwards;animation-delay:1s}}.home #root.v1 .top .computer #outro{width:fit-content}.home #root.v1 .top .computer #outro .heading{width:160px}.home #root.v1 .top .computer #outro .heading:after{color:#1d1f20;animation:typing .5s steps(16) forwards,cursor 1s infinite;animation-delay:2.5s}@media screen and (min-width: 600px){.home #root.v1 .top .computer #outro .heading:after{animation:typing .5s steps(16) forwards,cursor 1s infinite;animation-delay:2.5s}}.home #root.v1 .top .computer #outro .menu{opacity:0;animation:showText .1s forwards;animation-delay:3s;display:flex;flex-wrap:wrap;gap:1rem;padding-top:2rem;padding-bottom:2rem}@media screen and (min-width: 600px){.home #root.v1 .top .computer #outro .menu{animation-delay:3.5s}}.home #root.v1 .top .computer #outro .menu a{font-size:.95rem;color:#d7b94c;cursor:pointer}@media screen and (min-width: 600px){.home #root.v1 .top .computer #outro .menu a{font-size:1.125rem}}.home #root.v1 .bottom{width:100%;height:100%}.home #root.v1 .bottom section{box-shadow:0 0 5px 4px rgba(29,31,32,.45);margin:4rem 0}.home #root.v1 .bottom #cool-stuff{display:flex;flex-direction:column;align-items:center;width:100%;height:auto;background-color:#d7b94c;padding:2rem 0}.home #root.v1 .bottom #cool-stuff .title:after{content:"";display:block;width:150px;margin:0 auto;border-bottom:5px solid #04392f}.home #root.v1 .bottom #cool-stuff .highlights{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2rem;position:relative;height:100%;width:100%;padding-top:1rem}.home #root.v1 .bottom #cool-stuff .highlights .highlight{display:flex;flex-direction:column;justify-content:space-between;align-items:center;align-self:stretch;padding:1rem 1rem;position:relative;width:100%;height:auto;max-width:300px}@media(min-width: 600px){.home #root.v1 .bottom #cool-stuff .highlights .highlight{max-width:400px}}.home #root.v1 .bottom #cool-stuff .highlights .highlight{box-shadow:0 0 5px 0 rgba(29,31,32,.45)}.home #root.v1 .bottom #cool-stuff .highlights .highlight img{width:75%}.home #root.v1 .bottom #cool-stuff .highlights .highlight p{font-size:1.25rem;text-align:center}.home #root.v1 .bottom #cool-stuff .highlights .highlight a{display:block;font-family:Orbitron-Regular;color:#49111c;font-size:1.5rem;font-weight:bold;text-decoration:none;padding-bottom:5px}.home #root.v1 .bottom #cool-stuff .highlights .highlight a:hover{border-bottom:5px solid #49111c;padding-bottom:0}.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip{position:absolute;top:0;left:0}.home #root.v1 .bottom #cool-stuff .highlights .highlight .icon.icon-paperclip:before{content:"";display:block;background-image:url("/icons/paperclip.svg");background-size:100%;position:absolute;width:50px;height:50px;top:-10px;left:-10px}.home #root.v1 .bottom #cool-stuff .highlights .highlight:hover{box-shadow:0 0 5px 5px rgba(29,31,32,.45)}.home #root.v1 .bottom #work{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#a6a695;padding:1rem 2rem}.home #root.v1 .bottom #work>.title{color:#49111c;font-weight:bold}.home #root.v1 .bottom #work>.title:after{content:"";display:block;width:50px;margin:0 auto;border-bottom:5px solid #d7b94c}.home #root.v1 .bottom #work .jobs{display:flex;justify-content:center;flex-wrap:wrap;gap:2rem;width:100%;height:100%}@media screen and (min-width: 800px){.home #root.v1 .bottom #work .jobs{flex-wrap:nowrap}}.home #root.v1 .bottom #work .jobs .left,.home #root.v1 .bottom #work .jobs .right{width:100%;height:100%}@media screen and (min-width: 800px){.home #root.v1 .bottom #work .jobs .left,.home #root.v1 .bottom #work .jobs .right{width:50%}}.home #root.v1 .bottom #work .jobs .left .title,.home #root.v1 .bottom #work .jobs .right .title{text-align:center;color:#49111c}.home #root.v1 .bottom #work .jobs .left .wrapper{display:flex;flex-direction:column;justify-content:space-between}.home #root.v1 .bottom #work .jobs .left .job{padding:1rem 2rem;margin-top:1rem;padding:5px;position:relative;box-shadow:0 0 5px 0px rgba(29,31,32,.45)}.home #root.v1 .bottom #work .jobs .left .job .title{text-align:left;color:#49111c}.home #root.v1 .bottom #work .jobs .left .job:hover{cursor:pointer}.home #root.v1 .bottom #work .jobs .left .job.active{border-left:1rem solid #d7b94c;box-shadow:0 0 5px 5px rgba(29,31,32,.45)}.home #root.v1 .bottom #work .jobs .right .highlights{display:block;height:100%;width:100%;margin-top:1rem}.home #root.v1 .bottom #work .jobs .right .job-highlight{padding:1rem 2rem}.home #root.v1 .bottom #work .jobs .right .job-highlight ul{padding:0}.home #root.v1 .bottom #work .jobs .right .job-highlight ul li{font-size:1.125rem}.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul{padding-left:1rem}.home #root.v1 .bottom #work .jobs .right .job-highlight ul li ul li{padding:2px 0}.home #root.v1 .bottom #work .jobs .right .job-highlight.show{display:block;border-left:1rem solid #d7b94c;box-shadow:0 0 5px 5px rgba(29,31,32,.45)}@media screen and (min-width: 800px){.home #root.v1 .bottom #work .jobs .right .job-highlight.show{border-right:1rem solid #d7b94c;border-left:unset}}.home #root.v1 .bottom #work .jobs .right .job-highlight.hide{display:none}.home #root.v1 .bottom #work .tech{padding:2rem 0}.home #root.v1 .bottom #work .tech .title{color:#49111c;text-align:center}.home #root.v1 .bottom #work .tech .title:after{content:"";display:block;width:50px;margin:0 auto;border-bottom:5px solid #d7b94c}.home #root.v1 .bottom #work .tech .education{text-align:center;font-size:1.125rem}.home #root.v1 .bottom #work .tech .list{display:flex;justify-content:center;column-gap:2rem;row-gap:1rem;flex-wrap:wrap;padding:0}.home #root.v1 .bottom #work .tech .list li{font-size:1.125rem}.home #root.v1 .bottom #contact{display:block;background-color:#1f2421}.home #root.v1 .bottom #contact .title{color:#fbfcff;text-align:center}.home #root.v1 .bottom #contact .title:after{content:"";display:block;width:75px;margin:0 auto;border-bottom:5px solid dimgray}.home #root.v1 .bottom #contact .info{display:flex;justify-content:center;padding:1rem 0}.home #root.v1 .bottom #contact .info .icon.icon-email{position:relative}.home #root.v1 .bottom #contact .info .icon.icon-email:before{content:"";display:block;background-image:url("/icons/email.svg");background-size:100%;width:30px;height:30px}.home #root.v1 #continue{display:block;position:absolute;bottom:5rem;left:50%;transform:translateX(-50%);text-align:center;width:100%;opacity:0;color:#fbfcff;animation:showText .1s forwards,continue .5s steps(50) forwards;animation-delay:4s}@media screen and (min-width: 600px){.home #root.v1 #continue{animation-delay:6s}}.home #root.v1 #continue .icon.icon-arrow-down:after{content:"";display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);background-image:url("/icons/arrow-down-top-line.svg");background-size:100%;width:50px;height:50px}@keyframes typing{0%{color:#d7b94c}100%{width:0;color:#1d1f20}}@keyframes typing2{0%{color:#d7b94c}99.9%{color:#d7b94c}100%{width:0;color:#1d1f20}}@keyframes cursor{50%{color:rgba(0,0,0,0)}}@keyframes showText{0%{opacity:0}100%{opacity:1}}@keyframes continue{0%{bottom:5rem}100%{bottom:4rem}}@font-face{font-family:RobotoSlab-Regular;src:url("/fonts/RobotoSlab-Regular.ttf") format("opentype")}@font-face{font-family:RobotoSlab-Medium;src:url("/fonts/RobotoSlab-Regular.ttf") format("opentype")}@font-face{font-family:RobotoSlab-Bold;src:url("/fonts/RobotoSlab-Bold.ttf") format("opentype")}@font-face{font-family:RobotoSlab-Black;src:url("/fonts/RobotoSlab-Black.ttf") format("opentype")}@font-face{font-family:AtomicAge-Regular;src:url("/fonts/AtomicAge-Regular.ttf") format("opentype")}@font-face{font-family:Montserrat-Regular;src:url("/fonts/Montserrat-Regular.ttf") format("opentype")}@font-face{font-family:Montserrat-Light;src:url("/fonts/Montserrat-Light.ttf") format("opentype")}@font-face{font-family:Montserrat-Italic;src:url("/fonts/Montserrat-Italic.ttf") format("opentype")}@font-face{font-family:Montserrat-Bold;src:url("/fonts/Montserrat-Bold.ttf") format("opentype")}@font-face{font-family:Montserrat-SemiBold;src:url("/fonts/Montserrat-SemiBold.ttf") format("opentype")}@font-face{font-family:Orbitron-Regular;src:url("/fonts/Orbitron-Regular.ttf") format("opentype")}@font-face{font-family:Amarante;src:url("/fonts/Amarante-Regular.ttf") format("opentype")}h1,h2,h3,h4,h5,h6{font-family:Amarante;letter-spacing:2px}h1{font-size:2rem}@media screen and (min-width: 600px){h1{font-size:3rem}}h2{font-size:1.75rem}@media screen and (min-width: 600px){h2{font-size:2.5rem}}h3{font-size:1.5rem}@media screen and (min-width: 600px){h3{font-size:2rem}}h4{font-size:1.25rem}@media screen and (min-width: 600px){h4{font-size:1.5rem}}h5{font-size:1rem}@media screen and (min-width: 600px){h5{font-size:1.25rem}}h6{font-size:1rem}@media screen and (min-width: 600px){h6{font-size:1em}}p,a,li,span{font-family:RobotoSlab-Regular;letter-spacing:1px}strong{font-family:Montserrat-Bold}em{font-family:Montserrat-Italic}u{font-family:Montserrat-SemiBold}cite,q,small{font-family:Orbitron-Regular}s{font-family:Montserrat-SemiBold}
|