implemented mobile-responsive project card.
This commit is contained in:
Joshua Ashton
+2
-10
@@ -5,16 +5,8 @@ export default function Projects({ cardData }) {
|
||||
return (
|
||||
<>
|
||||
<div id="project-container">
|
||||
<div className="project-grid-container">
|
||||
<div id="project-header">
|
||||
<h2 className="project-header">Projects</h2>
|
||||
|
||||
<p>
|
||||
Here are some projects of mine. Lorem ipsum odor amet,
|
||||
consectetuer adipiscing elit. Purus molestie vel ornare volutpat
|
||||
elit et per montes. Lacus fames diam a non taciti sem.
|
||||
</p>
|
||||
</div>
|
||||
<div id="project-grid-container">
|
||||
<h1>Projects</h1>
|
||||
<div id="project-cards-section">
|
||||
{cardData.map((c) => (
|
||||
<ProjectCard
|
||||
|
||||
@@ -19,19 +19,15 @@ export default function ProjectCard({
|
||||
<div className="project-text">
|
||||
<h3 className="project-header">{title}</h3>
|
||||
<p>{descriptionA}</p>
|
||||
<div className="row">
|
||||
<ul className="feature-list">
|
||||
{featureList.map((item) => (
|
||||
<li>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="button">
|
||||
<a className="view-button-link" href={url} target="_blank">
|
||||
View on GitHub
|
||||
<FontAwesomeIcon icon={faGithub} />
|
||||
</a>
|
||||
</div>
|
||||
<ul className="feature-list">
|
||||
{featureList.map((item) => (
|
||||
<li>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
<a className="view-button-link button" href={url} target="_blank">
|
||||
View on GitHub
|
||||
<FontAwesomeIcon icon={faGithub} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+75
-48
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user