From 13774d3c123f74c5c4d9c1838472a3db08358a88 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Mon, 24 Jun 2024 08:37:20 +0200
Subject: [PATCH] ajout des modifs local + ci/cd :green_heart:

---
 .drone.yml        |  18 ++++----
 Porte-folio.html  | 102 +++++++++++++++++++++++++++++++++-------------
 logo/cyclisme.png | Bin 0 -> 2357 bytes
 logo/muscu.png    | Bin 0 -> 2108 bytes
 logo/slime.png    | Bin 0 -> 563 bytes
 styles.css        |  67 +++++++++++++++++++++++++++++-
 6 files changed, 148 insertions(+), 39 deletions(-)
 create mode 100644 logo/cyclisme.png
 create mode 100644 logo/muscu.png
 create mode 100644 logo/slime.png
diff --git a/.drone.yml b/.drone.yml
index a534737..28e48d8 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -18,15 +18,15 @@ steps:
   - name: docker-build-and-push
     image: plugins/docker
     settings:
-       dockerfile: docker/Dockerfile
-       context: .
-       registry: hub.codefirst.iut.uca.fr
-       mirror: https://proxy.iut.uca.fr:8443
-       repo: hub.codefirst.iut.uca.fr/pierre.ferreira/Portfolio-PierreFerreira
-       username:
-         from_secret: SECRET_REGISTRY_USERNAME
-       password:
-         from_secret: SECRET_REGISTRY_PASSWORD
+      dockerfile: docker/Dockerfile
+      context: .
+      registry: hub.codefirst.iut.uca.fr
+      mirror: https://proxy.iut.uca.fr:8443
+      repo: hub.codefirst.iut.uca.fr/pierre.ferreira/Portfolio-PierreFerreira
+      username:
+        from_secret: SECRET_REGISTRY_USERNAME
+      password:
+        from_secret: SECRET_REGISTRY_PASSWORD
 
   - name: deploy-container
     image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest
diff --git a/Porte-folio.html b/Porte-folio.html
index b2543a9..4323c21 100644
--- a/Porte-folio.html
+++ b/Porte-folio.html
@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mon Portefolio</title>
+    <title>Pifolio</title>
+    <link rel="icon" type="image/png" href="logo/slime.png" />
     <link rel="stylesheet" href="styles.css">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 </head>
@@ -13,6 +14,22 @@
         <a href="#parcour">Mon parcour</a>
         <a href="#projects">Projets</a>
         <a href="#contact">Contact</a>
+        <div class="container" style="display: flex; justify-content: end; margin-right: 10px;">
+            <label class="toggle" for="theme-toggle">
+                <input id="theme-toggle" class="input" type="checkbox">
+                <div class="icon icon--moon">
+                    <svg height="32" width="32" fill="white" viewBox="0 0 24 24">
+                        <path clip-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" fill-rule="evenodd"></path>
+                    </svg>
+                </div>
+            
+                <div class="icon icon--sun">
+                    <svg height="32" width="32" fill="white" viewBox="0 0 24 24">
+                        <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"></path>
+                    </svg>
+                </div>
+            </label>
+        </div>
     </nav>
     <div class="accueil">
         <header class="header">
@@ -36,19 +53,20 @@
     <section id="about" class="section">
         <h2 class="mainTitle">À propos de moi</h2>
         <p>Je suis un développeur web passionné avec de l'expérience en création de sites web et applications modernes. J'aime créer des expériences utilisateur intuitives et attrayantes.</p>
+        <h2 class="text-title">Centres d'intéret</h2>
         <div class="about-deck">
             <div class="about-card-container">
                 <div class="about-card">
                     <div class="about-front-content">
-                        <p>Développeur<br/>Web</p>
+                        <img src="logo/cyclisme.png" alt="Cyclisme"/>
+                        <p>Cyclisme</p>
                     </div>
                     <div class="about-content">
-                        <p class="about-heading">Card Hover</p>
+                        <p class="about-heading">Cyclisme</p>
                         <p>
