reorganization of the tree structure

2025-09-02 19:17:00 +02:00
parent cf37db8c88
commit 50485a4f55
22 changed files with 23 additions and 23 deletions
@@ -0,0 +1,59 @@
+#projects-section{
+    display: flex;
+    flex-direction: column;
+    scroll-margin-top: 80px;
+    margin-top: 100px;
+}
+
+.show-more-container {
+    text-align: center;
+
+}
+
+.projects-link {
+    display: inline-block;
+    color: #B0B0B0;
+    border: 1px solid #B0B0B0;
+    background-color: transparent;
+    padding: 12px 28px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.projects-link:hover {
+    background-color: #B0B0B0;
+    color: #1E1E1E;
+    transform: translateY(-3px);
+    cursor: pointer;
+}
+
+.projects-section-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+
+
+
+
+.projects-section-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.projects-section-subtitle {
+    font-size: 1.2rem;
+    color: #B0B0B0;
+}
+
+.projects-back-link {
+    text-align: center;
+    margin-bottom: 3rem;
+}
@@ -0,0 +1,88 @@
+import SingleProject from "../SingleProject/SingleProject.jsx";
+import "./Projects.css"
+import React, {useEffect, useState} from "react";
+import {Link, useLocation} from "react-router-dom";
+import NavBar from "../NavBar/NavBar.jsx";
+
+function Projects() {
+    const [projects, setProjects] = useState([]);
+    const [error, setError] = useState(null);
+    const location = useLocation();
+
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch('/api/projects/');
+                if (!response.ok) {
+                    throw new Error(`Erreur HTTP: ${response.status}`);
+                }
+                const data = await response.json();
+                setProjects(data.data);
+            } catch (err) {
+                setError(err.message);
+            }
+        };
+        fetchProjects();
+    }, []);
+
+
+    if (error) {
+        return <div>Error retrieving data: {error}</div>;
+    }
+
+    if (location.pathname === '/') {
+        return (
+            <section id="projects-section">
+                <h1 className="section-title">Projects</h1>
+                <div className="projects-section-list">
+                    {projects
+                        .filter(project => project.id <= 3)
+                        .map(project => (
+                        <SingleProject
+                            image={project.image_name}
+                            title={project.title}
+                            description={project.description}
+                            skills={project.skills}
+                            id={project.id}
+                            nbImage={project.nb_image}
+                        />
+                    ))}
+                </div>
+                <div className="show-more-container">
+                    <Link to="/projects" className="projects-link">Show more</Link>
+                </div>
+            </section>
+        )
+    }else if (location.pathname === '/projects') {
+        return (
+            <section id="projects-section">
+                <div className="projects-section-header">
+                    <NavBar />
+                    <h1 className="section-title">All Projects</h1>
+                    <p className="projects-section-subtitle">Here you can find a collection of my work.</p>
+                </div>
+                <div className="projects-section-list">
+                    {projects.map(project => (
+                        <SingleProject
+                            image={project.image_name}
+                            title={project.title}
+                            description={project.description}
+                            skills={project.skills}
+                            id={project.id}
+                            nbImage={project.nb_image}
+                        />
+                    ))}
+                </div>
+                <div className="projects-back-link">
+                    <Link to="/" className="projects-link">← Back to Home</Link>
+                </div>
+            </section>
+        )
+    }else {
+        return <div>Page inexistante</div>;
+    }
+
+}
+
+
+export default Projects