update

PHP/main.php

@@ -1,25 +1,30 @@
-<?php
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    $name = $_POST["name"];
-    $email = $_POST["email"];
-    $subject = $_POST["subject"];
-    $message = $_POST["message"];
-
-    $to = "hugo.creneau@etu.uca.fr";
-
-    $email_subject = "New Contact Form Submission: $subject";
-
-    $email_body = "You have received a new message from $name ($email):\n\n$message";
-
-    $from = "hugo.crneau@gmail.com";
-
-    $headers = "From: $from\r\n";
-    $headers .= "Reply-To: $email\r\n";
-
-    if (mail($to, $email_subject, $email_body, $headers)) {
-        echo "success";
-    } else {
-        echo "error";
-    }
-}
-?>
+<?php
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $name = $_POST["name"];
+    $email = $_POST["email"];
+    $subject = $_POST["subject"];
+    $message = $_POST["message"];
+
+    $to = "hugo.creneau@etu.uca.fr";
+    
+    $mail_subject = "Message de $name : $subject";
+    
+    $mail_message = "
+    Nom : $name\n
+    Email : $email\n
+    Sujet : $subject\n\n
+    Message :\n$message
+    ";
+
+    $headers = "From: $email" . "\r\n" .
+               "Reply-To: $email" . "\r\n" .
+               "X-Mailer: PHP/" . phpversion();
+
+    if (mail($to, $mail_subject, $mail_message, $headers)) {
+        echo "Votre message a été envoyé avec succès !";
+    } else {
+        echo "Échec de l'envoi du message. Veuillez réessayer plus tard.";
+    }
+} else {
+    echo "Méthode de requête non autorisée.";
+}

README.md

@@ -20,4 +20,4 @@ Bienvenue sur mon portfolio ! Ce document vous donne un aperçu de mon parcours,
 
 Pour plus de détails, explorez les sections individuelles de mon portfolio.
 
-Merci de votre visite !
+Merci de votre visite !

css/skins/color-1.css

@@ -1,4 +1,3 @@
-:root
-{
-    --skin-color:#ec1839;
-}
+:root {
+  --skin-color: #ec1839;
+}

css/skins/color-2.css

@@ -1,3 +1,3 @@
-:root {
-    --skin-color: #fa5b0f;
-}
+:root {
+  --skin-color: #fa5b0f;
+}

css/skins/color-3.css

@@ -1,3 +1,3 @@
-:root {
-    --skin-color: #37b182;
-}
+:root {
+  --skin-color: #37b182;
+}

css/skins/color-4.css

@@ -1,3 +1,3 @@
-:root {
-    --skin-color: #1854b4;
-}
+:root {
+  --skin-color: #1854b4;
+}

css/skins/color-5.css

@@ -1,3 +1,3 @@
-:root {
-    --skin-color: #f021b2;
-}
+:root {
+  --skin-color: #f021b2;
+}

css/style-switcher.css

