691 lines
No EOL
16 KiB
SCSS
691 lines
No EOL
16 KiB
SCSS
@use '../shared/colors' as colors;
|
|
|
|
.home {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background-color: colors.$primaryGrey;
|
|
margin: 0;
|
|
|
|
header {
|
|
width: 100%;
|
|
|
|
h1 {
|
|
margin: 0;
|
|
|
|
a {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
text-decoration: none;
|
|
color: colors.$primaryBlack;
|
|
background-color: colors.$primaryYellow;
|
|
border: 2px solid colors.$primaryYellow;
|
|
padding: 2px 2px;
|
|
|
|
&:hover {
|
|
color: colors.$primaryYellow;
|
|
background-color: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 2rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.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) {
|
|
display: none;
|
|
}
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
background-image: url('/icons/menu-grid.svg');
|
|
background-size: 100%;
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.open {
|
|
right: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: colors.$primaryYellow;
|
|
|
|
|
|
&.open {
|
|
right: 0;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
flex-direction: row;
|
|
position: relative;
|
|
top: unset;
|
|
right: unset;
|
|
background-color: unset;
|
|
|
|
}
|
|
|
|
list-style: none;
|
|
|
|
li {
|
|
display: block;
|
|
padding: 5px 10px;
|
|
|
|
a {
|
|
display: block;
|
|
font-family: Amarante;
|
|
color: colors.$primaryWhite;
|
|
font-size: 1.5rem;
|
|
text-decoration: none;
|
|
padding-bottom: 2px;
|
|
|
|
@media (min-width: 600px) {
|
|
color: colors.$primaryYellow;
|
|
}
|
|
|
|
&:hover {
|
|
border-bottom: 2px solid colors.$primaryYellow;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#root {
|
|
&.v1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: auto;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
|
|
section {
|
|
margin: 0;
|
|
padding: 1rem 0;
|
|
|
|
.title {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
|
|
@media (min-width: 600px) {
|
|
align-items: center;
|
|
}
|
|
|
|
.computer {
|
|
display: block;
|
|
max-width: 800px;
|
|
max-height: 400px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: colors.$primaryBlack;
|
|
border: 2rem solid colors.$computerBorder;
|
|
padding: 1rem 1rem;
|
|
box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45);
|
|
|
|
margin-top: 5rem;
|
|
|
|
@media (min-width: 600px) {
|
|
margin-top: -6rem;
|
|
}
|
|
|
|
.heading {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
font-family: Montserrat-Light;
|
|
color: colors.$primaryYellow;
|
|
position: relative;
|
|
padding-left: 1rem;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
&:before {
|
|
content: '>';
|
|
position: absolute;
|
|
left: 0;
|
|
width: 100%;
|
|
//background: #1d1f20;
|
|
}
|
|
|
|
&:after {
|
|
content: "|";
|
|
position: absolute;
|
|
right: 0;
|
|
width: 100%;
|
|
background: colors.$primaryBlack;
|
|
animation: typing 0.5s steps(16) forwards,
|
|
cursor 1s infinite;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
animation: typing 0.5s steps(16) forwards,
|
|
cursor 1s infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
#intro {
|
|
width: fit-content;
|
|
|
|
.heading {
|
|
width: 260px;
|
|
}
|
|
}
|
|
|
|
#body {
|
|
width: fit-content;
|
|
|
|
.about {
|
|
opacity: 0;
|
|
animation: showText 0.1s forwards;
|
|
animation-delay: 1s;
|
|
font-size: 0.95rem;
|
|
color: colors.$primaryYellow;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
font-size: 1.125rem;
|
|
animation: showText 0.1s forwards;
|
|
animation-delay: 1s;
|
|
}
|
|
}
|
|
}
|
|
|
|
#outro {
|
|
width: fit-content;
|
|
|
|
.heading {
|
|
width: 160px;
|
|
|
|
&:after{
|
|
color: colors.$primaryBlack;
|
|
animation: typing 0.5s steps(16) forwards,
|
|
cursor 1s infinite;
|
|
animation-delay: 2.5s;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
animation: typing 0.5s steps(16) forwards,
|
|
cursor 1s infinite;
|
|
animation-delay: 2.5s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu {
|
|
opacity: 0;
|
|
animation: showText 0.1s forwards;
|
|
animation-delay: 3s;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
animation-delay: 3.5s;
|
|
}
|
|
|
|
a {
|
|
font-size: 0.95rem;
|
|
color: colors.$primaryYellow;
|
|
cursor: pointer;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
section {
|
|
box-shadow: 0 0 5px 4px rgba(29, 31, 32, 0.45);
|
|
margin: 4rem 0;
|
|
}
|
|
|
|
#cool-stuff{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: auto;
|
|
background-color: colors.$primaryYellow;
|
|
padding: 2rem 0;
|
|
|
|
.title {
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 150px;
|
|
margin: 0 auto;
|
|
border-bottom: 5px solid colors.$primaryGreen;
|
|
}
|
|
}
|
|
|
|
.highlights {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
position: relative;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-top: 1rem;
|
|
|
|
.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) {
|
|
max-width: 400px;
|
|
}
|
|
|
|
box-shadow: 0 0 5px 0 rgba(29, 31, 32, 0.45);
|
|
|
|
img {
|
|
width: 75%;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.25rem;
|
|
text-align: center;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
font-family: Orbitron-Regular;
|
|
color: colors.$primaryRed;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
padding-bottom: 5px;
|
|
|
|
&:hover {
|
|
border-bottom: 5px solid colors.$primaryRed;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
&.icon-paperclip {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
background-image: url('/icons/paperclip.svg');
|
|
background-size: 100%;
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
top: -10px;
|
|
left: -10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
#work {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: colors.$computerBorder;
|
|
padding: 1rem 2rem;
|
|
|
|
> .title {
|
|
color: colors.$primaryRed;
|
|
font-weight: bold;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 50px;
|
|
margin: 0 auto;
|
|
border-bottom: 5px solid colors.$primaryYellow;
|
|
|
|
}
|
|
}
|
|
|
|
.jobs {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
@media screen and (min-width: 800px) {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.left, .right {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
@media screen and (min-width: 800px) {
|
|
width: 50%;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
color: colors.$primaryRed;
|
|
}
|
|
}
|
|
|
|
.left {
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.job {
|
|
padding: 1rem 2rem;
|
|
margin-top: 1rem;
|
|
padding: 5px;
|
|
position: relative;
|
|
box-shadow: 0 0 5px 0px rgba(29, 31, 32, 0.45);
|
|
|
|
.title {
|
|
text-align: left;
|
|
color: colors.$primaryRed;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.active {
|
|
border-left: 1rem solid colors.$primaryYellow;
|
|
box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
.highlights {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.job-highlight {
|
|
//width: 100%;
|
|
//height: 100%;
|
|
padding: 1rem 2rem;
|
|
|
|
ul {
|
|
padding: 0;
|
|
//margin: 0;
|
|
|
|
li {
|
|
font-size: 1.125rem;
|
|
|
|
ul {
|
|
padding-left: 1rem;
|
|
|
|
li {
|
|
padding: 2px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.show {
|
|
display: block;
|
|
border-left: 1rem solid colors.$primaryYellow;
|
|
box-shadow: 0 0 5px 5px rgba(29, 31, 32, 0.45);
|
|
|
|
@media screen and (min-width: 800px) {
|
|
border-right: 1rem solid colors.$primaryYellow;
|
|
border-left: unset;
|
|
}
|
|
}
|
|
|
|
&.hide {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.tech {
|
|
padding: 2rem 0;
|
|
|
|
.title {
|
|
color: colors.$primaryRed;
|
|
text-align: center;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 50px;
|
|
margin: 0 auto;
|
|
border-bottom: 5px solid colors.$primaryYellow;
|
|
}
|
|
}
|
|
|
|
.education {
|
|
text-align: center;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
justify-content: center;
|
|
column-gap: 2rem;
|
|
row-gap: 1rem;
|
|
flex-wrap: wrap;
|
|
padding: 0;
|
|
|
|
li {
|
|
font-size: 1.125rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#contact {
|
|
display: block;
|
|
background-color: colors.$carbonBlack;
|
|
|
|
.title {
|
|
color: colors.$primaryWhite;
|
|
text-align: center;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 75px;
|
|
margin: 0 auto;
|
|
border-bottom: 5px solid colors.$primaryGrey;
|
|
|
|
}
|
|
}
|
|
|
|
.info {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1rem 0;
|
|
|
|
.icon {
|
|
&.icon-email {
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
background-image: url('/icons/email.svg');
|
|
background-size: 100%;
|
|
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
#continue {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
width: 100%;
|
|
opacity: 0;
|
|
color: colors.$primaryWhite;
|
|
animation: showText 0.1s forwards,
|
|
continue 0.5s steps(50) forwards;
|
|
|
|
animation-delay: 4s;
|
|
|
|
@media screen and (min-width: 600px) {
|
|
animation-delay: 6s;
|
|
}
|
|
|
|
.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: colors.$primaryYellow;
|
|
}
|
|
100% {
|
|
width: 0;
|
|
color: colors.$primaryBlack;
|
|
}
|
|
}
|
|
|
|
@keyframes typing2 {
|
|
0% {
|
|
color: colors.$primaryYellow;
|
|
}
|
|
99.9% {
|
|
color: colors.$primaryYellow;
|
|
}
|
|
100% {
|
|
width: 0;
|
|
color: colors.$primaryBlack;
|
|
}
|
|
}
|
|
|
|
@keyframes cursor {
|
|
50% { color: transparent }
|
|
}
|
|
|
|
@keyframes showText {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes continue {
|
|
0% {
|
|
bottom: 5rem;
|
|
}
|
|
100% {
|
|
bottom: 4rem;
|
|
}
|
|
} |