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

revert 76c89e21f5baefbe6232b0e5306e8a6a9a4661bd

Browse Source 
revert Merge pull request 'feature/SingleProject' (#4) from feature/SingleProject into feature/skillSection

Reviewed-on: #4
This commit is contained in:
Giovanni-Josserand 2025-08-21 14:45:19 +00:00
parent 76c89e21f5
commit ec7721978d
2 changed files with 0 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/SingleProject.jsx
View File

@ -1,32 +0,0 @@
import SkillCard from './SkillCard';
import "../styles/SingleProject.css";
function SingleProject({image, title, description, skills, color}) {
return (
<div className="single-project">
<div className="single-project-left">
<img src={`/public/assets/images/${image}.jpeg`} alt={image}/>
</div>
<div className="single-project-middle">
<div aria-hidden="true" className={`single-project-line color-${color}`}></div>
</div>
<div className="single-project-right">
<h3 className="single-project-title">{title}</h3>
<p className="single-project-description">
{description}
</p>
<ul className="single-project-skills-list">
{skills.map(skill => (
<li key={skill}><SkillCard text={skill}/></li>
))}
</ul>
<p className="single-project-link">
Learn more
</p>
</div>
</div>
)
}
export default SingleProject

87
src/styles/SingleProject.css
View File

@ -1,87 +0,0 @@
.single-project {
display: flex;
width: 80%;
margin: 2rem auto;
background-color: #1E1E1E;
overflow: hidden;
transition: all 0.3s ease-in-out;
border-radius: 12px;
}
.single-project:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.single-project-left {
flex-shrink: 0;
width: 55%;
}
.single-project-left img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single-project-right {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2rem 2rem 2rem 0rem;
align-items: flex-start;
}
.single-project-title {
font-size: 2rem;
color: #EAEAEA;
margin-top: 0;
margin-bottom: 1rem;
}
.single-project-description {
color: #B0B0B0;
margin-bottom: 1.5rem;
text-align: justify;
}
.single-project-skills-list {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
gap: 8px;
}
.single-project-link {
color: #EAEAEA;
text-decoration: none;
font-weight: 600;
}
.single-project-middle {
padding: 2rem 0.5rem;
}
.single-project-line {
border-radius: 38px;
min-width: 1.5rem;
height: 0.25rem;
margin-top: 1.5rem;
margin-left: 2rem;
}
.color-orange{
background-color: #D95F46;
}
.color-purple{
background-color: #a646d9;
}
.color-green{
background-color: #36a837;
}