{"id":211,"date":"2025-06-11T07:51:44","date_gmt":"2025-06-11T07:51:44","guid":{"rendered":"https:\/\/nathanvitter.fr\/?page_id=211"},"modified":"2026-05-11T17:05:13","modified_gmt":"2026-05-11T17:05:13","slug":"acceuil-portfolio","status":"publish","type":"page","link":"https:\/\/nathanvitter.fr\/","title":{"rendered":"Acceuil PortFolio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"211\" class=\"elementor elementor-211\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f7e8ff4 e-con-full e-flex e-con e-parent\" data-id=\"f7e8ff4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-472ac0f elementor-widget elementor-widget-html\" data-id=\"472ac0f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Portfolio Nathan Vitter<\/title>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    * { margin: 0; padding: 0; box-sizing: border-box; }\r\n    body { font-family: 'Poppins', sans-serif; color: #1e1e1e; background-color: #f5f7fa; }\r\n    nav.navbar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.6); backdrop-filter: blur(10px); z-index: 1000; padding: 10px 20px; border-radius: 0 0 15px 15px; width: 100%; max-width: 1000px; }\r\n    .navbar .menu-desktop { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }\r\n    .navbar li { position: relative; }\r\n    .navbar a { color: white; text-decoration: none; margin: 0 15px; font-weight: bold; display: block; padding: 8px 12px; transition: color 0.3s ease; }\r\n    .navbar a:hover { color: #00aaff; }\r\n    .navbar li ul { display: none; position: absolute; top: 100%; left: 0; background-color: white; min-width: 180px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 8px; z-index: 999; }\r\n    .navbar li ul li a { color: #000; padding: 10px 15px; }\r\n    .navbar li ul li a:hover { background-color: #f5f7fa; }\r\n    .navbar li:hover > ul { display: block; }\r\n    .spacer { height: 60px; }\r\n    .hero { background-image: url('https:\/\/images.unsplash.com\/photo-1498050108023-c5249f4df085'); background-size: cover; background-position: center; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white; padding: 20px; transition: height 0.3s ease; }\r\n    .hero h1 { font-size: 5em; margin: 0; color: white; text-shadow: 0 0 10px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,0.8), 2px 2px 8px rgba(0,0,0,0.8); transition: font-size 0.3s ease; }\r\n    .hero p { font-size: 1.5em; margin-top: 20px; text-shadow: 1px 1px 8px rgba(0,0,0,0.7); }\r\n    .hero.shrink { height: 60vh; }\r\n    .hero.shrink h1 { font-size: 3.2em; }\r\n    .about, .projects, .contact { max-width: 1200px; margin: auto; padding: 60px 20px; }\r\n    .about h2, .projects h2, .contact h2 { font-size: 2.5em; margin-bottom: 20px; color: #333; text-align: center; }\r\n    .about p { font-size: 1.2em; line-height: 1.7; text-align: center; color: #555; }\r\n    .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }\r\n    .project-card { background-color: white; padding: 20px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; }\r\n    .project-card:hover { transform: translateY(-5px); }\r\n    .contact form { display: flex; flex-direction: column; gap: 15px; max-width: 500px; margin: auto; }\r\n    .contact input, .contact textarea { padding: 12px; font-size: 1em; border: 1px solid #ccc; border-radius: 8px; }\r\n    .contact button { padding: 12px; background-color: #0077ff; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s ease; }\r\n    .contact button:hover { background-color: #005fd4; }\r\n    #message-success { display: none; background-color: #d4edda; color: #155724; padding: 10px; border-radius: 5px; margin-bottom: 15px; text-align: center; }\r\n    footer { text-align: center; padding: 24px 20px; background: #1e1e1e; color: #9ca3af; font-size: 0.85em; }\r\n    footer a { color: #9ca3af; text-decoration: none; margin-left: 8px; }\r\n    footer a:hover { color: white; text-decoration: underline; }\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<section class=\"about\">\r\n  <h2>\u00c0 propos de moi<\/h2>\r\n  <p>Bienvenue sur mon portfolio ! Je suis passionn\u00e9 par les r\u00e9seaux, la cybers\u00e9curit\u00e9 et l'administration syst\u00e8me. Actuellement en BTS SIO SISR \u00e0 Saint-Exup\u00e9ry, je d\u00e9veloppe des comp\u00e9tences solides dans la gestion des infrastructures.<\/p>\r\n<\/section>\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'\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<section class=\"contact\">\r\n  <h2>Me contacter<\/h2>\r\n  <div id=\"message-success\">Votre message a bien \u00e9t\u00e9 envoy\u00e9 !<\/div>\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 Pr\u00e9nom\" 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<footer>\r\n  Copyright \u00a9 2026 | Nathan Vitter \u2013 BTS SIO SISR \u2013 Lyc\u00e9e Saint-Exup\u00e9ry\r\n  <a href=\"\/index.php\/mentions-legales\/\">| Mentions l\u00e9gales<\/a>\r\n<\/footer>\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    form.addEventListener('submit', function (e) {\r\n      e.preventDefault();\r\n      const formData = new FormData(form);\r\n      fetch(form.action, { method: 'POST', body: formData })\r\n        .then(response => {\r\n          if (response.ok) {\r\n            form.reset();\r\n            messageBox.style.display = 'block';\r\n            setTimeout(() => { messageBox.style.display = 'none'; }, 3000);\r\n          } else { alert(\"Erreur lors de l'envoi du message.\"); }\r\n        })\r\n        .catch(error => { console.error(\"Erreur:\", error); alert(\"Une erreur est survenue.\"); });\r\n    });\r\n  });\r\n<\/script>\r\n<\/body>\r\n<\/html>\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 [&hellip;]<\/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":106,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions"}],"predecessor-version":[{"id":777,"href":"https:\/\/nathanvitter.fr\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions\/777"}],"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}]}}