Merge pull request 'dev' (#14) from dev into main

Reviewed-on: #14
2025-08-28 13:35:44 +00:00 · 2025-08-28 13:35:44 +00:00 · 9700ae889e
commit 9700ae889e
parent d1cdba01f0 9e19379f81
54 changed files with 1375 additions and 127 deletions
--- a/README.md
+++ b/README.md
@ -1,15 +1,18 @@
-# React + Vite
+# To do

-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## For V1 :
+- Revoir les titres de section (+espace au dessus des titres)

-Currently, two official plugins are available:
+## For V2 :
+- Mettre la base de donnée en place
+- Refaire en conséquence les choses nécessaires

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## For V3 :
+- Faire une page pour lister tous les projets
+- Faire une page explicative par projet

-## Expanding the ESLint configuration

-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+## Usefull commands

 `npm install`  
 `npm run dev`  
--- a/index.html
+++ b/index.html
@ -2,9 +2,14 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/public/assets/images/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
+
+    <title>Giovanni Josserand</title>
  </head>
  <body>
    <div id="root"></div>
--- a/public/assets/documents/CV.pdf
+++ b/public/assets/documents/CV.pdf
--- a/public/assets/images/SAE_C++/SAE_C++_1.png
+++ b/public/assets/images/SAE_C++/SAE_C++_1.png
--- a/public/assets/images/SAE_C++/SAE_C++_2.png
+++ b/public/assets/images/SAE_C++/SAE_C++_2.png
--- a/public/assets/images/SAE_C++/SAE_C++_3.png
+++ b/public/assets/images/SAE_C++/SAE_C++_3.png
--- a/public/assets/images/codev/codev_1.png
+++ b/public/assets/images/codev/codev_1.png
--- a/public/assets/images/codev/codev_2.png
+++ b/public/assets/images/codev/codev_2.png
--- a/public/assets/images/codev/codev_3.png
+++ b/public/assets/images/codev/codev_3.png
--- a/public/assets/images/codev/codev_4.png
+++ b/public/assets/images/codev/codev_4.png
--- a/public/assets/images/codev/codev_5.png
+++ b/public/assets/images/codev/codev_5.png
--- a/public/assets/images/landscape.png
+++ b/public/assets/images/landscape.png
--- a/public/assets/images/logo.svg
+++ b/public/assets/images/logo.svg
--- a/public/assets/images/proxmox/proxmox_1.png
+++ b/public/assets/images/proxmox/proxmox_1.png
--- a/public/assets/images/proxmox/proxmox_2.png
+++ b/public/assets/images/proxmox/proxmox_2.png
--- a/public/assets/images/proxmox/proxmox_3.png
+++ b/public/assets/images/proxmox/proxmox_3.png
--- a/public/assets/images/proxmox/proxmox_4.png
+++ b/public/assets/images/proxmox/proxmox_4.png
--- a/public/assets/images/proxmox/proxmox_5.png
+++ b/public/assets/images/proxmox/proxmox_5.png
--- a/public/assets/images/skills/C++.svg
+++ b/public/assets/images/skills/C++.svg
--- a/public/assets/images/skills/CSS.svg
+++ b/public/assets/images/skills/CSS.svg
--- a/public/assets/images/skills/Git.svg
+++ b/public/assets/images/skills/Git.svg
--- a/public/assets/images/skills/HTML.png
+++ b/public/assets/images/skills/HTML.png
--- a/public/assets/images/skills/HTML.svg
+++ b/public/assets/images/skills/HTML.svg
--- a/public/assets/images/skills/Java.svg
+++ b/public/assets/images/skills/Java.svg
@ -0,0 +1 @@
+<svg width="1850" height="2500" viewBox="0 0 256 346" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M82.554 267.473s-13.198 7.675 9.393 10.272c27.369 3.122 41.356 2.675 71.517-3.034 0 0 7.93 4.972 19.003 9.279-67.611 28.977-153.019-1.679-99.913-16.517M74.292 229.659s-14.803 10.958 7.805 13.296c29.236 3.016 52.324 3.263 92.276-4.43 0 0 5.526 5.602 14.215 8.666-81.747 23.904-172.798 1.885-114.296-17.532" fill="#5382A1"/><path d="M143.942 165.515c16.66 19.18-4.377 36.44-4.377 36.44s42.301-21.837 22.874-49.183c-18.144-25.5-32.059-38.172 43.268-81.858 0 0-118.238 29.53-61.765 94.6" fill="#E76F00"/><path d="M233.364 295.442s9.767 8.047-10.757 14.273c-39.026 11.823-162.432 15.393-196.714.471-12.323-5.36 10.787-12.8 18.056-14.362 7.581-1.644 11.914-1.337 11.914-1.337-13.705-9.655-88.583 18.957-38.034 27.15 137.853 22.356 251.292-10.066 215.535-26.195M88.9 190.48s-62.771 14.91-22.228 20.323c17.118 2.292 51.243 1.774 83.03-.89 25.978-2.19 52.063-6.85 52.063-6.85s-9.16 3.923-15.787 8.448c-63.744 16.765-186.886 8.966-151.435-8.183 29.981-14.492 54.358-12.848 54.358-12.848M201.506 253.422c64.8-33.672 34.839-66.03 13.927-61.67-5.126 1.066-7.411 1.99-7.411 1.99s1.903-2.98 5.537-4.27c41.37-14.545 73.187 42.897-13.355 65.647 0 .001 1.003-.895 1.302-1.697" fill="#5382A1"/><path d="M162.439.371s35.887 35.9-34.037 91.101c-56.071 44.282-12.786 69.53-.023 98.377-32.73-29.53-56.75-55.526-40.635-79.72C111.395 74.612 176.918 57.393 162.439.37" fill="#E76F00"/><path d="M95.268 344.665c62.199 3.982 157.712-2.209 159.974-31.64 0 0-4.348 11.158-51.404 20.018-53.088 9.99-118.564 8.824-157.399 2.421.001 0 7.95 6.58 48.83 9.201" fill="#5382A1"/></svg>
--- a/public/assets/images/skills/JavaScript.svg
+++ b/public/assets/images/skills/JavaScript.svg
--- a/public/assets/images/skills/PHP.png
+++ b/public/assets/images/skills/PHP.png
--- a/public/assets/images/skills/PHP.svg
+++ b/public/assets/images/skills/PHP.svg
--- a/public/assets/images/skills/Python.svg
+++ b/public/assets/images/skills/Python.svg
--- a/public/assets/images/skills/React.svg
+++ b/public/assets/images/skills/React.svg
--- a/public/assets/images/skills/SQL.svg
+++ b/public/assets/images/skills/SQL.svg
--- a/public/vite.svg
+++ b/public/vite.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
@ -1,42 +1,3 @@
 #root {
-  max-width: 1280px;
  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,35 +1,22 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import Home from './components/Home.jsx'
+import Experiences from './components/Experiences.jsx'
+import Projects from './components/Projects.jsx'
+import Skills from './components/Skills.jsx'
+import Footer from './components/Footer.jsx'
+

 function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    return (
+        <div className="App">
+            <Home/>
+            <Experiences />
+            <Projects />
+            <Skills />
+            <Footer />
+        </div>
+    )
 }