-                        Lorem ipsum dolor sit amet, consectetur adipii
-                        voluptas ten mollitia pariatur odit, ab
-                        minus ratione adipisci accusamus vel est excepturi laboriosam magnam
-                        necessitatibus dignissimos molestias.
+                            Depuis mon plus jeune âge, je pratique le cyclisme. Non pas en compétition, mais en tant que loisir. 
+                            J'aime me balader en montagne et découvrir de nouveaux paysages. 
+                            Ou tout simplement me deplacer en vélo.
                         </p>
                     </div>
                 </div>
@@ -56,15 +74,15 @@
             <div class="about-card-container">
                 <div class="about-card">
                     <div class="about-front-content">
-                        <p>Développeur<br/>Mobile</p>
+                        <img src="logo/muscu.png" alt="Musculation"/>
+                        <p>Musculation</p>
                     </div>
                     <div class="about-content">
-                        <p class="about-heading">Card Hover</p>
+                        <p class="about-heading">Musculation</p>
                         <p>
-                        Lorem ipsum dolor sit amet, consectetur adipii
-                        voluptas ten mollitia pariatur odit, ab
-                        minus ratione adipisci accusamus vel est excepturi laboriosam magnam
-                        necessitatibus dignissimos molestias.
+                            Cela va faire maintenant 1 ans que je pratique la musculation.
+                            Il s'agit d'un sport qui me permet de me défouler et de me sentir bien dans mon corps. 
+                            C'est un sport qui demande de la rigueur et de la discipline, mais qui apporte beaucoup de satisfaction.
                         </p>
                     </div>
                 </div>
@@ -72,10 +90,11 @@
             <div class="about-card-container">
                 <div class="about-card">
                     <div class="about-front-content">
-                        <p>Apprenti<br/>Pixel-Artist</p>
+                        <img src="logo/slime.png" alt="Slime"/>
+                        <p>Pixel-Artist</p>
                     </div>
                     <div class="about-content">
-                        <p class="about-heading">Card Hover</p>
+                        <p class="about-heading">Pixel-Artist</p>
                         <p>
                         Lorem ipsum dolor sit amet, consectetur adipii
                         voluptas ten mollitia pariatur odit, ab
@@ -90,7 +109,7 @@
 
 
     <section id="parcour" class="section">
-        <h1 class="mainTitle">Mon parcours</h2>
+        <h2 class="mainTitle">Mon parcours</h2>
             <div class="timeline">
                 <div class="timeline-empty"></div>
                 <div class="timeline-middle">
@@ -120,7 +139,7 @@
                 </div>
                 <div class="timeline-empty"></div>
                 <div class="timeline-middle">
-                    <!-- Cercle final -->
+                    <!-- "Cercle" final -->
                     <div class="timeline-circle" style="width: 100px; border-radius: 0%;"></div> 
                 </div>
             </div>
@@ -129,23 +148,22 @@
     </section>
 
     <section id="projects" class="section">
-        <h1 class="mainTitle">Projets</h2>
+        <h2 class="mainTitle">Projets</h2>
         <div class="projects-grid">
             <div class="project-card">
                 <h3 class="text-title">Art e-Show</h3>
                 <p class="text-body"> Il s'agit d'un projet de deuxième année de l'IUT informatique de Clermont-Ferrand. Il s'agit d'un site-web permettant à des joueurs d'en apprendre un peu plus sur l'art en s'amusant. Il sera composé de plusieurs modes de jeu :
-
-                <a href="https://codefirst.iut.uca.fr/git/" class="project-card-button">Plus d'infos</a>
+                <a href="https://github.com/PiR194/Art-eShow.git" class="project-card-button">Plus d'infos</a>
             </div>
             <div class="project-card offset">
                 <h3 class="text-title">Spelltastic</h3>
-                <p class="text-body">Description du projet 2.</p>
-                <button class="project-card-button">Plus d'infos</button>
+                <p class="text-body">Spelltastic est une application de type "compagnons de jeu" pour le jeu de roles Pathfinder. Durant ma troisième année de BUT Informatique, j'ai pu faire parti des développeusr de ce gestionnaire de liste de sorts avec un logique bien particulière.</p>
+                <a href="https://github.com/PiR194/SpellTastic.git" class="project-card-button">Plus d'infos</a>
             </div>
             <div class="project-card">
