Terminal Portfolio – \u00c9mile Snyers<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=VT323&family=IBM+Plex+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --terminal-green: #4af626;\n --terminal-bg: #0a0a0a;\n --terminal-glow: #4af626;\n --border-color: #2a2a2a;\n }\n\n body {\n font-family: 'VT323', monospace;\n background: var(--terminal-bg);\n color: var(--terminal-green);\n overflow-x: hidden;\n line-height: 1.4;\n }\n\n \/* Effet CRT global *\/\n .crt-container {\n position: relative;\n min-height: 100vh;\n background: var(--terminal-bg);\n transition: all 0.3s ease;\n }\n\n \/* Mode VHS activ\u00e9 *\/\n .crt-container.vhs-active {\n animation: vhsDistortion 0.3s infinite;\n }\n\n @keyframes vhsDistortion {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-1px); }\n 75% { transform: translateX(1px); }\n }\n\n \/* Overlays VHS *\/\n .vhs-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9997;\n opacity: 0;\n transition: opacity 0.5s ease;\n background: \n repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.15),\n rgba(0, 0, 0, 0.15) 1px,\n transparent 1px,\n transparent 2px\n );\n animation: vhsNoise 0.2s infinite;\n }\n\n .vhs-active .vhs-overlay {\n opacity: 0.6;\n }\n\n @keyframes vhsNoise {\n 0%, 100% { background-position: 0 0; }\n 50% { background-position: 0 3px; }\n }\n\n .vhs-bands {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9996;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n\n .vhs-active .vhs-bands {\n opacity: 1;\n }\n\n .vhs-bands::before,\n .vhs-bands::after {\n content: '';\n position: absolute;\n left: 0;\n width: 100%;\n height: 8px;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .vhs-bands::before {\n top: 30%;\n animation: vhsBand1 4s linear infinite;\n }\n\n .vhs-bands::after {\n top: 70%;\n animation: vhsBand2 5s linear infinite;\n }\n\n @keyframes vhsBand1 {\n 0% { top: -10%; }\n 100% { top: 110%; }\n }\n\n @keyframes vhsBand2 {\n 0% { top: 110%; }\n 100% { top: -10%; }\n }\n\n \/* Scanlines *\/\n .crt-container::before {\n content: \" \";\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background: linear-gradient(\n to bottom,\n rgba(18, 16, 16, 0) 50%,\n rgba(0, 0, 0, 0.25) 50%\n );\n background-size: 100% 4px;\n z-index: 9999;\n pointer-events: none;\n animation: scanlines 0.1s linear infinite;\n }\n\n .vhs-active .crt-container::before {\n background-size: 100% 3px;\n animation: scanlines 0.08s linear infinite;\n }\n\n \/* Effet de flicker *\/\n .crt-container::after {\n content: \" \";\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background: rgba(18, 16, 16, 0.1);\n opacity: 0;\n z-index: 9998;\n pointer-events: none;\n animation: flicker 0.15s infinite;\n }\n\n .vhs-active .crt-container::after {\n animation: flicker 0.1s infinite, vhsFlicker 0.5s infinite;\n }\n\n @keyframes scanlines {\n 0% { background-position: 0 0; }\n 100% { background-position: 0 4px; }\n }\n\n @keyframes flicker {\n 0% { opacity: 0.27861; }\n 5% { opacity: 0.34769; }\n 10% { opacity: 0.23604; }\n 15% { opacity: 0.90626; }\n 20% { opacity: 0.18128; }\n 25% { opacity: 0.83891; }\n 30% { opacity: 0.65583; }\n 35% { opacity: 0.67807; }\n 40% { opacity: 0.26559; }\n 45% { opacity: 0.84693; }\n 50% { opacity: 0.96019; }\n 55% { opacity: 0.08594; }\n 60% { opacity: 0.20313; }\n 65% { opacity: 0.71988; }\n 70% { opacity: 0.53455; }\n 75% { opacity: 0.37288; }\n 80% { opacity: 0.71428; }\n 85% { opacity: 0.70419; }\n 90% { opacity: 0.7003; }\n 95% { opacity: 0.36108; }\n 100% { opacity: 0.24387; }\n }\n\n @keyframes vhsFlicker {\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 0.7; }\n }\n\n \/* Glow effect *\/\n .glow {\n text-shadow:\n 0 0 3px rgba(255, 255, 255, 0.8),\n 0 0 6px var(--terminal-glow);\n }\n\n .glow-strong {\n text-shadow:\n 0 0 5px #fff,\n 0 0 10px #fff,\n 0 0 15px var(--terminal-glow),\n 0 0 20px var(--terminal-glow);\n }\n\n \/* Contr\u00f4les repositionn\u00e9s (c\u00f4t\u00e9 gauche, en bas) *\/\n .control-panel {\n position: fixed;\n bottom: 20px;\n left: 20px;\n z-index: 10001;\n display: flex;\n gap: 10px;\n }\n\n .control-button {\n background: rgba(20, 20, 20, 0.9);\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n padding: 10px 20px;\n font-family: 'VT323', monospace;\n font-size: 1.3rem;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.3);\n }\n\n .control-button:hover {\n background: rgba(74, 246, 38, 0.2);\n box-shadow: 0 0 25px rgba(74, 246, 38, 0.6);\n transform: translateY(-2px);\n }\n\n .control-button.active {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n animation: pulse-button 1.5s infinite;\n }\n\n @keyframes pulse-button {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n \/* \u00c9cran de chargement *\/\n #loading-screen {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--terminal-bg);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 10000;\n transition: opacity 0.5s ease;\n }\n\n #loading-screen.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n .loading-title {\n font-size: 4rem;\n letter-spacing: 0.3rem;\n margin-bottom: 3rem;\n text-align: center;\n }\n\n .loading-subtitle {\n font-size: 1.2rem;\n letter-spacing: 0.2rem;\n margin-bottom: 4rem;\n opacity: 0.7;\n }\n\n .loading-text {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n animation: blink 1s infinite;\n }\n\n .progress-bar {\n width: 400px;\n height: 4px;\n background: var(--border-color);\n border: 2px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: var(--terminal-green);\n width: 0%;\n transition: width 0.3s ease;\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n @keyframes blink {\n 0%, 49% { opacity: 1; }\n 50%, 100% { opacity: 0; }\n }\n\n \/* Header *\/\n .terminal-header {\n background: #1a1a1a;\n border-bottom: 2px solid var(--terminal-green);\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.3);\n }\n\n .terminal-title {\n font-size: 2rem;\n letter-spacing: 0.2rem;\n }\n\n .terminal-info {\n font-size: 1.2rem;\n opacity: 0.8;\n }\n\n \/* Container principal *\/\n .main-container {\n display: flex;\n min-height: calc(100vh - 80px);\n }\n\n \/* Sidebar menu *\/\n .sidebar {\n width: 300px;\n background: #141414;\n border-right: 2px solid var(--terminal-green);\n padding: 2rem 0;\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.2);\n }\n\n .menu-section {\n margin-bottom: 1rem;\n }\n\n .menu-title {\n font-size: 1.2rem;\n padding: 0.5rem 2rem;\n color: var(--terminal-green);\n opacity: 0.6;\n letter-spacing: 0.1rem;\n }\n\n .menu-item {\n padding: 1rem 2rem;\n font-size: 1.5rem;\n cursor: pointer;\n transition: all 0.3s ease;\n border-left: 4px solid transparent;\n position: relative;\n }\n\n .menu-item:hover {\n background: rgba(74, 246, 38, 0.1);\n border-left-color: var(--terminal-green);\n padding-left: 2.5rem;\n }\n\n .menu-item.active {\n background: rgba(74, 246, 38, 0.15);\n border-left-color: var(--terminal-green);\n box-shadow: inset 0 0 20px rgba(74, 246, 38, 0.2);\n }\n\n .menu-item::before {\n content: \"\u25b8 \";\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .menu-item:hover::before,\n .menu-item.active::before {\n opacity: 1;\n }\n\n \/* Content area *\/\n .content-area {\n flex: 1;\n padding: 3rem;\n overflow-y: auto;\n }\n\n .page-section {\n display: none;\n animation: fadeIn 0.5s ease;\n }\n\n .page-section.active {\n display: block;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .section-title {\n font-size: 3rem;\n margin-bottom: 2rem;\n letter-spacing: 0.2rem;\n border-bottom: 2px solid var(--terminal-green);\n padding-bottom: 1rem;\n }\n\n .section-content {\n font-size: 1.3rem;\n line-height: 1.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* NOUVEAU: Syst\u00e8me de diagnostic am\u00e9lior\u00e9 *\/\n .diagnostic-panel {\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid var(--terminal-green);\n padding: 2rem;\n margin: 2rem 0;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .diagnostic-title {\n font-size: 1.8rem;\n margin-bottom: 1.5rem;\n color: var(--terminal-green);\n border-bottom: 1px solid rgba(74, 246, 38, 0.3);\n padding-bottom: 0.5rem;\n }\n\n .console-output {\n background: #000;\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n margin: 1rem 0;\n font-size: 1.1rem;\n line-height: 1.6;\n max-height: 300px;\n overflow-y: auto;\n }\n\n .console-line {\n opacity: 0;\n animation: fadeInLine 0.3s ease forwards;\n }\n\n @keyframes fadeInLine {\n to { opacity: 1; }\n }\n\n .console-line.success::before {\n content: \"[\u2713] \";\n color: var(--terminal-green);\n }\n\n .console-line.warning::before {\n content: \"[!] \";\n color: #ffcc00;\n }\n\n .console-line.info::before {\n content: \"[i] \";\n color: #00ccff;\n }\n\n .diagnostic-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin: 1.5rem 0;\n }\n\n .stat-item {\n background: rgba(74, 246, 38, 0.05);\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n text-align: center;\n }\n\n .stat-value {\n font-size: 2rem;\n font-weight: bold;\n color: var(--terminal-green);\n margin-bottom: 0.5rem;\n }\n\n .stat-label {\n font-size: 1rem;\n opacity: 0.8;\n }\n\n .loading-bar {\n margin: 1rem 0;\n }\n\n .loading-bar-label {\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n display: flex;\n justify-content: space-between;\n }\n\n .loading-bar-fill {\n height: 20px;\n background: #000;\n border: 1px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n }\n\n .loading-bar-progress {\n height: 100%;\n background: var(--terminal-green);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9rem;\n color: #000;\n font-weight: bold;\n transition: width 0.5s ease;\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n .code-snippet {\n background: #000;\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n margin: 1rem 0;\n font-size: 1rem;\n line-height: 1.5;\n overflow-x: auto;\n }\n\n .code-line {\n opacity: 0.8;\n }\n\n .code-line span {\n color: var(--terminal-green);\n }\n\n .code-line .keyword {\n color: #4af626;\n font-weight: bold;\n }\n\n .code-line .function {\n color: #00ff88;\n }\n\n .code-line .string {\n color: #88ff00;\n }\n\n .code-line .comment {\n color: #666;\n font-style: italic;\n }\n\n \/* NOUVEAU: Espaces personnalisables *\/\n .custom-content-area {\n background: rgba(74, 246, 38, 0.02);\n border: 2px dashed var(--terminal-green);\n padding: 2rem;\n margin: 2rem 0;\n min-height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n opacity: 0.6;\n transition: all 0.3s ease;\n }\n\n .custom-content-area:hover {\n opacity: 1;\n background: rgba(74, 246, 38, 0.05);\n }\n\n .custom-content-placeholder {\n font-size: 1.3rem;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* Tableaux *\/\n .data-table {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\n background: rgba(74, 246, 38, 0.02);\n }\n\n .data-table th,\n .data-table td {\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n text-align: left;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n }\n\n .data-table th {\n background: rgba(74, 246, 38, 0.15);\n font-weight: bold;\n font-size: 1.3rem;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n\n .data-table tr:hover {\n background: rgba(74, 246, 38, 0.08);\n }\n\n .data-table td:first-child {\n font-weight: bold;\n }\n\n \/* Listes stylis\u00e9es *\/\n .styled-list {\n list-style: none;\n margin: 2rem 0;\n }\n\n .styled-list li {\n padding: 1rem;\n margin: 0.5rem 0;\n background: rgba(74, 246, 38, 0.05);\n border-left: 4px solid var(--terminal-green);\n transition: all 0.3s ease;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n }\n\n .styled-list li:hover {\n background: rgba(74, 246, 38, 0.1);\n padding-left: 1.5rem;\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.2);\n }\n\n .styled-list li::before {\n content: \"\u25b8 \";\n color: var(--terminal-green);\n font-weight: bold;\n margin-right: 0.5rem;\n }\n\n \/* Info cards *\/\n .info-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin: 2rem 0;\n }\n\n .info-card {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n transition: all 0.3s ease;\n }\n\n .info-card:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.3);\n transform: translateY(-5px);\n }\n\n .info-card-value {\n font-size: 2.5rem;\n font-weight: bold;\n margin-bottom: 0.5rem;\n }\n\n .info-card-label {\n font-size: 1.2rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* Progress bars pour comp\u00e9tences *\/\n .skill-bar-container {\n margin: 1.5rem 0;\n }\n\n .skill-bar-label {\n font-size: 1.3rem;\n margin-bottom: 0.5rem;\n display: flex;\n justify-content: space-between;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .skill-bar {\n height: 8px;\n background: rgba(74, 246, 38, 0.1);\n border: 1px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n }\n\n .skill-bar-fill {\n height: 100%;\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n transition: width 1s ease;\n width: 0;\n }\n\n \/* Sections avec ic\u00f4nes *\/\n .icon-section {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin: 2rem 0;\n }\n\n .icon-item {\n display: flex;\n align-items: center;\n padding: 1rem;\n background: rgba(74, 246, 38, 0.05);\n border: 1px solid var(--terminal-green);\n transition: all 0.3s ease;\n }\n\n .icon-item:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.2);\n }\n\n .icon-item-icon {\n font-size: 2rem;\n margin-right: 1rem;\n min-width: 40px;\n text-align: center;\n }\n\n .icon-item-text {\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n }\n\n \/* Project cards *\/\n .projects-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .project-card {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 2rem;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .project-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(74, 246, 38, 0.2), transparent);\n transition: left 0.5s ease;\n }\n\n .project-card:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.3);\n transform: translateY(-5px);\n }\n\n .project-card:hover::before {\n left: 100%;\n }\n\n .project-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n }\n\n .project-desc {\n font-size: 1.2rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .project-tags {\n margin-top: 1rem;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n\n .tag {\n padding: 0.3rem 0.8rem;\n background: rgba(74, 246, 38, 0.2);\n border: 1px solid var(--terminal-green);\n font-size: 1rem;\n }\n\n \/* Timeline *\/\n .timeline {\n position: relative;\n padding-left: 4rem;\n margin-top: 3rem;\n }\n\n .timeline::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background: linear-gradient(\n to bottom,\n transparent,\n var(--terminal-green) 5%,\n var(--terminal-green) 95%,\n transparent\n );\n box-shadow: 0 0 15px var(--terminal-glow);\n }\n\n .timeline-item {\n position: relative;\n margin-bottom: 3rem;\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid rgba(74, 246, 38, 0.3);\n border-left: 4px solid var(--terminal-green);\n padding: 2rem;\n transition: all 0.4s ease;\n cursor: pointer;\n }\n\n .timeline-item::before {\n content: '';\n position: absolute;\n left: -4.8rem;\n top: 2rem;\n width: 30px;\n height: 30px;\n background: var(--terminal-bg);\n border: 4px solid var(--terminal-green);\n border-radius: 50%;\n box-shadow: \n 0 0 20px var(--terminal-glow),\n inset 0 0 10px var(--terminal-glow);\n animation: pulse-timeline 2s infinite;\n }\n\n .timeline-item::after {\n content: '';\n position: absolute;\n left: -2.9rem;\n top: 2.9rem;\n width: 40px;\n height: 2px;\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n @keyframes pulse-timeline {\n 0%, 100% {\n box-shadow: 0 0 20px var(--terminal-glow), inset 0 0 10px var(--terminal-glow);\n }\n 50% {\n box-shadow: 0 0 35px var(--terminal-glow), inset 0 0 15px var(--terminal-glow);\n }\n }\n\n .timeline-item:hover {\n background: rgba(74, 246, 38, 0.08);\n border-left-width: 8px;\n box-shadow: 0 5px 30px rgba(74, 246, 38, 0.2);\n transform: translateX(10px);\n }\n\n .timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n .timeline-date {\n font-size: 1.4rem;\n padding: 0.5rem 1.2rem;\n background: rgba(74, 246, 38, 0.15);\n border: 2px solid var(--terminal-green);\n letter-spacing: 0.15rem;\n box-shadow: 0 0 10px rgba(74, 246, 38, 0.3);\n }\n\n .timeline-status {\n font-size: 1.1rem;\n padding: 0.4rem 1rem;\n background: rgba(74, 246, 38, 0.25);\n border: 1px solid var(--terminal-green);\n animation: pulse-badge 2s infinite;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n\n @keyframes pulse-badge {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n\n .timeline-title {\n font-size: 2rem;\n margin-bottom: 0.8rem;\n color: var(--terminal-green);\n text-shadow: 0 0 8px var(--terminal-glow);\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .timeline-title::before {\n content: \"\u25b8\";\n font-size: 1.5rem;\n }\n\n .timeline-company {\n font-size: 1.3rem;\n opacity: 0.85;\n margin-bottom: 1.5rem;\n font-family: 'IBM Plex Mono', monospace;\n padding-left: 2rem;\n border-left: 2px solid rgba(74, 246, 38, 0.3);\n }\n\n .timeline-desc {\n font-size: 1.2rem;\n opacity: 0.9;\n font-family: 'IBM Plex Mono', monospace;\n line-height: 2;\n padding-left: 1rem;\n }\n\n \/* Skills *\/\n .skills-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .skill-category {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n }\n\n .skill-category-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n border-bottom: 1px solid var(--terminal-green);\n padding-bottom: 0.5rem;\n }\n\n .skill-item {\n font-size: 1.3rem;\n padding: 0.5rem 0;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .skill-item::before {\n content: '\u25b8 ';\n color: var(--terminal-green);\n }\n\n \/* Contact form *\/\n .contact-form {\n max-width: 600px;\n margin-top: 2rem;\n }\n\n .form-group {\n margin-bottom: 2rem;\n }\n\n .form-label {\n display: block;\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n }\n\n .form-input,\n .form-textarea {\n width: 100%;\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n padding: 1rem;\n outline: none;\n transition: all 0.3s ease;\n }\n\n .form-input:focus,\n .form-textarea:focus {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.3);\n }\n\n .form-textarea {\n min-height: 150px;\n resize: vertical;\n }\n\n .form-button {\n background: transparent;\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-family: 'VT323', monospace;\n font-size: 1.5rem;\n padding: 1rem 3rem;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.2rem;\n }\n\n .form-button:hover {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.5);\n }\n\n \/* Modal\/Pop-up Windows 95 style *\/\n .modal-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n z-index: 10001;\n animation: fadeIn 0.3s ease;\n }\n\n .modal-overlay.active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .modal-window {\n background: var(--terminal-bg);\n border: 3px solid var(--terminal-green);\n box-shadow: \n 0 0 40px rgba(74, 246, 38, 0.5),\n inset 0 0 20px rgba(74, 246, 38, 0.1);\n max-width: 900px;\n width: 90%;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n animation: slideDown 0.4s ease;\n }\n\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-50px) scale(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n .modal-titlebar {\n background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 100%);\n border-bottom: 2px solid var(--terminal-green);\n padding: 0.8rem 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .modal-title {\n font-size: 1.5rem;\n letter-spacing: 0.1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .modal-title::before {\n content: \"\u25a3\";\n font-size: 1.2rem;\n }\n\n .modal-controls {\n display: flex;\n gap: 0.5rem;\n }\n\n .modal-btn {\n width: 30px;\n height: 30px;\n background: rgba(74, 246, 38, 0.1);\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-size: 1.2rem;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'VT323', monospace;\n }\n\n .modal-btn:hover {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.5);\n }\n\n .modal-btn-close::before {\n content: \"\u2715\";\n }\n\n .modal-btn-minimize::before {\n content: \"_\";\n }\n\n .modal-content {\n padding: 2rem;\n overflow-y: auto;\n flex: 1;\n }\n\n .modal-content::-webkit-scrollbar {\n width: 12px;\n }\n\n .modal-content::-webkit-scrollbar-track {\n background: rgba(74, 246, 38, 0.05);\n border: 1px solid var(--terminal-green);\n }\n\n .modal-content::-webkit-scrollbar-thumb {\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n .modal-section {\n margin-bottom: 2rem;\n }\n\n .modal-section-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n border-bottom: 1px solid var(--terminal-green);\n padding-bottom: 0.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .modal-section-title::before {\n content: \"\u25b8\";\n color: var(--terminal-green);\n }\n\n .modal-text {\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n line-height: 1.8;\n margin-bottom: 1rem;\n }\n\n .modal-table {\n width: 100%;\n border-collapse: collapse;\n margin: 1.5rem 0;\n background: rgba(74, 246, 38, 0.02);\n }\n\n .modal-table th,\n .modal-table td {\n border: 1px solid var(--terminal-green);\n padding: 0.8rem;\n text-align: left;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.1rem;\n }\n\n .modal-table th {\n background: rgba(74, 246, 38, 0.15);\n font-weight: bold;\n }\n\n .modal-table tr:hover {\n background: rgba(74, 246, 38, 0.08);\n }\n\n .modal-list {\n list-style: none;\n margin: 1rem 0;\n }\n\n .modal-list li {\n padding: 0.5rem 0 0.5rem 1.5rem;\n position: relative;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.1rem;\n }\n\n .modal-list li::before {\n content: \"\u25b8\";\n position: absolute;\n left: 0;\n color: var(--terminal-green);\n }\n\n .status-badge {\n display: inline-block;\n padding: 0.3rem 0.8rem;\n background: rgba(74, 246, 38, 0.2);\n border: 1px solid var(--terminal-green);\n font-size: 1rem;\n margin: 0.5rem 0.5rem 0.5rem 0;\n }\n\n .status-badge.active {\n background: rgba(74, 246, 38, 0.3);\n animation: pulse-badge 2s infinite;\n }\n\n .modal-footer {\n border-top: 2px solid var(--terminal-green);\n padding: 1rem 2rem;\n background: rgba(74, 246, 38, 0.05);\n display: flex;\n justify-content: flex-end;\n gap: 1rem;\n }\n\n .modal-footer-btn {\n background: transparent;\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-family: 'VT323', monospace;\n font-size: 1.3rem;\n padding: 0.8rem 2rem;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n\n .modal-footer-btn:hover {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.5);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .main-container {\n flex-direction: column;\n }\n\n .sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 2px solid var(--terminal-green);\n }\n\n .content-area {\n padding: 2rem 1rem;\n }\n\n .control-panel {\n flex-wrap: wrap;\n }\n\n .loading-title {\n font-size: 2.5rem;\n }\n\n .progress-bar {\n width: 90%;\n }\n\n .section-title {\n font-size: 2rem;\n }\n\n .timeline {\n padding-left: 2.5rem;\n }\n\n .timeline-item::before {\n left: -3.3rem;\n width: 20px;\n height: 20px;\n }\n\n .timeline-item::after {\n left: -2rem;\n width: 25px;\n }\n\n .modal-window {\n width: 95%;\n max-height: 90vh;\n }\n }\n \/* ============================================\n SECTION 1: ACTIVIT\u00c9S HEBDOMADAIRES\n ============================================ *\/\n\n .activities-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n perspective: 1000px;\n }\n\n .activity-card {\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid var(--terminal-green);\n padding: 0;\n position: relative;\n overflow: hidden;\n transition: all 0.4s ease;\n cursor: pointer;\n transform-style: preserve-3d;\n }\n\n .activity-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(74, 246, 38, 0.3),\n transparent\n );\n animation: scan-activity 3s linear infinite;\n }\n\n @keyframes scan-activity {\n 0% { left: -100%; }\n 100% { left: 100%; }\n }\n\n .activity-card:hover {\n background: rgba(74, 246, 38, 0.08);\n box-shadow: \n 0 10px 40px rgba(74, 246, 38, 0.4),\n inset 0 0 30px rgba(74, 246, 38, 0.2);\n transform: translateY(-10px) rotateX(5deg);\n border-color: var(--terminal-green);\n }\n\n .activity-header {\n background: linear-gradient(135deg, rgba(74, 246, 38, 0.15), rgba(74, 246, 38, 0.05));\n padding: 1.5rem;\n border-bottom: 2px solid var(--terminal-green);\n display: flex;\n align-items: center;\n gap: 1rem;\n position: relative;\n overflow: hidden;\n }\n\n .activity-header::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 10px,\n rgba(74, 246, 38, 0.05) 10px,\n rgba(74, 246, 38, 0.05) 20px\n );\n animation: slide-pattern 20s linear infinite;\n }\n\n @keyframes slide-pattern {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(40px); }\n }\n\n .activity-icon {\n font-size: 3rem;\n width: 70px;\n height: 70px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(74, 246, 38, 0.2);\n border: 3px solid var(--terminal-green);\n border-radius: 50%;\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n animation: rotate-icon 10s linear infinite;\n }\n\n @keyframes rotate-icon {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(360deg); }\n }\n\n .activity-title {\n font-size: 1.6rem;\n color: var(--terminal-green);\n text-shadow: 0 0 10px var(--terminal-glow);\n flex: 1;\n position: relative;\n z-index: 1;\n animation: glitch-text 5s infinite;\n }\n\n @keyframes glitch-text {\n 0%, 90%, 100% { transform: translateX(0); }\n 92% { transform: translateX(-2px); }\n 94% { transform: translateX(2px); }\n 96% { transform: translateX(-2px); }\n 98% { transform: translateX(2px); }\n }\n\n .activity-body {\n padding: 1.5rem;\n }\n\n .activity-time {\n font-size: 3rem;\n font-weight: bold;\n color: var(--terminal-green);\n text-shadow: 0 0 15px var(--terminal-glow);\n text-align: center;\n margin-bottom: 1rem;\n animation: pulse-time 2s infinite;\n }\n\n @keyframes pulse-time {\n 0%, 100% { \n transform: scale(1);\n text-shadow: 0 0 15px var(--terminal-glow);\n }\n 50% { \n transform: scale(1.1);\n text-shadow: 0 0 25px var(--terminal-glow), 0 0 35px var(--terminal-glow);\n }\n }\n\n .activity-bar {\n height: 30px;\n background: #000;\n border: 2px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n margin-bottom: 1rem;\n }\n\n .activity-bar-fill {\n height: 100%;\n background: linear-gradient(\n 90deg,\n var(--terminal-green),\n #00ff00,\n var(--terminal-green)\n );\n background-size: 200% 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n color: #000;\n font-weight: bold;\n transition: width 1s ease;\n box-shadow: 0 0 20px var(--terminal-glow);\n animation: shimmer 2s linear infinite;\n }\n\n @keyframes shimmer {\n 0% { background-position: 0% 0%; }\n 100% { background-position: 200% 0%; }\n }\n\n .activity-desc {\n font-size: 1.1rem;\n opacity: 0.9;\n font-family: 'IBM Plex Mono', monospace;\n line-height: 1.6;\n text-align: center;\n }\n\n .activity-badge {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: rgba(74, 246, 38, 0.3);\n border: 2px solid var(--terminal-green);\n padding: 0.4rem 0.8rem;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n animation: pulse-badge 2s infinite;\n z-index: 10;\n box-shadow: 0 0 15px var(--terminal-glow);\n }\n\n \/* ============================================\n SECTION 2: STACK TECHNIQUE\n ============================================ *\/\n\n .tech-stack-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-top: 2rem;\n }\n\n .tech-item {\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.4s ease;\n }\n\n .tech-item::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(\n circle,\n rgba(74, 246, 38, 0.2) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n\n .tech-item:hover::before {\n opacity: 1;\n animation: rotate-gradient 3s linear infinite;\n }\n\n @keyframes rotate-gradient {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .tech-item:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.5);\n transform: scale(1.05);\n }\n\n .tech-logo {\n font-size: 4rem;\n margin-bottom: 1rem;\n filter: drop-shadow(0 0 10px var(--terminal-glow));\n animation: float-logo 3s ease-in-out infinite;\n }\n\n @keyframes float-logo {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n .tech-name {\n font-size: 1.4rem;\n margin-bottom: 1rem;\n color: var(--terminal-green);\n text-shadow: 0 0 5px var(--terminal-glow);\n }\n\n .tech-level {\n font-size: 1rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n margin-bottom: 1rem;\n }\n\n .tech-progress {\n height: 8px;\n background: #000;\n border: 1px solid var(--terminal-green);\n overflow: hidden;\n }\n\n .tech-progress-fill {\n height: 100%;\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n transition: width 1.5s ease;\n animation: pulse-progress 2s infinite;\n }\n\n @keyframes pulse-progress {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n \/* ============================================\n SECTION 3: PROJETS EN COURS (Terminal Live)\n ============================================ *\/\n\n .projects-terminal {\n background: #000;\n border: 3px solid var(--terminal-green);\n padding: 0;\n margin: 2rem 0;\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.3);\n position: relative;\n overflow: hidden;\n }\n\n .projects-terminal::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 2px,\n rgba(74, 246, 38, 0.03) 2px,\n rgba(74, 246, 38, 0.03) 4px\n );\n pointer-events: none;\n animation: scanlines 0.1s linear infinite;\n }\n\n .terminal-header {\n background: linear-gradient(90deg, #1a1a1a, #2a2a2a);\n padding: 0.8rem 1rem;\n border-bottom: 2px solid var(--terminal-green);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .terminal-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 1px solid var(--terminal-green);\n }\n\n .terminal-dot:nth-child(1) {\n background: #ff5f56;\n animation: blink-dot 1s infinite;\n }\n\n .terminal-dot:nth-child(2) {\n background: #ffbd2e;\n animation: blink-dot 1.5s infinite;\n }\n\n .terminal-dot:nth-child(3) {\n background: #27c93f;\n animation: blink-dot 2s infinite;\n }\n\n @keyframes blink-dot {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n .terminal-title {\n flex: 1;\n text-align: center;\n font-size: 1.2rem;\n letter-spacing: 0.1rem;\n }\n\n .terminal-body {\n padding: 1.5rem;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.1rem;\n line-height: 1.8;\n max-height: 400px;\n overflow-y: auto;\n }\n\n .terminal-line {\n margin-bottom: 0.5rem;\n opacity: 0;\n animation: type-line 0.5s ease forwards;\n }\n\n @keyframes type-line {\n to { opacity: 1; }\n }\n\n .terminal-line::before {\n content: \"$ \";\n color: var(--terminal-green);\n font-weight: bold;\n }\n\n .terminal-line.output {\n padding-left: 1rem;\n opacity: 0.8;\n }\n\n .terminal-line.output::before {\n content: \"\u2192 \";\n }\n\n .terminal-line.success {\n color: #00ff00;\n }\n\n .terminal-line.warning {\n color: #ffcc00;\n }\n\n .terminal-line.error {\n color: #ff0000;\n }\n\n .terminal-cursor {\n display: inline-block;\n width: 10px;\n height: 1.2rem;\n background: var(--terminal-green);\n animation: blink-cursor 1s infinite;\n margin-left: 5px;\n }\n\n @keyframes blink-cursor {\n 0%, 49% { opacity: 1; }\n 50%, 100% { opacity: 0; }\n }\n\n \/* ============================================\n SECTION 4: CERTIFICATIONS & BADGES\n ============================================ *\/\n\n .badges-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1.5rem;\n margin-top: 2rem;\n }\n\n .badge-item {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n cursor: pointer;\n transition: all 0.4s ease;\n overflow: hidden;\n }\n\n .badge-item::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: radial-gradient(\n circle,\n rgba(74, 246, 38, 0.3),\n transparent\n );\n transform: translate(-50%, -50%);\n transition: all 0.5s ease;\n }\n\n .badge-item:hover::before {\n width: 200%;\n height: 200%;\n }\n\n .badge-item:hover {\n box-shadow: 0 0 40px rgba(74, 246, 38, 0.6);\n transform: scale(1.1) rotate(5deg);\n }\n\n .badge-icon {\n font-size: 4rem;\n margin-bottom: 1rem;\n position: relative;\n z-index: 1;\n animation: bounce-badge 2s infinite;\n }\n\n @keyframes bounce-badge {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-15px); }\n }\n\n .badge-name {\n font-size: 1.2rem;\n color: var(--terminal-green);\n margin-bottom: 0.5rem;\n position: relative;\n z-index: 1;\n }\n\n .badge-date {\n font-size: 0.9rem;\n opacity: 0.7;\n font-family: 'IBM Plex Mono', monospace;\n position: relative;\n z-index: 1;\n }\n\n \/* ============================================\n SECTION 5: WORKFLOW & OUTILS\n ============================================ *\/\n\n .workflow-diagram {\n background: rgba(74, 246, 38, 0.02);\n border: 2px solid var(--terminal-green);\n padding: 3rem;\n margin: 2rem 0;\n position: relative;\n overflow: hidden;\n }\n\n .workflow-diagram::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 50px,\n rgba(74, 246, 38, 0.05) 50px,\n rgba(74, 246, 38, 0.05) 51px\n ),\n repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 50px,\n rgba(74, 246, 38, 0.05) 50px,\n rgba(74, 246, 38, 0.05) 51px\n );\n pointer-events: none;\n }\n\n .workflow-steps {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 2rem;\n position: relative;\n z-index: 1;\n }\n\n .workflow-step {\n flex: 1;\n min-width: 150px;\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n transition: all 0.4s ease;\n cursor: pointer;\n }\n\n .workflow-step::after {\n content: '\u2192';\n position: absolute;\n right: -2rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n color: var(--terminal-green);\n animation: arrow-pulse 1.5s infinite;\n }\n\n .workflow-step:last-child::after {\n display: none;\n }\n\n @keyframes arrow-pulse {\n 0%, 100% { opacity: 1; transform: translateY(-50%) translateX(0); }\n 50% { opacity: 0.5; transform: translateY(-50%) translateX(10px); }\n }\n\n .workflow-step:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.4);\n transform: translateY(-10px);\n }\n\n .workflow-icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n }\n\n .workflow-name {\n font-size: 1.3rem;\n color: var(--terminal-green);\n margin-bottom: 0.5rem;\n }\n\n .workflow-desc {\n font-size: 1rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* ============================================\n SECTION 6: STATISTIQUES DE CODE\n ============================================ *\/\n\n .code-stats-dashboard {\n background: rgba(74, 246, 38, 0.02);\n border: 3px solid var(--terminal-green);\n padding: 2rem;\n margin: 2rem 0;\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.3);\n }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .stat-box {\n background: #000;\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .stat-box::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(74, 246, 38, 0.2),\n transparent\n );\n animation: scan-stat 2s linear infinite;\n }\n\n @keyframes scan-stat {\n 0% { left: -100%; }\n 100% { left: 100%; }\n }\n\n .stat-value {\n font-size: 3rem;\n font-weight: bold;\n color: var(--terminal-green);\n text-shadow: 0 0 15px var(--terminal-glow);\n margin-bottom: 0.5rem;\n animation: count-up 2s ease;\n }\n\n @keyframes count-up {\n from { opacity: 0; transform: scale(0.5); }\n to { opacity: 1; transform: scale(1); }\n }\n\n .stat-label {\n font-size: 1.1rem;\n opacity: 0.8;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .code-graph {\n background: #000;\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n margin-top: 1.5rem;\n }\n\n .graph-title {\n font-size: 1.4rem;\n margin-bottom: 1rem;\n color: var(--terminal-green);\n text-align: center;\n }\n\n .graph-bars {\n display: flex;\n align-items: flex-end;\n justify-content: space-around;\n height: 200px;\n gap: 1rem;\n }\n\n .graph-bar {\n flex: 1;\n background: linear-gradient(\n to top,\n var(--terminal-green),\n rgba(74, 246, 38, 0.3)\n );\n border: 1px solid var(--terminal-green);\n position: relative;\n transition: all 0.5s ease;\n cursor: pointer;\n animation: grow-bar 1.5s ease;\n }\n\n @keyframes grow-bar {\n from { height: 0; }\n }\n\n .graph-bar:hover {\n box-shadow: 0 0 20px var(--terminal-glow);\n filter: brightness(1.3);\n }\n\n .graph-bar-label {\n position: absolute;\n bottom: -25px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.9rem;\n white-space: nowrap;\n }\n\n .graph-bar-value {\n position: absolute;\n top: -25px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 1rem;\n font-weight: bold;\n color: var(--terminal-green);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .activities-grid,\n .tech-stack-grid,\n .badges-container {\n grid-template-columns: 1fr;\n }\n\n .workflow-steps {\n flex-direction: column;\n }\n\n .workflow-step::after {\n content: '\u2193';\n right: 50%;\n top: auto;\n bottom: -2rem;\n transform: translateX(50%);\n }\n\n .graph-bars {\n height: 150px;\n }\n }\n\n <\/style>\n<\/head>\n<body>\n <div class=\"crt-container\" id=\"crtContainer\">\n \n <div class=\"vhs-overlay\"><\/div>\n <div class=\"vhs-bands\"><\/div>\n\n \n <div class=\"control-panel\">\n <button class=\"control-button\" id=\"audioToggle\">\ud83d\udd0a AUDIO<\/button>\n <button class=\"control-button\" id=\"vhsToggle\">VHS MODE<\/button>\n <\/div>\n\n \n <div id=\"loading-screen\">\n <div class=\"loading-title glow-strong\">TERMINAL PORTFOLIO<\/div>\n <div class=\"loading-subtitle\">SYST\u00c8ME D’INFORMATION PERSONNEL<\/div>\n <div class=\"loading-text\">CONNEXION EN COURS…<\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progress-fill\"><\/div>\n <\/div>\n <\/div>\n\n \n <header class=\"terminal-header\">\n <div class=\"terminal-title glow\">\u00c9MILE SNYERS \u2014 PORTFOLIO<\/div>\n <div class=\"terminal-info\">SYST\u00c8ME V7.0 | <span id=\"current-time\"><\/span><\/div>\n <\/header>\n\n \n <div class=\"main-container\">\n \n <aside class=\"sidebar\">\n <nav>\n <div class=\"menu-section\">\n <div class=\"menu-title\">NAVIGATION<\/div>\n <div class=\"menu-item\" data-page=\"accueil\">ACCUEIL<\/div>\n <div class=\"menu-item\" data-page=\"projets\">PROJETS<\/div>\n <div class=\"menu-item\" data-page=\"experience\">EXP\u00c9RIENCE<\/div>\n <div class=\"menu-item\" data-page=\"competences\">COMP\u00c9TENCES<\/div>\n <div class=\"menu-item\" data-page=\"contact\">CONTACT<\/div>\n <\/div>\n \n <div class=\"menu-section\">\n <div class=\"menu-title\">SYST\u00c8ME<\/div>\n <div class=\"menu-item\" data-page=\"diagnostic\">DIAGNOSTIC<\/div>\n <\/div>\n <\/nav>\n <\/aside>\n\n \n <main class=\"content-area\">\n \n <section id=\"accueil\" class=\"page-section active\">\n <h1 class=\"section-title glow\">ACCUEIL \u2014 PR\u00c9SENTATION<\/h1>\n \n <div class=\"section-content\">\n <p style=\"margin-bottom: 2rem;\">\n Bienvenue sur mon portfolio interactif. Je suis \u00c9mile Snyers, passionn\u00e9 par la technologie \n et sp\u00e9cialis\u00e9 dans la gestion de projets IT, le d\u00e9veloppement d’outils internes et \n l’optimisation des syst\u00e8mes d’information.\n <\/p>\n\n \n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">TEEPEE<\/div>\n <div class=\"info-card-label\">FORMULAIRES & WORKFLOWS & GESTION D’ACTIFS<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">GPIT<\/div>\n <div class=\"info-card-label\">INVENTAIRE & ticket suport<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">FUSION 360<\/div>\n <div class=\"info-card-label\">Mod\u00e9lisation de pi\u00e8ces 3D pour impression <\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">WEB\/3D<\/div>\n <div class=\"info-card-label\">OUTILS & PROTOTYPES<\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> DOMAINES D’EXPERTISE<\/h2>\n \n <div class=\"icon-section\">\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udda5\ufe0f<\/div>\n <div class=\"icon-item-text\">Gestion de Parcs IT<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\u2699\ufe0f<\/div>\n <div class=\"icon-item-text\">Automatisation & TeePee<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83c\udf10<\/div>\n <div class=\"icon-item-text\">D\u00e9veloppement Web<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcca<\/div>\n <div class=\"icon-item-text\">Gestion de Donn\u00e9es<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udd27<\/div>\n <div class=\"icon-item-text\">Support Technique<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcdd<\/div>\n <div class=\"icon-item-text\">Documentation<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"custom-content-area\">\n <div class=\"custom-content-placeholder\">\n [ ESPACE PERSONNALISABLE 1 ]<br>\n <small>Vous pouvez ajouter votre contenu ici<\/small>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"projets\" class=\"page-section\">\n <h1 class=\"section-title glow\">PROJETS<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">> TABLEAU R\u00c9CAPITULATIF DES PROJETS<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr>\n <th>PROJET<\/th><th>TYPE<\/th><th>ANN\u00c9E<\/th><th>STATUT<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>GPIT \u2014 Gestion de Parc IT (TeePee)<\/td><td>Interne<\/td><td>2023\u20132025<\/td><td style=\"color: #4af626;\">\u2713 ACTIF<\/td>\n <\/tr>\n <tr>\n <td>Site m\u00e9t\u00e9o (API)<\/td><td>Web<\/td><td>2024\u20132025<\/td><td style=\"color: #4af626;\">\u2713 EN LIGNE<\/td>\n <\/tr>\n <tr>\n <td>GLPI sur OVH<\/td><td>Technique<\/td><td>2020\u20132024<\/td><td style=\"color: #4af626;\">\u2713 COMPL\u00c9T\u00c9<\/td>\n <\/tr>\n <tr>\n <td>QCM.ovh<\/td><td>Web<\/td><td>2025<\/td><td style=\"color: #4af626;\">\u23f3 EN D\u00c9V.<\/td>\n <\/tr>\n <tr>\n <td>Convertisseur de nombres en lettres<\/td><td>Web<\/td><td>2024<\/td><td style=\"color: #4af626;\">\u2713 EN LIGNE<\/td>\n <\/tr>\n <tr>\n <td>SPOT \u2013 Simulation de r\u00e9seaux de tuyaux<\/td><td>Web \/ POC<\/td><td>2024<\/td><td style=\"color: #4af626;\">\u2713 OP\u00c9RATIONNEL<\/td>\n <\/tr>\n <tr>\n <td>Outil de calcul de dur\u00e9es<\/td><td>Web<\/td><td>2024<\/td><td style=\"color: #4af626;\">\u2713 EN LIGNE<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> D\u00c9TAILS DES PROJETS<\/h2>\n <div class=\"projects-grid\">\n\n <div class=\"project-card\" data-project=\"gpit\">\n <div class=\"project-title glow\">GPIT \u2014 GESTION DE PARC IT (TEEPEE)<\/div>\n <div class=\"project-desc\">Outil interne : inventaire, anti-doublons, localisation et g\u00e9n\u00e9ration automatique des documents AMD\/ARM (multi-appareil).<\/div>\n <div class=\"project-tags\"><span class=\"tag\">TEEPEE<\/span><span class=\"tag\">NO-CODE<\/span><span class=\"tag\">IT<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"meteo\">\n <div class=\"project-title glow\">SITE M\u00c9T\u00c9O (API)<\/div>\n <div class=\"project-desc\">Pr\u00e9visions pour 150+ villes : vent, humidit\u00e9, lever\/coucher du soleil, temp\u00e9ratures max\/min et ressenties.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">API<\/span><span class=\"tag\">WEB<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"glpi\">\n <div class=\"project-title glow\">GLPI SUR OVH<\/div>\n <div class=\"project-desc\">D\u00e9ploiement et configuration complets (mod\u00e8les, plugins, formulaires, projets\/t\u00e2ches) pour gestion d’actifs.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">GLPI<\/span><span class=\"tag\">IT<\/span><span class=\"tag\">OVH<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"qcm\">\n <div class=\"project-title glow\">QCM.OVH<\/div>\n <div class=\"project-desc\">Cr\u00e9ation\/partage de QCM personnalis\u00e9s, base de donn\u00e9es pour r\u00e9ponses et analyses (en d\u00e9veloppement).<\/div>\n <div class=\"project-tags\"><span class=\"tag\">WEB<\/span><span class=\"tag\">QCM<\/span><span class=\"tag\">DB<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"cmd\">\n <div class=\"project-title glow\">CMD AVENTURE<\/div>\n <div class=\"project-desc\">Petit jeu r\u00e9tro : statistiques du personnage et progression via points de comp\u00e9tence.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">JEU<\/span><span class=\"tag\">PERSO<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"durees\">\n <div class=\"project-title glow\">OUTIL DE CALCUL DE DUR\u00c9ES<\/div>\n <div class=\"project-desc\">Addition\/soustraction de temps ; op\u00e9rations sur des dur\u00e9es complexes avec pr\u00e9cision.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">OUTIL<\/span><span class=\"tag\">WEB<\/span><\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"custom-content-area\" style=\"margin-top: 3rem;\">\n <div class=\"custom-content-placeholder\">\n [ ESPACE PERSONNALISABLE 2 ]<br>\n <small>Zone pour futurs projets ou contenu additionnel<\/small>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"projectModal\">\n <div class=\"modal-window\">\n <div class=\"modal-titlebar\">\n <div class=\"modal-title\"><span id=\"modalProjectTitle\">D\u00c9TAILS DU PROJET<\/span><\/div>\n <div class=\"modal-controls\">\n <button class=\"modal-btn modal-btn-minimize\" title=\"R\u00e9duire\"><\/button>\n <button class=\"modal-btn modal-btn-close\" id=\"closeModal\" title=\"Fermer\"><\/button>\n <\/div>\n <\/div>\n <div class=\"modal-content\" id=\"modalContent\"><\/div>\n <div class=\"modal-footer\"><button class=\"modal-footer-btn\" id=\"closeModalFooter\">FERMER<\/button><\/div>\n <\/div>\n <\/div>\n\n <\/section>\n\n \n <section id=\"experience\" class=\"page-section\">\n <h1 class=\"section-title glow\">EXP\u00c9RIENCE PROFESSIONNELLE<\/h1>\n \n <div class=\"timeline\">\n\n <div class=\"timeline-item\">\n <div class=\"timeline-header\">\n <div class=\"timeline-date glow\">2023 – PR\u00c9SENT<\/div>\n <div class=\"timeline-status\">\u25cf EN COURS<\/div>\n <\/div>\n <div class=\"timeline-title\">INFORMATICIEN \u2014 D\u00c9PLOIEMENT TEEPEE & PARC IT<\/div>\n <div class=\"timeline-company\">\ud83d\udccd Kellal (p\u00f4le nucl\u00e9aire de VINCI Energies)<\/div>\n <div class=\"timeline-desc\">\n \u2022 Num\u00e9risation des proc\u00e9dures avec TeePee (formulaires, r\u00e8gles, kanban)<br>\n \u2022 Gestion de l’inventaire (GPIT), remises\/restitutions et documents AMD\/ARM<br>\n \u2022 D\u00e9ploiements & support (PC, tablettes, t\u00e9l\u00e9phones)<br>\n \u2022 Contribution \u00e0 des prototypes 3D (Fusion 360 \/ FreeCAD)\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-header\">\n <div class=\"timeline-date glow\">Stage<\/div>\n <\/div>\n <div class=\"timeline-title\">STAGIAIRE ASSISTANT INFORMATIQUE<\/div>\n <div class=\"timeline-company\">\ud83d\udccd Omega Informatique<\/div>\n <div class=\"timeline-desc\">\n \u2022 Diagnostic pannes \u2022 Migrations HDD\u2192SSD \u2022 Installations Windows \u2022 Master USB\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-header\">\n <div class=\"timeline-date glow\">Stage<\/div>\n <\/div>\n <div class=\"timeline-title\">STAGIAIRE \u2014 COMMUNAUT\u00c9 DE COMMUNES<\/div>\n <div class=\"timeline-company\">\ud83d\udccd Les Balcons du Dauphin\u00e9<\/div>\n <div class=\"timeline-desc\">\n \u2022 Pr\u00e9paration de postes \u2022 Organisation des stocks \u2022 Assistance utilisateurs\n <\/div>\n <\/div>\n\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> RESPONSABILIT\u00c9S ACTUELLES<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>RESPONSABILIT\u00c9<\/th><th>DESCRIPTION<\/th><th>FR\u00c9QUENCE<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Inventaire & parc<\/td><td>Suivi mat\u00e9riels, affectations, restitutions<\/td><td>Quotidien<\/td>\n <\/tr>\n <tr>\n <td>Formulaires TeePee<\/td><td>Conception, r\u00e8gles, kanban<\/td><td>Hebdomadaire<\/td>\n <\/tr>\n <tr>\n <td>Documents AMD\/ARM<\/td><td>G\u00e9n\u00e9ration automatique & standardisation<\/td><td>Quotidien<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9ploiements & support<\/td><td>Postes, tablettes, t\u00e9l\u00e9phones<\/td><td>Hebdomadaire<\/td>\n <\/tr>\n <tr>\n <td>Automatisations<\/td><td>Workflows et simplification des processus<\/td><td>Mensuel<\/td>\n <\/tr>\n <tr>\n <td>Documentation<\/td><td>R\u00e9daction de guides internes<\/td><td>Mensuel<\/td>\n <\/tr>\n <tr>\n <td>Prototypage 3D<\/td><td>Pi\u00e8ces\/tests simples<\/td><td>Ponctuel<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n \n <section id=\"competences\" class=\"page-section\">\n <h1 class=\"section-title glow\">COMP\u00c9TENCES<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1.5rem 0;\">> NIVEAU DE MA\u00ceTRISE<\/h2>\n\n \n <div style=\"margin: 2rem 0;\">\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>TeePee (no-code)<\/span><span>85%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"85\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>GLPI & Gestion d’actifs<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>HTML \/ CSS \/ JavaScript<\/span><span>75%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"75\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Active Directory & Microsoft 365<\/span><span>70%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"70\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Fusion 360 \/ FreeCAD (3D)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Scripts (Batch \/ PowerShell)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>SharePoint (sites internes)<\/span><span>65%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"65\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Support & D\u00e9ploiements<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> COMP\u00c9TENCES PAR CAT\u00c9GORIE<\/h2>\n\n \n <div class=\"skills-grid\">\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">NO-CODE \/ TEEPEE<\/div>\n <div class=\"skill-item\">Formulaires & r\u00e8gles<\/div>\n <div class=\"skill-item\">Kanban & droits<\/div>\n <div class=\"skill-item\">Automatisations<\/div>\n <div class=\"skill-item\">G\u00e9n\u00e9ration AMD\/ARM<\/div>\n <div class=\"skill-item\">Mobiles & tablettes<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">IT \/ SYST\u00c8MES<\/div>\n <div class=\"skill-item\">Inventaire & parc<\/div>\n <div class=\"skill-item\">GLPI<\/div>\n <div class=\"skill-item\">Active Directory<\/div>\n <div class=\"skill-item\">Microsoft 365<\/div>\n <div class=\"skill-item\">Sauvegardes (Veeam)<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">WEB<\/div>\n <div class=\"skill-item\">HTML \/ CSS \/ JS<\/div>\n <div class=\"skill-item\">Sites statiques & outils<\/div>\n <div class=\"skill-item\">API (m\u00e9t\u00e9o)<\/div>\n <div class=\"skill-item\">QCM (POC)<\/div>\n <div class=\"skill-item\">Accessibilit\u00e9 & simplicit\u00e9<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">3D \/ PROTO<\/div>\n <div class=\"skill-item\">Fusion 360<\/div>\n <div class=\"skill-item\">FreeCAD<\/div>\n <div class=\"skill-item\">Blender<\/div>\n <div class=\"skill-item\">Impression 3D (tests)<\/div>\n <div class=\"skill-item\">M\u00e9caniques simples<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">LANGUES<\/div>\n <div class=\"skill-item\">Fran\u00e7ais (Langue maternelle)<\/div>\n <div class=\"skill-item\">Anglais (Professionnel)<\/div>\n <div class=\"skill-item\">N\u00e9erlandais (Notions)<\/div>\n <\/div>\n <\/div>\n\n \n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> OUTILS ET LOGICIELS MA\u00ceTRIS\u00c9S<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>CAT\u00c9GORIE<\/th><th>OUTILS<\/th><th>NIVEAU<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Bureautique<\/td><td>Microsoft 365, Google Workspace<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>No-code<\/td><td>TeePee (formulaires, r\u00e8gles, kanban)<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>Gestion IT<\/td><td>GLPI, Active Directory<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>3D \/ Proto<\/td><td>Fusion 360, FreeCAD, Blender<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9veloppement<\/td><td>VS Code, Git, GitHub<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>Web<\/td><td>HTML, CSS, JavaScript<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section> <section id=\"competences\" class=\"page-section\">\n <h1 class=\"section-title glow\">COMP\u00c9TENCES<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1.5rem 0;\">> NIVEAU DE MA\u00ceTRISE<\/h2>\n\n \n <div style=\"margin: 2rem 0;\">\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>TeePee (no-code)<\/span><span>85%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"85\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>GLPI & Gestion d’actifs<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>HTML \/ CSS \/ JavaScript<\/span><span>75%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"75\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Active Directory & Microsoft 365<\/span><span>70%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"70\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Fusion 360 \/ FreeCAD (3D)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Scripts (Batch \/ PowerShell)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>SharePoint (sites internes)<\/span><span>65%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"65\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Support & D\u00e9ploiements<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> COMP\u00c9TENCES PAR CAT\u00c9GORIE<\/h2>\n\n \n <div class=\"skills-grid\">\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">NO-CODE \/ TEEPEE<\/div>\n <div class=\"skill-item\">Formulaires & r\u00e8gles<\/div>\n <div class=\"skill-item\">Kanban & droits<\/div>\n <div class=\"skill-item\">Automatisations<\/div>\n <div class=\"skill-item\">G\u00e9n\u00e9ration AMD\/ARM<\/div>\n <div class=\"skill-item\">Mobiles & tablettes<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">IT \/ SYST\u00c8MES<\/div>\n <div class=\"skill-item\">Inventaire & parc<\/div>\n <div class=\"skill-item\">GLPI<\/div>\n <div class=\"skill-item\">Active Directory<\/div>\n <div class=\"skill-item\">Microsoft 365<\/div>\n <div class=\"skill-item\">Sauvegardes (Veeam)<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">WEB<\/div>\n <div class=\"skill-item\">HTML \/ CSS \/ JS<\/div>\n <div class=\"skill-item\">Sites statiques & outils<\/div>\n <div class=\"skill-item\">API (m\u00e9t\u00e9o)<\/div>\n <div class=\"skill-item\">QCM (POC)<\/div>\n <div class=\"skill-item\">Accessibilit\u00e9 & simplicit\u00e9<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">3D \/ PROTO<\/div>\n <div class=\"skill-item\">Fusion 360<\/div>\n <div class=\"skill-item\">FreeCAD<\/div>\n <div class=\"skill-item\">Blender<\/div>\n <div class=\"skill-item\">Impression 3D (tests)<\/div>\n <div class=\"skill-item\">M\u00e9caniques simples<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">LANGUES<\/div>\n <div class=\"skill-item\">Fran\u00e7ais (Langue maternelle)<\/div>\n <div class=\"skill-item\">Anglais (Professionnel)<\/div>\n <div class=\"skill-item\">N\u00e9erlandais (Notions)<\/div>\n <\/div>\n <\/div>\n\n \n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> OUTILS ET LOGICIELS MA\u00ceTRIS\u00c9S<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>CAT\u00c9GORIE<\/th><th>OUTILS<\/th><th>NIVEAU<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Bureautique<\/td><td>Microsoft 365, Google Workspace<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>No-code<\/td><td>TeePee (formulaires, r\u00e8gles, kanban)<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>Gestion IT<\/td><td>GLPI, Active Directory<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>3D \/ Proto<\/td><td>Fusion 360, FreeCAD, Blender<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9veloppement<\/td><td>VS Code, Git, GitHub<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>Web<\/td><td>HTML, CSS, JavaScript<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section> <section id=\"competences\" class=\"page-section\">\n <h1 class=\"section-title glow\">COMP\u00c9TENCES<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1.5rem 0;\">> NIVEAU DE MA\u00ceTRISE<\/h2>\n\n \n <div style=\"margin: 2rem 0;\">\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>TeePee (no-code)<\/span><span>85%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"85\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>GLPI & Gestion d’actifs<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>HTML \/ CSS \/ JavaScript<\/span><span>75%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"75\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Active Directory & Microsoft 365<\/span><span>70%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"70\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Fusion 360 \/ FreeCAD (3D)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Scripts (Batch \/ PowerShell)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>SharePoint (sites internes)<\/span><span>65%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"65\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Support & D\u00e9ploiements<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> COMP\u00c9TENCES PAR CAT\u00c9GORIE<\/h2>\n\n \n <div class=\"skills-grid\">\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">NO-CODE \/ TEEPEE<\/div>\n <div class=\"skill-item\">Formulaires & r\u00e8gles<\/div>\n <div class=\"skill-item\">Kanban & droits<\/div>\n <div class=\"skill-item\">Automatisations<\/div>\n <div class=\"skill-item\">G\u00e9n\u00e9ration AMD\/ARM<\/div>\n <div class=\"skill-item\">Mobiles & tablettes<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">IT \/ SYST\u00c8MES<\/div>\n <div class=\"skill-item\">Inventaire & parc<\/div>\n <div class=\"skill-item\">GLPI<\/div>\n <div class=\"skill-item\">Active Directory<\/div>\n <div class=\"skill-item\">Microsoft 365<\/div>\n <div class=\"skill-item\">Sauvegardes (Veeam)<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">WEB<\/div>\n <div class=\"skill-item\">HTML \/ CSS \/ JS<\/div>\n <div class=\"skill-item\">Sites statiques & outils<\/div>\n <div class=\"skill-item\">API (m\u00e9t\u00e9o)<\/div>\n <div class=\"skill-item\">QCM (POC)<\/div>\n <div class=\"skill-item\">Accessibilit\u00e9 & simplicit\u00e9<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">3D \/ PROTO<\/div>\n <div class=\"skill-item\">Fusion 360<\/div>\n <div class=\"skill-item\">FreeCAD<\/div>\n <div class=\"skill-item\">Blender<\/div>\n <div class=\"skill-item\">Impression 3D (tests)<\/div>\n <div class=\"skill-item\">M\u00e9caniques simples<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">LANGUES<\/div>\n <div class=\"skill-item\">Fran\u00e7ais (Langue maternelle)<\/div>\n <div class=\"skill-item\">Anglais (Professionnel)<\/div>\n <div class=\"skill-item\">N\u00e9erlandais (Notions)<\/div>\n <\/div>\n <\/div>\n\n \n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> OUTILS ET LOGICIELS MA\u00ceTRIS\u00c9S<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>CAT\u00c9GORIE<\/th><th>OUTILS<\/th><th>NIVEAU<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Bureautique<\/td><td>Microsoft 365, Google Workspace<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>No-code<\/td><td>TeePee (formulaires, r\u00e8gles, kanban)<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>Gestion IT<\/td><td>GLPI, Active Directory<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>3D \/ Proto<\/td><td>Fusion 360, FreeCAD, Blender<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9veloppement<\/td><td>VS Code, Git, GitHub<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>Web<\/td><td>HTML, CSS, JavaScript<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n \n <section id=\"contact\" class=\"page-section\">\n <h1 class=\"section-title glow\">CONTACT<\/h1>\n\n <div class=\"section-content\">\n <p style=\"margin-bottom: 3rem;\">\n N’h\u00e9sitez pas \u00e0 me contacter pour tout projet, collaboration ou opportunit\u00e9 professionnelle.\n <\/p>\n\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"info-card-value\">\ud83d\udce7<\/div>\n <div class=\"info-card-label\">Email<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">\ud83d\udcf1<\/div>\n <div class=\"info-card-label\">T\u00e9l\u00e9phone<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">\ud83d\udd17<\/div>\n <div class=\"info-card-label\">LinkedIn<\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> FORMULAIRE DE CONTACT<\/h2>\n\n <form class=\"contact-form\" id=\"contact-form\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"name\">NOM<\/label>\n <input type=\"text\" id=\"name\" class=\"form-input\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"email\">EMAIL<\/label>\n <input type=\"email\" id=\"email\" class=\"form-input\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"message\">MESSAGE<\/label>\n <textarea id=\"message\" class=\"form-textarea\" required><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"form-button\">ENVOYER<\/button>\n <\/form>\n <\/div>\n <\/section>\n\n\n \n <section id=\"activities\" class=\"page-section\">\n <h1 class=\"section-title glow\">\u26a1 ACTIVIT\u00c9S HEBDOMADAIRES<\/h1>\n \n <div class=\"activities-grid\">\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">PRIORIT\u00c9<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83c\udfa8<\/div>\n <div class=\"activity-title\">NO-CODE TOOLS<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">15H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 43%;\">43%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n D\u00e9veloppement d’applications sans code<br>\n Bubble, Webflow, Zapier, Make\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">CR\u00c9ATION<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udd27<\/div>\n <div class=\"activity-title\">FUSION 360<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">8H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 23%;\">23%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n Mod\u00e9lisation 3D et prototypage<br>\n Design industriel, CAO\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">BUREAUTIQUE<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udcca<\/div>\n <div class=\"activity-title\">WORD & EXCEL<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">5H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 14%;\">14%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n Documentation technique<br>\n Tableaux de bord, macros VBA\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">DEV<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udcbb<\/div>\n <div class=\"activity-title\">VS CODE<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">5H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 14%;\">14%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n D\u00e9veloppement web et scripts<br>\n HTML, CSS, JavaScript, Python\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">VEILLE<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udd0d<\/div>\n <div class=\"activity-title\">VEILLE TECH<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">3H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 9%;\">9%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n Recherche de nouvelles technologies<br>\n Blogs, forums, documentation\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">QA<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udc1b<\/div>\n <div class=\"activity-title\">TESTS & DEBUG<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">4H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 11%;\">11%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n D\u00e9bogage et optimisation<br>\n Tests unitaires, int\u00e9gration\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"stack\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83d\udee0\ufe0f STACK TECHNIQUE<\/h1>\n \n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > NO-CODE \/ LOW-CODE\n <\/h2>\n <div class=\"tech-stack-grid\">\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udfa8<\/div>\n <div class=\"tech-name\">BUBBLE.IO<\/div>\n <div class=\"tech-level\">Expert \u2022 3 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 90%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udf0a<\/div>\n <div class=\"tech-name\">WEBFLOW<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 80%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\u26a1<\/div>\n <div class=\"tech-name\">ZAPIER<\/div>\n <div class=\"tech-level\">Expert \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 85%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udd17<\/div>\n <div class=\"tech-name\">MAKE<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 1 an<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 75%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > D\u00c9VELOPPEMENT\n <\/h2>\n <div class=\"tech-stack-grid\">\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udf10<\/div>\n <div class=\"tech-name\">HTML\/CSS<\/div>\n <div class=\"tech-level\">Expert \u2022 5 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 95%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udcdc<\/div>\n <div class=\"tech-name\">JAVASCRIPT<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 4 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 80%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udc0d<\/div>\n <div class=\"tech-name\">PYTHON<\/div>\n <div class=\"tech-level\">Interm\u00e9diaire \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 70%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\u269b\ufe0f<\/div>\n <div class=\"tech-name\">REACT<\/div>\n <div class=\"tech-level\">Interm\u00e9diaire \u2022 1 an<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 65%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > DESIGN & 3D\n <\/h2>\n <div class=\"tech-stack-grid\">\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udd27<\/div>\n <div class=\"tech-name\">FUSION 360<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 80%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udfa8<\/div>\n <div class=\"tech-name\">PHOTOSHOP<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 3 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 75%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\uddbc\ufe0f<\/div>\n <div class=\"tech-name\">FIGMA<\/div>\n <div class=\"tech-level\">Interm\u00e9diaire \u2022 1 an<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 70%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udfac<\/div>\n <div class=\"tech-name\">BLENDER<\/div>\n <div class=\"tech-level\">D\u00e9butant \u2022 6 mois<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 50%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"projects-live\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83d\ude80 PROJETS EN COURS<\/h1>\n \n <div class=\"projects-terminal\">\n <div class=\"terminal-header\">\n <div class=\"terminal-dot\"><\/div>\n <div class=\"terminal-dot\"><\/div>\n <div class=\"terminal-dot\"><\/div>\n <div class=\"terminal-title\">TERMINAL – PROJETS ACTIFS<\/div>\n <\/div>\n <div class=\"terminal-body\" id=\"projectsTerminal\">\n <div class=\"terminal-line\">git status<\/div>\n <div class=\"terminal-line output\">Sur la branche main<\/div>\n <div class=\"terminal-line output\">Votre branche est \u00e0 jour avec ‘origin\/main’.<\/div>\n <div class=\"terminal-line\">ls -la projects\/<\/div>\n <div class=\"terminal-line output success\">\u2713 [ACTIF] Site Vitrine Terminal – 85% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output success\">\u2713 [ACTIF] Application No-Code E-commerce – 60% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output warning\">\u26a0 [EN PAUSE] Prototype 3D Fusion 360 – 40% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output success\">\u2713 [ACTIF] Automatisation Zapier CRM – 75% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output\">\u2192 [PLANIFI\u00c9] Dashboard Analytics React – 0% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line\">npm run dev<\/div>\n <div class=\"terminal-line output success\">\u2713 Serveur d\u00e9marr\u00e9 sur http:\/\/localhost:3000<\/div>\n <div class=\"terminal-line output success\">\u2713 Compilation r\u00e9ussie en 1.2s<\/div>\n <div class=\"terminal-line\">git log –oneline -5<\/div>\n <div class=\"terminal-line output\">a3f2c1b feat: Ajout section activit\u00e9s hebdomadaires<\/div>\n <div class=\"terminal-line output\">b7e4d9a fix: Correction responsive mobile<\/div>\n <div class=\"terminal-line output\">c9f1a2e style: Am\u00e9lioration effets VHS<\/div>\n <div class=\"terminal-line output\">d2b8e3f docs: Mise \u00e0 jour README<\/div>\n <div class=\"terminal-line output\">e5c3f7g refactor: Optimisation performances<\/div>\n <div class=\"terminal-line\"><span class=\"terminal-cursor\"><\/span><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > STATISTIQUES DES PROJETS\n <\/h2>\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"info-card-value\">12<\/div>\n <div class=\"info-card-label\">PROJETS TERMIN\u00c9S<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">4<\/div>\n <div class=\"info-card-label\">EN COURS<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">3<\/div>\n <div class=\"info-card-label\">EN PAUSE<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">98%<\/div>\n <div class=\"info-card-label\">TAUX DE R\u00c9USSITE<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"certifications\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83c\udfc6 CERTIFICATIONS & BADGES<\/h1>\n \n <div class=\"badges-container\">\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83c\udf93<\/div>\n <div class=\"badge-name\">BUBBLE CERTIFIED<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\u26a1<\/div>\n <div class=\"badge-name\">ZAPIER EXPERT<\/div>\n <div class=\"badge-date\">2024<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83c\udf10<\/div>\n <div class=\"badge-name\">WEBFLOW PRO<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udc0d<\/div>\n <div class=\"badge-name\">PYTHON BASICS<\/div>\n <div class=\"badge-date\">2022<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udd27<\/div>\n <div class=\"badge-name\">FUSION 360 CAD<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udcca<\/div>\n <div class=\"badge-name\">EXCEL ADVANCED<\/div>\n <div class=\"badge-date\">2021<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83c\udfa8<\/div>\n <div class=\"badge-name\">UI\/UX DESIGN<\/div>\n <div class=\"badge-date\">2024<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udd12<\/div>\n <div class=\"badge-name\">CYBERSECURITY<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"workflow\" class=\"page-section\">\n <h1 class=\"section-title glow\">\u2699\ufe0f WORKFLOW & ENVIRONNEMENT<\/h1>\n \n <div class=\"workflow-diagram\">\n <div class=\"workflow-steps\">\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83d\udca1<\/div>\n <div class=\"workflow-name\">ID\u00c9ATION<\/div>\n <div class=\"workflow-desc\">Brainstorming<br>Mindmapping<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83c\udfa8<\/div>\n <div class=\"workflow-name\">DESIGN<\/div>\n <div class=\"workflow-desc\">Figma<br>Photoshop<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\u26a1<\/div>\n <div class=\"workflow-name\">D\u00c9VELOPPEMENT<\/div>\n <div class=\"workflow-desc\">VS Code<br>Bubble<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83e\uddea<\/div>\n <div class=\"workflow-name\">TESTS<\/div>\n <div class=\"workflow-desc\">QA<br>Debug<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83d\ude80<\/div>\n <div class=\"workflow-name\">D\u00c9PLOIEMENT<\/div>\n <div class=\"workflow-desc\">Production<br>Monitoring<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">\n > OUTILS QUOTIDIENS\n <\/h2>\n <div class=\"icon-section\">\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcbb<\/div>\n <div class=\"icon-item-text\">Visual Studio Code<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83c\udf10<\/div>\n <div class=\"icon-item-text\">Chrome DevTools<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udce6<\/div>\n <div class=\"icon-item-text\">Git & GitHub<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udc33<\/div>\n <div class=\"icon-item-text\">Docker<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcdd<\/div>\n <div class=\"icon-item-text\">Notion<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcac<\/div>\n <div class=\"icon-item-text\">Slack<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcca<\/div>\n <div class=\"icon-item-text\">Trello<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83c\udfaf<\/div>\n <div class=\"icon-item-text\">Postman<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"code-stats\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83d\udcca STATISTIQUES DE CODE<\/h1>\n \n <div class=\"code-stats-dashboard\">\n <div class=\"stats-grid\">\n <div class=\"stat-box\">\n <div class=\"stat-value\">15K+<\/div>\n <div class=\"stat-label\">Lignes de code<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\">45+<\/div>\n <div class=\"stat-label\">Projets GitHub<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\">1.2K+<\/div>\n <div class=\"stat-label\">Commits<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\">8<\/div>\n <div class=\"stat-label\">Langages<\/div>\n <\/div>\n <\/div>\n\n <div class=\"code-graph\">\n <div class=\"graph-title\">ACTIVIT\u00c9 MENSUELLE (Commits)<\/div>\n <div class=\"graph-bars\">\n <div class=\"graph-bar\" style=\"height: 60%;\">\n <div class=\"graph-bar-value\">42<\/div>\n <div class=\"graph-bar-label\">Jan<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 75%;\">\n <div class=\"graph-bar-value\">53<\/div>\n <div class=\"graph-bar-label\">F\u00e9v<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 85%;\">\n <div class=\"graph-bar-value\">61<\/div>\n <div class=\"graph-bar-label\">Mar<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 70%;\">\n <div class=\"graph-bar-value\">49<\/div>\n <div class=\"graph-bar-label\">Avr<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 90%;\">\n <div class=\"graph-bar-value\">67<\/div>\n <div class=\"graph-bar-label\">Mai<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 95%;\">\n <div class=\"graph-bar-value\">72<\/div>\n <div class=\"graph-bar-label\">Juin<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"code-graph\">\n <div class=\"graph-title\">R\u00c9PARTITION PAR LANGAGE<\/div>\n <div class=\"graph-bars\">\n <div class=\"graph-bar\" style=\"height: 85%;\">\n <div class=\"graph-bar-value\">35%<\/div>\n <div class=\"graph-bar-label\">JS<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 70%;\">\n <div class=\"graph-bar-value\">25%<\/div>\n <div class=\"graph-bar-label\">HTML<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 60%;\">\n <div class=\"graph-bar-value\">20%<\/div>\n <div class=\"graph-bar-label\">CSS<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 40%;\">\n <div class=\"graph-bar-value\">12%<\/div>\n <div class=\"graph-bar-label\">Python<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 25%;\">\n <div class=\"graph-bar-value\">8%<\/div>\n <div class=\"graph-bar-label\">Autres<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n\n \n <section id=\"diagnostic\" class=\"page-section\">\n <h1 class=\"section-title glow\">DIAGNOSTIC SYST\u00c8ME<\/h1>\n\n <div class=\"diagnostic-panel\">\n <div class=\"diagnostic-title\">\u25b8 CONSOLE D’ANALYSE<\/div>\n \n <div class=\"console-output\" id=\"consoleOutput\">\n \n <\/div>\n\n <div class=\"diagnostic-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-uptime\">—<\/div>\n <div class=\"stat-label\">UPTIME (s)<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-memory\">—<\/div>\n <div class=\"stat-label\">M\u00c9MOIRE (%)<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-cpu\">—<\/div>\n <div class=\"stat-label\">CPU (%)<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-network\">—<\/div>\n <div class=\"stat-label\">R\u00c9SEAU (ms)<\/div>\n <\/div>\n <\/div>\n\n <div class=\"loading-bar\">\n <div class=\"loading-bar-label\">\n <span>PROCESSUS SYST\u00c8ME<\/span>\n <span id=\"process-percent\">0%<\/span>\n <\/div>\n <div class=\"loading-bar-fill\">\n <div class=\"loading-bar-progress\" id=\"processBar\" style=\"width: 0%;\">\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591<\/div>\n <\/div>\n <\/div>\n\n <div class=\"loading-bar\">\n <div class=\"loading-bar-label\">\n <span>MODULES CHARG\u00c9S<\/span>\n <span id=\"modules-percent\">0%<\/span>\n <\/div>\n <div class=\"loading-bar-fill\">\n <div class=\"loading-bar-progress\" id=\"modulesBar\" style=\"width: 0%;\">\u2593\u2593\u2593\u2593\u2593\u2593\u2593\u2593\u2593\u2593<\/div>\n <\/div>\n <\/div>\n\n <div class=\"loading-bar\">\n <div class=\"loading-bar-label\">\n <span>S\u00c9CURIT\u00c9<\/span>\n <span id=\"security-percent\">0%<\/span>\n <\/div>\n <div class=\"loading-bar-fill\">\n <div class=\"loading-bar-progress\" id=\"securityBar\" style=\"width: 0%;\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"diagnostic-panel\" style=\"margin-top: 2rem;\">\n <div class=\"diagnostic-title\">\u25b8 EXTRAIT DE CODE SYST\u00c8ME<\/div>\n \n <div class=\"code-snippet\">\n <div class=\"code-line\"><span class=\"keyword\">function<\/span> <span class=\"function\">initSystem<\/span>() {<\/div>\n <div class=\"code-line\"> <span class=\"comment\">\/\/ Initialisation du terminal<\/span><\/div>\n <div class=\"code-line\"> <span class=\"keyword\">const<\/span> status = <span class=\"function\">checkStatus<\/span>();<\/div>\n <div class=\"code-line\"> <span class=\"keyword\">if<\/span> (status === <span class=\"string\">‘OK’<\/span>) {<\/div>\n <div class=\"code-line\"> <span class=\"function\">loadModules<\/span>();<\/div>\n <div class=\"code-line\"> <span class=\"function\">startAudio<\/span>();<\/div>\n <div class=\"code-line\"> <span class=\"keyword\">return<\/span> <span class=\"string\">‘SYST\u00c8ME OP\u00c9RATIONNEL’<\/span>;<\/div>\n <div class=\"code-line\"> }<\/div>\n <div class=\"code-line\">}<\/div>\n <\/div>\n <\/div> \n <\/main>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ============================================\n \/\/ SYST\u00c8ME AUDIO AM\u00c9LIOR\u00c9\n \/\/ ============================================\n \n const AudioContext = window.AudioContext || window.webkitAudioContext;\n const audioCtx = new AudioContext();\n let audioEnabled = true;\n let masterVolume = 0; \/\/ Commence \u00e0 0 pour le fade-in\n\n \/\/ Son progressif d'introduction\n function playIntroSound() {\n const duration = 3000; \/\/ 3 secondes\n const startTime = audioCtx.currentTime;\n const endTime = startTime + duration \/ 1000;\n \n \/\/ Fr\u00e9quence basse qui monte progressivement\n const oscillator = audioCtx.createOscillator();\n const gainNode = audioCtx.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n \n oscillator.type = 'sine';\n oscillator.frequency.setValueAtTime(100, startTime);\n oscillator.frequency.exponentialRampToValueAtTime(400, endTime);\n \n gainNode.gain.setValueAtTime(0, startTime);\n gainNode.gain.linearRampToValueAtTime(0.15, startTime + 1);\n gainNode.gain.linearRampToValueAtTime(0.1, endTime - 0.5);\n gainNode.gain.linearRampToValueAtTime(0, endTime);\n \n oscillator.start(startTime);\n oscillator.stop(endTime);\n \n \/\/ Augmenter progressivement le volume ma\u00eetre\n let volumeIncrease = setInterval(() => {\n if (masterVolume < 0.5) {\n masterVolume += 0.05;\n } else {\n clearInterval(volumeIncrease);\n }\n }, 100);\n }\n\n \/\/ Fonction pour cr\u00e9er un bip (sons vari\u00e9s)\n function playBeep(frequency = 800, duration = 50, type = 'square') {\n if (!audioEnabled) return;\n \n const oscillator = audioCtx.createOscillator();\n const gainNode = audioCtx.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n \n oscillator.frequency.value = frequency;\n oscillator.type = type;\n \n gainNode.gain.setValueAtTime(masterVolume * 0.3, audioCtx.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration \/ 1000);\n \n oscillator.start(audioCtx.currentTime);\n oscillator.stop(audioCtx.currentTime + duration \/ 1000);\n }\n\n \/\/ Sons vari\u00e9s pour les clics\n const clickSounds = [\n { freq: 1200, dur: 30, type: 'square' },\n { freq: 1500, dur: 25, type: 'triangle' },\n { freq: 1000, dur: 35, type: 'sine' },\n { freq: 1800, dur: 20, type: 'square' },\n { freq: 1400, dur: 28, type: 'sawtooth' }\n ];\n\n function playClick() {\n const sound = clickSounds[Math.floor(Math.random() * clickSounds.length)];\n playBeep(sound.freq, sound.dur, sound.type);\n }\n\n function playHover() {\n playBeep(600 + Math.random() * 200, 20, 'sine');\n }\n\n \/\/ Son pour modal\n function playModalOpen() {\n playBeep(400, 50, 'triangle');\n setTimeout(() => playBeep(600, 50, 'triangle'), 50);\n setTimeout(() => playBeep(800, 70, 'triangle'), 100);\n }\n\n function playModalClose() {\n playBeep(800, 40, 'triangle');\n setTimeout(() => playBeep(500, 60, 'triangle'), 40);\n }\n\n \/\/ ============================================\n \/\/ \u00c9CRAN DE CHARGEMENT\n \/\/ ============================================\n \n const loadingScreen = document.getElementById('loading-screen');\n const progressFill = document.getElementById('progress-fill');\n \n let progress = 0;\n const loadingInterval = setInterval(() => {\n progress += Math.random() * 15;\n if (progress >= 100) {\n progress = 100;\n progressFill.style.width = '100%';\n playBeep(1000, 100, 'sine');\n setTimeout(() => {\n loadingScreen.classList.add('hidden');\n setTimeout(() => {\n loadingScreen.style.display = 'none';\n }, 500);\n }, 500);\n clearInterval(loadingInterval);\n } else {\n progressFill.style.width = progress + '%';\n playBeep(400 + progress * 5, 20, 'square');\n }\n }, 200);\n\n \/\/ Jouer le son d'intro au chargement\n window.addEventListener('load', () => {\n playIntroSound();\n });\n\n \/\/ ============================================\n \/\/ VHS MODE AUTO APR\u00c8S 25 SECONDES\n \/\/ ============================================\n \n let vhsMode = false;\n const crtContainer = document.getElementById('crtContainer');\n const vhsToggle = document.getElementById('vhsToggle');\n\n setTimeout(() => {\n if (!vhsMode) {\n activateVHSMode();\n }\n }, 25000); \/\/ 25 secondes\n\n function activateVHSMode() {\n vhsMode = true;\n crtContainer.classList.add('vhs-active');\n vhsToggle.classList.add('active');\n vhsToggle.textContent = 'VHS: ON';\n playBeep(300, 100, 'sawtooth');\n setTimeout(() => playBeep(200, 150, 'sawtooth'), 100);\n }\n\n function deactivateVHSMode() {\n vhsMode = false;\n crtContainer.classList.remove('vhs-active');\n vhsToggle.classList.remove('active');\n vhsToggle.textContent = 'VHS MODE';\n playBeep(400, 80, 'sine');\n }\n\n vhsToggle.addEventListener('click', () => {\n if (vhsMode) {\n deactivateVHSMode();\n } else {\n activateVHSMode();\n }\n });\n\n vhsToggle.addEventListener('mouseenter', () => {\n playHover();\n });\n\n \/\/ ============================================\n \/\/ CONTR\u00d4LE AUDIO\n \/\/ ============================================\n \n const audioToggle = document.getElementById('audioToggle');\n\n audioToggle.addEventListener('click', () => {\n audioEnabled = !audioEnabled;\n audioToggle.textContent = audioEnabled ? '\ud83d\udd0a AUDIO' : '\ud83d\udd07 MUTE';\n audioToggle.classList.toggle('active', !audioEnabled);\n if (audioEnabled) {\n playBeep(1000, 100, 'sine');\n }\n });\n\n audioToggle.addEventListener('mouseenter', () => {\n playHover();\n });\n\n \/\/ ============================================\n \/\/ HORLOGE\n \/\/ ============================================\n \n function updateTime() {\n const now = new Date();\n const timeString = now.toLocaleTimeString('fr-FR', { \n hour: '2-digit', \n minute: '2-digit',\n second: '2-digit'\n });\n document.getElementById('current-time').textContent = timeString;\n }\n setInterval(updateTime, 1000);\n updateTime();\n\n \/\/ ============================================\n \/\/ NAVIGATION\n \/\/ ============================================\n \n const menuItems = document.querySelectorAll('.menu-item');\n const pageSections = document.querySelectorAll('.page-section');\n\n menuItems.forEach(item => {\n item.addEventListener('click', function() {\n playClick();\n \n menuItems.forEach(i => i.classList.remove('active'));\n this.classList.add('active');\n \n pageSections.forEach(section => section.classList.remove('active'));\n \n const pageId = this.getAttribute('data-page');\n document.getElementById(pageId).classList.add('active');\n\n \/\/ Animer les barres de comp\u00e9tences\n if (pageId === 'competences') {\n animateSkillBars();\n }\n \n \/\/ D\u00e9marrer le diagnostic\n if (pageId === 'diagnostic') {\n startDiagnostic();\n }\n });\n\n item.addEventListener('mouseenter', () => {\n playHover();\n });\n });\n\n \/\/ ============================================\n \/\/ ANIMATION DES BARRES\n \/\/ ============================================\n \n function animateSkillBars() {\n const skillBars = document.querySelectorAll('.skill-bar-fill');\n skillBars.forEach(bar => {\n const width = bar.getAttribute('data-width');\n setTimeout(() => {\n bar.style.width = width + '%';\n }, 100);\n });\n }\n\n \/\/ ============================================\n \/\/ SYST\u00c8ME DE DIAGNOSTIC\n \/\/ ============================================\n \n let diagnosticStarted = false;\n\n function startDiagnostic() {\n if (diagnosticStarted) return;\n diagnosticStarted = true;\n\n const consoleOutput = document.getElementById('consoleOutput');\n const messages = [\n { text: 'Initialisation du syst\u00e8me...', type: 'info', delay: 0 },\n { text: 'Chargement des modules principaux...', type: 'success', delay: 500 },\n { text: 'V\u00e9rification de l\\'int\u00e9grit\u00e9 des fichiers...', type: 'success', delay: 1000 },\n { text: 'Analyse de la m\u00e9moire disponible...', type: 'info', delay: 1500 },\n { text: 'Test de connectivit\u00e9 r\u00e9seau...', type: 'success', delay: 2000 },\n { text: 'Attention: Pic de charge CPU d\u00e9tect\u00e9', type: 'warning', delay: 2500 },\n { text: 'Optimisation des processus en cours...', type: 'info', delay: 3000 },\n { text: 'Activation des protocoles de s\u00e9curit\u00e9...', type: 'success', delay: 3500 },\n { text: 'Synchronisation des donn\u00e9es...', type: 'success', delay: 4000 },\n { text: 'SYST\u00c8ME OP\u00c9RATIONNEL - Tous les tests r\u00e9ussis', type: 'success', delay: 4500 }\n ];\n\n messages.forEach((msg, index) => {\n setTimeout(() => {\n const line = document.createElement('div');\n line.className = `console-line ${msg.type}`;\n line.textContent = msg.text;\n line.style.animationDelay = `${index * 0.1}s`;\n consoleOutput.appendChild(line);\n playBeep(400 + index * 50, 15, 'sine');\n consoleOutput.scrollTop = consoleOutput.scrollHeight;\n }, msg.delay);\n });\n\n \/\/ Animer les statistiques\n animateDiagnosticStats();\n animateLoadingBars();\n }\n\n function animateDiagnosticStats() {\n let uptime = 0;\n const uptimeInterval = setInterval(() => {\n uptime++;\n document.getElementById('stat-uptime').textContent = uptime;\n }, 1000);\n\n setTimeout(() => {\n document.getElementById('stat-memory').textContent = Math.floor(Math.random() * 30 + 50);\n document.getElementById('stat-cpu').textContent = Math.floor(Math.random() * 40 + 30);\n document.getElementById('stat-network').textContent = Math.floor(Math.random() * 50 + 10);\n }, 1000);\n }\n\n function animateLoadingBars() {\n animateBar('processBar', 'process-percent', 0, 100, 3000);\n setTimeout(() => animateBar('modulesBar', 'modules-percent', 0, 100, 2500), 500);\n setTimeout(() => animateBar('securityBar', 'security-percent', 0, 100, 2000), 1000);\n }\n\n function animateBar(barId, percentId, start, end, duration) {\n const bar = document.getElementById(barId);\n const percentLabel = document.getElementById(percentId);\n const startTime = Date.now();\n \n function update() {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed \/ duration, 1);\n const value = start + (end - start) * progress;\n \n bar.style.width = value + '%';\n percentLabel.textContent = Math.floor(value) + '%';\n \n if (progress < 1) {\n requestAnimationFrame(update);\n }\n }\n \n update();\n }\n\n \/\/ ============================================\n \/\/ PROJETS ET MODALS\n \/\/ ============================================\n \n const projectCards = document.querySelectorAll('.project-card');\n projectCards.forEach(card => {\n card.addEventListener('click', function() {\n playModalOpen();\n });\n\n card.addEventListener('mouseenter', () => {\n playHover();\n });\n });\n\n const projectsData = {\n gpit: {\n title: \"GPIT \u2013 Gestion de Parc IT (TeePee)\",\n status: \"ACTIF\",\n year: \"2023\u20132025\",\n description: \"Outil interne sous TeePee : inventaire, anti-doublons, localisation et g\u00e9n\u00e9ration automatique des documents AMD\/ARM (utilisable sur PC, tablette et t\u00e9l\u00e9phone).\",\n objectives: [\n \"Centraliser et fiabiliser l'inventaire\",\n \"R\u00e9duire les erreurs de saisie\",\n \"Acc\u00e9l\u00e9rer la remise et la restitution (AMD\/ARM)\",\n \"Assurer l'usage terrain multi-appareils\"\n ],\n technologies: [\n { name: \"TeePee\", usage: \"Formulaires, r\u00e8gles, kanban\" },\n { name: \"Code-barres\", usage: \"Scan et recherche d'\u00e9quipements\" },\n { name: \"CSV \/ Excel\", usage: \"Imports et exports de donn\u00e9es\" }\n ],\n results: [\n \"Processus standardis\u00e9s\",\n \"Documents AMD\/ARM auto-g\u00e9n\u00e9r\u00e9s\",\n \"Adoption interne progressive\"\n ]\n },\n meteo: {\n title: \"Site m\u00e9t\u00e9o (API)\",\n status: \"EN LIGNE\",\n year: \"2024\u20132025\",\n description: \"Pr\u00e9visions pour 150+ villes : vent, humidit\u00e9, lever\/coucher du soleil, temp\u00e9ratures max\/min et ressenties.\",\n objectives: [\n \"Rendre service avec une interface simple\",\n \"Apprendre et pratiquer l'int\u00e9gration d'API\",\n \"Offrir une consultation rapide sur mobile\/PC\"\n ],\n technologies: [\n { name: \"HTML\/JS\", usage: \"Appels API, rendu et interactions\" },\n { name: \"API m\u00e9t\u00e9o\", usage: \"Donn\u00e9es de pr\u00e9visions\" }\n ],\n results: [\n \"Site public consultable\",\n \"Chargement rapide et navigation directe\"\n ]\n },\n glpi: {\n title: \"GLPI sur OVH\",\n status: \"COMPL\u00c9T\u00c9\",\n year: \"2020\u20132024\",\n description: \"D\u00e9ploiement et configuration de GLPI (mod\u00e8les, plugins, formulaires, projets\/t\u00e2ches) pour la gestion d'actifs et le support.\",\n objectives: [\n \"Structurer la gestion du parc\",\n \"Optimiser le support utilisateurs\",\n \"Uniformiser les proc\u00e9dures\"\n ],\n technologies: [\n { name: \"GLPI\", usage: \"Gestion des actifs et tickets\" },\n { name: \"OVH\", usage: \"H\u00e9bergement et d\u00e9ploiement\" }\n ],\n results: [\n \"Instance op\u00e9rationnelle et document\u00e9e\",\n \"Base de connaissances amorc\u00e9e\"\n ]\n },\n qcm: {\n title: \"QCM.ovh \u2013 QCM interactifs\",\n status: \"EN D\u00c9V.\",\n year: \"2025\",\n description: \"Cr\u00e9ation et partage de QCM personnalis\u00e9s, base de donn\u00e9es pour r\u00e9ponses et analyses. Le site \u00e9volue par sections (\u00c9ducation, Sant\u00e9, Technique).\",\n objectives: [\n \"Proposer des QCM multi-cat\u00e9gories\",\n \"Collecter des r\u00e9ponses pour analyses\",\n \"Assurer l'accessibilit\u00e9 sur tout appareil\"\n ],\n technologies: [\n { name: \"HTML\/CSS\/JS\", usage: \"Interface et logique c\u00f4t\u00e9 client\" },\n { name: \"DB (\u00e0 d\u00e9finir)\", usage: \"Persistance des r\u00e9sultats (roadmap)\" }\n ],\n results: [\n \"Prototype en ligne et navigation par cat\u00e9gories\",\n \"Formulaires de test disponibles\"\n ]\n },\n cmd: {\n title: \"CMD Aventure (jeu 2D)\",\n status: \"PROJET PERSO\",\n year: \"2024\u20132025\",\n description: \"Jeu r\u00e9tro en console CMD : univers m\u00e9di\u00e9val, gestion des statistiques, progression via points de comp\u00e9tence, \u00e9crans d\u00e9di\u00e9s pour le lore et l'aide au joueur.\",\n objectives: [\n \"Exp\u00e9rimenter un gameplay simple et lisible\",\n \"G\u00e9rer la progression par points de comp\u00e9tence\",\n \"Conserver une empreinte l\u00e9g\u00e8re (console)\"\n ],\n technologies: [\n { name: \"Scripts\/Console\", usage: \"M\u00e9caniques et boucles de jeu\" },\n { name: \"Assets l\u00e9gers\", usage: \"\u00c9crans, textes et aides\" }\n ],\n results: [\n \"D\u00e9mos jouables et it\u00e9rations rapides\"\n ]\n },\n durees: {\n title: \"Outil de calcul de dur\u00e9es\",\n status: \"EN LIGNE\",\n year: \"2024\",\n description: \"Outil web pour additionner\/soustraire des temps et manipuler des dur\u00e9es complexes de mani\u00e8re fiable et rapide.\",\n objectives: [\n \"Simplifier les op\u00e9rations sur les temps\",\n \"\u00c9viter les erreurs de calcul manuel\",\n \"Offrir une interface tr\u00e8s directe\"\n ],\n technologies: [\n { name: \"HTML\/JS\", usage: \"Calculs et affichage instantan\u00e9\" }\n ],\n results: [\n \"Utilisable imm\u00e9diatement depuis le navigateur\"\n ]\n }\n };\n\n function generateModalContent(projectKey) {\n const project = projectsData[projectKey];\n const statusClass = project.status === \"ACTIF\" ? \"active\" : \"\";\n \n return `\n <div class=\"modal-section\">\n <div style=\"display: flex; gap: 1rem; margin-bottom: 1.5rem;\">\n <span class=\"status-badge ${statusClass}\">${project.status}<\/span>\n <span class=\"status-badge\">ANN\u00c9E: ${project.year}<\/span>\n <\/div>\n <div class=\"modal-text\">${project.description}<\/div>\n <\/div>\n\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">OBJECTIFS<\/div>\n <ul class=\"modal-list\">\n ${project.objectives.map(obj => `<li>${obj}<\/li>`).join('')}\n <\/ul>\n <\/div>\n\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">TECHNOLOGIES UTILIS\u00c9ES<\/div>\n <table class=\"modal-table\">\n <thead>\n <tr>\n <th>TECHNOLOGIE<\/th>\n <th>UTILISATION<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n ${project.technologies.map(tech => `\n <tr>\n <td>${tech.name}<\/td>\n <td>${tech.usage}<\/td>\n <\/tr>\n `).join('')}\n <\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">R\u00c9SULTATS<\/div>\n <ul class=\"modal-list\">\n ${project.results.map(result => `<li>${result}<\/li>`).join('')}\n <\/ul>\n <\/div>\n `;\n }\n\n document.querySelectorAll('.project-card').forEach(card => {\n card.addEventListener('click', function() {\n const projectKey = this.getAttribute('data-project');\n const project = projectsData[projectKey];\n \n document.getElementById('modalProjectTitle').textContent = project.title;\n document.getElementById('modalContent').innerHTML = generateModalContent(projectKey);\n document.getElementById('projectModal').classList.add('active');\n });\n });\n\n function closeProjectModal() {\n playModalClose();\n document.getElementById('projectModal').classList.remove('active');\n }\n\n document.getElementById('closeModal').addEventListener('click', closeProjectModal);\n document.getElementById('closeModalFooter').addEventListener('click', closeProjectModal);\n\n document.getElementById('projectModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeProjectModal();\n }\n });\n\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n const modal = document.getElementById('projectModal');\n if (modal.classList.contains('active')) {\n closeProjectModal();\n }\n }\n });\n\n \/\/ ============================================\n \/\/ FORMULAIRE DE CONTACT\n \/\/ ============================================\n \n const contactForm = document.getElementById('contact-form');\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n playBeep(1000, 200, 'sine');\n alert('MESSAGE ENVOY\u00c9 AVEC SUCC\u00c8S\\n\\n> Votre message a \u00e9t\u00e9 transmis.\\n> R\u00e9ponse attendue sous 24-48h.');\n contactForm.reset();\n });\n\n const formInputs = document.querySelectorAll('.form-input, .form-textarea');\n formInputs.forEach(input => {\n input.addEventListener('focus', () => {\n playBeep(800, 30, 'sine');\n });\n\n input.addEventListener('input', function() {\n if (Math.random() > 0.8) {\n playBeep(600, 10, 'sine');\n }\n });\n });\n\n const formButton = document.querySelector('.form-button');\n formButton.addEventListener('mouseenter', () => {\n playHover();\n });\n\n \/\/ ============================================\n \/\/ EFFET DE GLITCH AL\u00c9ATOIRE\n \/\/ ============================================\n \n setInterval(() => {\n const title = document.querySelector('.terminal-title');\n if (Math.random() > 0.97) {\n playBeep(2000 + Math.random() * 500, 30, 'square');\n title.style.textShadow = '0 0 20px #4af626, 2px 2px 0 #ff0000, -2px -2px 0 #00ffff';\n setTimeout(() => {\n title.style.textShadow = '';\n }, 50);\n }\n }, 100);\n\n \/\/ Initialiser la premi\u00e8re page\n document.querySelector('.menu-item[data-page=\"accueil\"]').classList.add('active');\n \n \/\/ Animation des barres d'activit\u00e9 au chargement\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Animer les barres de progression\n const activityBars = document.querySelectorAll('.activity-bar-fill');\n activityBars.forEach((bar, index) => {\n setTimeout(() => {\n bar.style.width = bar.getAttribute('style').match(\/width:\\s*(\\d+%)\/)[1];\n }, index * 200);\n });\n\n \/\/ Animer les barres de tech stack\n const techBars = document.querySelectorAll('.tech-progress-fill');\n techBars.forEach((bar, index) => {\n setTimeout(() => {\n bar.style.width = bar.getAttribute('style').match(\/width:\\s*(\\d+%)\/)[1];\n }, index * 100);\n });\n\n \/\/ Animer les barres de graphique\n const graphBars = document.querySelectorAll('.graph-bar');\n graphBars.forEach((bar, index) => {\n const height = bar.getAttribute('style').match(\/height:\\s*(\\d+%)\/)[1];\n bar.style.height = '0%';\n setTimeout(() => {\n bar.style.height = height;\n }, index * 150);\n });\n\n \/\/ Animation du terminal (ajout progressif des lignes)\n const terminalLines = document.querySelectorAll('.terminal-line');\n terminalLines.forEach((line, index) => {\n line.style.animationDelay = `${index * 0.3}s`;\n });\n\n \/\/ Effet de compteur pour les stats\n const statValues = document.querySelectorAll('.stat-value');\n statValues.forEach(stat => {\n const text = stat.textContent;\n const number = parseInt(text.replace(\/[^0-9]\/g, ''));\n if (!isNaN(number)) {\n let current = 0;\n const increment = number \/ 50;\n const timer = setInterval(() => {\n current += increment;\n if (current >= number) {\n stat.textContent = text;\n clearInterval(timer);\n } else {\n stat.textContent = Math.floor(current) + text.replace(\/[0-9]\/g, '');\n }\n }, 30);\n }\n });\n });\n\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Terminal Portfolio – \u00c9mile Snyers \ud83d\udd0a AUDIO VHS MODE TERMINAL PORTFOLIO SYST\u00c8ME D’INFORMATION PERSONNEL CONNEXION EN COURS… \u00c9MILE SNYERS \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","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-101","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":2,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages\/101\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages\/101\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/media?parent=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":101,"date":"2025-11-03T01:35:19","date_gmt":"2025-11-03T00:35:19","guid":{"rendered":"https:\/\/emilesnyersdeveloppeur.ovh\/?page_id=101"},"modified":"2025-11-03T01:35:19","modified_gmt":"2025-11-03T00:35:19","slug":"mon-cv-en-ligne-2","status":"publish","type":"page","link":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/mon-cv-en-ligne-2\/","title":{"rendered":"Mon CV En ligne"},"content":{"rendered":"\n\n\n\n \n \n Terminal Portfolio – \u00c9mile Snyers<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=VT323&family=IBM+Plex+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --terminal-green: #4af626;\n --terminal-bg: #0a0a0a;\n --terminal-glow: #4af626;\n --border-color: #2a2a2a;\n }\n\n body {\n font-family: 'VT323', monospace;\n background: var(--terminal-bg);\n color: var(--terminal-green);\n overflow-x: hidden;\n line-height: 1.4;\n }\n\n \/* Effet CRT global *\/\n .crt-container {\n position: relative;\n min-height: 100vh;\n background: var(--terminal-bg);\n transition: all 0.3s ease;\n }\n\n \/* Mode VHS activ\u00e9 *\/\n .crt-container.vhs-active {\n animation: vhsDistortion 0.3s infinite;\n }\n\n @keyframes vhsDistortion {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-1px); }\n 75% { transform: translateX(1px); }\n }\n\n \/* Overlays VHS *\/\n .vhs-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9997;\n opacity: 0;\n transition: opacity 0.5s ease;\n background: \n repeating-linear-gradient(\n 0deg,\n rgba(0, 0, 0, 0.15),\n rgba(0, 0, 0, 0.15) 1px,\n transparent 1px,\n transparent 2px\n );\n animation: vhsNoise 0.2s infinite;\n }\n\n .vhs-active .vhs-overlay {\n opacity: 0.6;\n }\n\n @keyframes vhsNoise {\n 0%, 100% { background-position: 0 0; }\n 50% { background-position: 0 3px; }\n }\n\n .vhs-bands {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9996;\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n\n .vhs-active .vhs-bands {\n opacity: 1;\n }\n\n .vhs-bands::before,\n .vhs-bands::after {\n content: '';\n position: absolute;\n left: 0;\n width: 100%;\n height: 8px;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .vhs-bands::before {\n top: 30%;\n animation: vhsBand1 4s linear infinite;\n }\n\n .vhs-bands::after {\n top: 70%;\n animation: vhsBand2 5s linear infinite;\n }\n\n @keyframes vhsBand1 {\n 0% { top: -10%; }\n 100% { top: 110%; }\n }\n\n @keyframes vhsBand2 {\n 0% { top: 110%; }\n 100% { top: -10%; }\n }\n\n \/* Scanlines *\/\n .crt-container::before {\n content: \" \";\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background: linear-gradient(\n to bottom,\n rgba(18, 16, 16, 0) 50%,\n rgba(0, 0, 0, 0.25) 50%\n );\n background-size: 100% 4px;\n z-index: 9999;\n pointer-events: none;\n animation: scanlines 0.1s linear infinite;\n }\n\n .vhs-active .crt-container::before {\n background-size: 100% 3px;\n animation: scanlines 0.08s linear infinite;\n }\n\n \/* Effet de flicker *\/\n .crt-container::after {\n content: \" \";\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n background: rgba(18, 16, 16, 0.1);\n opacity: 0;\n z-index: 9998;\n pointer-events: none;\n animation: flicker 0.15s infinite;\n }\n\n .vhs-active .crt-container::after {\n animation: flicker 0.1s infinite, vhsFlicker 0.5s infinite;\n }\n\n @keyframes scanlines {\n 0% { background-position: 0 0; }\n 100% { background-position: 0 4px; }\n }\n\n @keyframes flicker {\n 0% { opacity: 0.27861; }\n 5% { opacity: 0.34769; }\n 10% { opacity: 0.23604; }\n 15% { opacity: 0.90626; }\n 20% { opacity: 0.18128; }\n 25% { opacity: 0.83891; }\n 30% { opacity: 0.65583; }\n 35% { opacity: 0.67807; }\n 40% { opacity: 0.26559; }\n 45% { opacity: 0.84693; }\n 50% { opacity: 0.96019; }\n 55% { opacity: 0.08594; }\n 60% { opacity: 0.20313; }\n 65% { opacity: 0.71988; }\n 70% { opacity: 0.53455; }\n 75% { opacity: 0.37288; }\n 80% { opacity: 0.71428; }\n 85% { opacity: 0.70419; }\n 90% { opacity: 0.7003; }\n 95% { opacity: 0.36108; }\n 100% { opacity: 0.24387; }\n }\n\n @keyframes vhsFlicker {\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 0.7; }\n }\n\n \/* Glow effect *\/\n .glow {\n text-shadow:\n 0 0 3px rgba(255, 255, 255, 0.8),\n 0 0 6px var(--terminal-glow);\n }\n\n .glow-strong {\n text-shadow:\n 0 0 5px #fff,\n 0 0 10px #fff,\n 0 0 15px var(--terminal-glow),\n 0 0 20px var(--terminal-glow);\n }\n\n \/* Contr\u00f4les repositionn\u00e9s (c\u00f4t\u00e9 gauche, en bas) *\/\n .control-panel {\n position: fixed;\n bottom: 20px;\n left: 20px;\n z-index: 10001;\n display: flex;\n gap: 10px;\n }\n\n .control-button {\n background: rgba(20, 20, 20, 0.9);\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n padding: 10px 20px;\n font-family: 'VT323', monospace;\n font-size: 1.3rem;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.3);\n }\n\n .control-button:hover {\n background: rgba(74, 246, 38, 0.2);\n box-shadow: 0 0 25px rgba(74, 246, 38, 0.6);\n transform: translateY(-2px);\n }\n\n .control-button.active {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n animation: pulse-button 1.5s infinite;\n }\n\n @keyframes pulse-button {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n \/* \u00c9cran de chargement *\/\n #loading-screen {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--terminal-bg);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n z-index: 10000;\n transition: opacity 0.5s ease;\n }\n\n #loading-screen.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n .loading-title {\n font-size: 4rem;\n letter-spacing: 0.3rem;\n margin-bottom: 3rem;\n text-align: center;\n }\n\n .loading-subtitle {\n font-size: 1.2rem;\n letter-spacing: 0.2rem;\n margin-bottom: 4rem;\n opacity: 0.7;\n }\n\n .loading-text {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n animation: blink 1s infinite;\n }\n\n .progress-bar {\n width: 400px;\n height: 4px;\n background: var(--border-color);\n border: 2px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: var(--terminal-green);\n width: 0%;\n transition: width 0.3s ease;\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n @keyframes blink {\n 0%, 49% { opacity: 1; }\n 50%, 100% { opacity: 0; }\n }\n\n \/* Header *\/\n .terminal-header {\n background: #1a1a1a;\n border-bottom: 2px solid var(--terminal-green);\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.3);\n }\n\n .terminal-title {\n font-size: 2rem;\n letter-spacing: 0.2rem;\n }\n\n .terminal-info {\n font-size: 1.2rem;\n opacity: 0.8;\n }\n\n \/* Container principal *\/\n .main-container {\n display: flex;\n min-height: calc(100vh - 80px);\n }\n\n \/* Sidebar menu *\/\n .sidebar {\n width: 300px;\n background: #141414;\n border-right: 2px solid var(--terminal-green);\n padding: 2rem 0;\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.2);\n }\n\n .menu-section {\n margin-bottom: 1rem;\n }\n\n .menu-title {\n font-size: 1.2rem;\n padding: 0.5rem 2rem;\n color: var(--terminal-green);\n opacity: 0.6;\n letter-spacing: 0.1rem;\n }\n\n .menu-item {\n padding: 1rem 2rem;\n font-size: 1.5rem;\n cursor: pointer;\n transition: all 0.3s ease;\n border-left: 4px solid transparent;\n position: relative;\n }\n\n .menu-item:hover {\n background: rgba(74, 246, 38, 0.1);\n border-left-color: var(--terminal-green);\n padding-left: 2.5rem;\n }\n\n .menu-item.active {\n background: rgba(74, 246, 38, 0.15);\n border-left-color: var(--terminal-green);\n box-shadow: inset 0 0 20px rgba(74, 246, 38, 0.2);\n }\n\n .menu-item::before {\n content: \"\u25b8 \";\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .menu-item:hover::before,\n .menu-item.active::before {\n opacity: 1;\n }\n\n \/* Content area *\/\n .content-area {\n flex: 1;\n padding: 3rem;\n overflow-y: auto;\n }\n\n .page-section {\n display: none;\n animation: fadeIn 0.5s ease;\n }\n\n .page-section.active {\n display: block;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .section-title {\n font-size: 3rem;\n margin-bottom: 2rem;\n letter-spacing: 0.2rem;\n border-bottom: 2px solid var(--terminal-green);\n padding-bottom: 1rem;\n }\n\n .section-content {\n font-size: 1.3rem;\n line-height: 1.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* NOUVEAU: Syst\u00e8me de diagnostic am\u00e9lior\u00e9 *\/\n .diagnostic-panel {\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid var(--terminal-green);\n padding: 2rem;\n margin: 2rem 0;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .diagnostic-title {\n font-size: 1.8rem;\n margin-bottom: 1.5rem;\n color: var(--terminal-green);\n border-bottom: 1px solid rgba(74, 246, 38, 0.3);\n padding-bottom: 0.5rem;\n }\n\n .console-output {\n background: #000;\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n margin: 1rem 0;\n font-size: 1.1rem;\n line-height: 1.6;\n max-height: 300px;\n overflow-y: auto;\n }\n\n .console-line {\n opacity: 0;\n animation: fadeInLine 0.3s ease forwards;\n }\n\n @keyframes fadeInLine {\n to { opacity: 1; }\n }\n\n .console-line.success::before {\n content: \"[\u2713] \";\n color: var(--terminal-green);\n }\n\n .console-line.warning::before {\n content: \"[!] \";\n color: #ffcc00;\n }\n\n .console-line.info::before {\n content: \"[i] \";\n color: #00ccff;\n }\n\n .diagnostic-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin: 1.5rem 0;\n }\n\n .stat-item {\n background: rgba(74, 246, 38, 0.05);\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n text-align: center;\n }\n\n .stat-value {\n font-size: 2rem;\n font-weight: bold;\n color: var(--terminal-green);\n margin-bottom: 0.5rem;\n }\n\n .stat-label {\n font-size: 1rem;\n opacity: 0.8;\n }\n\n .loading-bar {\n margin: 1rem 0;\n }\n\n .loading-bar-label {\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n display: flex;\n justify-content: space-between;\n }\n\n .loading-bar-fill {\n height: 20px;\n background: #000;\n border: 1px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n }\n\n .loading-bar-progress {\n height: 100%;\n background: var(--terminal-green);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9rem;\n color: #000;\n font-weight: bold;\n transition: width 0.5s ease;\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n .code-snippet {\n background: #000;\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n margin: 1rem 0;\n font-size: 1rem;\n line-height: 1.5;\n overflow-x: auto;\n }\n\n .code-line {\n opacity: 0.8;\n }\n\n .code-line span {\n color: var(--terminal-green);\n }\n\n .code-line .keyword {\n color: #4af626;\n font-weight: bold;\n }\n\n .code-line .function {\n color: #00ff88;\n }\n\n .code-line .string {\n color: #88ff00;\n }\n\n .code-line .comment {\n color: #666;\n font-style: italic;\n }\n\n \/* NOUVEAU: Espaces personnalisables *\/\n .custom-content-area {\n background: rgba(74, 246, 38, 0.02);\n border: 2px dashed var(--terminal-green);\n padding: 2rem;\n margin: 2rem 0;\n min-height: 200px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n opacity: 0.6;\n transition: all 0.3s ease;\n }\n\n .custom-content-area:hover {\n opacity: 1;\n background: rgba(74, 246, 38, 0.05);\n }\n\n .custom-content-placeholder {\n font-size: 1.3rem;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* Tableaux *\/\n .data-table {\n width: 100%;\n border-collapse: collapse;\n margin: 2rem 0;\n background: rgba(74, 246, 38, 0.02);\n }\n\n .data-table th,\n .data-table td {\n border: 1px solid var(--terminal-green);\n padding: 1rem;\n text-align: left;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n }\n\n .data-table th {\n background: rgba(74, 246, 38, 0.15);\n font-weight: bold;\n font-size: 1.3rem;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n\n .data-table tr:hover {\n background: rgba(74, 246, 38, 0.08);\n }\n\n .data-table td:first-child {\n font-weight: bold;\n }\n\n \/* Listes stylis\u00e9es *\/\n .styled-list {\n list-style: none;\n margin: 2rem 0;\n }\n\n .styled-list li {\n padding: 1rem;\n margin: 0.5rem 0;\n background: rgba(74, 246, 38, 0.05);\n border-left: 4px solid var(--terminal-green);\n transition: all 0.3s ease;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n }\n\n .styled-list li:hover {\n background: rgba(74, 246, 38, 0.1);\n padding-left: 1.5rem;\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.2);\n }\n\n .styled-list li::before {\n content: \"\u25b8 \";\n color: var(--terminal-green);\n font-weight: bold;\n margin-right: 0.5rem;\n }\n\n \/* Info cards *\/\n .info-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin: 2rem 0;\n }\n\n .info-card {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n transition: all 0.3s ease;\n }\n\n .info-card:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.3);\n transform: translateY(-5px);\n }\n\n .info-card-value {\n font-size: 2.5rem;\n font-weight: bold;\n margin-bottom: 0.5rem;\n }\n\n .info-card-label {\n font-size: 1.2rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* Progress bars pour comp\u00e9tences *\/\n .skill-bar-container {\n margin: 1.5rem 0;\n }\n\n .skill-bar-label {\n font-size: 1.3rem;\n margin-bottom: 0.5rem;\n display: flex;\n justify-content: space-between;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .skill-bar {\n height: 8px;\n background: rgba(74, 246, 38, 0.1);\n border: 1px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n }\n\n .skill-bar-fill {\n height: 100%;\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n transition: width 1s ease;\n width: 0;\n }\n\n \/* Sections avec ic\u00f4nes *\/\n .icon-section {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin: 2rem 0;\n }\n\n .icon-item {\n display: flex;\n align-items: center;\n padding: 1rem;\n background: rgba(74, 246, 38, 0.05);\n border: 1px solid var(--terminal-green);\n transition: all 0.3s ease;\n }\n\n .icon-item:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.2);\n }\n\n .icon-item-icon {\n font-size: 2rem;\n margin-right: 1rem;\n min-width: 40px;\n text-align: center;\n }\n\n .icon-item-text {\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n }\n\n \/* Project cards *\/\n .projects-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .project-card {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 2rem;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .project-card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(74, 246, 38, 0.2), transparent);\n transition: left 0.5s ease;\n }\n\n .project-card:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.3);\n transform: translateY(-5px);\n }\n\n .project-card:hover::before {\n left: 100%;\n }\n\n .project-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n }\n\n .project-desc {\n font-size: 1.2rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .project-tags {\n margin-top: 1rem;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n\n .tag {\n padding: 0.3rem 0.8rem;\n background: rgba(74, 246, 38, 0.2);\n border: 1px solid var(--terminal-green);\n font-size: 1rem;\n }\n\n \/* Timeline *\/\n .timeline {\n position: relative;\n padding-left: 4rem;\n margin-top: 3rem;\n }\n\n .timeline::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background: linear-gradient(\n to bottom,\n transparent,\n var(--terminal-green) 5%,\n var(--terminal-green) 95%,\n transparent\n );\n box-shadow: 0 0 15px var(--terminal-glow);\n }\n\n .timeline-item {\n position: relative;\n margin-bottom: 3rem;\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid rgba(74, 246, 38, 0.3);\n border-left: 4px solid var(--terminal-green);\n padding: 2rem;\n transition: all 0.4s ease;\n cursor: pointer;\n }\n\n .timeline-item::before {\n content: '';\n position: absolute;\n left: -4.8rem;\n top: 2rem;\n width: 30px;\n height: 30px;\n background: var(--terminal-bg);\n border: 4px solid var(--terminal-green);\n border-radius: 50%;\n box-shadow: \n 0 0 20px var(--terminal-glow),\n inset 0 0 10px var(--terminal-glow);\n animation: pulse-timeline 2s infinite;\n }\n\n .timeline-item::after {\n content: '';\n position: absolute;\n left: -2.9rem;\n top: 2.9rem;\n width: 40px;\n height: 2px;\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n @keyframes pulse-timeline {\n 0%, 100% {\n box-shadow: 0 0 20px var(--terminal-glow), inset 0 0 10px var(--terminal-glow);\n }\n 50% {\n box-shadow: 0 0 35px var(--terminal-glow), inset 0 0 15px var(--terminal-glow);\n }\n }\n\n .timeline-item:hover {\n background: rgba(74, 246, 38, 0.08);\n border-left-width: 8px;\n box-shadow: 0 5px 30px rgba(74, 246, 38, 0.2);\n transform: translateX(10px);\n }\n\n .timeline-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n .timeline-date {\n font-size: 1.4rem;\n padding: 0.5rem 1.2rem;\n background: rgba(74, 246, 38, 0.15);\n border: 2px solid var(--terminal-green);\n letter-spacing: 0.15rem;\n box-shadow: 0 0 10px rgba(74, 246, 38, 0.3);\n }\n\n .timeline-status {\n font-size: 1.1rem;\n padding: 0.4rem 1rem;\n background: rgba(74, 246, 38, 0.25);\n border: 1px solid var(--terminal-green);\n animation: pulse-badge 2s infinite;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n\n @keyframes pulse-badge {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.6; }\n }\n\n .timeline-title {\n font-size: 2rem;\n margin-bottom: 0.8rem;\n color: var(--terminal-green);\n text-shadow: 0 0 8px var(--terminal-glow);\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .timeline-title::before {\n content: \"\u25b8\";\n font-size: 1.5rem;\n }\n\n .timeline-company {\n font-size: 1.3rem;\n opacity: 0.85;\n margin-bottom: 1.5rem;\n font-family: 'IBM Plex Mono', monospace;\n padding-left: 2rem;\n border-left: 2px solid rgba(74, 246, 38, 0.3);\n }\n\n .timeline-desc {\n font-size: 1.2rem;\n opacity: 0.9;\n font-family: 'IBM Plex Mono', monospace;\n line-height: 2;\n padding-left: 1rem;\n }\n\n \/* Skills *\/\n .skills-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n }\n\n .skill-category {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n }\n\n .skill-category-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n border-bottom: 1px solid var(--terminal-green);\n padding-bottom: 0.5rem;\n }\n\n .skill-item {\n font-size: 1.3rem;\n padding: 0.5rem 0;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .skill-item::before {\n content: '\u25b8 ';\n color: var(--terminal-green);\n }\n\n \/* Contact form *\/\n .contact-form {\n max-width: 600px;\n margin-top: 2rem;\n }\n\n .form-group {\n margin-bottom: 2rem;\n }\n\n .form-label {\n display: block;\n font-size: 1.5rem;\n margin-bottom: 0.5rem;\n }\n\n .form-input,\n .form-textarea {\n width: 100%;\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n padding: 1rem;\n outline: none;\n transition: all 0.3s ease;\n }\n\n .form-input:focus,\n .form-textarea:focus {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.3);\n }\n\n .form-textarea {\n min-height: 150px;\n resize: vertical;\n }\n\n .form-button {\n background: transparent;\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-family: 'VT323', monospace;\n font-size: 1.5rem;\n padding: 1rem 3rem;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.2rem;\n }\n\n .form-button:hover {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.5);\n }\n\n \/* Modal\/Pop-up Windows 95 style *\/\n .modal-overlay {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.8);\n z-index: 10001;\n animation: fadeIn 0.3s ease;\n }\n\n .modal-overlay.active {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .modal-window {\n background: var(--terminal-bg);\n border: 3px solid var(--terminal-green);\n box-shadow: \n 0 0 40px rgba(74, 246, 38, 0.5),\n inset 0 0 20px rgba(74, 246, 38, 0.1);\n max-width: 900px;\n width: 90%;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n animation: slideDown 0.4s ease;\n }\n\n @keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-50px) scale(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n .modal-titlebar {\n background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 100%);\n border-bottom: 2px solid var(--terminal-green);\n padding: 0.8rem 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .modal-title {\n font-size: 1.5rem;\n letter-spacing: 0.1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .modal-title::before {\n content: \"\u25a3\";\n font-size: 1.2rem;\n }\n\n .modal-controls {\n display: flex;\n gap: 0.5rem;\n }\n\n .modal-btn {\n width: 30px;\n height: 30px;\n background: rgba(74, 246, 38, 0.1);\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-size: 1.2rem;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'VT323', monospace;\n }\n\n .modal-btn:hover {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n box-shadow: 0 0 15px rgba(74, 246, 38, 0.5);\n }\n\n .modal-btn-close::before {\n content: \"\u2715\";\n }\n\n .modal-btn-minimize::before {\n content: \"_\";\n }\n\n .modal-content {\n padding: 2rem;\n overflow-y: auto;\n flex: 1;\n }\n\n .modal-content::-webkit-scrollbar {\n width: 12px;\n }\n\n .modal-content::-webkit-scrollbar-track {\n background: rgba(74, 246, 38, 0.05);\n border: 1px solid var(--terminal-green);\n }\n\n .modal-content::-webkit-scrollbar-thumb {\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n }\n\n .modal-section {\n margin-bottom: 2rem;\n }\n\n .modal-section-title {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n border-bottom: 1px solid var(--terminal-green);\n padding-bottom: 0.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .modal-section-title::before {\n content: \"\u25b8\";\n color: var(--terminal-green);\n }\n\n .modal-text {\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.2rem;\n line-height: 1.8;\n margin-bottom: 1rem;\n }\n\n .modal-table {\n width: 100%;\n border-collapse: collapse;\n margin: 1.5rem 0;\n background: rgba(74, 246, 38, 0.02);\n }\n\n .modal-table th,\n .modal-table td {\n border: 1px solid var(--terminal-green);\n padding: 0.8rem;\n text-align: left;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.1rem;\n }\n\n .modal-table th {\n background: rgba(74, 246, 38, 0.15);\n font-weight: bold;\n }\n\n .modal-table tr:hover {\n background: rgba(74, 246, 38, 0.08);\n }\n\n .modal-list {\n list-style: none;\n margin: 1rem 0;\n }\n\n .modal-list li {\n padding: 0.5rem 0 0.5rem 1.5rem;\n position: relative;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.1rem;\n }\n\n .modal-list li::before {\n content: \"\u25b8\";\n position: absolute;\n left: 0;\n color: var(--terminal-green);\n }\n\n .status-badge {\n display: inline-block;\n padding: 0.3rem 0.8rem;\n background: rgba(74, 246, 38, 0.2);\n border: 1px solid var(--terminal-green);\n font-size: 1rem;\n margin: 0.5rem 0.5rem 0.5rem 0;\n }\n\n .status-badge.active {\n background: rgba(74, 246, 38, 0.3);\n animation: pulse-badge 2s infinite;\n }\n\n .modal-footer {\n border-top: 2px solid var(--terminal-green);\n padding: 1rem 2rem;\n background: rgba(74, 246, 38, 0.05);\n display: flex;\n justify-content: flex-end;\n gap: 1rem;\n }\n\n .modal-footer-btn {\n background: transparent;\n border: 2px solid var(--terminal-green);\n color: var(--terminal-green);\n font-family: 'VT323', monospace;\n font-size: 1.3rem;\n padding: 0.8rem 2rem;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n }\n\n .modal-footer-btn:hover {\n background: var(--terminal-green);\n color: var(--terminal-bg);\n box-shadow: 0 0 20px rgba(74, 246, 38, 0.5);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .main-container {\n flex-direction: column;\n }\n\n .sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 2px solid var(--terminal-green);\n }\n\n .content-area {\n padding: 2rem 1rem;\n }\n\n .control-panel {\n flex-wrap: wrap;\n }\n\n .loading-title {\n font-size: 2.5rem;\n }\n\n .progress-bar {\n width: 90%;\n }\n\n .section-title {\n font-size: 2rem;\n }\n\n .timeline {\n padding-left: 2.5rem;\n }\n\n .timeline-item::before {\n left: -3.3rem;\n width: 20px;\n height: 20px;\n }\n\n .timeline-item::after {\n left: -2rem;\n width: 25px;\n }\n\n .modal-window {\n width: 95%;\n max-height: 90vh;\n }\n }\n \/* ============================================\n SECTION 1: ACTIVIT\u00c9S HEBDOMADAIRES\n ============================================ *\/\n\n .activities-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n perspective: 1000px;\n }\n\n .activity-card {\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid var(--terminal-green);\n padding: 0;\n position: relative;\n overflow: hidden;\n transition: all 0.4s ease;\n cursor: pointer;\n transform-style: preserve-3d;\n }\n\n .activity-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(74, 246, 38, 0.3),\n transparent\n );\n animation: scan-activity 3s linear infinite;\n }\n\n @keyframes scan-activity {\n 0% { left: -100%; }\n 100% { left: 100%; }\n }\n\n .activity-card:hover {\n background: rgba(74, 246, 38, 0.08);\n box-shadow: \n 0 10px 40px rgba(74, 246, 38, 0.4),\n inset 0 0 30px rgba(74, 246, 38, 0.2);\n transform: translateY(-10px) rotateX(5deg);\n border-color: var(--terminal-green);\n }\n\n .activity-header {\n background: linear-gradient(135deg, rgba(74, 246, 38, 0.15), rgba(74, 246, 38, 0.05));\n padding: 1.5rem;\n border-bottom: 2px solid var(--terminal-green);\n display: flex;\n align-items: center;\n gap: 1rem;\n position: relative;\n overflow: hidden;\n }\n\n .activity-header::after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 45deg,\n transparent,\n transparent 10px,\n rgba(74, 246, 38, 0.05) 10px,\n rgba(74, 246, 38, 0.05) 20px\n );\n animation: slide-pattern 20s linear infinite;\n }\n\n @keyframes slide-pattern {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(40px); }\n }\n\n .activity-icon {\n font-size: 3rem;\n width: 70px;\n height: 70px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(74, 246, 38, 0.2);\n border: 3px solid var(--terminal-green);\n border-radius: 50%;\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n animation: rotate-icon 10s linear infinite;\n }\n\n @keyframes rotate-icon {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(360deg); }\n }\n\n .activity-title {\n font-size: 1.6rem;\n color: var(--terminal-green);\n text-shadow: 0 0 10px var(--terminal-glow);\n flex: 1;\n position: relative;\n z-index: 1;\n animation: glitch-text 5s infinite;\n }\n\n @keyframes glitch-text {\n 0%, 90%, 100% { transform: translateX(0); }\n 92% { transform: translateX(-2px); }\n 94% { transform: translateX(2px); }\n 96% { transform: translateX(-2px); }\n 98% { transform: translateX(2px); }\n }\n\n .activity-body {\n padding: 1.5rem;\n }\n\n .activity-time {\n font-size: 3rem;\n font-weight: bold;\n color: var(--terminal-green);\n text-shadow: 0 0 15px var(--terminal-glow);\n text-align: center;\n margin-bottom: 1rem;\n animation: pulse-time 2s infinite;\n }\n\n @keyframes pulse-time {\n 0%, 100% { \n transform: scale(1);\n text-shadow: 0 0 15px var(--terminal-glow);\n }\n 50% { \n transform: scale(1.1);\n text-shadow: 0 0 25px var(--terminal-glow), 0 0 35px var(--terminal-glow);\n }\n }\n\n .activity-bar {\n height: 30px;\n background: #000;\n border: 2px solid var(--terminal-green);\n position: relative;\n overflow: hidden;\n margin-bottom: 1rem;\n }\n\n .activity-bar-fill {\n height: 100%;\n background: linear-gradient(\n 90deg,\n var(--terminal-green),\n #00ff00,\n var(--terminal-green)\n );\n background-size: 200% 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n color: #000;\n font-weight: bold;\n transition: width 1s ease;\n box-shadow: 0 0 20px var(--terminal-glow);\n animation: shimmer 2s linear infinite;\n }\n\n @keyframes shimmer {\n 0% { background-position: 0% 0%; }\n 100% { background-position: 200% 0%; }\n }\n\n .activity-desc {\n font-size: 1.1rem;\n opacity: 0.9;\n font-family: 'IBM Plex Mono', monospace;\n line-height: 1.6;\n text-align: center;\n }\n\n .activity-badge {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: rgba(74, 246, 38, 0.3);\n border: 2px solid var(--terminal-green);\n padding: 0.4rem 0.8rem;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n animation: pulse-badge 2s infinite;\n z-index: 10;\n box-shadow: 0 0 15px var(--terminal-glow);\n }\n\n \/* ============================================\n SECTION 2: STACK TECHNIQUE\n ============================================ *\/\n\n .tech-stack-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-top: 2rem;\n }\n\n .tech-item {\n background: rgba(74, 246, 38, 0.03);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n transition: all 0.4s ease;\n }\n\n .tech-item::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(\n circle,\n rgba(74, 246, 38, 0.2) 0%,\n transparent 70%\n );\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n\n .tech-item:hover::before {\n opacity: 1;\n animation: rotate-gradient 3s linear infinite;\n }\n\n @keyframes rotate-gradient {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .tech-item:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.5);\n transform: scale(1.05);\n }\n\n .tech-logo {\n font-size: 4rem;\n margin-bottom: 1rem;\n filter: drop-shadow(0 0 10px var(--terminal-glow));\n animation: float-logo 3s ease-in-out infinite;\n }\n\n @keyframes float-logo {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n .tech-name {\n font-size: 1.4rem;\n margin-bottom: 1rem;\n color: var(--terminal-green);\n text-shadow: 0 0 5px var(--terminal-glow);\n }\n\n .tech-level {\n font-size: 1rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n margin-bottom: 1rem;\n }\n\n .tech-progress {\n height: 8px;\n background: #000;\n border: 1px solid var(--terminal-green);\n overflow: hidden;\n }\n\n .tech-progress-fill {\n height: 100%;\n background: var(--terminal-green);\n box-shadow: 0 0 10px var(--terminal-glow);\n transition: width 1.5s ease;\n animation: pulse-progress 2s infinite;\n }\n\n @keyframes pulse-progress {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n \/* ============================================\n SECTION 3: PROJETS EN COURS (Terminal Live)\n ============================================ *\/\n\n .projects-terminal {\n background: #000;\n border: 3px solid var(--terminal-green);\n padding: 0;\n margin: 2rem 0;\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.3);\n position: relative;\n overflow: hidden;\n }\n\n .projects-terminal::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 2px,\n rgba(74, 246, 38, 0.03) 2px,\n rgba(74, 246, 38, 0.03) 4px\n );\n pointer-events: none;\n animation: scanlines 0.1s linear infinite;\n }\n\n .terminal-header {\n background: linear-gradient(90deg, #1a1a1a, #2a2a2a);\n padding: 0.8rem 1rem;\n border-bottom: 2px solid var(--terminal-green);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .terminal-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 1px solid var(--terminal-green);\n }\n\n .terminal-dot:nth-child(1) {\n background: #ff5f56;\n animation: blink-dot 1s infinite;\n }\n\n .terminal-dot:nth-child(2) {\n background: #ffbd2e;\n animation: blink-dot 1.5s infinite;\n }\n\n .terminal-dot:nth-child(3) {\n background: #27c93f;\n animation: blink-dot 2s infinite;\n }\n\n @keyframes blink-dot {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n .terminal-title {\n flex: 1;\n text-align: center;\n font-size: 1.2rem;\n letter-spacing: 0.1rem;\n }\n\n .terminal-body {\n padding: 1.5rem;\n font-family: 'IBM Plex Mono', monospace;\n font-size: 1.1rem;\n line-height: 1.8;\n max-height: 400px;\n overflow-y: auto;\n }\n\n .terminal-line {\n margin-bottom: 0.5rem;\n opacity: 0;\n animation: type-line 0.5s ease forwards;\n }\n\n @keyframes type-line {\n to { opacity: 1; }\n }\n\n .terminal-line::before {\n content: \"$ \";\n color: var(--terminal-green);\n font-weight: bold;\n }\n\n .terminal-line.output {\n padding-left: 1rem;\n opacity: 0.8;\n }\n\n .terminal-line.output::before {\n content: \"\u2192 \";\n }\n\n .terminal-line.success {\n color: #00ff00;\n }\n\n .terminal-line.warning {\n color: #ffcc00;\n }\n\n .terminal-line.error {\n color: #ff0000;\n }\n\n .terminal-cursor {\n display: inline-block;\n width: 10px;\n height: 1.2rem;\n background: var(--terminal-green);\n animation: blink-cursor 1s infinite;\n margin-left: 5px;\n }\n\n @keyframes blink-cursor {\n 0%, 49% { opacity: 1; }\n 50%, 100% { opacity: 0; }\n }\n\n \/* ============================================\n SECTION 4: CERTIFICATIONS & BADGES\n ============================================ *\/\n\n .badges-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1.5rem;\n margin-top: 2rem;\n }\n\n .badge-item {\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n cursor: pointer;\n transition: all 0.4s ease;\n overflow: hidden;\n }\n\n .badge-item::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n background: radial-gradient(\n circle,\n rgba(74, 246, 38, 0.3),\n transparent\n );\n transform: translate(-50%, -50%);\n transition: all 0.5s ease;\n }\n\n .badge-item:hover::before {\n width: 200%;\n height: 200%;\n }\n\n .badge-item:hover {\n box-shadow: 0 0 40px rgba(74, 246, 38, 0.6);\n transform: scale(1.1) rotate(5deg);\n }\n\n .badge-icon {\n font-size: 4rem;\n margin-bottom: 1rem;\n position: relative;\n z-index: 1;\n animation: bounce-badge 2s infinite;\n }\n\n @keyframes bounce-badge {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-15px); }\n }\n\n .badge-name {\n font-size: 1.2rem;\n color: var(--terminal-green);\n margin-bottom: 0.5rem;\n position: relative;\n z-index: 1;\n }\n\n .badge-date {\n font-size: 0.9rem;\n opacity: 0.7;\n font-family: 'IBM Plex Mono', monospace;\n position: relative;\n z-index: 1;\n }\n\n \/* ============================================\n SECTION 5: WORKFLOW & OUTILS\n ============================================ *\/\n\n .workflow-diagram {\n background: rgba(74, 246, 38, 0.02);\n border: 2px solid var(--terminal-green);\n padding: 3rem;\n margin: 2rem 0;\n position: relative;\n overflow: hidden;\n }\n\n .workflow-diagram::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: \n repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 50px,\n rgba(74, 246, 38, 0.05) 50px,\n rgba(74, 246, 38, 0.05) 51px\n ),\n repeating-linear-gradient(\n 90deg,\n transparent,\n transparent 50px,\n rgba(74, 246, 38, 0.05) 50px,\n rgba(74, 246, 38, 0.05) 51px\n );\n pointer-events: none;\n }\n\n .workflow-steps {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 2rem;\n position: relative;\n z-index: 1;\n }\n\n .workflow-step {\n flex: 1;\n min-width: 150px;\n background: rgba(74, 246, 38, 0.05);\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n transition: all 0.4s ease;\n cursor: pointer;\n }\n\n .workflow-step::after {\n content: '\u2192';\n position: absolute;\n right: -2rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n color: var(--terminal-green);\n animation: arrow-pulse 1.5s infinite;\n }\n\n .workflow-step:last-child::after {\n display: none;\n }\n\n @keyframes arrow-pulse {\n 0%, 100% { opacity: 1; transform: translateY(-50%) translateX(0); }\n 50% { opacity: 0.5; transform: translateY(-50%) translateX(10px); }\n }\n\n .workflow-step:hover {\n background: rgba(74, 246, 38, 0.1);\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.4);\n transform: translateY(-10px);\n }\n\n .workflow-icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n }\n\n .workflow-name {\n font-size: 1.3rem;\n color: var(--terminal-green);\n margin-bottom: 0.5rem;\n }\n\n .workflow-desc {\n font-size: 1rem;\n opacity: 0.8;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n \/* ============================================\n SECTION 6: STATISTIQUES DE CODE\n ============================================ *\/\n\n .code-stats-dashboard {\n background: rgba(74, 246, 38, 0.02);\n border: 3px solid var(--terminal-green);\n padding: 2rem;\n margin: 2rem 0;\n box-shadow: 0 0 30px rgba(74, 246, 38, 0.3);\n }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .stat-box {\n background: #000;\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n\n .stat-box::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(74, 246, 38, 0.2),\n transparent\n );\n animation: scan-stat 2s linear infinite;\n }\n\n @keyframes scan-stat {\n 0% { left: -100%; }\n 100% { left: 100%; }\n }\n\n .stat-value {\n font-size: 3rem;\n font-weight: bold;\n color: var(--terminal-green);\n text-shadow: 0 0 15px var(--terminal-glow);\n margin-bottom: 0.5rem;\n animation: count-up 2s ease;\n }\n\n @keyframes count-up {\n from { opacity: 0; transform: scale(0.5); }\n to { opacity: 1; transform: scale(1); }\n }\n\n .stat-label {\n font-size: 1.1rem;\n opacity: 0.8;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n font-family: 'IBM Plex Mono', monospace;\n }\n\n .code-graph {\n background: #000;\n border: 2px solid var(--terminal-green);\n padding: 1.5rem;\n margin-top: 1.5rem;\n }\n\n .graph-title {\n font-size: 1.4rem;\n margin-bottom: 1rem;\n color: var(--terminal-green);\n text-align: center;\n }\n\n .graph-bars {\n display: flex;\n align-items: flex-end;\n justify-content: space-around;\n height: 200px;\n gap: 1rem;\n }\n\n .graph-bar {\n flex: 1;\n background: linear-gradient(\n to top,\n var(--terminal-green),\n rgba(74, 246, 38, 0.3)\n );\n border: 1px solid var(--terminal-green);\n position: relative;\n transition: all 0.5s ease;\n cursor: pointer;\n animation: grow-bar 1.5s ease;\n }\n\n @keyframes grow-bar {\n from { height: 0; }\n }\n\n .graph-bar:hover {\n box-shadow: 0 0 20px var(--terminal-glow);\n filter: brightness(1.3);\n }\n\n .graph-bar-label {\n position: absolute;\n bottom: -25px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 0.9rem;\n white-space: nowrap;\n }\n\n .graph-bar-value {\n position: absolute;\n top: -25px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 1rem;\n font-weight: bold;\n color: var(--terminal-green);\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .activities-grid,\n .tech-stack-grid,\n .badges-container {\n grid-template-columns: 1fr;\n }\n\n .workflow-steps {\n flex-direction: column;\n }\n\n .workflow-step::after {\n content: '\u2193';\n right: 50%;\n top: auto;\n bottom: -2rem;\n transform: translateX(50%);\n }\n\n .graph-bars {\n height: 150px;\n }\n }\n\n <\/style>\n<\/head>\n<body>\n <div class=\"crt-container\" id=\"crtContainer\">\n \n <div class=\"vhs-overlay\"><\/div>\n <div class=\"vhs-bands\"><\/div>\n\n \n <div class=\"control-panel\">\n <button class=\"control-button\" id=\"audioToggle\">\ud83d\udd0a AUDIO<\/button>\n <button class=\"control-button\" id=\"vhsToggle\">VHS MODE<\/button>\n <\/div>\n\n \n <div id=\"loading-screen\">\n <div class=\"loading-title glow-strong\">TERMINAL PORTFOLIO<\/div>\n <div class=\"loading-subtitle\">SYST\u00c8ME D’INFORMATION PERSONNEL<\/div>\n <div class=\"loading-text\">CONNEXION EN COURS…<\/div>\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"progress-fill\"><\/div>\n <\/div>\n <\/div>\n\n \n <header class=\"terminal-header\">\n <div class=\"terminal-title glow\">\u00c9MILE SNYERS \u2014 PORTFOLIO<\/div>\n <div class=\"terminal-info\">SYST\u00c8ME V7.0 | <span id=\"current-time\"><\/span><\/div>\n <\/header>\n\n \n <div class=\"main-container\">\n \n <aside class=\"sidebar\">\n <nav>\n <div class=\"menu-section\">\n <div class=\"menu-title\">NAVIGATION<\/div>\n <div class=\"menu-item\" data-page=\"accueil\">ACCUEIL<\/div>\n <div class=\"menu-item\" data-page=\"projets\">PROJETS<\/div>\n <div class=\"menu-item\" data-page=\"experience\">EXP\u00c9RIENCE<\/div>\n <div class=\"menu-item\" data-page=\"competences\">COMP\u00c9TENCES<\/div>\n <div class=\"menu-item\" data-page=\"contact\">CONTACT<\/div>\n <\/div>\n \n <div class=\"menu-section\">\n <div class=\"menu-title\">SYST\u00c8ME<\/div>\n <div class=\"menu-item\" data-page=\"diagnostic\">DIAGNOSTIC<\/div>\n <\/div>\n <\/nav>\n <\/aside>\n\n \n <main class=\"content-area\">\n \n <section id=\"accueil\" class=\"page-section active\">\n <h1 class=\"section-title glow\">ACCUEIL \u2014 PR\u00c9SENTATION<\/h1>\n \n <div class=\"section-content\">\n <p style=\"margin-bottom: 2rem;\">\n Bienvenue sur mon portfolio interactif. Je suis \u00c9mile Snyers, passionn\u00e9 par la technologie \n et sp\u00e9cialis\u00e9 dans la gestion de projets IT, le d\u00e9veloppement d’outils internes et \n l’optimisation des syst\u00e8mes d’information.\n <\/p>\n\n \n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">TEEPEE<\/div>\n <div class=\"info-card-label\">FORMULAIRES & WORKFLOWS & GESTION D’ACTIFS<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">GPIT<\/div>\n <div class=\"info-card-label\">INVENTAIRE & ticket suport<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">FUSION 360<\/div>\n <div class=\"info-card-label\">Mod\u00e9lisation de pi\u00e8ces 3D pour impression <\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value glow\">WEB\/3D<\/div>\n <div class=\"info-card-label\">OUTILS & PROTOTYPES<\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> DOMAINES D’EXPERTISE<\/h2>\n \n <div class=\"icon-section\">\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udda5\ufe0f<\/div>\n <div class=\"icon-item-text\">Gestion de Parcs IT<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\u2699\ufe0f<\/div>\n <div class=\"icon-item-text\">Automatisation & TeePee<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83c\udf10<\/div>\n <div class=\"icon-item-text\">D\u00e9veloppement Web<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcca<\/div>\n <div class=\"icon-item-text\">Gestion de Donn\u00e9es<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udd27<\/div>\n <div class=\"icon-item-text\">Support Technique<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcdd<\/div>\n <div class=\"icon-item-text\">Documentation<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"custom-content-area\">\n <div class=\"custom-content-placeholder\">\n [ ESPACE PERSONNALISABLE 1 ]<br>\n <small>Vous pouvez ajouter votre contenu ici<\/small>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"projets\" class=\"page-section\">\n <h1 class=\"section-title glow\">PROJETS<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">> TABLEAU R\u00c9CAPITULATIF DES PROJETS<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr>\n <th>PROJET<\/th><th>TYPE<\/th><th>ANN\u00c9E<\/th><th>STATUT<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>GPIT \u2014 Gestion de Parc IT (TeePee)<\/td><td>Interne<\/td><td>2023\u20132025<\/td><td style=\"color: #4af626;\">\u2713 ACTIF<\/td>\n <\/tr>\n <tr>\n <td>Site m\u00e9t\u00e9o (API)<\/td><td>Web<\/td><td>2024\u20132025<\/td><td style=\"color: #4af626;\">\u2713 EN LIGNE<\/td>\n <\/tr>\n <tr>\n <td>GLPI sur OVH<\/td><td>Technique<\/td><td>2020\u20132024<\/td><td style=\"color: #4af626;\">\u2713 COMPL\u00c9T\u00c9<\/td>\n <\/tr>\n <tr>\n <td>QCM.ovh<\/td><td>Web<\/td><td>2025<\/td><td style=\"color: #4af626;\">\u23f3 EN D\u00c9V.<\/td>\n <\/tr>\n <tr>\n <td>Convertisseur de nombres en lettres<\/td><td>Web<\/td><td>2024<\/td><td style=\"color: #4af626;\">\u2713 EN LIGNE<\/td>\n <\/tr>\n <tr>\n <td>SPOT \u2013 Simulation de r\u00e9seaux de tuyaux<\/td><td>Web \/ POC<\/td><td>2024<\/td><td style=\"color: #4af626;\">\u2713 OP\u00c9RATIONNEL<\/td>\n <\/tr>\n <tr>\n <td>Outil de calcul de dur\u00e9es<\/td><td>Web<\/td><td>2024<\/td><td style=\"color: #4af626;\">\u2713 EN LIGNE<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> D\u00c9TAILS DES PROJETS<\/h2>\n <div class=\"projects-grid\">\n\n <div class=\"project-card\" data-project=\"gpit\">\n <div class=\"project-title glow\">GPIT \u2014 GESTION DE PARC IT (TEEPEE)<\/div>\n <div class=\"project-desc\">Outil interne : inventaire, anti-doublons, localisation et g\u00e9n\u00e9ration automatique des documents AMD\/ARM (multi-appareil).<\/div>\n <div class=\"project-tags\"><span class=\"tag\">TEEPEE<\/span><span class=\"tag\">NO-CODE<\/span><span class=\"tag\">IT<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"meteo\">\n <div class=\"project-title glow\">SITE M\u00c9T\u00c9O (API)<\/div>\n <div class=\"project-desc\">Pr\u00e9visions pour 150+ villes : vent, humidit\u00e9, lever\/coucher du soleil, temp\u00e9ratures max\/min et ressenties.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">API<\/span><span class=\"tag\">WEB<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"glpi\">\n <div class=\"project-title glow\">GLPI SUR OVH<\/div>\n <div class=\"project-desc\">D\u00e9ploiement et configuration complets (mod\u00e8les, plugins, formulaires, projets\/t\u00e2ches) pour gestion d’actifs.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">GLPI<\/span><span class=\"tag\">IT<\/span><span class=\"tag\">OVH<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"qcm\">\n <div class=\"project-title glow\">QCM.OVH<\/div>\n <div class=\"project-desc\">Cr\u00e9ation\/partage de QCM personnalis\u00e9s, base de donn\u00e9es pour r\u00e9ponses et analyses (en d\u00e9veloppement).<\/div>\n <div class=\"project-tags\"><span class=\"tag\">WEB<\/span><span class=\"tag\">QCM<\/span><span class=\"tag\">DB<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"cmd\">\n <div class=\"project-title glow\">CMD AVENTURE<\/div>\n <div class=\"project-desc\">Petit jeu r\u00e9tro : statistiques du personnage et progression via points de comp\u00e9tence.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">JEU<\/span><span class=\"tag\">PERSO<\/span><\/div>\n <\/div>\n\n <div class=\"project-card\" data-project=\"durees\">\n <div class=\"project-title glow\">OUTIL DE CALCUL DE DUR\u00c9ES<\/div>\n <div class=\"project-desc\">Addition\/soustraction de temps ; op\u00e9rations sur des dur\u00e9es complexes avec pr\u00e9cision.<\/div>\n <div class=\"project-tags\"><span class=\"tag\">OUTIL<\/span><span class=\"tag\">WEB<\/span><\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"custom-content-area\" style=\"margin-top: 3rem;\">\n <div class=\"custom-content-placeholder\">\n [ ESPACE PERSONNALISABLE 2 ]<br>\n <small>Zone pour futurs projets ou contenu additionnel<\/small>\n <\/div>\n <\/div>\n\n \n <div class=\"modal-overlay\" id=\"projectModal\">\n <div class=\"modal-window\">\n <div class=\"modal-titlebar\">\n <div class=\"modal-title\"><span id=\"modalProjectTitle\">D\u00c9TAILS DU PROJET<\/span><\/div>\n <div class=\"modal-controls\">\n <button class=\"modal-btn modal-btn-minimize\" title=\"R\u00e9duire\"><\/button>\n <button class=\"modal-btn modal-btn-close\" id=\"closeModal\" title=\"Fermer\"><\/button>\n <\/div>\n <\/div>\n <div class=\"modal-content\" id=\"modalContent\"><\/div>\n <div class=\"modal-footer\"><button class=\"modal-footer-btn\" id=\"closeModalFooter\">FERMER<\/button><\/div>\n <\/div>\n <\/div>\n\n <\/section>\n\n \n <section id=\"experience\" class=\"page-section\">\n <h1 class=\"section-title glow\">EXP\u00c9RIENCE PROFESSIONNELLE<\/h1>\n \n <div class=\"timeline\">\n\n <div class=\"timeline-item\">\n <div class=\"timeline-header\">\n <div class=\"timeline-date glow\">2023 – PR\u00c9SENT<\/div>\n <div class=\"timeline-status\">\u25cf EN COURS<\/div>\n <\/div>\n <div class=\"timeline-title\">INFORMATICIEN \u2014 D\u00c9PLOIEMENT TEEPEE & PARC IT<\/div>\n <div class=\"timeline-company\">\ud83d\udccd Kellal (p\u00f4le nucl\u00e9aire de VINCI Energies)<\/div>\n <div class=\"timeline-desc\">\n \u2022 Num\u00e9risation des proc\u00e9dures avec TeePee (formulaires, r\u00e8gles, kanban)<br>\n \u2022 Gestion de l’inventaire (GPIT), remises\/restitutions et documents AMD\/ARM<br>\n \u2022 D\u00e9ploiements & support (PC, tablettes, t\u00e9l\u00e9phones)<br>\n \u2022 Contribution \u00e0 des prototypes 3D (Fusion 360 \/ FreeCAD)\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-header\">\n <div class=\"timeline-date glow\">Stage<\/div>\n <\/div>\n <div class=\"timeline-title\">STAGIAIRE ASSISTANT INFORMATIQUE<\/div>\n <div class=\"timeline-company\">\ud83d\udccd Omega Informatique<\/div>\n <div class=\"timeline-desc\">\n \u2022 Diagnostic pannes \u2022 Migrations HDD\u2192SSD \u2022 Installations Windows \u2022 Master USB\n <\/div>\n <\/div>\n\n <div class=\"timeline-item\">\n <div class=\"timeline-header\">\n <div class=\"timeline-date glow\">Stage<\/div>\n <\/div>\n <div class=\"timeline-title\">STAGIAIRE \u2014 COMMUNAUT\u00c9 DE COMMUNES<\/div>\n <div class=\"timeline-company\">\ud83d\udccd Les Balcons du Dauphin\u00e9<\/div>\n <div class=\"timeline-desc\">\n \u2022 Pr\u00e9paration de postes \u2022 Organisation des stocks \u2022 Assistance utilisateurs\n <\/div>\n <\/div>\n\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> RESPONSABILIT\u00c9S ACTUELLES<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>RESPONSABILIT\u00c9<\/th><th>DESCRIPTION<\/th><th>FR\u00c9QUENCE<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Inventaire & parc<\/td><td>Suivi mat\u00e9riels, affectations, restitutions<\/td><td>Quotidien<\/td>\n <\/tr>\n <tr>\n <td>Formulaires TeePee<\/td><td>Conception, r\u00e8gles, kanban<\/td><td>Hebdomadaire<\/td>\n <\/tr>\n <tr>\n <td>Documents AMD\/ARM<\/td><td>G\u00e9n\u00e9ration automatique & standardisation<\/td><td>Quotidien<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9ploiements & support<\/td><td>Postes, tablettes, t\u00e9l\u00e9phones<\/td><td>Hebdomadaire<\/td>\n <\/tr>\n <tr>\n <td>Automatisations<\/td><td>Workflows et simplification des processus<\/td><td>Mensuel<\/td>\n <\/tr>\n <tr>\n <td>Documentation<\/td><td>R\u00e9daction de guides internes<\/td><td>Mensuel<\/td>\n <\/tr>\n <tr>\n <td>Prototypage 3D<\/td><td>Pi\u00e8ces\/tests simples<\/td><td>Ponctuel<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n \n <section id=\"competences\" class=\"page-section\">\n <h1 class=\"section-title glow\">COMP\u00c9TENCES<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1.5rem 0;\">> NIVEAU DE MA\u00ceTRISE<\/h2>\n\n \n <div style=\"margin: 2rem 0;\">\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>TeePee (no-code)<\/span><span>85%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"85\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>GLPI & Gestion d’actifs<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>HTML \/ CSS \/ JavaScript<\/span><span>75%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"75\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Active Directory & Microsoft 365<\/span><span>70%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"70\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Fusion 360 \/ FreeCAD (3D)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Scripts (Batch \/ PowerShell)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>SharePoint (sites internes)<\/span><span>65%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"65\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Support & D\u00e9ploiements<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> COMP\u00c9TENCES PAR CAT\u00c9GORIE<\/h2>\n\n \n <div class=\"skills-grid\">\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">NO-CODE \/ TEEPEE<\/div>\n <div class=\"skill-item\">Formulaires & r\u00e8gles<\/div>\n <div class=\"skill-item\">Kanban & droits<\/div>\n <div class=\"skill-item\">Automatisations<\/div>\n <div class=\"skill-item\">G\u00e9n\u00e9ration AMD\/ARM<\/div>\n <div class=\"skill-item\">Mobiles & tablettes<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">IT \/ SYST\u00c8MES<\/div>\n <div class=\"skill-item\">Inventaire & parc<\/div>\n <div class=\"skill-item\">GLPI<\/div>\n <div class=\"skill-item\">Active Directory<\/div>\n <div class=\"skill-item\">Microsoft 365<\/div>\n <div class=\"skill-item\">Sauvegardes (Veeam)<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">WEB<\/div>\n <div class=\"skill-item\">HTML \/ CSS \/ JS<\/div>\n <div class=\"skill-item\">Sites statiques & outils<\/div>\n <div class=\"skill-item\">API (m\u00e9t\u00e9o)<\/div>\n <div class=\"skill-item\">QCM (POC)<\/div>\n <div class=\"skill-item\">Accessibilit\u00e9 & simplicit\u00e9<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">3D \/ PROTO<\/div>\n <div class=\"skill-item\">Fusion 360<\/div>\n <div class=\"skill-item\">FreeCAD<\/div>\n <div class=\"skill-item\">Blender<\/div>\n <div class=\"skill-item\">Impression 3D (tests)<\/div>\n <div class=\"skill-item\">M\u00e9caniques simples<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">LANGUES<\/div>\n <div class=\"skill-item\">Fran\u00e7ais (Langue maternelle)<\/div>\n <div class=\"skill-item\">Anglais (Professionnel)<\/div>\n <div class=\"skill-item\">N\u00e9erlandais (Notions)<\/div>\n <\/div>\n <\/div>\n\n \n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> OUTILS ET LOGICIELS MA\u00ceTRIS\u00c9S<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>CAT\u00c9GORIE<\/th><th>OUTILS<\/th><th>NIVEAU<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Bureautique<\/td><td>Microsoft 365, Google Workspace<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>No-code<\/td><td>TeePee (formulaires, r\u00e8gles, kanban)<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>Gestion IT<\/td><td>GLPI, Active Directory<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>3D \/ Proto<\/td><td>Fusion 360, FreeCAD, Blender<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9veloppement<\/td><td>VS Code, Git, GitHub<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>Web<\/td><td>HTML, CSS, JavaScript<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section> <section id=\"competences\" class=\"page-section\">\n <h1 class=\"section-title glow\">COMP\u00c9TENCES<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1.5rem 0;\">> NIVEAU DE MA\u00ceTRISE<\/h2>\n\n \n <div style=\"margin: 2rem 0;\">\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>TeePee (no-code)<\/span><span>85%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"85\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>GLPI & Gestion d’actifs<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>HTML \/ CSS \/ JavaScript<\/span><span>75%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"75\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Active Directory & Microsoft 365<\/span><span>70%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"70\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Fusion 360 \/ FreeCAD (3D)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Scripts (Batch \/ PowerShell)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>SharePoint (sites internes)<\/span><span>65%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"65\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Support & D\u00e9ploiements<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> COMP\u00c9TENCES PAR CAT\u00c9GORIE<\/h2>\n\n \n <div class=\"skills-grid\">\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">NO-CODE \/ TEEPEE<\/div>\n <div class=\"skill-item\">Formulaires & r\u00e8gles<\/div>\n <div class=\"skill-item\">Kanban & droits<\/div>\n <div class=\"skill-item\">Automatisations<\/div>\n <div class=\"skill-item\">G\u00e9n\u00e9ration AMD\/ARM<\/div>\n <div class=\"skill-item\">Mobiles & tablettes<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">IT \/ SYST\u00c8MES<\/div>\n <div class=\"skill-item\">Inventaire & parc<\/div>\n <div class=\"skill-item\">GLPI<\/div>\n <div class=\"skill-item\">Active Directory<\/div>\n <div class=\"skill-item\">Microsoft 365<\/div>\n <div class=\"skill-item\">Sauvegardes (Veeam)<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">WEB<\/div>\n <div class=\"skill-item\">HTML \/ CSS \/ JS<\/div>\n <div class=\"skill-item\">Sites statiques & outils<\/div>\n <div class=\"skill-item\">API (m\u00e9t\u00e9o)<\/div>\n <div class=\"skill-item\">QCM (POC)<\/div>\n <div class=\"skill-item\">Accessibilit\u00e9 & simplicit\u00e9<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">3D \/ PROTO<\/div>\n <div class=\"skill-item\">Fusion 360<\/div>\n <div class=\"skill-item\">FreeCAD<\/div>\n <div class=\"skill-item\">Blender<\/div>\n <div class=\"skill-item\">Impression 3D (tests)<\/div>\n <div class=\"skill-item\">M\u00e9caniques simples<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">LANGUES<\/div>\n <div class=\"skill-item\">Fran\u00e7ais (Langue maternelle)<\/div>\n <div class=\"skill-item\">Anglais (Professionnel)<\/div>\n <div class=\"skill-item\">N\u00e9erlandais (Notions)<\/div>\n <\/div>\n <\/div>\n\n \n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> OUTILS ET LOGICIELS MA\u00ceTRIS\u00c9S<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>CAT\u00c9GORIE<\/th><th>OUTILS<\/th><th>NIVEAU<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Bureautique<\/td><td>Microsoft 365, Google Workspace<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>No-code<\/td><td>TeePee (formulaires, r\u00e8gles, kanban)<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>Gestion IT<\/td><td>GLPI, Active Directory<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>3D \/ Proto<\/td><td>Fusion 360, FreeCAD, Blender<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9veloppement<\/td><td>VS Code, Git, GitHub<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>Web<\/td><td>HTML, CSS, JavaScript<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section> <section id=\"competences\" class=\"page-section\">\n <h1 class=\"section-title glow\">COMP\u00c9TENCES<\/h1>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1.5rem 0;\">> NIVEAU DE MA\u00ceTRISE<\/h2>\n\n \n <div style=\"margin: 2rem 0;\">\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>TeePee (no-code)<\/span><span>85%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"85\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>GLPI & Gestion d’actifs<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>HTML \/ CSS \/ JavaScript<\/span><span>75%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"75\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Active Directory & Microsoft 365<\/span><span>70%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"70\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Fusion 360 \/ FreeCAD (3D)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Scripts (Batch \/ PowerShell)<\/span><span>60%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"60\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>SharePoint (sites internes)<\/span><span>65%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"65\"><\/div><\/div>\n <\/div>\n\n <div class=\"skill-bar-container\">\n <div class=\"skill-bar-label\"><span>Support & D\u00e9ploiements<\/span><span>80%<\/span><\/div>\n <div class=\"skill-bar\"><div class=\"skill-bar-fill\" data-width=\"80\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> COMP\u00c9TENCES PAR CAT\u00c9GORIE<\/h2>\n\n \n <div class=\"skills-grid\">\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">NO-CODE \/ TEEPEE<\/div>\n <div class=\"skill-item\">Formulaires & r\u00e8gles<\/div>\n <div class=\"skill-item\">Kanban & droits<\/div>\n <div class=\"skill-item\">Automatisations<\/div>\n <div class=\"skill-item\">G\u00e9n\u00e9ration AMD\/ARM<\/div>\n <div class=\"skill-item\">Mobiles & tablettes<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">IT \/ SYST\u00c8MES<\/div>\n <div class=\"skill-item\">Inventaire & parc<\/div>\n <div class=\"skill-item\">GLPI<\/div>\n <div class=\"skill-item\">Active Directory<\/div>\n <div class=\"skill-item\">Microsoft 365<\/div>\n <div class=\"skill-item\">Sauvegardes (Veeam)<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">WEB<\/div>\n <div class=\"skill-item\">HTML \/ CSS \/ JS<\/div>\n <div class=\"skill-item\">Sites statiques & outils<\/div>\n <div class=\"skill-item\">API (m\u00e9t\u00e9o)<\/div>\n <div class=\"skill-item\">QCM (POC)<\/div>\n <div class=\"skill-item\">Accessibilit\u00e9 & simplicit\u00e9<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">3D \/ PROTO<\/div>\n <div class=\"skill-item\">Fusion 360<\/div>\n <div class=\"skill-item\">FreeCAD<\/div>\n <div class=\"skill-item\">Blender<\/div>\n <div class=\"skill-item\">Impression 3D (tests)<\/div>\n <div class=\"skill-item\">M\u00e9caniques simples<\/div>\n <\/div>\n\n <div class=\"skill-category\">\n <div class=\"skill-category-title glow\">LANGUES<\/div>\n <div class=\"skill-item\">Fran\u00e7ais (Langue maternelle)<\/div>\n <div class=\"skill-item\">Anglais (Professionnel)<\/div>\n <div class=\"skill-item\">N\u00e9erlandais (Notions)<\/div>\n <\/div>\n <\/div>\n\n \n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> OUTILS ET LOGICIELS MA\u00ceTRIS\u00c9S<\/h2>\n <table class=\"data-table\">\n <thead>\n <tr><th>CAT\u00c9GORIE<\/th><th>OUTILS<\/th><th>NIVEAU<\/th><\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Bureautique<\/td><td>Microsoft 365, Google Workspace<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>No-code<\/td><td>TeePee (formulaires, r\u00e8gles, kanban)<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>Gestion IT<\/td><td>GLPI, Active Directory<\/td><td>Avanc\u00e9<\/td>\n <\/tr>\n <tr>\n <td>3D \/ Proto<\/td><td>Fusion 360, FreeCAD, Blender<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>D\u00e9veloppement<\/td><td>VS Code, Git, GitHub<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <tr>\n <td>Web<\/td><td>HTML, CSS, JavaScript<\/td><td>Interm\u00e9diaire<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/section>\n\n \n <section id=\"contact\" class=\"page-section\">\n <h1 class=\"section-title glow\">CONTACT<\/h1>\n\n <div class=\"section-content\">\n <p style=\"margin-bottom: 3rem;\">\n N’h\u00e9sitez pas \u00e0 me contacter pour tout projet, collaboration ou opportunit\u00e9 professionnelle.\n <\/p>\n\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"info-card-value\">\ud83d\udce7<\/div>\n <div class=\"info-card-label\">Email<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">\ud83d\udcf1<\/div>\n <div class=\"info-card-label\">T\u00e9l\u00e9phone<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">\ud83d\udd17<\/div>\n <div class=\"info-card-label\">LinkedIn<\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">> FORMULAIRE DE CONTACT<\/h2>\n\n <form class=\"contact-form\" id=\"contact-form\">\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"name\">NOM<\/label>\n <input type=\"text\" id=\"name\" class=\"form-input\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"email\">EMAIL<\/label>\n <input type=\"email\" id=\"email\" class=\"form-input\" required>\n <\/div>\n\n <div class=\"form-group\">\n <label class=\"form-label\" for=\"message\">MESSAGE<\/label>\n <textarea id=\"message\" class=\"form-textarea\" required><\/textarea>\n <\/div>\n\n <button type=\"submit\" class=\"form-button\">ENVOYER<\/button>\n <\/form>\n <\/div>\n <\/section>\n\n\n \n <section id=\"activities\" class=\"page-section\">\n <h1 class=\"section-title glow\">\u26a1 ACTIVIT\u00c9S HEBDOMADAIRES<\/h1>\n \n <div class=\"activities-grid\">\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">PRIORIT\u00c9<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83c\udfa8<\/div>\n <div class=\"activity-title\">NO-CODE TOOLS<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">15H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 43%;\">43%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n D\u00e9veloppement d’applications sans code<br>\n Bubble, Webflow, Zapier, Make\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">CR\u00c9ATION<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udd27<\/div>\n <div class=\"activity-title\">FUSION 360<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">8H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 23%;\">23%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n Mod\u00e9lisation 3D et prototypage<br>\n Design industriel, CAO\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">BUREAUTIQUE<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udcca<\/div>\n <div class=\"activity-title\">WORD & EXCEL<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">5H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 14%;\">14%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n Documentation technique<br>\n Tableaux de bord, macros VBA\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">DEV<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udcbb<\/div>\n <div class=\"activity-title\">VS CODE<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">5H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 14%;\">14%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n D\u00e9veloppement web et scripts<br>\n HTML, CSS, JavaScript, Python\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">VEILLE<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udd0d<\/div>\n <div class=\"activity-title\">VEILLE TECH<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">3H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 9%;\">9%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n Recherche de nouvelles technologies<br>\n Blogs, forums, documentation\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"activity-card\">\n <div class=\"activity-badge\">QA<\/div>\n <div class=\"activity-header\">\n <div class=\"activity-icon\">\ud83d\udc1b<\/div>\n <div class=\"activity-title\">TESTS & DEBUG<\/div>\n <\/div>\n <div class=\"activity-body\">\n <div class=\"activity-time\">4H\/semaine<\/div>\n <div class=\"activity-bar\">\n <div class=\"activity-bar-fill\" style=\"width: 11%;\">11%<\/div>\n <\/div>\n <div class=\"activity-desc\">\n D\u00e9bogage et optimisation<br>\n Tests unitaires, int\u00e9gration\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"stack\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83d\udee0\ufe0f STACK TECHNIQUE<\/h1>\n \n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > NO-CODE \/ LOW-CODE\n <\/h2>\n <div class=\"tech-stack-grid\">\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udfa8<\/div>\n <div class=\"tech-name\">BUBBLE.IO<\/div>\n <div class=\"tech-level\">Expert \u2022 3 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 90%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udf0a<\/div>\n <div class=\"tech-name\">WEBFLOW<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 80%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\u26a1<\/div>\n <div class=\"tech-name\">ZAPIER<\/div>\n <div class=\"tech-level\">Expert \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 85%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udd17<\/div>\n <div class=\"tech-name\">MAKE<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 1 an<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 75%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > D\u00c9VELOPPEMENT\n <\/h2>\n <div class=\"tech-stack-grid\">\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udf10<\/div>\n <div class=\"tech-name\">HTML\/CSS<\/div>\n <div class=\"tech-level\">Expert \u2022 5 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 95%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udcdc<\/div>\n <div class=\"tech-name\">JAVASCRIPT<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 4 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 80%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udc0d<\/div>\n <div class=\"tech-name\">PYTHON<\/div>\n <div class=\"tech-level\">Interm\u00e9diaire \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 70%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\u269b\ufe0f<\/div>\n <div class=\"tech-name\">REACT<\/div>\n <div class=\"tech-level\">Interm\u00e9diaire \u2022 1 an<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 65%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > DESIGN & 3D\n <\/h2>\n <div class=\"tech-stack-grid\">\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\udd27<\/div>\n <div class=\"tech-name\">FUSION 360<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 2 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 80%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udfa8<\/div>\n <div class=\"tech-name\">PHOTOSHOP<\/div>\n <div class=\"tech-level\">Avanc\u00e9 \u2022 3 ans<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 75%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83d\uddbc\ufe0f<\/div>\n <div class=\"tech-name\">FIGMA<\/div>\n <div class=\"tech-level\">Interm\u00e9diaire \u2022 1 an<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 70%;\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"tech-item\">\n <div class=\"tech-logo\">\ud83c\udfac<\/div>\n <div class=\"tech-name\">BLENDER<\/div>\n <div class=\"tech-level\">D\u00e9butant \u2022 6 mois<\/div>\n <div class=\"tech-progress\">\n <div class=\"tech-progress-fill\" style=\"width: 50%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"projects-live\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83d\ude80 PROJETS EN COURS<\/h1>\n \n <div class=\"projects-terminal\">\n <div class=\"terminal-header\">\n <div class=\"terminal-dot\"><\/div>\n <div class=\"terminal-dot\"><\/div>\n <div class=\"terminal-dot\"><\/div>\n <div class=\"terminal-title\">TERMINAL – PROJETS ACTIFS<\/div>\n <\/div>\n <div class=\"terminal-body\" id=\"projectsTerminal\">\n <div class=\"terminal-line\">git status<\/div>\n <div class=\"terminal-line output\">Sur la branche main<\/div>\n <div class=\"terminal-line output\">Votre branche est \u00e0 jour avec ‘origin\/main’.<\/div>\n <div class=\"terminal-line\">ls -la projects\/<\/div>\n <div class=\"terminal-line output success\">\u2713 [ACTIF] Site Vitrine Terminal – 85% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output success\">\u2713 [ACTIF] Application No-Code E-commerce – 60% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output warning\">\u26a0 [EN PAUSE] Prototype 3D Fusion 360 – 40% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output success\">\u2713 [ACTIF] Automatisation Zapier CRM – 75% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line output\">\u2192 [PLANIFI\u00c9] Dashboard Analytics React – 0% compl\u00e9t\u00e9<\/div>\n <div class=\"terminal-line\">npm run dev<\/div>\n <div class=\"terminal-line output success\">\u2713 Serveur d\u00e9marr\u00e9 sur http:\/\/localhost:3000<\/div>\n <div class=\"terminal-line output success\">\u2713 Compilation r\u00e9ussie en 1.2s<\/div>\n <div class=\"terminal-line\">git log –oneline -5<\/div>\n <div class=\"terminal-line output\">a3f2c1b feat: Ajout section activit\u00e9s hebdomadaires<\/div>\n <div class=\"terminal-line output\">b7e4d9a fix: Correction responsive mobile<\/div>\n <div class=\"terminal-line output\">c9f1a2e style: Am\u00e9lioration effets VHS<\/div>\n <div class=\"terminal-line output\">d2b8e3f docs: Mise \u00e0 jour README<\/div>\n <div class=\"terminal-line output\">e5c3f7g refactor: Optimisation performances<\/div>\n <div class=\"terminal-line\"><span class=\"terminal-cursor\"><\/span><\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 2rem 0 1rem 0;\">\n > STATISTIQUES DES PROJETS\n <\/h2>\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"info-card-value\">12<\/div>\n <div class=\"info-card-label\">PROJETS TERMIN\u00c9S<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">4<\/div>\n <div class=\"info-card-label\">EN COURS<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">3<\/div>\n <div class=\"info-card-label\">EN PAUSE<\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"info-card-value\">98%<\/div>\n <div class=\"info-card-label\">TAUX DE R\u00c9USSITE<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"certifications\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83c\udfc6 CERTIFICATIONS & BADGES<\/h1>\n \n <div class=\"badges-container\">\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83c\udf93<\/div>\n <div class=\"badge-name\">BUBBLE CERTIFIED<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\u26a1<\/div>\n <div class=\"badge-name\">ZAPIER EXPERT<\/div>\n <div class=\"badge-date\">2024<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83c\udf10<\/div>\n <div class=\"badge-name\">WEBFLOW PRO<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udc0d<\/div>\n <div class=\"badge-name\">PYTHON BASICS<\/div>\n <div class=\"badge-date\">2022<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udd27<\/div>\n <div class=\"badge-name\">FUSION 360 CAD<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udcca<\/div>\n <div class=\"badge-name\">EXCEL ADVANCED<\/div>\n <div class=\"badge-date\">2021<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83c\udfa8<\/div>\n <div class=\"badge-name\">UI\/UX DESIGN<\/div>\n <div class=\"badge-date\">2024<\/div>\n <\/div>\n\n <div class=\"badge-item\">\n <div class=\"badge-icon\">\ud83d\udd12<\/div>\n <div class=\"badge-name\">CYBERSECURITY<\/div>\n <div class=\"badge-date\">2023<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"workflow\" class=\"page-section\">\n <h1 class=\"section-title glow\">\u2699\ufe0f WORKFLOW & ENVIRONNEMENT<\/h1>\n \n <div class=\"workflow-diagram\">\n <div class=\"workflow-steps\">\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83d\udca1<\/div>\n <div class=\"workflow-name\">ID\u00c9ATION<\/div>\n <div class=\"workflow-desc\">Brainstorming<br>Mindmapping<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83c\udfa8<\/div>\n <div class=\"workflow-name\">DESIGN<\/div>\n <div class=\"workflow-desc\">Figma<br>Photoshop<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\u26a1<\/div>\n <div class=\"workflow-name\">D\u00c9VELOPPEMENT<\/div>\n <div class=\"workflow-desc\">VS Code<br>Bubble<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83e\uddea<\/div>\n <div class=\"workflow-name\">TESTS<\/div>\n <div class=\"workflow-desc\">QA<br>Debug<\/div>\n <\/div>\n\n <div class=\"workflow-step\">\n <div class=\"workflow-icon\">\ud83d\ude80<\/div>\n <div class=\"workflow-name\">D\u00c9PLOIEMENT<\/div>\n <div class=\"workflow-desc\">Production<br>Monitoring<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <h2 style=\"font-size: 2rem; margin: 3rem 0 1.5rem 0;\">\n > OUTILS QUOTIDIENS\n <\/h2>\n <div class=\"icon-section\">\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcbb<\/div>\n <div class=\"icon-item-text\">Visual Studio Code<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83c\udf10<\/div>\n <div class=\"icon-item-text\">Chrome DevTools<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udce6<\/div>\n <div class=\"icon-item-text\">Git & GitHub<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udc33<\/div>\n <div class=\"icon-item-text\">Docker<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcdd<\/div>\n <div class=\"icon-item-text\">Notion<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcac<\/div>\n <div class=\"icon-item-text\">Slack<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83d\udcca<\/div>\n <div class=\"icon-item-text\">Trello<\/div>\n <\/div>\n <div class=\"icon-item\">\n <div class=\"icon-item-icon\">\ud83c\udfaf<\/div>\n <div class=\"icon-item-text\">Postman<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"code-stats\" class=\"page-section\">\n <h1 class=\"section-title glow\">\ud83d\udcca STATISTIQUES DE CODE<\/h1>\n \n <div class=\"code-stats-dashboard\">\n <div class=\"stats-grid\">\n <div class=\"stat-box\">\n <div class=\"stat-value\">15K+<\/div>\n <div class=\"stat-label\">Lignes de code<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\">45+<\/div>\n <div class=\"stat-label\">Projets GitHub<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\">1.2K+<\/div>\n <div class=\"stat-label\">Commits<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-value\">8<\/div>\n <div class=\"stat-label\">Langages<\/div>\n <\/div>\n <\/div>\n\n <div class=\"code-graph\">\n <div class=\"graph-title\">ACTIVIT\u00c9 MENSUELLE (Commits)<\/div>\n <div class=\"graph-bars\">\n <div class=\"graph-bar\" style=\"height: 60%;\">\n <div class=\"graph-bar-value\">42<\/div>\n <div class=\"graph-bar-label\">Jan<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 75%;\">\n <div class=\"graph-bar-value\">53<\/div>\n <div class=\"graph-bar-label\">F\u00e9v<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 85%;\">\n <div class=\"graph-bar-value\">61<\/div>\n <div class=\"graph-bar-label\">Mar<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 70%;\">\n <div class=\"graph-bar-value\">49<\/div>\n <div class=\"graph-bar-label\">Avr<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 90%;\">\n <div class=\"graph-bar-value\">67<\/div>\n <div class=\"graph-bar-label\">Mai<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 95%;\">\n <div class=\"graph-bar-value\">72<\/div>\n <div class=\"graph-bar-label\">Juin<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"code-graph\">\n <div class=\"graph-title\">R\u00c9PARTITION PAR LANGAGE<\/div>\n <div class=\"graph-bars\">\n <div class=\"graph-bar\" style=\"height: 85%;\">\n <div class=\"graph-bar-value\">35%<\/div>\n <div class=\"graph-bar-label\">JS<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 70%;\">\n <div class=\"graph-bar-value\">25%<\/div>\n <div class=\"graph-bar-label\">HTML<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 60%;\">\n <div class=\"graph-bar-value\">20%<\/div>\n <div class=\"graph-bar-label\">CSS<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 40%;\">\n <div class=\"graph-bar-value\">12%<\/div>\n <div class=\"graph-bar-label\">Python<\/div>\n <\/div>\n <div class=\"graph-bar\" style=\"height: 25%;\">\n <div class=\"graph-bar-value\">8%<\/div>\n <div class=\"graph-bar-label\">Autres<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n\n\n \n <section id=\"diagnostic\" class=\"page-section\">\n <h1 class=\"section-title glow\">DIAGNOSTIC SYST\u00c8ME<\/h1>\n\n <div class=\"diagnostic-panel\">\n <div class=\"diagnostic-title\">\u25b8 CONSOLE D’ANALYSE<\/div>\n \n <div class=\"console-output\" id=\"consoleOutput\">\n \n <\/div>\n\n <div class=\"diagnostic-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-uptime\">—<\/div>\n <div class=\"stat-label\">UPTIME (s)<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-memory\">—<\/div>\n <div class=\"stat-label\">M\u00c9MOIRE (%)<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-cpu\">—<\/div>\n <div class=\"stat-label\">CPU (%)<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\" id=\"stat-network\">—<\/div>\n <div class=\"stat-label\">R\u00c9SEAU (ms)<\/div>\n <\/div>\n <\/div>\n\n <div class=\"loading-bar\">\n <div class=\"loading-bar-label\">\n <span>PROCESSUS SYST\u00c8ME<\/span>\n <span id=\"process-percent\">0%<\/span>\n <\/div>\n <div class=\"loading-bar-fill\">\n <div class=\"loading-bar-progress\" id=\"processBar\" style=\"width: 0%;\">\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591<\/div>\n <\/div>\n <\/div>\n\n <div class=\"loading-bar\">\n <div class=\"loading-bar-label\">\n <span>MODULES CHARG\u00c9S<\/span>\n <span id=\"modules-percent\">0%<\/span>\n <\/div>\n <div class=\"loading-bar-fill\">\n <div class=\"loading-bar-progress\" id=\"modulesBar\" style=\"width: 0%;\">\u2593\u2593\u2593\u2593\u2593\u2593\u2593\u2593\u2593\u2593<\/div>\n <\/div>\n <\/div>\n\n <div class=\"loading-bar\">\n <div class=\"loading-bar-label\">\n <span>S\u00c9CURIT\u00c9<\/span>\n <span id=\"security-percent\">0%<\/span>\n <\/div>\n <div class=\"loading-bar-fill\">\n <div class=\"loading-bar-progress\" id=\"securityBar\" style=\"width: 0%;\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"diagnostic-panel\" style=\"margin-top: 2rem;\">\n <div class=\"diagnostic-title\">\u25b8 EXTRAIT DE CODE SYST\u00c8ME<\/div>\n \n <div class=\"code-snippet\">\n <div class=\"code-line\"><span class=\"keyword\">function<\/span> <span class=\"function\">initSystem<\/span>() {<\/div>\n <div class=\"code-line\"> <span class=\"comment\">\/\/ Initialisation du terminal<\/span><\/div>\n <div class=\"code-line\"> <span class=\"keyword\">const<\/span> status = <span class=\"function\">checkStatus<\/span>();<\/div>\n <div class=\"code-line\"> <span class=\"keyword\">if<\/span> (status === <span class=\"string\">‘OK’<\/span>) {<\/div>\n <div class=\"code-line\"> <span class=\"function\">loadModules<\/span>();<\/div>\n <div class=\"code-line\"> <span class=\"function\">startAudio<\/span>();<\/div>\n <div class=\"code-line\"> <span class=\"keyword\">return<\/span> <span class=\"string\">‘SYST\u00c8ME OP\u00c9RATIONNEL’<\/span>;<\/div>\n <div class=\"code-line\"> }<\/div>\n <div class=\"code-line\">}<\/div>\n <\/div>\n <\/div> \n <\/main>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ============================================\n \/\/ SYST\u00c8ME AUDIO AM\u00c9LIOR\u00c9\n \/\/ ============================================\n \n const AudioContext = window.AudioContext || window.webkitAudioContext;\n const audioCtx = new AudioContext();\n let audioEnabled = true;\n let masterVolume = 0; \/\/ Commence \u00e0 0 pour le fade-in\n\n \/\/ Son progressif d'introduction\n function playIntroSound() {\n const duration = 3000; \/\/ 3 secondes\n const startTime = audioCtx.currentTime;\n const endTime = startTime + duration \/ 1000;\n \n \/\/ Fr\u00e9quence basse qui monte progressivement\n const oscillator = audioCtx.createOscillator();\n const gainNode = audioCtx.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n \n oscillator.type = 'sine';\n oscillator.frequency.setValueAtTime(100, startTime);\n oscillator.frequency.exponentialRampToValueAtTime(400, endTime);\n \n gainNode.gain.setValueAtTime(0, startTime);\n gainNode.gain.linearRampToValueAtTime(0.15, startTime + 1);\n gainNode.gain.linearRampToValueAtTime(0.1, endTime - 0.5);\n gainNode.gain.linearRampToValueAtTime(0, endTime);\n \n oscillator.start(startTime);\n oscillator.stop(endTime);\n \n \/\/ Augmenter progressivement le volume ma\u00eetre\n let volumeIncrease = setInterval(() => {\n if (masterVolume < 0.5) {\n masterVolume += 0.05;\n } else {\n clearInterval(volumeIncrease);\n }\n }, 100);\n }\n\n \/\/ Fonction pour cr\u00e9er un bip (sons vari\u00e9s)\n function playBeep(frequency = 800, duration = 50, type = 'square') {\n if (!audioEnabled) return;\n \n const oscillator = audioCtx.createOscillator();\n const gainNode = audioCtx.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n \n oscillator.frequency.value = frequency;\n oscillator.type = type;\n \n gainNode.gain.setValueAtTime(masterVolume * 0.3, audioCtx.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration \/ 1000);\n \n oscillator.start(audioCtx.currentTime);\n oscillator.stop(audioCtx.currentTime + duration \/ 1000);\n }\n\n \/\/ Sons vari\u00e9s pour les clics\n const clickSounds = [\n { freq: 1200, dur: 30, type: 'square' },\n { freq: 1500, dur: 25, type: 'triangle' },\n { freq: 1000, dur: 35, type: 'sine' },\n { freq: 1800, dur: 20, type: 'square' },\n { freq: 1400, dur: 28, type: 'sawtooth' }\n ];\n\n function playClick() {\n const sound = clickSounds[Math.floor(Math.random() * clickSounds.length)];\n playBeep(sound.freq, sound.dur, sound.type);\n }\n\n function playHover() {\n playBeep(600 + Math.random() * 200, 20, 'sine');\n }\n\n \/\/ Son pour modal\n function playModalOpen() {\n playBeep(400, 50, 'triangle');\n setTimeout(() => playBeep(600, 50, 'triangle'), 50);\n setTimeout(() => playBeep(800, 70, 'triangle'), 100);\n }\n\n function playModalClose() {\n playBeep(800, 40, 'triangle');\n setTimeout(() => playBeep(500, 60, 'triangle'), 40);\n }\n\n \/\/ ============================================\n \/\/ \u00c9CRAN DE CHARGEMENT\n \/\/ ============================================\n \n const loadingScreen = document.getElementById('loading-screen');\n const progressFill = document.getElementById('progress-fill');\n \n let progress = 0;\n const loadingInterval = setInterval(() => {\n progress += Math.random() * 15;\n if (progress >= 100) {\n progress = 100;\n progressFill.style.width = '100%';\n playBeep(1000, 100, 'sine');\n setTimeout(() => {\n loadingScreen.classList.add('hidden');\n setTimeout(() => {\n loadingScreen.style.display = 'none';\n }, 500);\n }, 500);\n clearInterval(loadingInterval);\n } else {\n progressFill.style.width = progress + '%';\n playBeep(400 + progress * 5, 20, 'square');\n }\n }, 200);\n\n \/\/ Jouer le son d'intro au chargement\n window.addEventListener('load', () => {\n playIntroSound();\n });\n\n \/\/ ============================================\n \/\/ VHS MODE AUTO APR\u00c8S 25 SECONDES\n \/\/ ============================================\n \n let vhsMode = false;\n const crtContainer = document.getElementById('crtContainer');\n const vhsToggle = document.getElementById('vhsToggle');\n\n setTimeout(() => {\n if (!vhsMode) {\n activateVHSMode();\n }\n }, 25000); \/\/ 25 secondes\n\n function activateVHSMode() {\n vhsMode = true;\n crtContainer.classList.add('vhs-active');\n vhsToggle.classList.add('active');\n vhsToggle.textContent = 'VHS: ON';\n playBeep(300, 100, 'sawtooth');\n setTimeout(() => playBeep(200, 150, 'sawtooth'), 100);\n }\n\n function deactivateVHSMode() {\n vhsMode = false;\n crtContainer.classList.remove('vhs-active');\n vhsToggle.classList.remove('active');\n vhsToggle.textContent = 'VHS MODE';\n playBeep(400, 80, 'sine');\n }\n\n vhsToggle.addEventListener('click', () => {\n if (vhsMode) {\n deactivateVHSMode();\n } else {\n activateVHSMode();\n }\n });\n\n vhsToggle.addEventListener('mouseenter', () => {\n playHover();\n });\n\n \/\/ ============================================\n \/\/ CONTR\u00d4LE AUDIO\n \/\/ ============================================\n \n const audioToggle = document.getElementById('audioToggle');\n\n audioToggle.addEventListener('click', () => {\n audioEnabled = !audioEnabled;\n audioToggle.textContent = audioEnabled ? '\ud83d\udd0a AUDIO' : '\ud83d\udd07 MUTE';\n audioToggle.classList.toggle('active', !audioEnabled);\n if (audioEnabled) {\n playBeep(1000, 100, 'sine');\n }\n });\n\n audioToggle.addEventListener('mouseenter', () => {\n playHover();\n });\n\n \/\/ ============================================\n \/\/ HORLOGE\n \/\/ ============================================\n \n function updateTime() {\n const now = new Date();\n const timeString = now.toLocaleTimeString('fr-FR', { \n hour: '2-digit', \n minute: '2-digit',\n second: '2-digit'\n });\n document.getElementById('current-time').textContent = timeString;\n }\n setInterval(updateTime, 1000);\n updateTime();\n\n \/\/ ============================================\n \/\/ NAVIGATION\n \/\/ ============================================\n \n const menuItems = document.querySelectorAll('.menu-item');\n const pageSections = document.querySelectorAll('.page-section');\n\n menuItems.forEach(item => {\n item.addEventListener('click', function() {\n playClick();\n \n menuItems.forEach(i => i.classList.remove('active'));\n this.classList.add('active');\n \n pageSections.forEach(section => section.classList.remove('active'));\n \n const pageId = this.getAttribute('data-page');\n document.getElementById(pageId).classList.add('active');\n\n \/\/ Animer les barres de comp\u00e9tences\n if (pageId === 'competences') {\n animateSkillBars();\n }\n \n \/\/ D\u00e9marrer le diagnostic\n if (pageId === 'diagnostic') {\n startDiagnostic();\n }\n });\n\n item.addEventListener('mouseenter', () => {\n playHover();\n });\n });\n\n \/\/ ============================================\n \/\/ ANIMATION DES BARRES\n \/\/ ============================================\n \n function animateSkillBars() {\n const skillBars = document.querySelectorAll('.skill-bar-fill');\n skillBars.forEach(bar => {\n const width = bar.getAttribute('data-width');\n setTimeout(() => {\n bar.style.width = width + '%';\n }, 100);\n });\n }\n\n \/\/ ============================================\n \/\/ SYST\u00c8ME DE DIAGNOSTIC\n \/\/ ============================================\n \n let diagnosticStarted = false;\n\n function startDiagnostic() {\n if (diagnosticStarted) return;\n diagnosticStarted = true;\n\n const consoleOutput = document.getElementById('consoleOutput');\n const messages = [\n { text: 'Initialisation du syst\u00e8me...', type: 'info', delay: 0 },\n { text: 'Chargement des modules principaux...', type: 'success', delay: 500 },\n { text: 'V\u00e9rification de l\\'int\u00e9grit\u00e9 des fichiers...', type: 'success', delay: 1000 },\n { text: 'Analyse de la m\u00e9moire disponible...', type: 'info', delay: 1500 },\n { text: 'Test de connectivit\u00e9 r\u00e9seau...', type: 'success', delay: 2000 },\n { text: 'Attention: Pic de charge CPU d\u00e9tect\u00e9', type: 'warning', delay: 2500 },\n { text: 'Optimisation des processus en cours...', type: 'info', delay: 3000 },\n { text: 'Activation des protocoles de s\u00e9curit\u00e9...', type: 'success', delay: 3500 },\n { text: 'Synchronisation des donn\u00e9es...', type: 'success', delay: 4000 },\n { text: 'SYST\u00c8ME OP\u00c9RATIONNEL - Tous les tests r\u00e9ussis', type: 'success', delay: 4500 }\n ];\n\n messages.forEach((msg, index) => {\n setTimeout(() => {\n const line = document.createElement('div');\n line.className = `console-line ${msg.type}`;\n line.textContent = msg.text;\n line.style.animationDelay = `${index * 0.1}s`;\n consoleOutput.appendChild(line);\n playBeep(400 + index * 50, 15, 'sine');\n consoleOutput.scrollTop = consoleOutput.scrollHeight;\n }, msg.delay);\n });\n\n \/\/ Animer les statistiques\n animateDiagnosticStats();\n animateLoadingBars();\n }\n\n function animateDiagnosticStats() {\n let uptime = 0;\n const uptimeInterval = setInterval(() => {\n uptime++;\n document.getElementById('stat-uptime').textContent = uptime;\n }, 1000);\n\n setTimeout(() => {\n document.getElementById('stat-memory').textContent = Math.floor(Math.random() * 30 + 50);\n document.getElementById('stat-cpu').textContent = Math.floor(Math.random() * 40 + 30);\n document.getElementById('stat-network').textContent = Math.floor(Math.random() * 50 + 10);\n }, 1000);\n }\n\n function animateLoadingBars() {\n animateBar('processBar', 'process-percent', 0, 100, 3000);\n setTimeout(() => animateBar('modulesBar', 'modules-percent', 0, 100, 2500), 500);\n setTimeout(() => animateBar('securityBar', 'security-percent', 0, 100, 2000), 1000);\n }\n\n function animateBar(barId, percentId, start, end, duration) {\n const bar = document.getElementById(barId);\n const percentLabel = document.getElementById(percentId);\n const startTime = Date.now();\n \n function update() {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed \/ duration, 1);\n const value = start + (end - start) * progress;\n \n bar.style.width = value + '%';\n percentLabel.textContent = Math.floor(value) + '%';\n \n if (progress < 1) {\n requestAnimationFrame(update);\n }\n }\n \n update();\n }\n\n \/\/ ============================================\n \/\/ PROJETS ET MODALS\n \/\/ ============================================\n \n const projectCards = document.querySelectorAll('.project-card');\n projectCards.forEach(card => {\n card.addEventListener('click', function() {\n playModalOpen();\n });\n\n card.addEventListener('mouseenter', () => {\n playHover();\n });\n });\n\n const projectsData = {\n gpit: {\n title: \"GPIT \u2013 Gestion de Parc IT (TeePee)\",\n status: \"ACTIF\",\n year: \"2023\u20132025\",\n description: \"Outil interne sous TeePee : inventaire, anti-doublons, localisation et g\u00e9n\u00e9ration automatique des documents AMD\/ARM (utilisable sur PC, tablette et t\u00e9l\u00e9phone).\",\n objectives: [\n \"Centraliser et fiabiliser l'inventaire\",\n \"R\u00e9duire les erreurs de saisie\",\n \"Acc\u00e9l\u00e9rer la remise et la restitution (AMD\/ARM)\",\n \"Assurer l'usage terrain multi-appareils\"\n ],\n technologies: [\n { name: \"TeePee\", usage: \"Formulaires, r\u00e8gles, kanban\" },\n { name: \"Code-barres\", usage: \"Scan et recherche d'\u00e9quipements\" },\n { name: \"CSV \/ Excel\", usage: \"Imports et exports de donn\u00e9es\" }\n ],\n results: [\n \"Processus standardis\u00e9s\",\n \"Documents AMD\/ARM auto-g\u00e9n\u00e9r\u00e9s\",\n \"Adoption interne progressive\"\n ]\n },\n meteo: {\n title: \"Site m\u00e9t\u00e9o (API)\",\n status: \"EN LIGNE\",\n year: \"2024\u20132025\",\n description: \"Pr\u00e9visions pour 150+ villes : vent, humidit\u00e9, lever\/coucher du soleil, temp\u00e9ratures max\/min et ressenties.\",\n objectives: [\n \"Rendre service avec une interface simple\",\n \"Apprendre et pratiquer l'int\u00e9gration d'API\",\n \"Offrir une consultation rapide sur mobile\/PC\"\n ],\n technologies: [\n { name: \"HTML\/JS\", usage: \"Appels API, rendu et interactions\" },\n { name: \"API m\u00e9t\u00e9o\", usage: \"Donn\u00e9es de pr\u00e9visions\" }\n ],\n results: [\n \"Site public consultable\",\n \"Chargement rapide et navigation directe\"\n ]\n },\n glpi: {\n title: \"GLPI sur OVH\",\n status: \"COMPL\u00c9T\u00c9\",\n year: \"2020\u20132024\",\n description: \"D\u00e9ploiement et configuration de GLPI (mod\u00e8les, plugins, formulaires, projets\/t\u00e2ches) pour la gestion d'actifs et le support.\",\n objectives: [\n \"Structurer la gestion du parc\",\n \"Optimiser le support utilisateurs\",\n \"Uniformiser les proc\u00e9dures\"\n ],\n technologies: [\n { name: \"GLPI\", usage: \"Gestion des actifs et tickets\" },\n { name: \"OVH\", usage: \"H\u00e9bergement et d\u00e9ploiement\" }\n ],\n results: [\n \"Instance op\u00e9rationnelle et document\u00e9e\",\n \"Base de connaissances amorc\u00e9e\"\n ]\n },\n qcm: {\n title: \"QCM.ovh \u2013 QCM interactifs\",\n status: \"EN D\u00c9V.\",\n year: \"2025\",\n description: \"Cr\u00e9ation et partage de QCM personnalis\u00e9s, base de donn\u00e9es pour r\u00e9ponses et analyses. Le site \u00e9volue par sections (\u00c9ducation, Sant\u00e9, Technique).\",\n objectives: [\n \"Proposer des QCM multi-cat\u00e9gories\",\n \"Collecter des r\u00e9ponses pour analyses\",\n \"Assurer l'accessibilit\u00e9 sur tout appareil\"\n ],\n technologies: [\n { name: \"HTML\/CSS\/JS\", usage: \"Interface et logique c\u00f4t\u00e9 client\" },\n { name: \"DB (\u00e0 d\u00e9finir)\", usage: \"Persistance des r\u00e9sultats (roadmap)\" }\n ],\n results: [\n \"Prototype en ligne et navigation par cat\u00e9gories\",\n \"Formulaires de test disponibles\"\n ]\n },\n cmd: {\n title: \"CMD Aventure (jeu 2D)\",\n status: \"PROJET PERSO\",\n year: \"2024\u20132025\",\n description: \"Jeu r\u00e9tro en console CMD : univers m\u00e9di\u00e9val, gestion des statistiques, progression via points de comp\u00e9tence, \u00e9crans d\u00e9di\u00e9s pour le lore et l'aide au joueur.\",\n objectives: [\n \"Exp\u00e9rimenter un gameplay simple et lisible\",\n \"G\u00e9rer la progression par points de comp\u00e9tence\",\n \"Conserver une empreinte l\u00e9g\u00e8re (console)\"\n ],\n technologies: [\n { name: \"Scripts\/Console\", usage: \"M\u00e9caniques et boucles de jeu\" },\n { name: \"Assets l\u00e9gers\", usage: \"\u00c9crans, textes et aides\" }\n ],\n results: [\n \"D\u00e9mos jouables et it\u00e9rations rapides\"\n ]\n },\n durees: {\n title: \"Outil de calcul de dur\u00e9es\",\n status: \"EN LIGNE\",\n year: \"2024\",\n description: \"Outil web pour additionner\/soustraire des temps et manipuler des dur\u00e9es complexes de mani\u00e8re fiable et rapide.\",\n objectives: [\n \"Simplifier les op\u00e9rations sur les temps\",\n \"\u00c9viter les erreurs de calcul manuel\",\n \"Offrir une interface tr\u00e8s directe\"\n ],\n technologies: [\n { name: \"HTML\/JS\", usage: \"Calculs et affichage instantan\u00e9\" }\n ],\n results: [\n \"Utilisable imm\u00e9diatement depuis le navigateur\"\n ]\n }\n };\n\n function generateModalContent(projectKey) {\n const project = projectsData[projectKey];\n const statusClass = project.status === \"ACTIF\" ? \"active\" : \"\";\n \n return `\n <div class=\"modal-section\">\n <div style=\"display: flex; gap: 1rem; margin-bottom: 1.5rem;\">\n <span class=\"status-badge ${statusClass}\">${project.status}<\/span>\n <span class=\"status-badge\">ANN\u00c9E: ${project.year}<\/span>\n <\/div>\n <div class=\"modal-text\">${project.description}<\/div>\n <\/div>\n\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">OBJECTIFS<\/div>\n <ul class=\"modal-list\">\n ${project.objectives.map(obj => `<li>${obj}<\/li>`).join('')}\n <\/ul>\n <\/div>\n\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">TECHNOLOGIES UTILIS\u00c9ES<\/div>\n <table class=\"modal-table\">\n <thead>\n <tr>\n <th>TECHNOLOGIE<\/th>\n <th>UTILISATION<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n ${project.technologies.map(tech => `\n <tr>\n <td>${tech.name}<\/td>\n <td>${tech.usage}<\/td>\n <\/tr>\n `).join('')}\n <\/tbody>\n <\/table>\n <\/div>\n\n <div class=\"modal-section\">\n <div class=\"modal-section-title\">R\u00c9SULTATS<\/div>\n <ul class=\"modal-list\">\n ${project.results.map(result => `<li>${result}<\/li>`).join('')}\n <\/ul>\n <\/div>\n `;\n }\n\n document.querySelectorAll('.project-card').forEach(card => {\n card.addEventListener('click', function() {\n const projectKey = this.getAttribute('data-project');\n const project = projectsData[projectKey];\n \n document.getElementById('modalProjectTitle').textContent = project.title;\n document.getElementById('modalContent').innerHTML = generateModalContent(projectKey);\n document.getElementById('projectModal').classList.add('active');\n });\n });\n\n function closeProjectModal() {\n playModalClose();\n document.getElementById('projectModal').classList.remove('active');\n }\n\n document.getElementById('closeModal').addEventListener('click', closeProjectModal);\n document.getElementById('closeModalFooter').addEventListener('click', closeProjectModal);\n\n document.getElementById('projectModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeProjectModal();\n }\n });\n\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n const modal = document.getElementById('projectModal');\n if (modal.classList.contains('active')) {\n closeProjectModal();\n }\n }\n });\n\n \/\/ ============================================\n \/\/ FORMULAIRE DE CONTACT\n \/\/ ============================================\n \n const contactForm = document.getElementById('contact-form');\n contactForm.addEventListener('submit', function(e) {\n e.preventDefault();\n playBeep(1000, 200, 'sine');\n alert('MESSAGE ENVOY\u00c9 AVEC SUCC\u00c8S\\n\\n> Votre message a \u00e9t\u00e9 transmis.\\n> R\u00e9ponse attendue sous 24-48h.');\n contactForm.reset();\n });\n\n const formInputs = document.querySelectorAll('.form-input, .form-textarea');\n formInputs.forEach(input => {\n input.addEventListener('focus', () => {\n playBeep(800, 30, 'sine');\n });\n\n input.addEventListener('input', function() {\n if (Math.random() > 0.8) {\n playBeep(600, 10, 'sine');\n }\n });\n });\n\n const formButton = document.querySelector('.form-button');\n formButton.addEventListener('mouseenter', () => {\n playHover();\n });\n\n \/\/ ============================================\n \/\/ EFFET DE GLITCH AL\u00c9ATOIRE\n \/\/ ============================================\n \n setInterval(() => {\n const title = document.querySelector('.terminal-title');\n if (Math.random() > 0.97) {\n playBeep(2000 + Math.random() * 500, 30, 'square');\n title.style.textShadow = '0 0 20px #4af626, 2px 2px 0 #ff0000, -2px -2px 0 #00ffff';\n setTimeout(() => {\n title.style.textShadow = '';\n }, 50);\n }\n }, 100);\n\n \/\/ Initialiser la premi\u00e8re page\n document.querySelector('.menu-item[data-page=\"accueil\"]').classList.add('active');\n \n \/\/ Animation des barres d'activit\u00e9 au chargement\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Animer les barres de progression\n const activityBars = document.querySelectorAll('.activity-bar-fill');\n activityBars.forEach((bar, index) => {\n setTimeout(() => {\n bar.style.width = bar.getAttribute('style').match(\/width:\\s*(\\d+%)\/)[1];\n }, index * 200);\n });\n\n \/\/ Animer les barres de tech stack\n const techBars = document.querySelectorAll('.tech-progress-fill');\n techBars.forEach((bar, index) => {\n setTimeout(() => {\n bar.style.width = bar.getAttribute('style').match(\/width:\\s*(\\d+%)\/)[1];\n }, index * 100);\n });\n\n \/\/ Animer les barres de graphique\n const graphBars = document.querySelectorAll('.graph-bar');\n graphBars.forEach((bar, index) => {\n const height = bar.getAttribute('style').match(\/height:\\s*(\\d+%)\/)[1];\n bar.style.height = '0%';\n setTimeout(() => {\n bar.style.height = height;\n }, index * 150);\n });\n\n \/\/ Animation du terminal (ajout progressif des lignes)\n const terminalLines = document.querySelectorAll('.terminal-line');\n terminalLines.forEach((line, index) => {\n line.style.animationDelay = `${index * 0.3}s`;\n });\n\n \/\/ Effet de compteur pour les stats\n const statValues = document.querySelectorAll('.stat-value');\n statValues.forEach(stat => {\n const text = stat.textContent;\n const number = parseInt(text.replace(\/[^0-9]\/g, ''));\n if (!isNaN(number)) {\n let current = 0;\n const increment = number \/ 50;\n const timer = setInterval(() => {\n current += increment;\n if (current >= number) {\n stat.textContent = text;\n clearInterval(timer);\n } else {\n stat.textContent = Math.floor(current) + text.replace(\/[0-9]\/g, '');\n }\n }, 30);\n }\n });\n });\n\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Terminal Portfolio – \u00c9mile Snyers \ud83d\udd0a AUDIO VHS MODE TERMINAL PORTFOLIO SYST\u00c8ME D’INFORMATION PERSONNEL CONNEXION EN COURS… \u00c9MILE SNYERS \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","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":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","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-101","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":2,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages\/101\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/pages\/101\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/emilesnyersdeveloppeur.ovh\/index.php\/wp-json\/wp\/v2\/media?parent=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}