@@ -1,128 +1,115 @@
-@keyframes slideIn {
-    from {
-        transform: translateX(100%);
-    }
-
-    to {
-        transform: translateX(-25px);
-    }
-}
-
-@keyframes slideInOut {
-    from {
-        transform: translateX(100%);
-    }
-
-    to {
-        transform: translateX(-25px);
-    }
-}
-
-.style-switcher {
-    position: fixed;
-    right: 0;
-    top: 60px;
-    padding: 15px;
-    width: 200px;
-    border: 1px solid var(--bg-black-50);
-    background: var(--bg-black-100);
-    z-index: 101;
-    border-radius: 5px;
-    transform: translateX(100%);
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-}
-
-.style-switcher.open {
-    animation-name: slideInOut;
-}
-
-.style-switcher.closed {
-    animation-name: slideOut;
-}
-
-
-.style-switcher:focus {
-    animation: slideIn 0.3s forwards;
-}
-
-.style-switcher .s-icon
-{
-    position: absolute;
-    padding-top: 4px;
-    height: 40px;
-    width: 40px;
-    text-align: center;
-    font-size: 20px;
-    background: var(--bg-black-100);
-    color: var(--text-black-900);
-    right: 100%;
-    border: 1px solid var(--bg-black-50);
-    margin-right: 25px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    border-radius: 50%;
-}
-
-.style-switcher .s-icon i
-{
-    line-height: 40px;
-}
-
-.style-switcher .style-switcher-toggle
-{
-    top: 0;
-}
-
-.style-switcher .day-night
-{
-    top: 55px;
-}
-
-.style-switcher h4
-{
-    margin: 0 0 10px;
-    color: var(--text-black-700);
-    font-size: 16px;
-    font-weight: 600;
-    text-transform: capitalize;
-}
-
-.style-switcher .colors
-{
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
-
-.style-switcher .colors span
-{
-    display: inline-block;
-    height: 30px;
-    width: 30px;
-    border-radius: 50px;
-}
-
-.style-switcher .color-1
-{
-    background: #ec1839;
-}
-
-.style-switcher .color-2 
-{
-    background: #fa5b0f;
-}
-.style-switcher .color-3 
-{
-    background: #37b182;
-}
-
-.style-switcher .color-4 
-{
-    background: #1854b4;
-}
-
-.style-switcher .color-5 
-{
-    background: #f021b2;
-}
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(-25px);
+  }
+}
+
+@keyframes slideInOut {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(-25px);
+  }
+}
+
+.style-switcher {
+  position: fixed;
+  right: 0;
+  top: 60px;
+  padding: 15px;
+  width: 200px;
+  border: 1px solid var(--bg-black-50);
+  background: var(--bg-black-100);
+  z-index: 101;
+  border-radius: 5px;
+  transform: translateX(100%);
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.style-switcher.open {
+  animation-name: slideInOut;
+}
+
+.style-switcher.closed {
+  animation-name: slideOut;
+}
+
+.style-switcher:focus {
+  animation: slideIn 0.3s forwards;
+}
+
+.style-switcher .s-icon {
+  position: absolute;
+  padding-top: 4px;
+  height: 40px;
+  width: 40px;
+  text-align: center;
+  font-size: 20px;
+  background: var(--bg-black-100);
+  color: var(--text-black-900);
+  right: 100%;
+  border: 1px solid var(--bg-black-50);
+  margin-right: 25px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-radius: 50%;
+}
+
+.style-switcher .s-icon i {
+  line-height: 40px;
+}
+
+.style-switcher .style-switcher-toggle {
+  top: 0;
+}
+
+.style-switcher .day-night {
+  top: 55px;
+}
+
+.style-switcher h4 {
+  margin: 0 0 10px;
+  color: var(--text-black-700);
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.style-switcher .colors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.style-switcher .colors span {
+  display: inline-block;
+  height: 30px;
+  width: 30px;
+  border-radius: 50px;
+}
+
+.style-switcher .color-1 {
+  background: #ec1839;
+}
+
+.style-switcher .color-2 {
+  background: #fa5b0f;
+}
+.style-switcher .color-3 {
+  background: #37b182;
+}
+
+.style-switcher .color-4 {
+  background: #1854b4;
+}
+
+.style-switcher .color-5 {
+  background: #f021b2;
+}

js/script.js

@@ -1,150 +1,144 @@
-var typed = new Typed(".typing", {
-  strings: [
-    "",
-    "Developpeur Web",
-    "Developpeur Front-end",
-    "Developpeur Back-end",
-    "Developpeur Mobile",
-  ],
-  typeSpeed: 150,
-  backSpeed: 60,
-  loop: true,
-});
-
-const nav = document.querySelector(".nav"),
-  navList = nav.querySelectorAll("li"),
-  totalNavList = navList.length,
-  allSelection = document.querySelectorAll(".section"),
-  totalSelection = allSelection.length;
-
-for (let i = 0; i < totalNavList; i++) {
-  removeBackSection();
-  const a = navList[i].querySelector("a");
-  a.addEventListener("click", function () {
-    for (let j = 0; j < totalNavList; j++) {
-      if (navList[j].querySelector("a").classList.contains("active")) {
-        addBackSection(j);
-      }
-      navList[j].querySelector("a").classList.remove("active");
-    }
-    this.classList.add("active");
-    showSection(this);
-    if (window.innerWidth < 1200) {
-      asideSectionTogglerBtn();
-    }
-  });
-}
-
-function removeBackSection() {
-  for (let i = 0; i < totalSelection; i++) {
-    allSelection[i].classList.remove("back-section");
-  }
-}
-
-function addBackSection(num) {
-  allSelection[num].classList.add("back-section");
-}
-
-function showSection(element) {
-  for (let i = 0; i < totalSelection; i++) {
-    allSelection[i].classList.remove("active");
-  }
-  const target = element.getAttribute("href").split("#")[1];
-  document.querySelector("#" + target).classList.add("active");
-}
-
-function updateNav(element) {
-  for (let i = 0; i < totalNavList; i++) {
-    navList[i].querySelector("a").classList.remove("active");
-    const target = element.getAttribute("href").split("#")[1];
-    if (
-      target ===
-      navList[i].querySelector("a").getAttribute("href").split("#")[1]
-    ) {
-      navList[i].querySelector("a").classList.add("active");
-    }
-  }
-}
-
-const navTogglerBtn = document.querySelector(".nav-toggler"),
-  aside = document.querySelector(".aside");
-navTogglerBtn.addEventListener("click", () => {
-  asideSectionTogglerBtn();
-});
-
-function asideSectionTogglerBtn() {
-  aside.classList.add("open");
-  navTogglerBtn.classList.toggle("open");
-  for (let i = 0; i < totalSelection; i++) {
-    allSelection[i].classList.toggle("open");
-  }
-}
-
-const asideLinks = document.querySelectorAll(".aside a");
-asideLinks.forEach((link) => {
-  link.addEventListener("click", () => {
-    aside.classList.remove("open");
-  });
-});
-
-function toggleDescription(descriptionId) {
-  var description = document.getElementById(descriptionId);
-  if (description.classList.contains("hidden")) {
-    description.classList.remove("hidden");
-    description.classList.add("show");
-  } else {
-    if (description.classList.contains("show")) {
-      description.classList.remove("show");
-      description.classList.add("hidden");
-    }
-  }
-}
-
-var portfolioImages = document.querySelectorAll(".portfolio-img");
-portfolioImages.forEach(function (image, index) {
-  image.addEventListener("click", function () {
-    if (document.getElementById("portfolio-description-1")) {
-      toggleDescription("portfolio-description-1");
-    }
-    if (document.getElementById("portfolio-description-2")) {
-      toggleDescription("portfolio-description-2");
-    }
-    if (document.getElementById("portfolio-description-3")) {
-      toggleDescription("portfolio-description-3");
-    }
-    if (document.getElementById("portfolio-description-4")) {
-      toggleDescription("portfolio-description-4");
-    }
-    if (document.getElementById("portfolio-description-5")) {
-      toggleDescription("portfolio-description-5");
-    }
-    if (document.getElementById("portfolio-description-6")) {
-      toggleDescription("portfolio-description-6");
-    }
-  });
-});
-
-document
-  .getElementById("contactForm")
-  .addEventListener("submit", function (event) {
-    event.preventDefault();
-
-    var formData = new FormData(this);
-
-    var xhr = new XMLHttpRequest();
-    xhr.open("POST", "/PHP/main.php", true);
-
-    xhr.onload = function () {
-      if (xhr.status === 200) {
-        if (xhr.responseText === "success") {
-          alert("Email envoyé avec succès!");
-        } else {
-          alert("Échec de l'envoi de l'email.");
-        }
-      } else {
-        alert("Une erreur s'est produite. Veuillez réessayer.");
-      }
-    };
-
-    xhr.send(formData);
-  });
+var typed = new Typed(".typing", {
+  strings: ["", "Developpeur Web", "Developpeur Android", "Developpeur Ios"],
+  typeSpeed: 150,
+  backSpeed: 60,
+  loop: true,
+});
+
+const nav = document.querySelector(".nav"),
+  navList = nav.querySelectorAll("li"),
+  totalNavList = navList.length,
+  allSelection = document.querySelectorAll(".section"),
+  totalSelection = allSelection.length;
+
+for (let i = 0; i < totalNavList; i++) {
+  removeBackSection();
+  const a = navList[i].querySelector("a");
+  a.addEventListener("click", function () {
+    for (let j = 0; j < totalNavList; j++) {
+      if (navList[j].querySelector("a").classList.contains("active")) {
+        addBackSection(j);
+      }
+      navList[j].querySelector("a").classList.remove("active");
+    }
+    this.classList.add("active");
+    showSection(this);
+    if (window.innerWidth < 1200) {
+      asideSectionTogglerBtn();
+    }
+  });
+}
+
+function removeBackSection() {
+  for (let i = 0; i < totalSelection; i++) {
+    allSelection[i].classList.remove("back-section");
+  }
+}
+
+function addBackSection(num) {
+  allSelection[num].classList.add("back-section");
+}
+
+function showSection(element) {
+  for (let i = 0; i < totalSelection; i++) {
+    allSelection[i].classList.remove("active");
+  }
+  const target = element.getAttribute("href").split("#")[1];
+  document.querySelector("#" + target).classList.add("active");
+}
+
+function updateNav(element) {
+  for (let i = 0; i < totalNavList; i++) {
+    navList[i].querySelector("a").classList.remove("active");
+    const target = element.getAttribute("href").split("#")[1];
+    if (
+      target ===
+      navList[i].querySelector("a").getAttribute("href").split("#")[1]
+    ) {
+      navList[i].querySelector("a").classList.add("active");
+    }
+  }
+}
+
+const navTogglerBtn = document.querySelector(".nav-toggler"),
+  aside = document.querySelector(".aside");
+navTogglerBtn.addEventListener("click", () => {
+  asideSectionTogglerBtn();
+});
+
+function asideSectionTogglerBtn() {
+  aside.classList.add("open");
+  navTogglerBtn.classList.toggle("open");
+  for (let i = 0; i < totalSelection; i++) {
+    allSelection[i].classList.toggle("open");
+  }
+}
+
+const asideLinks = document.querySelectorAll(".aside a");
+asideLinks.forEach((link) => {
+  link.addEventListener("click", () => {
+    aside.classList.remove("open");
+  });
+});
+
+function toggleDescription(descriptionId) {
+  var description = document.getElementById(descriptionId);
+  if (description.classList.contains("hidden")) {
+    description.classList.remove("hidden");
+    description.classList.add("show");
+  } else {
+    if (description.classList.contains("show")) {
+      description.classList.remove("show");
+      description.classList.add("hidden");
+    }
+  }
+}
+
+var portfolioImages = document.querySelectorAll(".portfolio-img");
+portfolioImages.forEach(function (image, index) {
+  image.addEventListener("click", function () {
+    if (document.getElementById("portfolio-description-1")) {
+      toggleDescription("portfolio-description-1");
+    }
+    if (document.getElementById("portfolio-description-2")) {
+      toggleDescription("portfolio-description-2");
+    }
+    if (document.getElementById("portfolio-description-3")) {
+      toggleDescription("portfolio-description-3");
+    }
+    if (document.getElementById("portfolio-description-4")) {
+      toggleDescription("portfolio-description-4");
+    }
+    if (document.getElementById("portfolio-description-5")) {
+      toggleDescription("portfolio-description-5");
+    }
+    if (document.getElementById("portfolio-description-6")) {
+      toggleDescription("portfolio-description-6");
+    }
+  });
+});
+
+document
+  .getElementById("contactForm")
+  .addEventListener("submit", function (event) {
+    event.preventDefault();
+
+    var formData = new FormData(this);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/PHP/main.php", true);
+
+    xhr.onload = function () {
+      if (xhr.status === 200) {
+        if (xhr.responseText === "success") {
+          alert("Email envoyé avec succès!");
+        } else {
+          alert("Échec de l'envoi de l'email.");
+        }
+      } else {
+        alert("Une erreur s'est produite. Veuillez réessayer.");
+      }
+    };
+
+    xhr.send(formData);
+  });

js/style-switcher.js

@@ -1,41 +1,41 @@
-const styleSwitcherToggle = document.querySelector(".style-switcher-toggle");
-styleSwitcherToggle.addEventListener("click", () => {
-  document.querySelector(".style-switcher").classList.toggle("open");
-});
-
-window.addEventListener("scroll", () => {
-  if (document.querySelector(".style-switcher").classList.contains("open")) {
-    document.querySelector(".style-switcher").classList.remove("open");
-  }
-});
-
-const alternateStyle = document.querySelectorAll(".alternate-style");
-function setActiveStyle(color) {
-  alternateStyle.forEach((style) => {
-    if (color === style.getAttribute("title")) {
-      style.removeAttribute("disabled");
-    } else {
-      style.setAttribute("disabled", "true");
-    }
-  });
-}
-
-const dayNight = document.querySelector(".day-night");
-
-dayNight.addEventListener("click", () => {
-  const icon = dayNight.querySelector("em");
-  icon.classList.toggle("fa-sun");
-  icon.classList.toggle("fa-moon");
-  document.body.classList.toggle("dark");
-});
-
-window.addEventListener("load", () => {
-  const icon = dayNight.querySelector("em");
-  if (document.body.classList.contains("dark")) {
-    icon.classList.add("fa-sun");
-    icon.classList.remove("fa-moon");
-  } else {
-    icon.classList.add("fa-moon");
-    icon.classList.remove("fa-sun");
-  }
-});
+const styleSwitcherToggle = document.querySelector(".style-switcher-toggle");
+styleSwitcherToggle.addEventListener("click", () => {
+  document.querySelector(".style-switcher").classList.toggle("open");
+});
+
+window.addEventListener("scroll", () => {
+  if (document.querySelector(".style-switcher").classList.contains("open")) {
+    document.querySelector(".style-switcher").classList.remove("open");
+  }
+});
+
+const alternateStyle = document.querySelectorAll(".alternate-style");
+function setActiveStyle(color) {
+  alternateStyle.forEach((style) => {
+    if (color === style.getAttribute("title")) {
+      style.removeAttribute("disabled");
+    } else {
+      style.setAttribute("disabled", "true");
+    }
+  });
+}
+
+const dayNight = document.querySelector(".day-night");
+
+dayNight.addEventListener("click", () => {
+  const icon = dayNight.querySelector("em");
+  icon.classList.toggle("fa-sun");
+  icon.classList.toggle("fa-moon");
+  document.body.classList.toggle("dark");
+});
+
+window.addEventListener("load", () => {
+  const icon = dayNight.querySelector("em");
+  if (document.body.classList.contains("dark")) {
+    icon.classList.add("fa-sun");
+    icon.classList.remove("fa-moon");
+  } else {
+    icon.classList.add("fa-moon");
+    icon.classList.remove("fa-sun");
+  }
+});