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

add of the years in singleProjects #24

Merged
Giovanni-Josserand merged 1 commits from feature/projectsDate into dev 2025-09-03 19:19:10 +00:00
Conversation 0 Commits 1 Files Changed 3 +38 -11
3 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Projects/Projects.jsx
View File

@ -45,6 +45,9 @@ function Projects() {
skills={project.skills} skills={project.skills}
id={project.id} id={project.id}
nbImage={project.nb_image} nbImage={project.nb_image}
school={project.school}
beginningYear={project.beginning_year}
endYear={project.end_year}
/> />
))} ))}
</div> </div>
@ -71,6 +74,8 @@ function Projects() {
id={project.id} id={project.id}
nbImage={project.nb_image} nbImage={project.nb_image}
school={project.school} school={project.school}
beginningYear={project.beginning_year}
endYear={project.end_year}
/> />
))} ))}
</div> </div>

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

@ -48,6 +48,10 @@
} }
.single-project-right-top { .single-project-right-top {
margin-bottom : 1em;
}
.single-project-right-top-title{
display: flex; display: flex;
margin-left: 2rem; margin-left: 2rem;
width: 100%; width: 100%;
@ -94,7 +98,7 @@
font-size: 2rem; font-size: 2rem;
color: #EAEAEA; color: #EAEAEA;
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
@ -158,3 +162,12 @@
.single-project-left:hover .arrow { .single-project-left:hover .arrow {
display: flex; display: flex;
} }
.single-project-right-top-date{
color : #B0B0B0;
margin : 0;
margin-left : 2em;
font-weight: bold;
font-style: italic;
}

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

@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
import SkillCard from "../SkillCard/SkillCard.jsx"; import SkillCard from "../SkillCard/SkillCard.jsx";
import "./SingleProject.css"; import "./SingleProject.css";
function SingleProject({ image, title, description, skills, id, nbImage, school }) { function SingleProject({ image, title, description, skills, id, nbImage, school, beginningYear, endYear }) {
const [imageID, setImageID] = useState(1); const [imageID, setImageID] = useState(1);
const [isFading, setIsFading] = useState(true); const [isFading, setIsFading] = useState(true);
const intervalRef = useRef(null); const intervalRef = useRef(null);
@ -53,6 +53,7 @@ function SingleProject({ image, title, description, skills, id, nbImage, school
<div className="single-project-right"> <div className="single-project-right">
<div className="single-project-right-top"> <div className="single-project-right-top">
<div className="single-project-right-top-title">
<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}
@ -63,6 +64,14 @@ function SingleProject({ image, title, description, skills, id, nbImage, school
) : null} ) : null}
</h3> </h3>
</div> </div>
{endYear === null ? (
<p className="single-project-right-top-date">{beginningYear + ' – in progress'}</p>
) : beginningYear === endYear ? (
<p className="single-project-right-top-date">{beginningYear}</p>
) : (
<p className="single-project-right-top-date">{beginningYear + ' – ' + endYear}</p>
)}
</div>
<div className="single-project-right-bottom"> <div className="single-project-right-bottom">
<p className="single-project-description" style={{ whiteSpace: "pre-line" }}> <p className="single-project-description" style={{ whiteSpace: "pre-line" }}>
{description} {description}