New portfolio junior

README.md

@@ -0,0 +1,32 @@
+Modification du projet JS_CSS_Portfolio :
+
+  Ajout de fonctionnalitées :
+  - loupe pour agrandir le texte, rendant le site plus "accessible" combiné avec le changement de thème
+  - modification du thème
+  - ajout d'aria-label 
+  - flêche pour remonter en haut de page
+  - ajout d'effet d'ombre sur plusieurs éléments
+  - sécurisation d'une partie du code
+  - suppression du blog (je n'en avais pas l'utilité)
+  - modification right-about pour être en accord avec un développeur junior, idem pour les skills
+  - téléchargement du CV uniquement dans la section about
+  - ajout d'icones dans le portfolio concernant les languages utilisés
+  - modification du formulaire de contacte et de la partie identité
+  - ajout des pages obligatoires en europe (mentions, confidentialité)
+
+===========================================================================
+
+Added features:
+
+- Magnifying glass to enlarge text, making the site more "accessible" when combined with theme switching.
+- Theme modification.
+- Added aria-label for accessibility.
+- Arrow to scroll back to the top of the page.
+- Added shadow effects to several elements.
+- Secured part of the code.
+- Removed the blog (it was unnecessary for me).
+- Adjusted right-about section to align with a junior developer profile, same for the skills.
+- CV download available only in the about section.
+- Added icons in the portfolio indicating the programming languages used.
+- Modified the contact form and the identity section.
+- Added mandatory pages for Europe (legal notice, privacy policy).

index.php

@@ -0,0 +1,69 @@
+<?php
+
+if (session_status() === PHP_SESSION_NONE) {
+    include_once 'pages/init.php'; // Inclure le fichier de configuration pour démarrer la session // Démarrer la session seulement si elle n'est pas déjà active
+}
+// Régénérer l'ID de session pour éviter le détournement de session
+session_regenerate_id(true);
+
+// Vérifier si un message a été envoyé
+$message_sent = $_SESSION['message_sent'] ?? null;
+unset($_SESSION['message_sent']); // Effacer le message de la session après l'avoir lu
+
+// Régénérer l'ID de session pour éviter le détournement de session
+session_regenerate_id(true);
+// Début du document HTML
+include 'pages/header.php';
+?>
+<div id="copyright">
+    <small>&copy; 2024 - Michel Grillon.</small>
+</div>
+<header class="container header active" id="home">
+    <div class="header-content">
+        <div class="left-header">
+            <div class="h-shape"></div>
+            <div class="image">
+                <!-- Utiliser l'attribut alt pour améliorer l'accessibilité -->
+                <img src="/../images/legos-original-small.webp" alt="Photo de Michel Grillon">
+            </div>
+        </div>
+        <div class="right-header">
+            <h1 class="name">
+                    Bonjour, je suis <br>
+                        <span>Michel Grillon</span><br>
+                    Développeur web junior
+                </h1>
+                <hr>
+                <br>
+            <div id="dateHeure">
+                <span id="date">
+                    <?php
+                    setlocale(LC_TIME, 'fr_FR.UTF-8');
+                    $jours = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
+                    $mois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+                    $date = new DateTime();
+                    echo $jours[$date->format('w')] . ' ' . $date->format('d') . ' ' . $mois[$date->format('n') - 1] . ' ' . $date->format('Y');
+                    ?>
+                </span>-<span id="heure"><?php echo date('H\hi\ms\s'); ?></span>
+            </div>
+            <br>
+            <hr>
+            <p>Ouverture : début octobre 2024. Merci pour votre patiance !</p>
+            <hr>
+        </div>
+    </div>
+</header>
+<main>
+    <div class="main-content">
+        <?php
+        // Contenu principal
+        include 'pages/about.php';
+        include 'pages/portfolio.php';
+        include 'pages/contact.php';
+        include 'pages/confidentialite.php';
+        include 'pages/mentions.php';
+        ?>
+    </div>
+</main>
+
+<?php include 'pages/footer.php'; ?>

pages/about.php

