diff --git a/src/Projects.jsx b/src/Projects.jsx
index be507dbf..f9c26306 100644
--- a/src/Projects.jsx
+++ b/src/Projects.jsx
@@ -5,16 +5,8 @@ export default function Projects({ cardData }) {
return (
<>
-
-
+
+
Projects
{cardData.map((c) => (
{title}
{descriptionA}
-
-
- {featureList.map((item) => (
- - {item}
- ))}
-
-
-
+
+ {featureList.map((item) => (
+ - {item}
+ ))}
+
+
+ View on GitHub
+
+
diff --git a/src/main.css b/src/main.css
index fb9ad611..3b0e020b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -88,21 +88,20 @@ body {
margin: 5vw;
}
-.project-grid-container {
- margin: 2vw;
+#project-grid-container {
display: grid;
grid-template-columns: 100%;
- grid-template-rows: 1% 90%;
- row-gap: 2vh;
+ grid-template-rows: 10% 80%;
}
.project-card {
- height: 70%;
display: grid;
- grid-template-columns: 50% 50%;
+ grid-template-columns: 40% 60%;
grid-template-rows: 100%;
overflow: hidden;
+ height: 90%;
width: 100%;
+ opacity: 0;
}
.project-card .img-container {
@@ -124,8 +123,8 @@ body {
display: flex;
flex-direction: column;
justify-content: center;
- padding: 5vw;
- background-color: #4A245E;
+ padding: 3vw;
+ background-color: #4a245e;
box-shadow:
0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25),
0 8px 16px -8px hsla(0, 0%, 0%, 0.3),
@@ -137,23 +136,21 @@ body {
width: 100%;
height: 100%;
grid-template-columns: 100%;
- grid-template-rows: 20% 35% 40% 10%;
+ grid-template-rows: 15% 35% 40% 15%;
}
.project-text h3 {
- font-size: clamp(3rem, 3.5vw, 4rem);
- color: #eBD2FF;
+ font-size: clamp(3rem, 3.5rem, 4rem);
+ color: #ebd2ff;
}
.project-text p {
- font-size: clamp(1rem, 1.5vw, 2rem);
- color: #eBD2FF;
-}
-
-.row {
display: flex;
- flex-direction: row;
+ flex-direction: column;
justify-content: center;
+ align-items: center;
+ font-size: clamp(1rem, 1.5rem, 2rem);
+ color: #ebd2ff;
}
.row {
@@ -161,6 +158,7 @@ body {
flex-direction: column;
justify-content: center;
align-items: center;
+ padding: 1vw;
}
#project-cards-section {
@@ -170,8 +168,18 @@ body {
}
.feature-list {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: bottom;
+ align-items: bottom;
+ color: #ebd2ff;
}
+.feature-list li {
+ font-size: clamp(1rem, 1.5rem, 2rem);
+ color: #ebd2ff;
+}
#header {
width: 100%;
@@ -194,7 +202,7 @@ body {
opacity: 0;
}
-#header-text h1 {
+h1 {
font-size: clamp(4.25rem, 5.5vw, 10rem);
font-weight: 600;
letter-spacing: 2px;
@@ -225,7 +233,9 @@ body {
.swiper-slide-active #header-text h1,
.swiper-slide-active #header-text h3,
-.swiper-slide-active #header-text h4 {
+.swiper-slide-active #header-text h4,
+.swiper-slide-active #project-grid-container h1,
+.swiper-slide-active .project-card {
animation: moveDown 0.8s ease-in forwards;
}
@@ -241,6 +251,14 @@ body {
animation-delay: 0.8s;
}
+.swiper-slide-active #project-grid-container h1 {
+ animation-delay: 0.2s;
+}
+
+.swiper-slide-active .project-card {
+ animation-delay: 0.8s;
+}
+
#header-image {
height: 40vh;
display: flex;
@@ -347,8 +365,7 @@ body {
text-align: left;
}
-.card .skill-section-header h3,
-.project-header {
+.card .skill-section-header h3 {
font-size: clamp(1rem, 2vw, 3rem);
}
@@ -356,10 +373,6 @@ body {
color: #ebd2ff;
}
-.project-header {
- color: #4A245E;
-}
-
.socials {
display: flex;
flex-direction: row;
@@ -369,20 +382,15 @@ body {
.button {
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-items: center;
justify-content: center;
- padding: 1vw;
background-color: #ebd2ff;
}
.view-button-link {
- display: grid;
- grid-template-rows: 100%;
- grid-template-columns: 60% 30%;
- column-gap: 10vw;
- font-size: clamp(1.5rem, 2vw, 3rem);
- color: #4A245E;
+ font-size: clamp(1rem, 1.5vw, 2rem);
+ color: #4a245e;
text-decoration: none;
}
@@ -501,8 +509,24 @@ body {
margin: 0;
}
- #header-text h1 {
+ h1 {
font-size: clamp(2.5rem, 2.75vw, 3rem);
+ margin-bottom: 16px;
+ width: unset;
+ line-height: 1.1;
+ }
+
+ h2 {
+ padding-bottom: 0;
+ }
+
+ h3 {
+ font-size: clamp(1.5rem, 2vw, 2.5rem);
+ }
+
+ .project-text p,
+ .project-text ul li {
+ font-size: clamp(0.5rem, 0.8rem, 1rem);
}
#header-image {
@@ -516,10 +540,6 @@ body {
border-radius: 18px 18px 18px 18px;
}
- #skills-section h2 {
- padding-bottom: 0;
- }
-
.cards {
grid-template-columns: 100%;
grid-template-rows: 30% 30% 30%;
@@ -531,16 +551,6 @@ body {
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;
@@ -553,6 +563,23 @@ body {
.material-symbols-outlined {
font-size: 10vw;
}
+
+ .project-card {
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: 40% 60%;
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ padding: 2vw;
+ }
+
+ .project-text {
+ padding: 2vw;
+ }
+
+ .button {
+ }
}
@media (max-width: 485px) {