-                <h3 class="text-title">Cryptid</h3>
-                <p class="text-body">Description du projet 3.</p>
-                <button class="project-card-button">Plus d'infos</button>
+                <h3 class="text-title">SocialGraph</h3>
+                <p class="text-body">Adaptation numérique de jeu de société d'enquêteurs, inspiré de du jeu Cryptid. Êtes-vous prêt à relever le défi et à démasquer le tueur caché dans un graphe de suspects ? Que l'enquête commence !</p>
+                <a href="https://github.com/PiR194/Cryptid.git" class="project-card-button">Plus d'infos</a>
             </div>
         </div>
     </section>
@@ -158,7 +176,7 @@
             <div class="AltLinks">
 
                 <!-- Github -->
-                <button class="Btn"> <!-- JS + datautl -->
+                <button class="Btn" onclick="window.location.href='https://github.com/PiR194'">
                     <span class="imgContainer">
                         <img src="logo/githubLogoW.png" alt="Github" class="imgIcon">
                     </span>
@@ -166,7 +184,7 @@
                 </button>
 
                 <!-- LinkedIn -->
-                <button class="Btn">
+                <button class="Btn" onclick="window.location.href='https://www.linkedin.com/in/pierre-ferreira-95a656253/'">
                     <span class="imgContainer">
                         <img src="logo/linkedinLogoW.png" alt="LinkedIn" class="imgIcon">
                     </span>
@@ -227,12 +245,12 @@
     
 
     <footer>
-        <p>&copy; 2024 Mon Portefolio. Tous droits réservés.</p>
+        <p>&copy; 2024 Pifolio. Tous droits réservés.</p>
     </footer>
 
 
     <script>
-        //Gestion du loader
+        //* Gestion du loader
         window.addEventListener('load', function() {
             document.querySelector('.loader-container').classList.add('hidden');
         });
@@ -247,6 +265,32 @@
                 }
             }, 3000); // 3000 ms = 3 seconds
         });*/
+
+        //* Dark theme
+        document.addEventListener('DOMContentLoaded', (event) => {
+            const toggleSwitch = document.querySelector('#theme-toggle');
+            const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+
+            if (currentTheme) {
+                document.body.classList.add(currentTheme);
+
+                if (currentTheme === 'dark-mode') {
+                    toggleSwitch.checked = true;
+                }
+            }
+
+            toggleSwitch.addEventListener('change', function() {
+                if (this.checked) {
+                    document.body.classList.add('dark-mode');
+                    localStorage.setItem('theme', 'dark-mode');
+                } else {
+                    document.body.classList.remove('dark-mode');
+                    localStorage.setItem('theme', 'light-mode');
+                }
+            });
+        });
+
     </script>
+
 </body>
 </html>
diff --git a/logo/cyclisme.png b/logo/cyclisme.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e104078c0fb26529bc1eebbfc543dab45b94aac
GIT binary patch
literal 2357
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
bupIC|ecQxP>+1)v00000NkvXXu0mjf$bgH<

literal 0
HcmV?d00001

diff --git a/logo/muscu.png b/logo/muscu.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc81a3c645fb3b9420096bed0a3775c958f0a50e
GIT binary patch
literal 2108
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

literal 0
HcmV?d00001

