Giovanni-Josserand/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #26

Merged
Giovanni-Josserand merged 17 commits from dev into main 2025-09-06 09:48:48 +00:00
Conversation 0 Commits 17 Files Changed 46 +17 -17
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8580d4b7ac - Show all commits

18
src/components/SingleProject/SingleProject.css
View File

@ -14,7 +14,7 @@
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} }
.single-project-left { .single-project-top {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
@ -25,7 +25,7 @@
height: 210px; height: 210px;
} }
.single-project-left img { .single-project-top img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
@ -34,11 +34,11 @@
object-fit: cover; object-fit: cover;
} }
.single-project-left img.fade-out { .single-project-top img.fade-out {
opacity: 0; opacity: 0;
} }
.single-project-right { .single-project-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -47,17 +47,17 @@
height: 100%; height: 100%;
} }
.single-project-right-top { .single-project-bottom-header {
margin-bottom : 1em; margin-bottom : 1em;
} }
.single-project-right-top-title{ .single-project-title-wrapper{
display: flex; display: flex;
margin-left: 2rem; margin-left: 2rem;
width: 100%; width: 100%;
} }
.single-project-right-bottom { .single-project-bottom-container {
margin-left: 2rem; margin-left: 2rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -159,12 +159,12 @@
right: 10px; right: 10px;
} }
.single-project-left:hover .arrow { .single-project-top:hover .arrow {
display: flex; display: flex;
} }
.single-project-right-top-date{ .single-project-years{
color : var(--text-color); color : var(--text-color);
margin : 0; margin : 0;
margin-left : 2em; margin-left : 2em;

16
src/components/SingleProject/SingleProject.jsx
View File

@ -39,7 +39,7 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
return ( return (
<div className="single-project"> <div className="single-project">
<div className="single-project-left"> <div className="single-project-top">
<button onClick={() => handleChangeImage(-1)} className="arrow preview">{'<'}</button> <button onClick={() => handleChangeImage(-1)} className="arrow preview">{'<'}</button>
<img <img
@ -51,9 +51,9 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
<button onClick={() => handleChangeImage(1)} className="arrow next">{'>'}</button> <button onClick={() => handleChangeImage(1)} className="arrow next">{'>'}</button>
</div> </div>
<div className="single-project-right"> <div className="single-project-bottom">
<div className="single-project-right-top"> <div className="single-project-bottom-header">
<div className="single-project-right-top-title"> <div className="single-project-title-wrapper">
<div className={`single-project-line color-${color[(id-1)%color.length]}`}></div> <div className={`single-project-line color-${color[(id-1)%color.length]}`}></div>
<h3 className="single-project-title"> <h3 className="single-project-title">
{title} {title}
@ -65,14 +65,14 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
</h3> </h3>
</div> </div>
{endYear === null ? ( {endYear === null ? (
<p className="single-project-right-top-date">{beginningYear + ' – in progress'}</p> <p className="single-project-years">{beginningYear + ' – in progress'}</p>
) : beginningYear === endYear ? ( ) : beginningYear === endYear ? (
<p className="single-project-right-top-date">{beginningYear}</p> <p className="single-project-years">{beginningYear}</p>
) : ( ) : (
<p className="single-project-right-top-date">{beginningYear + ' – ' + endYear}</p> <p className="single-project-years">{beginningYear + ' – ' + endYear}</p>
)} )}
</div> </div>
<div className="single-project-right-bottom"> <div className="single-project-bottom-container">
<p className="single-project-description" style={{ whiteSpace: "pre-line" }}> <p className="single-project-description" style={{ whiteSpace: "pre-line" }}>
{description} {description}
</p> </p>