+
+
+ );
+}
+
+
+export default ProjectDetails
\ No newline at end of file
diff --git a/src/components/Projects/Projects.css b/src/components/Projects/Projects.css
index d7a5d83..7d6c056 100644
--- a/src/components/Projects/Projects.css
+++ b/src/components/Projects/Projects.css
@@ -7,7 +7,6 @@
.show-more-container {
text-align: center;
-
}
.projects-link {
diff --git a/src/components/SingleProject/SingleProject.css b/src/components/SingleProject/SingleProject.css
index 7ace7a7..dcc671e 100644
--- a/src/components/SingleProject/SingleProject.css
+++ b/src/components/SingleProject/SingleProject.css
@@ -12,6 +12,7 @@
.single-project:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+ cursor: pointer;
}
.single-project-top {
@@ -115,19 +116,6 @@
gap: 8px;
}
-.single-project-link {
- color: var(--text-color);
- text-decoration: none;
- font-weight: 600;
- margin-bottom : 0;
-}
-
-.single-project-link:hover {
- cursor: pointer;
- color: var(--title-color);
-}
-
-
.single-project-years{
color : var(--text-color);
margin : 0;
diff --git a/src/components/SingleProject/SingleProject.jsx b/src/components/SingleProject/SingleProject.jsx
index 9300d43..f271437 100644
--- a/src/components/SingleProject/SingleProject.jsx
+++ b/src/components/SingleProject/SingleProject.jsx
@@ -1,53 +1,59 @@
-import { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
import SkillCard from "../SkillCard/SkillCard.jsx";
import "./SingleProject.css";
+import {Link, useNavigate} from "react-router-dom";
function SingleProject({ image, title, description, skills, id, school, beginningYear, endYear }) {
const color = ["blue", "green", "purple", "red", "yellow"]
+ const navigate = useNavigate();
+
+ const clickProject = () => {
+ navigate(`/projectDetails/${id}`);
+ }
+
return (
-
+
+
+
+
+
+
+ {project.end_year === null ? (
+
+
+
+ {project.title}
+ {project.school ? (
+
+ ) : null}
+
+ {typeof project.repo_link === "string" && project.repo_link.length > 0 ? (
+
+ {project.repo_link.includes("github") ? (
+
+ ) : (
+
+ )}
+
+ ) : null}
+
+
+ {project.end_year === null ? (
+ {project.beginning_year + ' – in progress'}
+ ) : project.beginning_year === project.end_year ? ( +{project.beginning_year}
+ ) : ( +{project.beginning_year + ' – ' + project.end_year}
+ )} +{project.short_description}
+-
+ {project.skills && project.skills.map((skill) => (
+
-
+
+
+ ))}
+
+
+
+
+
+
-
- 
-
-
-
-
-
);
}
diff --git a/src/index.css b/src/index.css
index b0d79f8..8e6af21 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,7 +3,7 @@
font-weight: 400;
background-color: #0D0D0D;
--title-color: #EAEAEA;
- --text-color: #B0B0B0;
+ --text-color: #7c7c7c;
--important-color: #D95F46;
}
@@ -16,8 +16,6 @@ body {
margin: 0;
display: flex;
place-items: center;
- min-width: 320px;
- min-height: 100vh;
}
.section-title {
diff --git a/src/pages/ProjectDetailsPage.jsx b/src/pages/ProjectDetailsPage.jsx
new file mode 100644
index 0000000..bb82aec
--- /dev/null
+++ b/src/pages/ProjectDetailsPage.jsx
@@ -0,0 +1,42 @@
+import { useParams } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import NavBar from "../components/NavBar/NavBar.jsx";
+import ProjectDetails from "../components/ProjectDetails/ProjectDetails.jsx";
+import Footer from "../components/Footer/Footer.jsx";
+
+function ProjectDetailsPage() {
+ const { id } = useParams();
+ const [project, setProject] = useState([]);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchProject = async () => {
+ try {
+ const response = await fetch(`/api/longProjects/${id}`);
+ if (!response.ok) {
+ throw new Error(`Erreur HTTP: ${response.status}`);
+ }
+ const data = await response.json();
+ setProject(data);
+ } catch (err) {
+ setError(err.message);
+ }
+ };
+
+ fetchProject();
+ }, [id]);
+
+ if (error) {
+ return
-
-
- {endYear === null ? (
- - {title} - {school ? ( - - ) : null} -
-{beginningYear + ' – in progress'}
- ) : beginningYear === endYear ? ( +
+
-
+
+
+
+
+
+
-
+
+
+ {endYear === null ? (
+ + {title} + {school ? ( + + ) : null} +
+{beginningYear + ' – in progress'}
+ ) : beginningYear === endYear ? ({beginningYear}
- ) : ( -{beginningYear + ' – ' + endYear}
- )} -
-
+ - {description} -
+ ) : ( +{beginningYear + ' – ' + endYear}
+ )} +
+
+ {description} +
--
- {skills.map((skill) => (
-
-
-
-
- ))}
-
-
+ {skills.map((skill) => (
+
-
+
+
+ ))}
+
Learn more
+Erreur : {error}
; + } + + + return ( +
+
+
+
+ );
+}
+
+export default ProjectDetailsPage;