@@ -0,0 +1,227 @@
+<section class="container about" id="about">
+    <div class="main-title">
+        <h2>A propos de <span>moi</span><span class="bg-text">QUI ? MOI ?</span></h2>
+    </div>
+    <div class="mobile-main-title">
+        <h2> &Agrave; propos de <span>moi</span><span class="bg-text">QUI ? MOI ?</span></h2>
+    </div>
+    <div class="about-container">
+        <div class="left-about">
+            <h3>Quelques informations sur moi</h3>
+            <p>J'aime créer des choses qui vivent sur Internet. <br>
+                Je suis un développeur web passionné par le code...<br>
+                Mon intérêt pour le développement Web a commencé dès les années 2000.</p><br>
+            <br>
+            <p>Pour plus d'informations, télécharger mon CV :</p>
+            <div class="btn-con">
+                <span class="btn-icon"><i class="fas fa-download"></i></span>&nbsp;&nbsp;<a href="../fichiers/CV%20Michel%20Grillon%20Developpeur%20web%202024.pdf" title="CV Michel Grillon Developpeur web 2024" target="_blank" class="main-btn" tabindex="0">Télécharger le CV</a>
+            </div>
+            <br>
+            <h3> &Agrave; propos de ce site :</h3>
+            <p>Ce site utilise : </p>
+            <ul class="technos">
+                <li>- HTML 5</li>
+                <li>- CSS 3</li>
+                <li>- JavaScript (ES6+)</li>
+                <li>- PHP 8</li>
+            </ul>
+            <br>
+            <p>Ce site Internet est validé W3C CCS3 :</p>
+            <a href="https://jigsaw.w3.org/css-validator/check/referer" target="_blank">
+                <img style="border:0;width:88px;height:31px"
+                    src="https://jigsaw.w3.org/css-validator/images/vcss"
+                    alt="CSS Valide !">
+            </a>
+            <p>Ce site Internet est validé W3C HTML5 :</p>
+            <a href=" https://validator.w3.org/nu/?doc=https%3A%2F%2Fmichel-grillon.fr%2F" title="Outil de validation HTML 5" target="_blank" rel="noopener">
+                <img style="border:0;width:88px;height:31px"
+                    src="../images/W3C_HTML5_certified.png" alt="Ce site est valide W3C HTML5" title="W3C_HTML5_certified">
+            </a>
+            <p>Ce site n' utilise pas : </p>
+            <ul>
+                <li>- Des cookies...</li>
+            </ul>
+            <p>Plus d'information à ce sujet : </p><a href="/pages/confidentialite.php"><u>Politique de confidentialité.</u></a>
+        </div>
+        <div class="right-about">
+            <h3>Je travaille avec :</h3>
+            <br>
+            <div class="about-item">
+                <div class="abt-text">
+                    <p class="large-text">Technos</p>
+                    <p class="small-text"> Récemment</p>
+                    <br>
+                    <ul class="technos">
+                        <li>- HTML 5</li>
+                        <li>- CSS 3</li>
+                        <li>- JavaScript (ES6+)</li>
+                        <li>- PHP 8</li>
+                        <li>- Bootstrap</li>
+                        <li>- Ajax</li>
+                        <li>- MySQL8</li>
+                        <li>- WordPress (développement)</li>
+                        <li>- GIT</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="about-item">
+                <div class="abt-text">
+                    <p class="large-text">Autres</p>
+                    <p class="small-text">J'utilise</p>
+                    <br>
+                    <ul class="technos2">
+                        <li>- Merise : pour la schématisation des données et des traitements : modèle conceptuel de données (MCD), modèle
+                            logique (MLD) et modèle physique (MPD)</li>
+                        <li>- UML : pour la schématisation des données et des traitements au travers des différents diagrammes.</li>
+                        <li>- Le mobile first, le zoning, wireframe...</li>
+                    </ul>
+                </div>
+            </div>
+            <h4> Actuellement en auto-formation sur : </h4>
+            <p>JAVA / Angular / Eclipse / React.</p>
+        </div>
+    </div>
+    <div class="about-stats">
+        <h3 class="stat-title">Mes compétences</h3>
+        <div class="skills-container">
+            <div class="left-skills">
+                <div class="abt-text">
+                    <p class="large-text">Savoir-être</p>
+                    <br>
+                    <p class="small-text">Travail en équipe | Autonomie | Capacité d'adaptation | Rigueur | Engagement professionnel</p>
+                    <br>
+                </div>
+            </div>
+            <div class="right-skills">
+                <div class="abt-text">
+                    <p class="large-text">Savoir-faire</p>
+                    <br>
+                    <p class="small-text"> HTML | CSS | JavaScript | PHP | GIT</p>
+                </div>
+            </div>
+        </div>
+        <br>
+        <div class="contact-item">
+            <div class="icon">
+                <i class="fas fa-globe" role="img"></i>
+                <span>Langues : Français, Anglais (moyen), Espagnol (débutant).</span>
+            </div>
+        </div>
+    </div>
+
+    <h3 class="stat-title">Ma chronologie</h3>
+    <div class="timeline">
+        <div class="timeline-item">
+            <div class="tl-icon">
+                <i class="fas fa-briefcase" role="img"></i>
+            </div>
+            <p class="tl-duration">2023 - present</p>
+            <h4>Formation Developpent Web et Web Mobile<span> - CEFII Angers (49)</span></h4>
+            <p>
+                Titre Professionnel - BAC+2, Code RNCP : 37674
+            </p><br>
+            <p>
+                Développer la partie front-end d’une application web ou web mobile sécurisée :<br>
+                Algorithmie | HTML, CSS
+                | Framework front : Bootstrap
+                | JavaScript
+                | Responsive design
+            </p>
+            <br>
+            <p>
+                Développer la partie back-end d’une application web ou web mobile sécurisée :<br>
+                Modélisation : UML, Merise
+                | PHP-SQL
+                | Conception et administration de BDD
+                | Programmation MVC et POO
+                | Ajax
+            </p>
+            <br>
+            <p>
+                WEB & CMS :
+                WordPress gestion de contenu – WooCommerce
+                | SEO
+            </p>
+            <br>
+            <p>
+                MÉTHODOLOGIE DE LA DÉMARCHE DEVOPS :<br>
+                Théorie
+                | Les gestions de projets : traditionnelle, agile …
+                | Versionning : Git, Git Lab, Git Server
+                | contrôle qualité du code
+            </p>
+            <br>
+            <p>
+                DÉVELOPPEMENT MOBILE :
+                Kotlin (débute)
+            </p>
+        </div>
+        <div class="timeline-item">
+            <div class="tl-icon">
+                <i class="fas fa-briefcase" role="img"></i>
+            </div>
+            <p class="tl-duration">1993 - présent</p>
+            <h4>Informaticien <span> - Indépendant.</span></h4>
+            <p>
+                Utilisation des logiciels et langages suivants :<br>
+                -Créations graphiques, webdesign, faire-parts, logos, illustrations : Autocad (débutant), Photoshop, Illustrator, Gimp, 3DS Max et Blender (3D, débutant), utilisation d’une tablette graphique.<br>
+                -Conception web, intranet et mise à jour des sites : Dreamweaver, Visual Studio Code, WampServer,-Langages : HTML/CSS, PHP (débutant), Javascript (débutant),<br>
+                -Plateformes : Windows, Linux (Débian/Ubuntu), connaissances Mac,<br>
+                -Bureautique : Suite Office, LibreOffice.<br>
+                Sensibilisé à l'accessibilité numérique et notions de CMS (Joomla).<br>
+                Formations en cours : JAVA/Angular/Eclipse/React.
+            </p>
+        </div>
+        <div class="timeline-item">
+            <div class="tl-icon">
+                <i class="fas fa-briefcase" role="img"></i>
+            </div>
+            <p class="tl-duration">1999 - 2000</p>
+            <h4>PCIE (Passeport de Compétences Informatique Européen)<span> - IDEAA (Institut de Développement et d’Économie de l’Artisanat de l’Anjou).</span></h4>
+            <p>
+                PCIE (Passeport de Compétences Informatique Européen) et Assistant Micro Informatique (avec la région des Pays de la Loire et l’ANPE.)
+                - assistance et dépannage auprès des utilisateurs
+                - connaissances des principaux produits du marché
+                - formation individuelle des utilisateurs
+
+                Stage pratique :
+                - web-designer/webmaster (création graphique, rédactionnel, mise en place du site sur le serveur et mise à jour du site)
+                - assistance et dépannage pour le centre de formation
+            </p>
+        </div>
+        <div class="timeline-item">
+            <div class="tl-icon">
+                <i class="fas fa-briefcase" role="img"></i>
+            </div>
+            <p class="tl-duration">2001 - 2018</p>
+            <h4>Technicien de support puis Référent technique (Superviseur)<span> - Convergys (Angers, 49)</span></h4>
+            <p>
+                • Compétences acquises :<br>
+                Savoir :
+            </p>
+            <ul>
+                <li>- accompagner individuellement les personnes.</li>
+                <li>- s'adapter rapidement.</li>
+                <li>- prendre des initiatives</li>
+                <li>- écouter</li>
+                <li>- veiller aux respects des procédures</li>
+                <li>- répondre aux questions</li>
+                <li>- analyser les statistiques</li>
+                <li>- motiver</li>
+            </ul><br>
+            <p>Actions : </p>
+            <ul>
+                <li>•Mise en place et respect des procédures et applications aux conseillers suivant la charte des clients</li>
+                <li>•Intégration et formation des nouveaux techniciens</li>
+                <li>•Mise en place de nouvelles équipes en aide aux Service Delivery Manager et Teams managers du site ( assistance technique : Hello d'Orange et une équipe de soutien avancé aux conseillers afin de les faire progresser, mise en place des procédures correspondantes, d'entrée, de sortie, de mise en place des moyens, des objectifs, des formations adéquates, du suivi individuel et de l'équipe, aide au management de l'équipe, etc.)</li>
+                <li>•Regroupement des informations, des procédures et des statistiques de suivis des conseillers dans des outils (intranet, Excel...) et mise à jours de ces outils via une base SQL et PHP, afin de mettre en place les actions adéquats pour faire évoluer dans le sens des objectifs les conseillers (workshop/formations courtes/refresh par exemple).</li>
+                <li>•Évaluation de la qualité du service (suivi des statistiques, pilotage des flux, etc.)</li>
+                <li>•Gestion des conflits client final en dernier recourt</li>
+                <li>•Participation aux réunions techniques avec le client</li>
+                <li>•Evaluations des techniciens (via des call coachs ou quiz par exemple)</li>
+                <li>•Référent auprès de l’équipe sur les procédures, le contexte client et la technique.</li>
+                <li>Le respect au quotidien des engagements de services et des moyens mis en œuvre (qualité de résolution, respect des procédures et des délais, DMT, satisfaction client, retour matériel, traitement des objections, remontées vers le client final afin d’être force de proposition pour l'amélioration des outils comme les scripts...) du client donneur d'ordre en tenant compte aussi de l'aspect financier (afin de générer du bonus par exemple, ou de limiter les pertes)...</li>
+            </ul>
+        </div>
+    </div>
+</section>