446 lines
8.3 KiB
CSS
446 lines
8.3 KiB
CSS
@media (min-aspect-ratio: 6 / 5) {
|
|
.nav2, .nav3 {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (min-aspect-ratio: 3 / 4) and (max-aspect-ratio: 6 / 5) {
|
|
.nav1, .nav3 {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav12 > p {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-aspect-ratio: 3 / 4) {
|
|
.nav1, .nav2, .nav12 {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/*----------------------------------------------------------------------------*/
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-overflow-scrolling: touch;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
width: 100vw;
|
|
padding: 100vh 0;
|
|
color: white;
|
|
position: relative;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
padding: 0 10vmin;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
overflow-x: visible;
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
z-index: 1000;
|
|
filter: drop-shadow(0px 0px 100px #000);
|
|
}
|
|
|
|
#title-page > * {
|
|
opacity: calc(1 - 1.25 * var(--scroll, 0));
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
#title-page {
|
|
position: fixed;
|
|
width: 100vw;
|
|
background-color: var(--light);
|
|
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
|
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
|
|
height: calc(90vh - 77.5vh * var(--scroll, 0));
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#title-bottom {
|
|
position: absolute;
|
|
top: 65%;
|
|
}
|
|
|
|
#avatar {
|
|
position: fixed;
|
|
top: 50vh;
|
|
translate: 0 calc(-70% - 35% * var(--scroll, 0));
|
|
filter: grayscale(1) opacity(0.3);
|
|
z-index: -1;
|
|
width: max(90vmin, 60vh);
|
|
height: max(90vmin, 60vh);
|
|
image-rendering: crisp-edges;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
}
|
|
|
|
#title-name::before {
|
|
content: "Hi! I'm";
|
|
position: absolute;
|
|
text-transform: none;
|
|
font-family: "Source Code Pro";
|
|
font-weight: normal;
|
|
font-size: calc(min(6vh, 8vw));
|
|
line-height: calc(min(5vh, 7vw));
|
|
top: 0;
|
|
left: 0;
|
|
translate: 1vmin -100%;
|
|
color: var(--dark);
|
|
}
|
|
|
|
.fade-text::before {
|
|
content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t);
|
|
text-transform: uppercase;
|
|
font-size: 15vmin;
|
|
line-height: 15vmin;
|
|
font-family: "Open Sans", sans-serif;
|
|
font-weight: 900;
|
|
white-space: pre;
|
|
color: black;
|
|
}
|
|
|
|
#title-name {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
text-transform: uppercase;
|
|
translate: -50% 0;
|
|
font-size: 15vmin;
|
|
line-height: 15vmin;
|
|
font-family: "Open Sans", sans-serif;
|
|
font-weight: 900;
|
|
color: transparent;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
background-image: var(--grad);
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.fade1 { opacity: 05%; translate: 0 0; }
|
|
.fade2 { opacity: 10%; translate: -5% 0; }
|
|
.fade3 { opacity: 20%; translate: 5% 0; }
|
|
.fade4 { opacity: 25%; translate: -10% 0; }
|
|
.fade5 { opacity: 30%; translate: 10% 0; }
|
|
|
|
.navbar {
|
|
padding: 2vmin 3vmin;
|
|
width: 100vw;
|
|
position: absolute;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
align-items: flex-start;
|
|
z-index: 100;
|
|
}
|
|
|
|
.button {
|
|
white-space: nowrap;
|
|
position: relative;
|
|
font-style: normal;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 4vh;
|
|
font-family: "Open Sans", sans-serif;
|
|
font-weight: 900;
|
|
padding: 1vh 3vh;
|
|
color: var(--color, var(--dark));
|
|
background: transparent;
|
|
text-decoration: none;
|
|
transition: transform var(--timing) 1s, filter var(--timing) 1s;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 2.5vh;
|
|
}
|
|
|
|
.button:active {
|
|
transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.icon::before {
|
|
content: attr(data-i);
|
|
font-family: "Material Symbols Outlined";
|
|
font-size: 4vh;
|
|
}
|
|
|
|
.button::after {
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background-color: var(--color, var(--dark));
|
|
filter: opacity(0);
|
|
transform: scale(0.9);
|
|
z-index: -1;
|
|
border-radius: 1vh;
|
|
transition: transform var(--timing) 1s, filter var(--timing) 1s;
|
|
}
|
|
|
|
.button:hover::after {
|
|
filter: opacity(0.25);
|
|
transform: scale(1);
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.button:hover::after {
|
|
filter: opacity(0);
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
.button:active::after {
|
|
filter: opacity(0.5);
|
|
}
|
|
|
|
/*----------------------------------------------------------------------------*/
|
|
|
|
#menu-modal::backdrop {
|
|
background-color: #0008;
|
|
}
|
|
|
|
#menu-modal {
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
max-height: 100vh;
|
|
max-width: 100vw;
|
|
background: transparent;
|
|
}
|
|
|
|
#menu-inner {
|
|
padding: 2vmin 3vmin;
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 75vw;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
-webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
|
|
clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
|
|
background-color: var(--light);
|
|
}
|
|
|
|
/*----------------------------------------------------------------------------*/
|
|
|
|
h2 {
|
|
font-family: "Open Sans", sans-serif;
|
|
font-weight: 900;
|
|
font-size: 15vmin;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h3 {
|
|
font-family: "Open Sans", sans-serif;
|
|
font-weight: 900;
|
|
font-size: 10vmin;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
}
|
|
|
|
p {
|
|
font-family: "Source Code Pro", monospace;
|
|
font-size: 5vmin;
|
|
}
|
|
|
|
.p2 {
|
|
font-family: "Source Code Pro", monospace;
|
|
font-size: 3vmin;
|
|
}
|
|
|
|
.card {
|
|
margin: 20vmin 0;
|
|
}
|
|
|
|
a {
|
|
font-size: 3.5vmin;
|
|
font-family: "Open Sans", sans-serif;
|
|
font-weight: 900;
|
|
color: white;
|
|
}
|
|
|
|
.card-back {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(var(--rotate));
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10vmin 20vmin;
|
|
background-color: var(--color);
|
|
box-shadow: 0px 10px 50px 0 #000;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
}
|
|
|
|
.card-back-inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: rotate(calc(-1 * var(--rotate)));
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.fade-horizontal::before {
|
|
position: absolute;
|
|
content: attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " " attr(data-t) " ";
|
|
white-space: pre;
|
|
color: #0002;
|
|
z-index: -1;
|
|
left: 0;
|
|
mask: linear-gradient(to right, black 0%, transparent 50%);
|
|
}
|
|
|
|
/*----------------------------------------------------------------------------*/
|
|
|
|
#about-me {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#about-me__title {
|
|
text-align: right;
|
|
margin-right: 10vmin;
|
|
}
|
|
|
|
#about-me__text {
|
|
width: 80vmin;
|
|
position: relative;
|
|
}
|
|
|
|
#about-me__back {
|
|
--rotate: 5deg;
|
|
--color: var(--red);
|
|
}
|
|
|
|
#about-me-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-direction: column;
|
|
transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
|
|
}
|
|
|
|
#about-me-icon1 {
|
|
position: absolute;
|
|
left: -10vmin;
|
|
top: -10vmin;
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
#about-me-icon1::before {
|
|
font-size: 10vmin;
|
|
}
|
|
|
|
/*----------------------------------------------------------------------------*/
|
|
|
|
#projects {
|
|
max-width: 200vmin;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#projects__back {
|
|
--rotate: -5deg;
|
|
--color: var(--yellow);
|
|
padding: 10vmin 40vmin;
|
|
}
|
|
|
|
#projects__text {
|
|
position: relative;
|
|
padding-top: 5vmin;
|
|
}
|
|
|
|
.project-section {
|
|
margin: 10vmin 0;
|
|
}
|
|
|
|
.project__description {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 10vmin;
|
|
}
|
|
|
|
.project-desc__text {
|
|
min-width: 70vmin;
|
|
flex: 1;
|
|
}
|
|
|
|
.project-desc__img {
|
|
flex: 1;
|
|
min-width: 70vmin;
|
|
height: 50vmin;
|
|
box-shadow: 0px 10px 50px 0 #0008;
|
|
border-radius: 2vmin;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#projects-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
flex-direction: column;
|
|
transform: rotate(calc(-1 * var(--rotate))) translateY(17vmin);
|
|
}
|
|
|
|
#view-projects-button {
|
|
margin-top: 20vmin;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#view-projects-button-inner {
|
|
position: relative;
|
|
}
|
|
|
|
#view-all-button {
|
|
user-select: none;
|
|
position: absolute;
|
|
top: -1vmin;
|
|
left: 1vmin;
|
|
font-size: 5vmin;
|
|
}
|
|
|
|
#view-projects-icon {
|
|
user-select: none;
|
|
position: absolute;
|
|
top: -4vmin;
|
|
right: 1vmin;
|
|
}
|
|
|
|
#view-projects-icon::before {
|
|
font-size: 8vmin;
|
|
}
|
|
|
|
#projects-icon1 {
|
|
position: absolute;
|
|
right: 0;
|
|
top: -10vmin;
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
#projects-icon1::before {
|
|
font-size: 10vmin;
|
|
}
|
|
|
|
/*----------------------------------------------------------------------------*/ |