FEAT: Added project section, reworked about me section.
This commit is contained in:
MajorDroolz
257
home/index.css
257
home/index.css
@@ -27,13 +27,19 @@ html {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 100vw;
|
||||
padding: 100vh 0;
|
||||
color: white;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
html, body {
|
||||
body {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding: 0 10vmin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
header {
|
||||
@@ -98,8 +104,8 @@ header {
|
||||
.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: calc(min(12vh, 16vw));
|
||||
line-height: calc(min(11vh, 14vw));
|
||||
font-size: 15vmin;
|
||||
line-height: 15vmin;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
white-space: pre;
|
||||
@@ -112,8 +118,8 @@ header {
|
||||
left: 50%;
|
||||
text-transform: uppercase;
|
||||
translate: -50% 0;
|
||||
font-size: calc(min(12vh, 16vw));
|
||||
line-height: calc(min(11vh, 14vw));
|
||||
font-size: 15vmin;
|
||||
line-height: 15vmin;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 900;
|
||||
color: transparent;
|
||||
@@ -156,7 +162,7 @@ header {
|
||||
transition: transform var(--timing) 1s, filter var(--timing) 1s;
|
||||
}
|
||||
|
||||
.button.icon {
|
||||
.icon {
|
||||
font-size: 2.5vh;
|
||||
}
|
||||
|
||||
@@ -165,7 +171,7 @@ header {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.button.icon::before {
|
||||
.icon::before {
|
||||
content: attr(data-i);
|
||||
font-family: "Material Symbols Outlined";
|
||||
font-size: 4vh;
|
||||
@@ -231,87 +237,210 @@ header {
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
.body {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
.head {
|
||||
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 {
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
min-height: 100vh;
|
||||
margin: 10vh 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#about-me__title {
|
||||
text-align: right;
|
||||
font-size: 15vmin;
|
||||
width: 60vmin;
|
||||
z-index: 100;
|
||||
line-height: 15vmin;
|
||||
margin-right: 10vmin;
|
||||
}
|
||||
|
||||
#about-me__text-holder {
|
||||
width: 80vmin;
|
||||
height: 70vmin;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#about-me__text-outer {
|
||||
position: absolute;
|
||||
background: var(--red);
|
||||
box-shadow: 0px 10px 50px 0 #000;
|
||||
padding: 20vh;
|
||||
width: 81vmin;
|
||||
overflow: hidden;
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
#about-me__text {
|
||||
font-size: 4vmin;
|
||||
width: 80vmin;
|
||||
position: relative;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.back-text {
|
||||
position: absolute;
|
||||
bottom: -60%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
#about-me__back {
|
||||
--rotate: 5deg;
|
||||
--color: var(--red);
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
content: attr(data-i);
|
||||
font-family: "Material Symbols Outlined";
|
||||
font-size: 10vh;
|
||||
z-index: 1000;
|
||||
color: var(--color);
|
||||
#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;
|
||||
top: 5vh;
|
||||
left: 15vh;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
left: -10vmin;
|
||||
top: -10vmin;
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
|
||||
#about-me-icon2 {
|
||||
#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;
|
||||
bottom: 10vh;
|
||||
right: 15vh;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
Reference in New Issue
Block a user