diff --git a/logo/slime.png b/logo/slime.png
new file mode 100644
index 0000000000000000000000000000000000000000..7334d0bffd2ab3da77428a54f79d0ddf2836b7dd
GIT binary patch
literal 563
zcmV-30?hr1P)<h;3K|Lk000e1NJLTq002+`002-31^@s6juG;$00001b5ch_0Itp)
z=>Px$?MXyIRCt{2n@e&7Aq)jcDwmr3FXmXuN>vWUAjA{%vAdTpdtjg~exeir00000
z0D#ZpYjpv8*}Sj(ibZtaVJo}%_&(oDpZ)<XGq7Rak!fljhMv31L<|&3Gq4lu%#hSr
z6^O0Pa<h!YKoQx%fmnA+EV`;b7$`DrV5g^-#+*^2F?qIr7$_1paMZlBjq_MlZwwUq
z5q|p!^9-xki-}h6p?T^N7$`E_>Rt@Ft9eJfypQxx!axx>21e(552P6j?Y%t{F;FBj
z3O{Pp^~f5PF;HZB9{5!AY8obnz(5fiP=p2)8Hs`KHt+KYjm8)#5*~%$W%R9?9gQ(i
zga#C$0Y$<w(2EgwkCC%0jw3KoB;!oP__vQ{Ty5mQ`LMy6$Q39C);-oW(wk>xWoLED
zNinVl14Z0k*vr;EeG~Emr*^m}&S*k8JN0SZR(96HE18}LTF-TQu-?_EKUXsYj(#_l
z56F)6MT{62Iydc{b{Sctp=WrrUN!2uHwKDCV&IgC#(<GoF|b*FO;*MQ28yI*XBmN>
zUosEOGLP)6lUSA`ZH%s5ve&}i_X;`E_h7|6k<hc%{ldTsV#$pq3=~;$SI+QmqGxA1
zOqIu7xr<59cM)Qe$|*6o1_J>A00000007`Y`~gy3oP;Yt)$srT002ovPDHLkV1gaL
B@zwwU

literal 0
HcmV?d00001

diff --git a/styles.css b/styles.css
index db7cdf6..8ef2d88 100644
--- a/styles.css
+++ b/styles.css
@@ -13,6 +13,12 @@ html {
     --Secondary: #900C3F;
     --Tertiary: #C70039;
     --Quaternary: #250F1E;
+    /**BG**/
+    --BackgroundLight: #f4f4f4;
+    --TextLight: #333;
+
+    --BackgroundDark: #1e1e1e;
+    --TextDark: #f4f4f4;
 }
 
 body {
@@ -21,6 +27,10 @@ body {
     background-color: #f4f4f4;
     color: #333;
 }
+body.dark-mode {
+    background-color: var(--BackgroundDark);
+    color: var(--TextDark);
+}
 
 .accueil{
     background-color: #b5d2fc
@@ -38,6 +48,10 @@ header {
     color: white;
 }
 
+/* header.dark-mode {
+    background: url('img/accueil_dark.jpeg') no-repeat center center;
+} */
+
 .header-content {
     position: relative;
     z-index: 2;
@@ -103,6 +117,10 @@ background-color:#f8f8f8;
 .topnav {
     background-color: #333;
     overflow: hidden;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
 }
 
 /* Style the links inside the navigation bar */
@@ -127,6 +145,45 @@ background-color:#f8f8f8;
     color: white;
 }
 
+/** Switch Dark Mode*/
+.toggle {
+    background-color: #1e1e1e;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    box-shadow: 0 0 50px 20px rgba(0, 0, 0, .1);
+    line-height: 1;
+}
+
+.input {
+    display: none;
+}
+
+.icon {
+    grid-column: 1 / 1;
+    grid-row: 1 / 1;
+    transition: transform 500ms;
+}
+
+.icon--moon {
+    transition-delay: 200ms;
+}
+
+.icon--sun {
+    transform: scale(0);
+}
+
+#theme-toggle:checked + .icon--moon {
+    transform: rotate(360deg) scale(0);
+}
+
+#theme-toggle:checked ~ .icon--sun {
+    transition-delay: 200ms;
+    transform: scale(1) rotate(360deg);
+}
 /* .header-content {
     max-width: 600px;
     margin: 0 auto;
@@ -180,8 +237,9 @@ background-color:#f8f8f8;
     width: 100%;
     height: 100%;
     display: flex;
-    align-items: center;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
     transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
 }
 
@@ -330,6 +388,13 @@ opacity: 0;
     margin-bottom: 1em;
 }
 
+.text-title {
+    margin-top: 1em;
+    color: var(--Secondary);
+    font: bolder;
+    font-size: 1.5em;
+}
+
 .project-card-button {
     transform: translate(-50%, 125%);
     width: 60%;
