Implemented primary section consisting of key information, including collapsible skill cards.
This commit is contained in:
Joshua Ashton
+429
@@ -0,0 +1,429 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
|
||||
|
||||
/*
|
||||
#EBD2FF
|
||||
#c69bca
|
||||
#9e75a8
|
||||
#4a245e
|
||||
*/
|
||||
|
||||
:root {
|
||||
--width: 480px;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#84509f 0%,
|
||||
#5e3276 39%,
|
||||
hsl(279deg 62% 19%) 61%,
|
||||
hsl(279deg 94% 7%) 100%
|
||||
);
|
||||
background-size:
|
||||
300% 100%,
|
||||
cover;
|
||||
animation: background-fade 4s linear infinite;
|
||||
animation-direction: alternate;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #f9f2ff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
height: 36px;
|
||||
background-color: #ebd2ff;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
#primary {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 40% 50% 10%;
|
||||
column-gap: 1vh;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 60% 35%;
|
||||
grid-template-rows: 100%;
|
||||
column-gap: 2vw;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 120px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#header-text h1 {
|
||||
font-size: clamp(4.25rem, 5.5vw, 10rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
width: max-content;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0;
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
#header-text h3,
|
||||
#header-text h4 {
|
||||
color: #ebd2ff;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#header-text h3 {
|
||||
font-size: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
#header-text h4 {
|
||||
font-size: clamp(1rem, 1.5vw, 1.25rem);
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h1,
|
||||
.swiper-slide-active #header-text h3,
|
||||
.swiper-slide-active #header-text h4 {
|
||||
animation: moveDown 0.8s ease-in forwards;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h1 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h3 {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.swiper-slide-active #header-text h4 {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
#header-image {
|
||||
height: 40vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--width);
|
||||
aspect-ratio: 1/1;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#header-image img {
|
||||
display: block;
|
||||
width: calc(var(--width) / 2);
|
||||
filter: drop-shadow(5px 6px 5px rgba(36, 36, 42, 0.5));
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#header-image img {
|
||||
animation: imgMoveDown 0.8s ease-in forwards 0.2s;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 200,
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
font-size: 5vw;
|
||||
color: #ebd2ff;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#skills-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#skills-section h2 {
|
||||
font-size: clamp(3.25rem, 4.5vw, 8rem);
|
||||
color: #ebd2ff;
|
||||
opacity: 0;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 30% 30%;
|
||||
grid-template-rows: 100%;
|
||||
column-gap: 2.25vw;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background-color: #ebd2ff;
|
||||
border-radius: 20px;
|
||||
width: 20vw;
|
||||
box-shadow:
|
||||
0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
|
||||
0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
|
||||
0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
|
||||
}
|
||||
|
||||
.card .skill-section-header {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 60%;
|
||||
grid-template-rows: 100%;
|
||||
column-gap: 1vw;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
padding: 2vw;
|
||||
margin: 0;
|
||||
background-color: #4a245e;
|
||||
border-radius: 18px 18px 0 0;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card .skill-section-header .skill-symbol {
|
||||
font-variation-settings:
|
||||
"FILL" 0,
|
||||
"wght" 200,
|
||||
"GRAD" 0,
|
||||
"opsz" 24;
|
||||
font-size: 5vw;
|
||||
height: 5vh;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.card .skill-section-header h3 {
|
||||
font-size: clamp(1rem, 2vw, 3rem);
|
||||
color: #ebd2ff;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
.card ul li {
|
||||
list-style: none;
|
||||
font-size: clamp(1rem, 1.25vw, 1.5rem);
|
||||
color: #4a245e;
|
||||
}
|
||||
|
||||
.swiper-slide-active #skills-section .cards .card {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.swiper-slide-active #skills-section h2,
|
||||
.swiper-slide-active #skills-section .card {
|
||||
animation: moveCardsDown 0.8s ease-in forwards;
|
||||
}
|
||||
|
||||
.swiper-slide-active #skills-section .card {
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
|
||||
.down-indicator {
|
||||
opacity: 0;
|
||||
animation: moveDown 0.8s ease-in forwards;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
/**Animations**/
|
||||
@keyframes background-fade {
|
||||
from {
|
||||
background-position: right, center;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveDown {
|
||||
0% {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveCardsDown {
|
||||
0% {
|
||||
transform: translateY(-40px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imgMoveDown {
|
||||
0% {
|
||||
transform: translateY(calc(var(--width) / -5));
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**Responsiveness**/
|
||||
@media (max-width: 1250px) {
|
||||
#header-text {
|
||||
padding-left: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1075px) {
|
||||
:root {
|
||||
--width: 400px;
|
||||
}
|
||||
|
||||
.swiper-slide .slide-container {
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
padding-left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
:root {
|
||||
--width: 360px;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 790px) {
|
||||
#primary {
|
||||
display: grid;
|
||||
grid-template-rows: 50% 40% 10%;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
#header {
|
||||
grid-template-columns: 60% 40%;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#header-text h1 {
|
||||
font-size: clamp(2.5rem, 2.75vw, 3rem);
|
||||
}
|
||||
|
||||
#header-image {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
#skills-section .card .skill-section-header {
|
||||
border-radius: 18px 18px 18px 18px;
|
||||
}
|
||||
|
||||
#skills-section h2 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.cards {
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 30% 30% 30%;
|
||||
column-gap: 0;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 50vw;
|
||||
margin: 1vw;
|
||||
}
|
||||
|
||||
.card .skill-section-header h3 {
|
||||
font-size: clamp(1.5rem, 2vw, 2.5rem);
|
||||
}
|
||||
|
||||
#header-text h1 {
|
||||
margin-bottom: 16px;
|
||||
width: unset;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-size: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 485px) {
|
||||
:root {
|
||||
--width: 280px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user