update

PHP/main.php

@@ -1,25 +1,30 @@
-<?php
+<?php
-if ($_SERVER["REQUEST_METHOD"] == "POST") {
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    $name = $_POST["name"];
+    $name = $_POST["name"];
-    $email = $_POST["email"];
+    $email = $_POST["email"];
-    $subject = $_POST["subject"];
+    $subject = $_POST["subject"];
-    $message = $_POST["message"];
+    $message = $_POST["message"];
-
+
-    $to = "hugo.creneau@etu.uca.fr";
+    $to = "hugo.creneau@etu.uca.fr";
-
+    
-    $email_subject = "New Contact Form Submission: $subject";
+    $mail_subject = "Message de $name : $subject";
-
+    
-    $email_body = "You have received a new message from $name ($email):\n\n$message";
+    $mail_message = "
-
+    Nom : $name\n
-    $from = "hugo.crneau@gmail.com";
+    Email : $email\n
-
+    Sujet : $subject\n\n
-    $headers = "From: $from\r\n";
+    Message :\n$message
-    $headers .= "Reply-To: $email\r\n";
+    ";
-
+
-    if (mail($to, $email_subject, $email_body, $headers)) {
+    $headers = "From: $email" . "\r\n" .
-        echo "success";
+               "Reply-To: $email" . "\r\n" .
-    } else {
+               "X-Mailer: PHP/" . phpversion();
-        echo "error";
+
-    }
+    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
+:root {
-{
+  --skin-color: #ec1839;
-    --skin-color:#ec1839;
+}
-}

css/skins/color-2.css

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

css/skins/color-3.css

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

css/skins/color-4.css

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

css/skins/color-5.css

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

css/style-switcher.css

@@ -1,128 +1,115 @@
-@keyframes slideIn {
+@keyframes slideIn {
-    from {
+  from {
-        transform: translateX(100%);
+    transform: translateX(100%);
-    }
+  }
-
+
-    to {
+  to {
-        transform: translateX(-25px);
+    transform: translateX(-25px);
-    }
+  }
-}
+}
-
+
-@keyframes slideInOut {
+@keyframes slideInOut {
-    from {
+  from {
-        transform: translateX(100%);
+    transform: translateX(100%);
-    }
+  }
-
+
-    to {
+  to {
-        transform: translateX(-25px);
+    transform: translateX(-25px);
-    }
+  }
-}
+}
-
+
-.style-switcher {
+.style-switcher {
-    position: fixed;
+  position: fixed;
-    right: 0;
+  right: 0;
-    top: 60px;
+  top: 60px;
-    padding: 15px;
+  padding: 15px;
-    width: 200px;
+  width: 200px;
-    border: 1px solid var(--bg-black-50);
+  border: 1px solid var(--bg-black-50);
-    background: var(--bg-black-100);
+  background: var(--bg-black-100);
-    z-index: 101;
+  z-index: 101;
-    border-radius: 5px;
+  border-radius: 5px;
-    transform: translateX(100%);
+  transform: translateX(100%);
-    animation-duration: 0.3s;
+  animation-duration: 0.3s;
-    animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
-}
+}
-
+
-.style-switcher.open {
+.style-switcher.open {
-    animation-name: slideInOut;
+  animation-name: slideInOut;
-}
+}
-
+
-.style-switcher.closed {
+.style-switcher.closed {
-    animation-name: slideOut;
+  animation-name: slideOut;
-}
+}
-
+
-
+.style-switcher:focus {
-.style-switcher:focus {
+  animation: slideIn 0.3s forwards;
-    animation: slideIn 0.3s forwards;
+}
-}
+
-
+.style-switcher .s-icon {
-.style-switcher .s-icon
+  position: absolute;
-{
+  padding-top: 4px;
-    position: absolute;
+  height: 40px;
-    padding-top: 4px;
+  width: 40px;
-    height: 40px;
+  text-align: center;
-    width: 40px;
+  font-size: 20px;
-    text-align: center;
+  background: var(--bg-black-100);
-    font-size: 20px;
+  color: var(--text-black-900);
-    background: var(--bg-black-100);
+  right: 100%;
-    color: var(--text-black-900);
+  border: 1px solid var(--bg-black-50);
-    right: 100%;
+  margin-right: 25px;
-    border: 1px solid var(--bg-black-50);
+  cursor: pointer;
-    margin-right: 25px;
+  transition: all 0.3s ease;
-    cursor: pointer;
+  border-radius: 50%;
-    transition: all 0.3s ease;
+}
-    border-radius: 50%;
+
-}
+.style-switcher .s-icon i {
-
+  line-height: 40px;
-.style-switcher .s-icon i
+}
-{
+
-    line-height: 40px;
+.style-switcher .style-switcher-toggle {
-}
+  top: 0;
-
+}
-.style-switcher .style-switcher-toggle
+
-{
+.style-switcher .day-night {
-    top: 0;
+  top: 55px;
-}
+}
-
+
-.style-switcher .day-night
+.style-switcher h4 {
-{
+  margin: 0 0 10px;
-    top: 55px;
+  color: var(--text-black-700);
-}
+  font-size: 16px;
-
+  font-weight: 600;
-.style-switcher h4
+  text-transform: capitalize;
-{
+}
-    margin: 0 0 10px;
+
-    color: var(--text-black-700);
+.style-switcher .colors {
-    font-size: 16px;
+  display: flex;
-    font-weight: 600;
+  flex-wrap: wrap;
-    text-transform: capitalize;
+  justify-content: space-between;
-}
+}
-
+
-.style-switcher .colors
+.style-switcher .colors span {
-{
+  display: inline-block;
-    display: flex;
+  height: 30px;
-    flex-wrap: wrap;
+  width: 30px;
-    justify-content: space-between;
+  border-radius: 50px;
-}
+}
-
+
-.style-switcher .colors span
+.style-switcher .color-1 {
-{
+  background: #ec1839;
-    display: inline-block;
+}
-    height: 30px;
+
-    width: 30px;
+.style-switcher .color-2 {
-    border-radius: 50px;
+  background: #fa5b0f;
-}
+}
-
+.style-switcher .color-3 {
-.style-switcher .color-1
+  background: #37b182;
-{
+}
-    background: #ec1839;
+
-}
+.style-switcher .color-4 {
-
+  background: #1854b4;
-.style-switcher .color-2 
+}
-{
+
-    background: #fa5b0f;
+.style-switcher .color-5 {
-}
+  background: #f021b2;
-.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", {
+var typed = new Typed(".typing", {
-  strings: [
+  strings: ["", "Developpeur Web", "Developpeur Android", "Developpeur Ios"],
-    "",
+  typeSpeed: 150,
-    "Developpeur Web",
+  backSpeed: 60,
-    "Developpeur Front-end",
+  loop: true,
-    "Developpeur Back-end",
+});
-    "Developpeur Mobile",
+
-  ],
+const nav = document.querySelector(".nav"),
-  typeSpeed: 150,
+  navList = nav.querySelectorAll("li"),
-  backSpeed: 60,
+  totalNavList = navList.length,
-  loop: true,
+  allSelection = document.querySelectorAll(".section"),
-});
+  totalSelection = allSelection.length;
-
+
-const nav = document.querySelector(".nav"),
+for (let i = 0; i < totalNavList; i++) {
-  navList = nav.querySelectorAll("li"),
+  removeBackSection();
-  totalNavList = navList.length,
+  const a = navList[i].querySelector("a");
-  allSelection = document.querySelectorAll(".section"),
+  a.addEventListener("click", function () {
-  totalSelection = allSelection.length;
+    for (let j = 0; j < totalNavList; j++) {
-
+      if (navList[j].querySelector("a").classList.contains("active")) {
-for (let i = 0; i < totalNavList; i++) {
+        addBackSection(j);
-  removeBackSection();
+      }
-  const a = navList[i].querySelector("a");
+      navList[j].querySelector("a").classList.remove("active");
-  a.addEventListener("click", function () {
+    }
-    for (let j = 0; j < totalNavList; j++) {
+    this.classList.add("active");
-      if (navList[j].querySelector("a").classList.contains("active")) {
+    showSection(this);
-        addBackSection(j);
+    if (window.innerWidth < 1200) {
-      }
+      asideSectionTogglerBtn();
-      navList[j].querySelector("a").classList.remove("active");
+    }
-    }
+  });
-    this.classList.add("active");
+}
-    showSection(this);
+
-    if (window.innerWidth < 1200) {
+function removeBackSection() {
-      asideSectionTogglerBtn();
+  for (let i = 0; i < totalSelection; i++) {
-    }
+    allSelection[i].classList.remove("back-section");
-  });
+  }
-}
+}
-
+
-function removeBackSection() {
+function addBackSection(num) {
-  for (let i = 0; i < totalSelection; i++) {
+  allSelection[num].classList.add("back-section");
-    allSelection[i].classList.remove("back-section");
+}
-  }
+
-}
+function showSection(element) {
-
+  for (let i = 0; i < totalSelection; i++) {
-function addBackSection(num) {
+    allSelection[i].classList.remove("active");
-  allSelection[num].classList.add("back-section");
+  }
-}
+  const target = element.getAttribute("href").split("#")[1];
-
+  document.querySelector("#" + target).classList.add("active");
-function showSection(element) {
+}
-  for (let i = 0; i < totalSelection; i++) {
+
-    allSelection[i].classList.remove("active");
+function updateNav(element) {
-  }
+  for (let i = 0; i < totalNavList; i++) {
-  const target = element.getAttribute("href").split("#")[1];
+    navList[i].querySelector("a").classList.remove("active");
-  document.querySelector("#" + target).classList.add("active");
+    const target = element.getAttribute("href").split("#")[1];
-}
+    if (
-
+      target ===
-function updateNav(element) {
+      navList[i].querySelector("a").getAttribute("href").split("#")[1]
-  for (let i = 0; i < totalNavList; i++) {
+    ) {
-    navList[i].querySelector("a").classList.remove("active");
+      navList[i].querySelector("a").classList.add("active");
-    const target = element.getAttribute("href").split("#")[1];
+    }
-    if (
+  }
-      target ===
+}
-      navList[i].querySelector("a").getAttribute("href").split("#")[1]
+
-    ) {
+const navTogglerBtn = document.querySelector(".nav-toggler"),
-      navList[i].querySelector("a").classList.add("active");
+  aside = document.querySelector(".aside");
-    }
+navTogglerBtn.addEventListener("click", () => {
-  }
+  asideSectionTogglerBtn();
-}
+});
-
+
-const navTogglerBtn = document.querySelector(".nav-toggler"),
+function asideSectionTogglerBtn() {
-  aside = document.querySelector(".aside");
+  aside.classList.add("open");
-navTogglerBtn.addEventListener("click", () => {
+  navTogglerBtn.classList.toggle("open");
-  asideSectionTogglerBtn();
+  for (let i = 0; i < totalSelection; i++) {
-});
+    allSelection[i].classList.toggle("open");
-
+  }
-function asideSectionTogglerBtn() {
+}
-  aside.classList.add("open");
+
-  navTogglerBtn.classList.toggle("open");
+const asideLinks = document.querySelectorAll(".aside a");
-  for (let i = 0; i < totalSelection; i++) {
+asideLinks.forEach((link) => {
-    allSelection[i].classList.toggle("open");
+  link.addEventListener("click", () => {
-  }
+    aside.classList.remove("open");
-}
+  });
-
+});
-const asideLinks = document.querySelectorAll(".aside a");
+
-asideLinks.forEach((link) => {
+function toggleDescription(descriptionId) {
-  link.addEventListener("click", () => {
+  var description = document.getElementById(descriptionId);
-    aside.classList.remove("open");
+  if (description.classList.contains("hidden")) {
-  });
+    description.classList.remove("hidden");
-});
+    description.classList.add("show");
-
+  } else {
-function toggleDescription(descriptionId) {
+    if (description.classList.contains("show")) {
-  var description = document.getElementById(descriptionId);
+      description.classList.remove("show");
-  if (description.classList.contains("hidden")) {
+      description.classList.add("hidden");
-    description.classList.remove("hidden");
+    }
-    description.classList.add("show");
+  }
-  } else {
+}
-    if (description.classList.contains("show")) {
+
-      description.classList.remove("show");
+var portfolioImages = document.querySelectorAll(".portfolio-img");
-      description.classList.add("hidden");
+portfolioImages.forEach(function (image, index) {
-    }
+  image.addEventListener("click", function () {
-  }
+    if (document.getElementById("portfolio-description-1")) {
-}
+      toggleDescription("portfolio-description-1");
-
+    }
-var portfolioImages = document.querySelectorAll(".portfolio-img");
+    if (document.getElementById("portfolio-description-2")) {
-portfolioImages.forEach(function (image, index) {
+      toggleDescription("portfolio-description-2");
-  image.addEventListener("click", function () {
+    }
-    if (document.getElementById("portfolio-description-1")) {
+    if (document.getElementById("portfolio-description-3")) {
-      toggleDescription("portfolio-description-1");
+      toggleDescription("portfolio-description-3");
-    }
+    }
-    if (document.getElementById("portfolio-description-2")) {
+    if (document.getElementById("portfolio-description-4")) {
-      toggleDescription("portfolio-description-2");
+      toggleDescription("portfolio-description-4");
-    }
+    }
-    if (document.getElementById("portfolio-description-3")) {
+    if (document.getElementById("portfolio-description-5")) {
-      toggleDescription("portfolio-description-3");
+      toggleDescription("portfolio-description-5");
-    }
+    }
-    if (document.getElementById("portfolio-description-4")) {
+    if (document.getElementById("portfolio-description-6")) {
-      toggleDescription("portfolio-description-4");
+      toggleDescription("portfolio-description-6");
-    }
+    }
-    if (document.getElementById("portfolio-description-5")) {
+  });
-      toggleDescription("portfolio-description-5");
+});
-    }
+
-    if (document.getElementById("portfolio-description-6")) {
+document
-      toggleDescription("portfolio-description-6");
+  .getElementById("contactForm")
-    }
+  .addEventListener("submit", function (event) {
-  });
+    event.preventDefault();
-});
+
-
+    var formData = new FormData(this);
-document
+
-  .getElementById("contactForm")
+    var xhr = new XMLHttpRequest();
-  .addEventListener("submit", function (event) {
+    xhr.open("POST", "/PHP/main.php", true);
-    event.preventDefault();
+
-
+    xhr.onload = function () {
-    var formData = new FormData(this);
+      if (xhr.status === 200) {
-
+        if (xhr.responseText === "success") {
-    var xhr = new XMLHttpRequest();
+          alert("Email envoyé avec succès!");
-    xhr.open("POST", "/PHP/main.php", true);
+        } else {
-
+          alert("Échec de l'envoi de l'email.");
-    xhr.onload = function () {
+        }
-      if (xhr.status === 200) {
+      } else {
-        if (xhr.responseText === "success") {
+        alert("Une erreur s'est produite. Veuillez réessayer.");
-          alert("Email envoyé avec succès!");
+      }
-        } else {
+    };
-          alert("Échec de l'envoi de l'email.");
+
-        }
+    xhr.send(formData);
-      } 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");
+const styleSwitcherToggle = document.querySelector(".style-switcher-toggle");
-styleSwitcherToggle.addEventListener("click", () => {
+styleSwitcherToggle.addEventListener("click", () => {
-  document.querySelector(".style-switcher").classList.toggle("open");
+  document.querySelector(".style-switcher").classList.toggle("open");
-});
+});
-
+
-window.addEventListener("scroll", () => {
+window.addEventListener("scroll", () => {
-  if (document.querySelector(".style-switcher").classList.contains("open")) {
+  if (document.querySelector(".style-switcher").classList.contains("open")) {
-    document.querySelector(".style-switcher").classList.remove("open");
+    document.querySelector(".style-switcher").classList.remove("open");
-  }
+  }
-});
+});
-
+
-const alternateStyle = document.querySelectorAll(".alternate-style");
+const alternateStyle = document.querySelectorAll(".alternate-style");
-function setActiveStyle(color) {
+function setActiveStyle(color) {
-  alternateStyle.forEach((style) => {
+  alternateStyle.forEach((style) => {
-    if (color === style.getAttribute("title")) {
+    if (color === style.getAttribute("title")) {
-      style.removeAttribute("disabled");
+      style.removeAttribute("disabled");
-    } else {
+    } else {
-      style.setAttribute("disabled", "true");
+      style.setAttribute("disabled", "true");
-    }
+    }
-  });
+  });
-}
+}
-
+
-const dayNight = document.querySelector(".day-night");
+const dayNight = document.querySelector(".day-night");
-
+
-dayNight.addEventListener("click", () => {
+dayNight.addEventListener("click", () => {
-  const icon = dayNight.querySelector("em");
+  const icon = dayNight.querySelector("em");
-  icon.classList.toggle("fa-sun");
+  icon.classList.toggle("fa-sun");
-  icon.classList.toggle("fa-moon");
+  icon.classList.toggle("fa-moon");
-  document.body.classList.toggle("dark");
+  document.body.classList.toggle("dark");
-});
+});
-
+
-window.addEventListener("load", () => {
+window.addEventListener("load", () => {
-  const icon = dayNight.querySelector("em");
+  const icon = dayNight.querySelector("em");
-  if (document.body.classList.contains("dark")) {
+  if (document.body.classList.contains("dark")) {
-    icon.classList.add("fa-sun");
+    icon.classList.add("fa-sun");
-    icon.classList.remove("fa-moon");
+    icon.classList.remove("fa-moon");
-  } else {
+  } else {
-    icon.classList.add("fa-moon");
+    icon.classList.add("fa-moon");
-    icon.classList.remove("fa-sun");
+    icon.classList.remove("fa-sun");
-  }
+  }
-});
+});