Portfolio Nathan Vitter<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n color: #1e1e1e;\r\n background-color: #f5f7fa;\r\n }\r\n\r\n nav.navbar {\r\n position: fixed;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(10px);\r\n z-index: 1000;\r\n padding: 10px 20px;\r\n border-radius: 0 0 15px 15px;\r\n width: 100%;\r\n max-width: 1000px;\r\n }\r\n\r\n .navbar .menu-desktop {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n\r\n .navbar li {\r\n position: relative;\r\n }\r\n\r\n .navbar a {\r\n color: white;\r\n text-decoration: none;\r\n margin: 0 15px;\r\n font-weight: bold;\r\n display: block;\r\n padding: 8px 12px;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .navbar a:hover {\r\n color: #00aaff;\r\n }\r\n\r\n .navbar li ul {\r\n display: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n background-color: white;\r\n min-width: 180px;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n border-radius: 8px;\r\n z-index: 999;\r\n }\r\n\r\n .navbar li ul li a {\r\n color: #000;\r\n padding: 10px 15px;\r\n }\r\n\r\n .navbar li ul li a:hover {\r\n background-color: #f5f7fa;\r\n }\r\n\r\n .navbar li:hover > ul {\r\n display: block;\r\n }\r\n\r\n .spacer {\r\n height: 60px;\r\n }\r\n\r\n .hero {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085');\r\n background-size: cover;\r\n background-position: center;\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: white;\r\n padding: 20px;\r\n transition: height 0.3s ease;\r\n }\r\n\r\n .hero h1 {\r\n font-size: 5em;\r\n margin: 0;\r\n color: white;\r\n text-shadow:\r\n 0 0 10px rgba(255, 255, 255, 0.9),\r\n 0 0 20px rgba(255, 255, 255, 0.8),\r\n 2px 2px 8px rgba(0, 0, 0, 0.8);\r\n transition: font-size 0.3s ease;\r\n }\r\n\r\n .hero p {\r\n font-size: 1.5em;\r\n margin-top: 20px;\r\n text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);\r\n }\r\n\r\n .hero.shrink {\r\n height: 60vh;\r\n }\r\n\r\n .hero.shrink h1 {\r\n font-size: 3.2em;\r\n }\r\n\r\n .about, .projects, .contact {\r\n max-width: 1200px;\r\n margin: auto;\r\n padding: 60px 20px;\r\n }\r\n\r\n .about h2, .projects h2, .contact h2 {\r\n font-size: 2.5em;\r\n margin-bottom: 20px;\r\n color: #333;\r\n text-align: center;\r\n }\r\n\r\n .about p {\r\n font-size: 1.2em;\r\n line-height: 1.7;\r\n text-align: center;\r\n color: #555;\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 30px;\r\n margin-top: 40px;\r\n }\r\n\r\n .project-card {\r\n background-color: white;\r\n padding: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .contact form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n max-width: 500px;\r\n margin: auto;\r\n }\r\n\r\n .contact input, .contact textarea {\r\n padding: 12px;\r\n font-size: 1em;\r\n border: 1px solid #ccc;\r\n border-radius: 8px;\r\n }\r\n\r\n .contact button {\r\n padding: 12px;\r\n background-color: #0077ff;\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: background 0.3s ease;\r\n }\r\n\r\n .contact button:hover {\r\n background-color: #005fd4;\r\n }\r\n\r\n #message-success {\r\n display: none;\r\n background-color: #d4edda;\r\n color: #155724;\r\n padding: 10px;\r\n border-radius: 5px;\r\n margin-bottom: 15px;\r\n text-align: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <nav class=\"navbar\">\r\n <ul class=\"menu-desktop\">\r\n <li><a href=\"\/\">Accueil<\/a><\/li>\r\n <li><a href=\"\/index.php\/ap\/\">AP<\/a><\/li>\r\n <li><a href=\"\/index.php\/activites\/\">Activit\u00e9s<\/a><\/li>\r\n <li><a href=\"\/index.php\/projets\/\">Projets<\/a><\/li>\r\n <li>\r\n <a href=\"\/index.php\/stages\/stages\/\">Stages \u25bc<\/a>\r\n <ul>\r\n <li><a href=\"\/index.php\/stages\/1ere-annee\/\">Stage 1\u00e8re ann\u00e9e<\/a><\/li>\r\n <li><a href=\"\/index.php\/stages\/2eme-annee\/\">Stage 2\u00e8me ann\u00e9e<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"\/index.php\/veille\/\">Veille<\/a><\/li>\r\n <li><a href=\"\/index.php\/cv\/\">CV<\/a><\/li>\r\n <li><a href=\"\/index.php\/contact\/\">Contact<\/a><\/li>\r\n <li><a href=\"\/index.php\/competences\/\">Comp\u00e9tences<\/a><\/li>\r\n <li><a href=\"\/index.php\/certifications\/\">Certifications<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <div class=\"spacer\"><\/div>\r\n \r\n <section class=\"hero\" id=\"hero\">\r\n <div>\r\n <h1>Vitter Nathan<\/h1>\r\n <p>\u00c9tudiant en BTS SIO \u2013 Sp\u00e9cialit\u00e9 SISR (R\u00e9seaux & Syst\u00e8mes)<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"about\">\r\n <h2>\u00c0 propos de moi<\/h2>\r\n <p>\r\n Bienvenue sur mon portfolio ! Je suis passionn\u00e9 par les r\u00e9seaux, la cybers\u00e9curit\u00e9 et l\u2019administration syst\u00e8me.\r\n Actuellement en BTS SIO SISR \u00e0 Saint-Exup\u00e9ry, je d\u00e9veloppe des comp\u00e9tences solides dans la gestion des infrastructures.\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"projects\">\r\n <h2>Mes projets<\/h2>\r\n <div class=\"projects-grid\">\r\n <div class=\"project-card\">\r\n <h3>Projet Zeus Energy<\/h3>\r\n <p>Application CLI en PHP pour g\u00e9rer et suivre des points de distribution d\u2019\u00e9lectricit\u00e9 (PDE) avec ajout, d\u00e9sactivation et analyse en temps r\u00e9el.<\/p>\r\n <\/div>\r\n <div class=\"project-card\">\r\n <h3>Projet MarieSol<\/h3>\r\n <p>Intranet en PHP\/MySQL pour g\u00e9rer \u00e9l\u00e8ves, cours, instruments et professeurs d'une \u00e9cole de musique, avec interface web et m\u00e9thode agile.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"contact\">\r\n <h2>Me contacter<\/h2>\r\n\r\n <div id=\"message-success\">Votre message a bien \u00e9t\u00e9 envoy\u00e9 !<\/div>\r\n\r\n <form id=\"contact-form\" method=\"POST\" action=\"\/wp-content\/themes\/astra\/form-handler.php\">\r\n <input type=\"text\" name=\"nom\" placeholder=\"Votre Nom Preom\" required>\r\n <input type=\"email\" name=\"email\" placeholder=\"Votre email\" required>\r\n <textarea name=\"message\" rows=\"5\" placeholder=\"Votre message\" required><\/textarea>\r\n <input type=\"text\" name=\"website\" style=\"display:none\">\r\n <button type=\"submit\" name=\"submit\">Envoyer<\/button>\r\n <\/form>\r\n <\/section>\r\n\r\n <script>\r\n window.addEventListener('scroll', function () {\r\n const hero = document.getElementById('hero');\r\n hero.classList.toggle('shrink', window.scrollY > 50);\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const form = document.getElementById('contact-form');\r\n const messageBox = document.getElementById('message-success');\r\n\r\n form.addEventListener('submit', function (e) {\r\n e.preventDefault();\r\n const formData = new FormData(form);\r\n\r\n fetch(form.action, {\r\n method: 'POST',\r\n body: formData\r\n })\r\n .then(response => {\r\n if (response.ok) {\r\n form.reset();\r\n messageBox.style.display = 'block';\r\n setTimeout(() => {\r\n messageBox.style.display = 'none';\r\n }, 3000);\r\n } else {\r\n alert(\"Erreur lors de l'envoi du message.\");\r\n }\r\n })\r\n .catch(error => {\r\n console.error(\"Erreur:\", error);\r\n alert(\"Une erreur est survenue.\");\r\n });\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portfolio Nathan Vitter Accueil AP Activit\u00e9s Projets Stages \u25bc Stage 1\u00e8re ann\u00e9e Stage 2\u00e8me ann\u00e9e Veille CV Contact Comp\u00e9tences Certifications […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-211","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/comments?post=211"}],"version-history":[{"count":103,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions"}],"predecessor-version":[{"id":634,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions\/634"}],"wp:attachment":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/media?parent=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Portfolio Nathan Vitter<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n color: #1e1e1e;\r\n background-color: #f5f7fa;\r\n }\r\n\r\n nav.navbar {\r\n position: fixed;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background-color: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(10px);\r\n z-index: 1000;\r\n padding: 10px 20px;\r\n border-radius: 0 0 15px 15px;\r\n width: 100%;\r\n max-width: 1000px;\r\n }\r\n\r\n .navbar .menu-desktop {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n\r\n .navbar li {\r\n position: relative;\r\n }\r\n\r\n .navbar a {\r\n color: white;\r\n text-decoration: none;\r\n margin: 0 15px;\r\n font-weight: bold;\r\n display: block;\r\n padding: 8px 12px;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .navbar a:hover {\r\n color: #00aaff;\r\n }\r\n\r\n .navbar li ul {\r\n display: none;\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n background-color: white;\r\n min-width: 180px;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n border-radius: 8px;\r\n z-index: 999;\r\n }\r\n\r\n .navbar li ul li a {\r\n color: #000;\r\n padding: 10px 15px;\r\n }\r\n\r\n .navbar li ul li a:hover {\r\n background-color: #f5f7fa;\r\n }\r\n\r\n .navbar li:hover > ul {\r\n display: block;\r\n }\r\n\r\n .spacer {\r\n height: 60px;\r\n }\r\n\r\n .hero {\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085');\r\n background-size: cover;\r\n background-position: center;\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: white;\r\n padding: 20px;\r\n transition: height 0.3s ease;\r\n }\r\n\r\n .hero h1 {\r\n font-size: 5em;\r\n margin: 0;\r\n color: white;\r\n text-shadow:\r\n 0 0 10px rgba(255, 255, 255, 0.9),\r\n 0 0 20px rgba(255, 255, 255, 0.8),\r\n 2px 2px 8px rgba(0, 0, 0, 0.8);\r\n transition: font-size 0.3s ease;\r\n }\r\n\r\n .hero p {\r\n font-size: 1.5em;\r\n margin-top: 20px;\r\n text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);\r\n }\r\n\r\n .hero.shrink {\r\n height: 60vh;\r\n }\r\n\r\n .hero.shrink h1 {\r\n font-size: 3.2em;\r\n }\r\n\r\n .about, .projects, .contact {\r\n max-width: 1200px;\r\n margin: auto;\r\n padding: 60px 20px;\r\n }\r\n\r\n .about h2, .projects h2, .contact h2 {\r\n font-size: 2.5em;\r\n margin-bottom: 20px;\r\n color: #333;\r\n text-align: center;\r\n }\r\n\r\n .about p {\r\n font-size: 1.2em;\r\n line-height: 1.7;\r\n text-align: center;\r\n color: #555;\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 30px;\r\n margin-top: 40px;\r\n }\r\n\r\n .project-card {\r\n background-color: white;\r\n padding: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .project-card:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .contact form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n max-width: 500px;\r\n margin: auto;\r\n }\r\n\r\n .contact input, .contact textarea {\r\n padding: 12px;\r\n font-size: 1em;\r\n border: 1px solid #ccc;\r\n border-radius: 8px;\r\n }\r\n\r\n .contact button {\r\n padding: 12px;\r\n background-color: #0077ff;\r\n color: white;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: background 0.3s ease;\r\n }\r\n\r\n .contact button:hover {\r\n background-color: #005fd4;\r\n }\r\n\r\n #message-success {\r\n display: none;\r\n background-color: #d4edda;\r\n color: #155724;\r\n padding: 10px;\r\n border-radius: 5px;\r\n margin-bottom: 15px;\r\n text-align: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <nav class=\"navbar\">\r\n <ul class=\"menu-desktop\">\r\n <li><a href=\"\/\">Accueil<\/a><\/li>\r\n <li><a href=\"\/index.php\/ap\/\">AP<\/a><\/li>\r\n <li><a href=\"\/index.php\/activites\/\">Activit\u00e9s<\/a><\/li>\r\n <li><a href=\"\/index.php\/projets\/\">Projets<\/a><\/li>\r\n <li>\r\n <a href=\"\/index.php\/stages\/stages\/\">Stages \u25bc<\/a>\r\n <ul>\r\n <li><a href=\"\/index.php\/stages\/1ere-annee\/\">Stage 1\u00e8re ann\u00e9e<\/a><\/li>\r\n <li><a href=\"\/index.php\/stages\/2eme-annee\/\">Stage 2\u00e8me ann\u00e9e<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href=\"\/index.php\/veille\/\">Veille<\/a><\/li>\r\n <li><a href=\"\/index.php\/cv\/\">CV<\/a><\/li>\r\n <li><a href=\"\/index.php\/contact\/\">Contact<\/a><\/li>\r\n <li><a href=\"\/index.php\/competences\/\">Comp\u00e9tences<\/a><\/li>\r\n <li><a href=\"\/index.php\/certifications\/\">Certifications<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <div class=\"spacer\"><\/div>\r\n \r\n <section class=\"hero\" id=\"hero\">\r\n <div>\r\n <h1>Vitter Nathan<\/h1>\r\n <p>\u00c9tudiant en BTS SIO \u2013 Sp\u00e9cialit\u00e9 SISR (R\u00e9seaux & Syst\u00e8mes)<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"about\">\r\n <h2>\u00c0 propos de moi<\/h2>\r\n <p>\r\n Bienvenue sur mon portfolio ! Je suis passionn\u00e9 par les r\u00e9seaux, la cybers\u00e9curit\u00e9 et l\u2019administration syst\u00e8me.\r\n Actuellement en BTS SIO SISR \u00e0 Saint-Exup\u00e9ry, je d\u00e9veloppe des comp\u00e9tences solides dans la gestion des infrastructures.\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"projects\">\r\n <h2>Mes projets<\/h2>\r\n <div class=\"projects-grid\">\r\n <div class=\"project-card\">\r\n <h3>Projet Zeus Energy<\/h3>\r\n <p>Application CLI en PHP pour g\u00e9rer et suivre des points de distribution d\u2019\u00e9lectricit\u00e9 (PDE) avec ajout, d\u00e9sactivation et analyse en temps r\u00e9el.<\/p>\r\n <\/div>\r\n <div class=\"project-card\">\r\n <h3>Projet MarieSol<\/h3>\r\n <p>Intranet en PHP\/MySQL pour g\u00e9rer \u00e9l\u00e8ves, cours, instruments et professeurs d'une \u00e9cole de musique, avec interface web et m\u00e9thode agile.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"contact\">\r\n <h2>Me contacter<\/h2>\r\n\r\n <div id=\"message-success\">Votre message a bien \u00e9t\u00e9 envoy\u00e9 !<\/div>\r\n\r\n <form id=\"contact-form\" method=\"POST\" action=\"\/wp-content\/themes\/astra\/form-handler.php\">\r\n <input type=\"text\" name=\"nom\" placeholder=\"Votre Nom Preom\" required>\r\n <input type=\"email\" name=\"email\" placeholder=\"Votre email\" required>\r\n <textarea name=\"message\" rows=\"5\" placeholder=\"Votre message\" required><\/textarea>\r\n <input type=\"text\" name=\"website\" style=\"display:none\">\r\n <button type=\"submit\" name=\"submit\">Envoyer<\/button>\r\n <\/form>\r\n <\/section>\r\n\r\n <script>\r\n window.addEventListener('scroll', function () {\r\n const hero = document.getElementById('hero');\r\n hero.classList.toggle('shrink', window.scrollY > 50);\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const form = document.getElementById('contact-form');\r\n const messageBox = document.getElementById('message-success');\r\n\r\n form.addEventListener('submit', function (e) {\r\n e.preventDefault();\r\n const formData = new FormData(form);\r\n\r\n fetch(form.action, {\r\n method: 'POST',\r\n body: formData\r\n })\r\n .then(response => {\r\n if (response.ok) {\r\n form.reset();\r\n messageBox.style.display = 'block';\r\n setTimeout(() => {\r\n messageBox.style.display = 'none';\r\n }, 3000);\r\n } else {\r\n alert(\"Erreur lors de l'envoi du message.\");\r\n }\r\n })\r\n .catch(error => {\r\n console.error(\"Erreur:\", error);\r\n alert(\"Une erreur est survenue.\");\r\n });\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portfolio Nathan Vitter Accueil AP Activit\u00e9s Projets Stages \u25bc Stage 1\u00e8re ann\u00e9e Stage 2\u00e8me ann\u00e9e Veille CV Contact Comp\u00e9tences Certifications […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-211","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/comments?post=211"}],"version-history":[{"count":103,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions"}],"predecessor-version":[{"id":634,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions\/634"}],"wp:attachment":[{"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/media?parent=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}