ul {
list-style-type: none;
}
ul.menu {
text-align: center;
text-transform: lowercase;
padding: 0;
margin: 0;
font-size: 0;
width: 100%;
position: fixed;
top: 0;
background-color: #e6e6e6;
z-index: 100;
}
ul.menu.icon {
display: none;
}
li.menu {
display: inline;
}
a.menu {
color: darkcyan;
text-decoration: none;
display: inline-block;
transition-duration: 0.4s;
padding: 10px 24px;
width: 150px;
font-size: 25px;
height: 30px;
}
a.menu:hover {
color: whitesmoke;
background-color: darkcyan;
}
html {
scroll-behavior: smooth;
}
body {
background-color: whitesmoke;
color: black;
font-family: courier new;
margin-top: 50px;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
}
h1 {
font-size: 60px;
cursor: default;
padding-top: 100px;
color: black;
max-height: 999999px;
}
h2 {
font-size: 50px;
cursor: default;
color: black;
max-height: 999999px;
align-self: flex-end;
margin-left: 20px;
}
h2.accent {
color: darkcyan;
}
h2.gold {
color: gold;
}
h3 {
font-size: 40px;
cursor: default;
margin-left: 20px;
margin-bottom: 5px;
max-height: 999999px;
align-self: flex-end;
}
h3.accent {
color: whitesmoke;
}
h4 {
font-size: 30px;
cursor: default;
max-height: 999999px;
align-self: flex-end;
}
h4.accent {
color: whitesmoke;
}
p {
font-size: 30px;
max-height: 999999px;
cursor: default;
}
div.main {
max-width: 1600px;
margin: 0 auto;
position: relative;
}
div.main.intro {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding-right: 50px;
padding-left: 50px;
}
div.background {
background-color: #e6e6e6;
border: 1px solid currentColor;
border-color: #e6e6e6;
}
div.backgroundAccent {
background-color: darkcyan;
}
div.backgroundAccentSecondary {
background-color: dimgray;
border: 1px solid currentColor;
border-color: dimgray;
}
div.inner {
padding-right: 50px;
padding-left: 50px;
padding-top: 50px;
position: relative;
}
div.inner.small {
padding: 50px;
}
div.scroll {
height: 50px;
width: 50px;
padding: 0;
margin: 0;
position: absolute;
bottom: 0;
}
div.innerSecondary {
padding-right: 50px;
padding-left: 50px;
padding-top: 0;
}
div.column {
float: right;
width: 50%;
padding: 50px;
box-sizing: border-box;
}
div.column.left {
float: left;
}
div.column.left.img {
height: 200px;
width: 200px;
position: relative;
padding: 0;
}
div.column.left.text {
padding: 0;
position: relative;
display: flex;
}
div.column.left.img.small {
height: 100px;
width: 100px;
}
div.column.left.text.small {
height: 100px;
}
div.columnImgSmall {
height: 100px;
width: 100px;
box-sizing: border-box;
float: left;
position: relative;
}
div.columnTextSmall {
padding: 0;
height: 100px;
box-sizing: border-box;
float: left;
position: relative;
display: flex;
}
div.row:after {
content: '';
display: table;
clear: both;
}
div.title {
display: inline-block;
width: 100%;
}
img.title {
height: 150px;
width: 150px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img.animRobot {
animation: 3s ease 0s infinite normal none running animRobot;
}
img.title.small {
height: 75px;
width: 75px;
}
h1.accent {
color: gold;
max-height: 999999px;
align-self: flex-end;
margin-left: 20px;
}
div.column.picture {
margin-top: 50px;
margin-bottom: 50px;
border-radius: 100px;
background: url('me.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 500px;
max-width: 500px;
}
div.column.intro-text {
padding: 20px;
}
h1.intro {
padding-top: 0;
color: black;
max-height: 999999px;
}
div.button {
padding-top: 100px;
padding-bottom: 100px;
}
a.button {
color: whitesmoke;
border: 3px solid currentColor;
border-color: darkcyan;
background-color: darkcyan;
border-radius: 20px;
font-size: 32px;
padding: 16px 32px;
text-align: center;
transition-duration: 0.4s;
cursor: pointer;
text-decoration: none;
}
a.button:hover {
color: whitesmoke;
border: 3px solid currentColor;
border-color: #006969;
background-color: #006969;
}
h1.inner {
color: black;
max-height: 999999px;
}
div.inner.certs {
padding-top: 0;
padding-bottom: 50px;
}
div.inner.info {
position: relative;
padding: 50px;
}
div.main.skills {
padding-bottom: 20px;
}
div.row.skills {
padding-bottom: 50px;
}
div.column.left.skills {
padding: 0;
padding-left: 100px;
color: whitesmoke;
}
div.cellSkill {
float: left;
width: 100%;
box-sizing: border-box;
color: whitesmoke;
display: flex;
align-items: center;
vertical-align: middle;
height: 60px;
}
span.skillPoint {
float: left;
width: 30px;
height: 30px;
box-sizing: border-box;
color: whitesmoke;
border-radius: 50%;
background-color: whitesmoke;
margin-left: 6px;
}
p.skills {
margin-top: 0.5em;
margin-bottom: 0.5em;
font-weight: bold;
}
ul.skills {
margin-top: 0;
border: 1px solid red;
}
div.projectTitle {
margin-top: 50px;
margin-bottom: 50px;
}
div.project {
margin-right: 50px;
margin-left: 50px;
margin-bottom: 100px;
}
div.projectsFrame {
height: 150px;
width: 150px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img.wheelBig {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
animation: 5s ease 0s infinite normal none running animWheel;
}
img.wheelMedium {
height: 60px;
width: 60px;
position: absolute;
bottom: 25px;
right: 0;
animation: 5s ease 0s infinite normal none running animWheelReverse;
}
img.wheelSmall {
height: 30px;
width: 30px;
position: absolute;
bottom: 0;
right: 40px;
animation: 5s ease 0s infinite normal none running animWheel;
}
p.project {
color: whitesmoke;
}
p.stack {
font-size: 20px;
color: whitesmoke;
}
a.project {
position: relative;
font-size: 40px;
color: whitesmoke;
font-weight: bold;
margin-right: 10px;
margin-left: 10px;
padding-left: 100px;
padding-top: 20px;
padding-bottom: 5px;
}
a.project:hover {
filter: sepia() saturate(10000%) hue-rotate(330deg);
}
a.project.weather {
background: url('weather.svg');
background-repeat: no-repeat;
}
a.project.weather:hover {
filter: sepia() saturate(10000%) hue-rotate(330deg);
}
a.project.vending {
background: url('vending.svg');
background-repeat: no-repeat;
}
a.project.vending:hover {
filter: sepia() saturate(10000%) hue-rotate(330deg);
}
a.project.coding {
background: url('coding.svg');
background-repeat: no-repeat;
}
a.project.coding:hover {
filter: sepia() saturate(10000%) hue-rotate(330deg);
}
div.inner.hobbies {
padding-bottom: 100px;
}
img.animHobby {
animation: 5s linear 0s infinite normal none running animHobby;
}
h1.hobbies {
color: darkcyan;
max-height: 999999px;
align-self: flex-end;
margin-left: 20px;
}
div.footer {
background-color: darkcyan;
border: 1px solid currentColor;
border-color: darkcyan;
}
div.cellContact {
float: left;
width: 50%;
box-sizing: border-box;
color: whitesmoke;
border: 1px solid red;
display: flex;
}
p.footer.copy {
font-size: 16px;
font-family: sans-serif;
color: #e6e6e6;
text-decoration: none;
text-align: center;
}
h1.footer.name {
color: #e6e6e6;
text-decoration: none;
text-align: start;
}
h2.footer {
color: #e6e6e6;
text-align: start;
}
ul.footer {
text-align: start;
}
li.footer {
padding-top: 3px;
padding-bottom: 3px;
list-style-type: none;
}
a.footer {
font-size: 30px;
color: #e6e6e6;
text-align: start;
text-decoration: none;
list-style-type: none;
}
a.footer:hover {
text-decoration: underline;
}
@media (max-width: 1080px) {
h1 {
padding-top: 0;
}
h2 {
width: 100%;
text-align: center;
align-self: center;
}
div.main.intro {
flex-direction: column-reverse;
}
div.column.picture {
margin: 50px auto 0;
}
div.button {
padding-top: 50px;
padding-bottom: 50px;
}
div.column {
width: 100%;
}
div.column.left.img {
width: 100%;
}
div.column.left.text {
height: 100px;
width: 100%;
}
}
@keyframes animHobby {
0% {
transform: skewX(0deg);
}
20% {
transform: skewX(-5deg);
}
30% {
transform: skewX(-4deg);
}
50% {
transform: skewX(-9deg);
}
60% {
transform: skewX(-2deg);
}
70% {
transform: skewX(-4deg);
}
100% {
transform: skewX(0deg);
}
}
@keyframes animRobot {
0% {
transform: scale(1) translateY(0%);
}
20% {
transform: scale(1.1, 1.1) translateY(0%);
}
60% {
transform: scale(0.9, 1) translateY(-20%);
}
75% {
transform: scale(1) translateY(0%);
}
100% {
transform: scale(1) translateY(0%);
}
}
@keyframes animWheel {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes animWheelReverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-359deg);
}
}