add of text, button and background for the home

src/components/Experiences.jsx

@@ -32,7 +32,7 @@ function Experiences() {
 
     return (
         <section id="experiences-section">
-            <h1>Expériences</h1>
+            <h1>Experiences</h1>
             <div className="experiences-container">
                 {experiencesData.map((exp, index) => (
                     <SingleExperience experience={exp} whichSide={index % 2 !== 0}/>

src/components/Home.jsx

@@ -1,10 +1,21 @@
+import '../styles/Home.css';
+import Background from "./thirdParty/Background.jsx";
+
 function Home() {
     return (
-        <section id="home-section">
-            <h1>Home</h1>
-        </section>
-    )
+
+    <section id="home-section">
+        <Background />
+        <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
+export default Home;

src/components/Projects.jsx

@@ -5,7 +5,7 @@ function Projects() {
     return (
         <section id="projects-section">
             <h1>Projects</h1>
-            <SingleProject image="landscape" title="Portfolio" description={desc} skills={['HTML', 'CSS', 'React', 'Git']} color="orange" />
+            <SingleProject image="landscape" title="Codev" description={desc} skills={['HTML', 'CSS', 'PHP', 'JavaScript', 'SQL']} color="orange" />
             <SingleProject image="landscape" title="SAE C++" description={desc} skills={['C++', 'Git']} color="purple" />
             <SingleProject image="proxmox" title="Proxmox" description={desc} skills={[]} color="green" />
             <div className="show-more-container">

src/components/SingleExperience.jsx

@@ -4,9 +4,9 @@ function SingleExperience({ experience, whichSide }) {
     return (
         <div className={`experience-card ${whichSide ? 'right' : 'left'}`}>
             <div className="experience-card-header">
-                <div className="experience-primary-info">
+                <div className="experience-card-header-left">
                     <h3 className="experience-role">{experience.role}</h3>
-                    <p className="experience-company-location">
+                    <p className="experience-location">
                         {experience.company} • {experience.location}
                     </p>
                 </div>

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>
+    );
+}