OHAUL: Completely new figma design, made about section.
This commit is contained in:
MajorDroolz
537
home/index.css
537
home/index.css
@@ -1,504 +1,165 @@
|
||||
@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;
|
||||
--max-width: 1024px;
|
||||
--pad: max(20px, calc((100vw - var(--max-width)) / 2));
|
||||
|
||||
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%;
|
||||
.nav-link {
|
||||
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;
|
||||
font-weight: 900;
|
||||
font-family: "Open Sans";
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 2.5vh;
|
||||
.shadow {
|
||||
filter: drop-shadow(0 4px 0 #0004);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transition: transform var(--timing) 0.3s, filter var(--timing) 0.3s;
|
||||
transform: scale(0.9);
|
||||
.icon, .r-icon, .button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.clamp-width {
|
||||
width: 100vw;
|
||||
padding-right: var(--pad);
|
||||
padding-left: var(--pad);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
content: attr(data-i);
|
||||
font-family: "Material Symbols Outlined";
|
||||
font-size: 4vh;
|
||||
font-size: 36px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.r-icon::after {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
content: attr(data-i);
|
||||
font-size: 1.5rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.button:hover::after {
|
||||
filter: opacity(0.25);
|
||||
transform: scale(1);
|
||||
.scroll-opacity {
|
||||
opacity: calc(1 - var(--scroll));
|
||||
}
|
||||
|
||||
@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;
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 900;
|
||||
font-size: 15vmin;
|
||||
text-transform: uppercase;
|
||||
line-height: 15vmin;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 10vmin;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
i {
|
||||
font-size: 20px;
|
||||
font-size: "Source Serif Pro";
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-size: 5vmin;
|
||||
font-size: 20px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.p2 {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-size: 3vmin;
|
||||
.lighter {
|
||||
background: #fff4;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 20vmin 0;
|
||||
.darker {
|
||||
background: #0004;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 3.5vmin;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
hr {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.card-back {
|
||||
.button {
|
||||
color: var(--color);
|
||||
position: relative;
|
||||
padding: 10px 40px;
|
||||
}
|
||||
|
||||
.button::before {
|
||||
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: var(--shadow);
|
||||
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%);
|
||||
background: var(--color);
|
||||
opacity: 50%;
|
||||
content: "";
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#about-me {
|
||||
header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
font-size: 25px;
|
||||
padding: 20px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: bolder;
|
||||
color: var(--dark);
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#about-me__title {
|
||||
text-align: right;
|
||||
margin-right: 10vmin;
|
||||
#header-back {
|
||||
background: var(--light);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 84px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#about-me__text {
|
||||
width: 80vmin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#about-me__back {
|
||||
--rotate: 5deg;
|
||||
--color: var(--red);
|
||||
}
|
||||
|
||||
#about-me-inner {
|
||||
#about {
|
||||
height: 90vh;
|
||||
background: var(--light);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
|
||||
gap: 30px;
|
||||
padding-bottom: 30px;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
#about-me-icon1 {
|
||||
#avatar {
|
||||
filter: grayscale(1) opacity(0.2);
|
||||
position: absolute;
|
||||
left: -10vmin;
|
||||
top: -10vmin;
|
||||
transform: rotate(5deg);
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
left: 70%;
|
||||
top: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#about-me-icon1::before {
|
||||
font-size: 10vmin;
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#about-hr {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
#about-me {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#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: 50vmin;
|
||||
height: 50vmin;
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: 2vmin;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#projects-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transform: rotate(calc(-1 * var(--rotate))) translateY(20vmin);
|
||||
}
|
||||
|
||||
#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: -4vmin;
|
||||
left: 1vmin;
|
||||
font-size: 5vmin;
|
||||
}
|
||||
|
||||
#view-projects-icon {
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: -6vmin;
|
||||
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;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
#my-experience {
|
||||
max-width: 200vmin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#my-experience__title {
|
||||
margin-bottom: 5vmin;
|
||||
font-size: 13vmin;
|
||||
}
|
||||
|
||||
#my-experience__text-outer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 100vw;
|
||||
gap: 30vmin;
|
||||
}
|
||||
|
||||
#my-experience__text {
|
||||
position: relative;
|
||||
width: 50vmin;
|
||||
}
|
||||
|
||||
#my-experience__back {
|
||||
--rotate: 5deg;
|
||||
--color: var(--green);
|
||||
padding: 10vmin 15vmin;
|
||||
}
|
||||
|
||||
#my-experience-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
transform: rotate(calc(-1 * var(--rotate))) translateY(10%);
|
||||
}
|
||||
|
||||
#my-experience__resume {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5vmin;
|
||||
}
|
||||
|
||||
#my-experience__resume-img {
|
||||
width: 40vmin;
|
||||
height: 60vmin;
|
||||
background-color: white;
|
||||
border-radius: 2vmin;
|
||||
box-shadow: var(--shadow);
|
||||
height: 100vh;
|
||||
}
|
||||
Reference in New Issue
Block a user