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

redefinition of SingleProject classes

Browse Source
This commit is contained in:
Giovanni-Josserand 2025-09-03 21:54:12 +02:00
parent 7f55f3b95a
commit 8580d4b7ac
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.single-project-left {
.single-project-top {
position: relative;
flex-shrink: 0;
width: 100%;
@ -25,7 +25,7 @@
height: 210px;
}
.single-project-left img {
.single-project-top img {
width: 100%;
height: auto;
display: block;
@ -34,11 +34,11 @@
object-fit: cover;
}
.single-project-left img.fade-out {
.single-project-top img.fade-out {
opacity: 0;
}
.single-project-right {
.single-project-bottom {
display: flex;
flex-direction: column;
justify-content: space-between;
@ -47,17 +47,17 @@
height: 100%;
}
.single-project-right-top {
.single-project-bottom-header {
margin-bottom : 1em;
}
.single-project-right-top-title{
.single-project-title-wrapper{
display: flex;
margin-left: 2rem;
width: 100%;
}
.single-project-right-bottom {
.single-project-bottom-container {
margin-left: 2rem;
display: flex;
flex-direction: column;
@ -159,12 +159,12 @@
right: 10px;
}
.single-project-left:hover .arrow {
.single-project-top:hover .arrow {
display: flex;
}
.single-project-right-top-date{
.single-project-years{
color : var(--text-color);
margin : 0;
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 (
<div className="single-project">
<div className="single-project-left">
<div className="single-project-top">
<button onClick={() => handleChangeImage(-1)} className="arrow preview">{'<'}</button>
<img
@ -51,9 +51,9 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
<button onClick={() => handleChangeImage(1)} className="arrow next">{'>'}</button>
</div>
<div className="single-project-right">
<div className="single-project-right-top">
<div className="single-project-right-top-title">
<div className="single-project-bottom">
<div className="single-project-bottom-header">
<div className="single-project-title-wrapper">
<div className={`single-project-line color-${color[(id-1)%color.length]}`}></div>
<h3 className="single-project-title">
{title}
@ -65,14 +65,14 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
</h3>
</div>
{endYear === null ? (
<p className="single-project-right-top-date">{beginningYear + ' – in progress'}</p>
<p className="single-project-years">{beginningYear + ' – in progress'}</p>
) : 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 className="single-project-right-bottom">
<div className="single-project-bottom-container">
<p className="single-project-description" style={{ whiteSpace: "pre-line" }}>
{description}
</p>