+
 export default App
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@ -0,0 +1,43 @@
+import '../styles/Experiences.css';
+import SingleExperience from './SingleExperience';
+
+function Experiences() {
+    const experiencesData = [
+        {
+            role: "Web Development Intern",
+            company: "Pandora",
+            duration: "April 2024",
+            location: "Rennes (Ille-et-Vilaine), France",
+            tasks: [
+                "Development of a dynamic website with database integration (HTML, CSS, PHP, SQL)",
+                "Created a reusable interface used as an internal learning resource",
+                "Introduction to GitHub Actions"
+            ]
+        },
+        {
+            role: "IT Support Intern",
+            company: "INRAE",
+            duration: "April 2023",
+            location: "Rennes (Ille-et-Vilaine), France",
+            tasks: [
+                "Introduction to ProxMox Backup and UpdateEngine tools",
+                "Preparation of two workstations",
+                "Setup of a Wi-Fi hotspot using a Raspberry Pi",
+                "Installation of a RAID 1 system"
+            ]
+        }
+    ];
+
+    return (
+        <section id="experiences-section">
+            <h1 className="section-title">Experiences</h1>
+            <div className="experiences-container">
+                {experiencesData.map((exp) => (
+                    <SingleExperience experience={exp}/>
+                ))}
+            </div>
+        </section>
+    );
+}
+
+export default Experiences;
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@ -0,0 +1,28 @@
+import '../styles/Footer.css';
+function Footer() {
+    const currentYear = new Date().getFullYear();
+
+    return (
+        <footer className="footer">
+            <div className="footer-content">
+                <div className="footer-copyright">
+                    © {currentYear} • Giovanni Josserand
+                </div>
+                <div className="footer-links">
+                    <a href="https://github.com/Giovanni-Josserand" target="_blank" rel="noopener noreferrer">
+                        <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                        </svg>
+                    </a>
+                    <a href="https://gitea.josserand.ovh/Giovanni-Josserand" target="_blank" rel="noopener noreferrer">
+                        <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </footer>
+    );
+}
+
+export default Footer;
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@ -0,0 +1,22 @@
+import '../styles/Home.css';
+import Background from "./thirdParty/Background.jsx";
+import NavBar from "./NavBar.jsx";
+function Home() {
+    return (
+
+    <section id="home-section">
+        <Background />
+        <NavBar/>
+        <h1>Hello, I'm<span className="highlight"> Giovanni Josserand</span></h1>
+        <h2>Junior Developer</h2>
+        <p>
+            Passionate about development, I am currently looking
+            for an opportunity to put my skills into practice and continue learning.
+        </p>
+        <a href="/public/assets/documents/CV.pdf" target="_blank" className="btn">Download my CV</a>
+
+    </section>
+    );
+}
+
+export default Home;
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import "../styles/NavBar.css";
+
+const NavBar = () => {
+    const [active, setActive] = useState("home-section");
+    const [isScrolling, setIsScrolling] = useState(false);
+
+    useEffect(() => {
+        const sections = document.querySelectorAll("section");
+        const navHeight = document.querySelector(".navbar")?.offsetHeight + 40 || 120;
+
+        const handleScroll = () => {
+            if (isScrolling) return;
+
+            let current = "home-section";
+            sections.forEach((section) => {
+                const sectionTop = section.offsetTop - navHeight;
+                if (window.scrollY >= sectionTop) {
+                    current = section.id;
+                }
+            });
+
+            setActive(current);
+        };
+
+        window.addEventListener("scroll", handleScroll);
+        handleScroll();
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [isScrolling]);
+
+    const handleClick = (id) => {
+        setActive(id);
+        setIsScrolling(true);
+        document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+        setTimeout(() => setIsScrolling(false), 800);
+    };
+
+
+    return (
+        <nav className="navbar">
+            <ul className="nav-list">
+                <li>
+                    <button
+                        onClick={() => handleClick("home-section")}
+                        className={`nav-link ${active === "home-section" ? "active" : ""}`}
+                    >
+                        Home
+                    </button>
+                </li>
+                <li>
+                    <button
+                        onClick={() => handleClick("experiences-section")}
+                        className={`nav-link ${active === "experiences-section" ? "active" : ""}`}
+                    >
+                        Experiences
+                    </button>
+                </li>
+                <li>
+                    <button
+                        onClick={() => handleClick("projects-section")}
+                        className={`nav-link ${active === "projects-section" ? "active" : ""}`}
+                    >
+                        Projects
+                    </button>
+                </li>
+                <li>
+                    <button
+                        onClick={() => handleClick("skills-section")}
+                        className={`nav-link ${active === "skills-section" ? "active" : ""}`}
+                    >
+                        Skills
+                    </button>
+                </li>
+            </ul>
+        </nav>
+    );
+};
+
+export default NavBar;
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@ -0,0 +1,48 @@
+import SingleProject from "./SingleProject.jsx";
+import "../styles/Projects.css"
+function Projects() {
+    const codevProject = {
+        title: "Codev",
+        image: "codev",
+        color: "orange",
+        nbImage: 5,
+        skills: ['HTML', 'CSS', 'PHP', 'JavaScript', 'SQL'],
+        description: "A collaborative platform where developers can create, share, and grow coding projects. Built for solo makers or teams, it features real-time messaging and a centralized workspace."
+    }
+    const SAECProject = {
+        title: "SAE C++",
+        image: "SAE_C++",
+        color: "purple",
+        nbImage: 3,
+        skills: ['C++', 'Git'],
+        description: "A C++ program developed for creating and managing treasure hunt records, with a web interface that allows browsing and consulting the entries."
+    }
+    const proxmoxProject = {
+        title: "Proxmox",
+        image: "proxmox",
+        color: "green",
+        nbImage: 5,
+        skills: [],
+        description: "A Proxmox-based infrastructure that consolidates my personal cloud, home automation, code hosting, media services and web hosting into a single, self-hosted environment."
+    }
+
+
+    return (
+        <section id="projects-section">
+            <h1 className="section-title">Projects</h1>
+            <div className="projects-section-list">
+                <SingleProject image={codevProject.image} title={codevProject.title} description={codevProject.description} skills={codevProject.skills} color={codevProject.color} nbImage={codevProject.nbImage}/>
+                <SingleProject image={SAECProject.image} title={SAECProject.title} description={SAECProject.description} skills={SAECProject.skills} color={SAECProject.color} nbImage={SAECProject.nbImage}/>
+                <SingleProject image={proxmoxProject.image} title={proxmoxProject.title} description={proxmoxProject.description} skills={proxmoxProject.skills} color={proxmoxProject.color} nbImage={proxmoxProject.nbImage}/>
+            </div>
+            <div className="show-more-container">
+                <p className="show-more-link">
+                    Show more
+                </p>
+            </div>
+        </section>
+    )
+}
+
+
+export default Projects
--- a/src/components/SingleExperience.jsx
+++ b/src/components/SingleExperience.jsx
@ -0,0 +1,22 @@
+import '../styles/SingleExperience.css';
+
+function SingleExperience({ experience }) {
+    return (
+        <div className="experience-card">
+            <div className="experience-card-left">
+                <h3 className="experience-company">{experience.company}</h3>
+                <p className="experience-location">{experience.location}</p>
+                <p className="experience-duration">{experience.duration}</p>
+            </div>
+            <div className="experience-card-right">
+                <h3 className="experience-role">{experience.role}</h3>
+                <ul className="experience-tasks">
+                    {experience.tasks.map((task, index) => (
+                        <li key={index}>{task}</li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+}
+export default SingleExperience;
--- a/src/components/SingleProject.jsx
+++ b/src/components/SingleProject.jsx
@ -0,0 +1,79 @@
+import { useState, useEffect, useRef } from "react";
+import SkillCard from "./SkillCard";
+import "../styles/SingleProject.css";
+
+function SingleProject({ image, title, description, skills, color, nbImage }) {
+    const [imageID, setImageID] = useState(1);
+    const [isFading, setIsFading] = useState(true);
+    const intervalRef = useRef(null);
+
+    const handleChangeImage = (direction) => {
+        if (nbImage <= 1) return;
+
+        setIsFading(false);
+
+        setTimeout(() => {
+            setImageID((prevID) =>
+                direction === 1
+                    ? (prevID % nbImage) + 1
+                    : prevID === 1 ? nbImage : prevID - 1
+            );
+            setIsFading(true);
+        }, 300);
+
+        clearInterval(intervalRef.current);
+        startAutoSlide();
+    };
+
+    const startAutoSlide = () => {
+        intervalRef.current = setInterval(() => {
+            handleChangeImage(1);
+        }, 5000);
+    };
+
+    useEffect(() => {
+        startAutoSlide();
+        return () => clearInterval(intervalRef.current);
+    }, []);
+
+    return (
+        <div className="single-project">
+            <div className="single-project-left">
+                <button onClick={() => handleChangeImage(-1)} className="arrow preview">{'<'}</button>
+
+                <img
+                    src={`/public/assets/images/${image}/${image}_${imageID}.png`}
+                    alt={image}
+                    className={isFading ? 'fade-in' : 'fade-out'}
+                />
+
+                <button onClick={() => handleChangeImage(1)} className="arrow next">{'>'}</button>
+            </div>
+
+            <div className="single-project-right">
+                <div className="single-project-right-top">
+                    <div className={`single-project-line color-${color}`}></div>
+                    <h3 className="single-project-title">{title}</h3>
+                </div>
+
+                <div className="single-project-right-bottom">
+                    <p className="single-project-description" style={{ whiteSpace: "pre-line" }}>
+                        {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>
+        </div>
+    );
+}
+
+export default SingleProject;
--- a/src/components/SkillCard.jsx
+++ b/src/components/SkillCard.jsx
@ -0,0 +1,12 @@
+import "../styles/SkillCard.css";
+
+function SkillCard({ text }) {
+    return (
+        <div className="skill-card">
+            <img src={`/assets/images/skills/${text}.svg`} alt={text} />
+            <p>{text}</p>
+        </div>
+    );
+}
+
+export default SkillCard;
--- a/src/components/Skills.jsx
+++ b/src/components/Skills.jsx
@ -0,0 +1,38 @@
+import SkillCard from "./SkillCard.jsx";
+import "../styles/Skills.css";
+
+function Skills() {
+    return (
+        <section id="skills-section">
+            <h1 className="section-title">Skills</h1>
+            <div id="languages" className="skill-category">
+                <h2>Languages</h2>
+                <div className="skills">
+                    <SkillCard text="Python"/>
+                    <SkillCard text="Java"/>
+                    <SkillCard text="C++"/>
+                    <SkillCard text="HTML"/>
+                    <SkillCard text="CSS"/>
+                    <SkillCard text="JavaScript"/>
+                    <SkillCard text="PHP"/>
+                    <SkillCard text="SQL"/>
+                </div>
+            </div>
+            <div id="librairies" className="skill-category">
+                <h2>Librairies</h2>
+                <div className="skills">
+                    <SkillCard text="React"/>
+                </div>
+            </div>
+            <div id="tools" className="skill-category">
+                <h2>Tools</h2>
+                <div className="skills">
+                    <SkillCard text="Git"/>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+
+export default Skills
--- a/src/components/thirdParty/Background.jsx
+++ b/src/components/thirdParty/Background.jsx
@ -0,0 +1,24 @@
+import React from "react";
+import "../../styles/thirdParty/Background.css";
+
+export default function Background() {
+    return (
+        <div className="space-background">
+            {[...Array(100)].map((_, i) => (
+                <div
+                    key={i}
+                    className="star"
+                    style={{
+                        top: `${Math.random() * 100}%`,
+                        left: `${Math.random() * 100}%`,
+                        animationDelay: `${Math.random() * 5}s`,
+                    }}
+                />
+            ))}
+            <div className="nebula nebula1"></div>
+            <div className="nebula nebula2"></div>
+            <div className="nebula nebula3"></div>
+            <div className="planet"></div>
+        </div>
+    );
+}
--- a/src/index.css
+++ b/src/index.css
@ -1,27 +1,14 @@
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  background-color: #0D0D0D;
 }

-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+html{
+  scroll-behavior: smooth;
 }

+
 body {
  margin: 0;
  display: flex;
@ -30,39 +17,35 @@ body {
  min-height: 100vh;
 }

-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+
+
+h1{
+  font-size: 4rem;
+  color: white;
 }

-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+.section-title {
+  font-family: Arial;
+  font-size: 2.5rem;
+  color: #f0f0f0;
+  text-transform: uppercase;
+  letter-spacing: 0.15rem;
+  text-align: center;
+  margin-bottom: 3rem;
 }

-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+.section-title::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 3px;
+  background-color: #D95F46;
+  margin: 1rem auto 0;
+  border-radius: 2px;
 }
+
+
+
+h2{
+  color: #f0f0f0;
+}
--- a/src/styles/Experiences.css
+++ b/src/styles/Experiences.css
@ -0,0 +1,24 @@
+#experiences-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.experiences-container {
+    width: 50%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.experiences-container::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 100%;
+    background-color: rgba(176, 176, 176, 0.2);
+}
--- a/src/styles/Footer.css
+++ b/src/styles/Footer.css
@ -0,0 +1,37 @@
+.footer {
+    padding: 2rem 0;
+    margin-top: 4rem;
+    border-top: 1px solid #333;
+    color: #B0B0B0;
+    font-size: 0.9rem;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 80%;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.footer-links {
+    display: flex;
+    gap: 1.5rem;
+    a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #B0B0B0;
+        transition: color 0.3s ease, transform 0.3s ease;
+        svg{
+            width: 24px;
+            height: 24px;
+        }
+    }
+}
+
+.footer-links a:hover {
+    color: #EAEAEA;
+    transform: translateY(-3px);
+}
--- a/src/styles/Home.css
+++ b/src/styles/Home.css
@ -0,0 +1,53 @@
+#home-section {
+    position: relative;
+    min-height: 110vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+}
+
+
+#home-section h1{
+    margin-bottom: 0;
+}
+
+#home-section h2 {
+    font-size: 1.8rem;
+    color: #EAEAEA;
+    margin-bottom: 1rem;
+}
+#home-section p {
+    margin-bottom: 2rem;
+    color: #EAEAEA;
+    max-width: 40%;
+}
+
+
+
+.highlight {
+    color: #D95F46;
+}
+
+.btn {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    font-weight: bold;
+    background-color: #D95F46;
+    color: #fff;
+    transition: background-color 0.3s ease;
+    margin-bottom: 200px;
+}
+
+.btn:hover {
+    background-color: #b94a36;
+    cursor: pointer;
+}
+
+
+
+
--- a/src/styles/NavBar.css
+++ b/src/styles/NavBar.css
@ -0,0 +1,43 @@
+.navbar {
+    position: fixed;
+    top: 30px;
+    background: rgba(100,100,100, 0.25);
+    backdrop-filter: blur(12px);
+    border-radius: 25px;
+    padding: 6px 10px;
+    z-index: 1000;
+    border: solid rgba(100,100,100,0.5) 0.001rem;
+}
+
+.nav-list {
+    list-style: none;
+    display: flex;
+    gap: 1.3rem;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    li{
+        display: flex;
+    }
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+    color: #B0B0B0;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-size: 15px;
+}
+
+.nav-link:hover {
+    color: #D95F46;
+}
+
+.nav-link.active {
+    background-color: rgba(217, 95, 70, 0.3);
+    color: #D95F46;
+}
--- a/src/styles/Projects.css
+++ b/src/styles/Projects.css
@ -0,0 +1,34 @@
+#projects-section{
+    display: flex;
+    flex-direction: column;
+    scroll-margin-top: 40px;
+    margin-top: 100px;
+}
+
+.show-more-container {
+    text-align: center;
+
+}
+
+.show-more-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;
+}
+
+.show-more-link:hover {
+    background-color: #B0B0B0;
+    color: #1E1E1E;
+    transform: translateY(-3px);
+    cursor: pointer;
+}
+
+.projects-section-list {
+    display: flex;
+}
--- a/src/styles/SingleExperience.css
+++ b/src/styles/SingleExperience.css
@ -0,0 +1,77 @@
+.experience-card {
+    position: relative;
+    width: 100%;
+    margin-bottom: 3rem;
+    padding: 1.5rem;
+    display: flex;
+}
+
+.experience-card::before {
+    content: '';
+    position: absolute;
+    top: 25px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: #D95F46;
+    border: 3px solid rgba(176, 176, 176, 0.2);
+}
+
+
+.experience-card-left {
+    width: 50%;
+    text-align: end;
+    margin-right: 8rem;
+}
+
+.experience-card-right {
+    width: 50%;
+}
+
+.experience-company {
+    color: #D95F46;
+    font-size: 1.2rem;
+    margin: 0;
+}
+
+.experience-role {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #EAEAEA;
+    margin: 0;
+}
+
+.experience-location,
+.experience-duration {
+    font-size: 0.95rem;
+    color: #B0B0B0;
+    margin: 0.25rem 0 0;
+    white-space: nowrap;
+}
+
+.experience-tasks {
+    list-style: none;
+    padding: 0;
+    margin-top: 1rem;
+}
+
+.experience-tasks li {
+    position: relative;
+    padding-left: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: #B0B0B0;
+    text-align: left;
+}
+
+.experience-tasks li::before {
+    content: '›';
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: #D95F46;
+    font-weight: bold;
+    font-size: 1.2rem;
+    line-height: 1;
+}
--- a/src/styles/SingleProject.css
+++ b/src/styles/SingleProject.css
@ -0,0 +1,148 @@
+.single-project {
+    display: flex;
+    flex-direction: column;
+    width: 29%;
+    margin: 2rem auto;
+    overflow: hidden;
+    transition: all 0.3s ease-in-out;
+    border-radius: 12px;
+    background-color: #1E1E1E;
+}
+
+.single-project:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.single-project-left {
+    position: relative;
+    flex-shrink: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    overflow: hidden;
+    height: 210px;
+}
+
+.single-project-left img {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 1;
+    object-fit: cover;
+}
+
+.single-project-left img.fade-out {
+    opacity: 0;
+}
+
+.single-project-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 2rem 2rem 2rem 0rem;
+    align-items: flex-start;
+    height: 100%;
+}
+
+.single-project-right-top {
+    display: flex;
+    margin-left: 2rem;
+}
+
+.single-project-right-bottom {
+    margin-left: 2rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.single-project-line {
+    border-radius: 38px;
+    min-width: 1.5rem;
+    height: 0.25rem;
+    margin-top: 1.5rem;
+    margin-right: 1rem;
+}
+
+.color-orange {
+    background-color: #D95F46;
+}
+
+.color-purple {
+    background-color: #a646d9;
+}
+
+.color-green {
+    background-color: #36a837;
+}
+
+.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: #B0B0B0;
+    text-decoration: none;
+    font-weight: 600;
+    margin-bottom : 0;
+}
+
+.single-project-link:hover {
+    cursor: pointer;
+    color: #EAEAEA;
+}
+
+.arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #EAEAEA;
+    font-size: 35px;
+    display: none;
+    transition: all 0.3s ease;
+    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
+}
+
+.arrow:hover {
+    color: #D95F46;
+    opacity: 0.8;
+    transform: translateY(-50%) scale(1.2);
+    cursor: pointer;
+}
+
+.arrow.preview {
+    left: 10px;
+}
+
+.arrow.next {
+    right: 10px;
+}
+
+.single-project-left:hover .arrow {
+    display: flex;
+}
--- a/src/styles/SkillCard.css
+++ b/src/styles/SkillCard.css
@ -0,0 +1,24 @@
+.skill-card {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.875rem;
+    width: fit-content;
+    white-space: nowrap;
+    flex-shrink: 0;
+    gap: 0.5rem;
+    background-color: #171717;
+    color: white;
+    border: solid rgba(100,100,100) 0.001rem;
+    height: 1.5rem;
+    margin: 0.5% 2%;
+}
+
+.skill-card img {
+    width: 1rem;
+    height: 1.125rem;
+    pointer-events: none;
+}
+
--- a/src/styles/Skills.css
+++ b/src/styles/Skills.css
@ -0,0 +1,25 @@
+#skills-section{
+    display: flex;
+    flex-direction: column;
+    scroll-margin-top: 40px;
+    margin-top: 100px;
+}
+
+.skills-span{
+    width: 100%;
+}
+
+.skill-category{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 2%;
+}
+
+.skills{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
--- a/src/styles/thirdParty/Background.css
+++ b/src/styles/thirdParty/Background.css
@ -0,0 +1,104 @@
+.space-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 123vh;
+    background: radial-gradient(ellipse at center, #0a001f 0%, #000000 80%);
+    overflow: hidden;
+    z-index: -1;
+}
+
+.star {
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: white;
+    border-radius: 50%;
+    opacity: 0.8;
+    animation: twinkle 3s infinite ease-in-out alternate;
+    filter: drop-shadow(0 0 2px white);
+}
+
+.planet {
+    position: absolute;
+    bottom: 0%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120vw;
+    height: 23vw;
+    max-height: 400px;
+    background: #0D0D0D;
+    border-radius: 60% 60% 0 0 / 100% 100% 0 0;
+    z-index: 1;
+    box-shadow:
+            0 -20px 60px 10px rgba(255, 255, 255, 0.35),
+            inset 0 20px 60px 10px rgba(255, 255, 255, 0.25);
+}
+
+.planet::after {
+    content: "";
+    position: absolute;
+    top: -3px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    height: 100%;
+    border-top: 2.5px solid white;
+    border-radius: 60% 60% 0 0 / 100% 100% 0 0;
+    mask-image: linear-gradient(to right, transparent 0%, white 40%, white 60%, transparent 100%);
+    pointer-events: none;
+    z-index: 2;
+}
+
+@keyframes twinkle {
+    0% { opacity: 0.3; transform: scale(0.8); }
+    100% { opacity: 1; transform: scale(1.2); }
+}
+
+.nebula {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.5;
+    mix-blend-mode: screen;
+    animation: nebulaMove 15s ease-in-out infinite alternate;
+}
+
+.nebula1 {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, #9b59b6 0%, transparent 70%);
+    top: 10%;
+    left: 15%;
+    animation-delay: 0s;
+}
+
+.nebula2 {
+    width: 600px;
+    height: 600px;
+    background: radial-gradient(circle, #8e44ad 0%, transparent 70%);
+    top: 50%;
+    left: 65%;
+    animation-delay: 5s;
+}
+
+.nebula3 {
+    width: 350px;
+    height: 350px;
+    background: radial-gradient(circle, #663399 0%, transparent 70%);
+    top: 75%;
+    left: 35%;
+    animation-delay: 10s;
+}
+
+@keyframes nebulaMove {
+    0% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translate(20px, -20px) scale(1.05);
+        opacity: 0.6;
+    }
+}
				`@ -0,0 +1 @@`
				<svg width="1850" height="2500" viewBox="0 0 256 346" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M82.554 267.473s-13.198 7.675 9.393 10.272c27.369 3.122 41.356 2.675 71.517-3.034 0 0 7.93 4.972 19.003 9.279-67.611 28.977-153.019-1.679-99.913-16.517M74.292 229.659s-14.803 10.958 7.805 13.296c29.236 3.016 52.324 3.263 92.276-4.43 0 0 5.526 5.602 14.215 8.666-81.747 23.904-172.798 1.885-114.296-17.532" fill="#5382A1"/><path d="M143.942 165.515c16.66 19.18-4.377 36.44-4.377 36.44s42.301-21.837 22.874-49.183c-18.144-25.5-32.059-38.172 43.268-81.858 0 0-118.238 29.53-61.765 94.6" fill="#E76F00"/><path d="M233.364 295.442s9.767 8.047-10.757 14.273c-39.026 11.823-162.432 15.393-196.714.471-12.323-5.36 10.787-12.8 18.056-14.362 7.581-1.644 11.914-1.337 11.914-1.337-13.705-9.655-88.583 18.957-38.034 27.15 137.853 22.356 251.292-10.066 215.535-26.195M88.9 190.48s-62.771 14.91-22.228 20.323c17.118 2.292 51.243 1.774 83.03-.89 25.978-2.19 52.063-6.85 52.063-6.85s-9.16 3.923-15.787 8.448c-63.744 16.765-186.886 8.966-151.435-8.183 29.981-14.492 54.358-12.848 54.358-12.848M201.506 253.422c64.8-33.672 34.839-66.03 13.927-61.67-5.126 1.066-7.411 1.99-7.411 1.99s1.903-2.98 5.537-4.27c41.37-14.545 73.187 42.897-13.355 65.647 0 .001 1.003-.895 1.302-1.697" fill="#5382A1"/><path d="M162.439.371s35.887 35.9-34.037 91.101c-56.071 44.282-12.786 69.53-.023 98.377-32.73-29.53-56.75-55.526-40.635-79.72C111.395 74.612 176.918 57.393 162.439.37" fill="#E76F00"/><path d="M95.268 344.665c62.199 3.982 157.712-2.209 159.974-31.64 0 0-4.348 11.158-51.404 20.018-53.088 9.99-118.564 8.824-157.399 2.421.001 0 7.95 6.58 48.83 9.201" fill="#5382A1"/></svg>
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>