From 7d3ae56c23c611a12e65f0e511618c02aa56aa28 Mon Sep 17 00:00:00 2001
From: Morph01 <145839520+Morph01@users.noreply.github.com>
Date: Sun, 11 Feb 2024 20:45:10 +0100
Subject: [PATCH] add section MyPorfolio, section ContactMe, section Footer

---
 src/Pages/Home/ContactMe.jsx   | 18 +++++++
 src/Pages/Home/Footer.jsx      | 86 ++++++++++++++++++++++++++++++++++
 src/Pages/Home/MyPortfolio.jsx | 19 +++++---
 3 files changed, 116 insertions(+), 7 deletions(-)
 create mode 100644 src/Pages/Home/ContactMe.jsx
 create mode 100644 src/Pages/Home/Footer.jsx

diff --git a/src/Pages/Home/ContactMe.jsx b/src/Pages/Home/ContactMe.jsx
new file mode 100644
index 0000000..0310b52
--- /dev/null
+++ b/src/Pages/Home/ContactMe.jsx
@@ -0,0 +1,18 @@
+export default function ContactMe() {
+  return (
+    <section id="Contact" className="contact--section">
+      <div>
+        <p className="sub--title">Rentrer en Contact</p>
+        <h2>Contactez Moi</h2>
+        <p className="text-lg-with-margin">
+          Si vous voulez me contacter, vous pouvez m'envoyer un mail à l'adresse
+          email suivante :
+        </p>
+        <a href="mailto:thibaut.alessi@free.fr">thibaut.alessi@free.fr</a>
+        <p className="text-lg">
+          Ou bien directement par LinkedIn en bas de page.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/src/Pages/Home/Footer.jsx b/src/Pages/Home/Footer.jsx
new file mode 100644
index 0000000..2543c8e
--- /dev/null
+++ b/src/Pages/Home/Footer.jsx
@@ -0,0 +1,86 @@
+import { Link } from "react-scroll";
+import React from "react";
+
+function Footer() {
+  return (
+    <footer className="footer--container">
+      <div className="footer--link--container">
+        <div>
+          <img src="./img/logo.png" alt="Logo" />
+        </div>
+        <div className="footer--items">
+          <ul>
+            <li>
+              <Link
+                activeClass="navbar--active-content"
+                spy={true}
+                smooth={true}
+                offset={-70}
+                duration={500}
+                to="heroSection"
+                className="text-md"
+              >
+                Accueil
+              </Link>
+            </li>
+            <li>
+              <Link
+                activeClass="navbar--active-content"
+                spy={true}
+                smooth={true}
+                offset={-70}
+                duration={500}
+                to="MyPortfolio"
+                className="text-md"
+              >
+                Portfolio
+              </Link>
+            </li>
+            <li>
+              <Link
+                activeClass="navbar--active-content"
+                spy={true}
+                smooth={true}
+                offset={-70}
+                duration={500}
+                to="AboutMe"
+                className="text-md"
+              >
+                À propos de moi
+              </Link>
+            </li>
+          </ul>
+        </div>
+        <div className="footer--social--icon">
+          <ul>
+            <li>
+              <a
+                href="https://www.linkedin.com/in/thibautalessi/"
+                className="navbar--content"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="32"
+                  height="32"
+                  viewBox="0 0 33 33"
+                  fill="none"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.33341 4.65479H26.0001C27.4729 4.65479 28.6667 5.84869 28.6667 7.32145V25.9881C28.6667 27.4609 27.4729 28.6548 26.0001 28.6548H7.33341C5.86065 28.6548 4.66675 27.4609 4.66675 25.9881V7.32145C4.66675 5.84869 5.86065 4.65479 7.33341 4.65479ZM11.3334 24.6548C11.7016 24.6548 12.0001 24.3563 12.0001 23.9881V14.6548C12.0001 14.2867 11.7016 13.9881 11.3334 13.9881H9.33342C8.96523 13.9881 8.66675 14.2867 8.66675 14.6548V23.9881C8.66675 24.3563 8.96523 24.6548 9.33342 24.6548H11.3334ZM10.3334 12.6548C9.22884 12.6548 8.33341 11.7594 8.33341 10.6548C8.33341 9.55021 9.22884 8.65479 10.3334 8.65479C11.438 8.65479 12.3334 9.55021 12.3334 10.6548C12.3334 11.7594 11.438 12.6548 10.3334 12.6548ZM24.0001 24.6548C24.3682 24.6548 24.6667 24.3563 24.6667 23.9881V17.8548C24.7101 15.7359 23.1435 13.9275 21.0401 13.6681C19.5694 13.5338 18.1445 14.2207 17.3334 15.4548V14.6548C17.3334 14.2867 17.0349 13.9881 16.6667 13.9881H14.6667C14.2986 13.9881 14.0001 14.2867 14.0001 14.6548V23.9881C14.0001 24.3563 14.2986 24.6548 14.6667 24.6548H16.6667C17.0349 24.6548 17.3334 24.3563 17.3334 23.9881V18.9881C17.3334 17.8836 18.2289 16.9881 19.3334 16.9881C20.4379 16.9881 21.3334 17.8836 21.3334 18.9881V23.9881C21.3334 24.3563 21.6319 24.6548 22.0001 24.6548H24.0001Z"
+                    fill="black"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/Pages/Home/MyPortfolio.jsx b/src/Pages/Home/MyPortfolio.jsx
index 6ca8075..d1ffa75 100644
--- a/src/Pages/Home/MyPortfolio.jsx
+++ b/src/Pages/Home/MyPortfolio.jsx
@@ -1,15 +1,20 @@
+import { Link } from "react-router-dom";
 import data from "../../data/index.json";
 
 export default function MyPortfolio() {
+  const openGitHub = (link) => {
+    window.open(link, "_blank");
+  };
+
   return (
     <section className="portfolio--section" id="MyPortfolio">
       <div className="portfolio--container-box">
         <div className="portfolio--container">
-          <p className="sub--title">Recent Projects</p>
-          <h2 className="section--heading">My Portfolio</h2>
+          <p className="sub--title">Projets récents</p>
+          <h2 className="section--heading">Mon Portfolio</h2>
         </div>
         <div>
-          <button className="btn btn-github">
+          <button className="btn btn-github" onClick={() => openGitHub("https://github.com/Morph01")}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="32"
@@ -24,7 +29,7 @@ export default function MyPortfolio() {
                 fill="currentColor"
               />
             </svg>
-            Visit My GitHub
+            Visiter mon GitHub
           </button>
         </div>
       </div>
@@ -39,8 +44,8 @@ export default function MyPortfolio() {
                 <h3 className="portfolio--section--title">{item.title}</h3>
                 <p className="text-md">{item.description}</p>
               </div>
-              <p className="text-sm portfolio--link">
-                {item.link}
+              <p className="text-sm portfolio--link" onClick={() => openGitHub(item.link)}>
+                {item.voir}
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   width="16"
@@ -63,4 +68,4 @@ export default function MyPortfolio() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}