diff --git a/compose.yml b/compose.yml
index aedda0c..8e9d18b 100644
--- a/compose.yml
+++ b/compose.yml
@@ -1,13 +1,6 @@
 services:
   flask:
     build: ./web
-    environment:
-      - DB_HOST=mariadb
-      - DB_USER=flaskuser
-      - DB_PASSWORD=flaskpass
-      - DB_NAME=flaskdb
-    depends_on:
-      - mariadb
     volumes:
       - ./web:/app
     ports:
diff --git a/web/static/about.css b/web/static/about.css
index e69de29..62a71a7 100644
--- a/web/static/about.css
+++ b/web/static/about.css
@@ -0,0 +1,41 @@
+.about-section { padding: 5rem 0 6rem; }
+
+.about-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5rem;
+    align-items: start;
+}
+
+.about-text p {
+    color: var(--text-muted);
+    margin-bottom: 1.2rem;
+    line-height: 1.9;
+    font-size: 0.96rem;
+}
+
+.about-text strong { color: var(--text); }
+
+.stack-group { margin-bottom: 2.25rem; }
+
+.stack-group h3 {
+    font-size: 0.72rem;
+    font-family: var(--font-mono);
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    margin-bottom: 0.8rem;
+}
+
+.stack-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+}
+
+@media (max-width: 768px) {
+    .about-grid {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+    }
+}
diff --git a/web/static/contact.css b/web/static/contact.css
index e69de29..05274bf 100644
--- a/web/static/contact.css
+++ b/web/static/contact.css
@@ -0,0 +1,87 @@
+.contact-section { padding: 5rem 0 6rem; }
+
+.contact-grid {
+    display: grid;
+    grid-template-columns: 1fr 1.4fr;
+    gap: 5rem;
+    align-items: start;
+}
+
+.contact-intro {
+    color: var(--text-muted);
+    font-size: 0.96rem;
+    line-height: 1.85;
+    margin-bottom: 2.5rem;
+}
+
+.contact-links { display: flex; flex-direction: column; gap: 1rem; }
+
+.contact-link {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    padding: 1rem 1.25rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    text-decoration: none;
+    transition: border-color 0.2s;
+}
+
+.contact-link:hover { border-color: var(--accent); }
+
+.contact-link-label {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.contact-link-value {
+    font-size: 0.9rem;
+    color: var(--text);
+}
+
+/* Form */
+.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
+
+.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
+
+.form-group label {
+    font-size: 0.8rem;
+    font-family: var(--font-mono);
+    color: var(--text-muted);
+    letter-spacing: 0.05em;
+}
+
+.form-group input,
+.form-group textarea {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 0.75rem 1rem;
+    color: var(--text);
+    font-family: var(--font-main);
+    font-size: 0.9rem;
+    outline: none;
+    transition: border-color 0.2s;
+    resize: vertical;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+    border-color: var(--accent);
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+    color: var(--text-muted);
+}
+
+@media (max-width: 768px) {
+    .contact-grid {
+        grid-template-columns: 1fr;
+        gap: 3rem;
+    }
+}
diff --git a/web/static/experiences.css b/web/static/experiences.css
index e69de29..efc1325 100644
--- a/web/static/experiences.css
+++ b/web/static/experiences.css
@@ -0,0 +1,82 @@
+.experiences-section { padding: 5rem 0 6rem; }
+
+.timeline {
+    position: relative;
+    padding-left: 2rem;
+}
+
+.timeline::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 6px;
+    bottom: 6px;
+    width: 1px;
+    background: var(--border);
+}
+
+.timeline-item {
+    position: relative;
+    padding-left: 2.5rem;
+    padding-bottom: 3rem;
+    display: grid;
+    grid-template-columns: 100px 1fr;
+    gap: 1.5rem;
+    align-items: start;
+}
+
+.timeline-item:last-child { padding-bottom: 0; }
+
+.timeline-dot {
+    position: absolute;
+    left: -2rem;
+    top: 6px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--accent);
+    border: 2px solid var(--bg);
+    box-shadow: 0 0 0 3px var(--accent-dim);
+    transform: translateX(-50%);
+}
+
+.timeline-date {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    padding-top: 0.15rem;
+    white-space: nowrap;
+}
+
+.timeline-content h3 {
+    font-size: 1.05rem;
+    font-weight: 600;
+    margin-bottom: 0.2rem;
+}
+
+.tl-org {
+    font-size: 0.82rem;
+    color: var(--accent);
+    font-family: var(--font-mono);
+    margin-bottom: 0.75rem;
+}
+
+.tl-desc {
+    color: var(--text-muted);
+    font-size: 0.91rem;
+    line-height: 1.75;
+    margin-bottom: 1rem;
+}
+
+.tl-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+@media (max-width: 600px) {
+    .timeline-item {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+    }
+}
diff --git a/web/static/global.css b/web/static/global.css
new file mode 100644
index 0000000..7616da8
--- /dev/null
+++ b/web/static/global.css
@@ -0,0 +1,168 @@
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+:root {
+    --bg:         #07070e;
+    --bg-2:       #0e0c1a;
+    --bg-card:    #120f1e;
+    --accent:     #a855f7;
+    --accent-dim: rgba(168, 85, 247, 0.12);
+    --text:       #e2e2f0;
+    --text-muted: #6a6a8a;
+    --border:     #1e1a30;
+    --font-main:  'Space Grotesk', sans-serif;
+    --font-mono:  'JetBrains Mono', monospace;
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+    background-color: var(--bg);
+    color: var(--text);
+    font-family: var(--font-main);
+    line-height: 1.6;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ── Navbar ─────────────────────────────────────── */
+.navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 6%;
+    background: rgba(8, 8, 15, 0.85);
+    backdrop-filter: blur(14px);
+    border-bottom: 1px solid var(--border);
+}
+
+.nav-brand {
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--accent);
+    text-decoration: none;
+    letter-spacing: 0.06em;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 2.5rem;
+}
+
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.88rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    transition: color 0.2s;
+}
+
+.nav-links a:hover { color: var(--text); }
+.nav-links a.active { color: var(--accent); }
+
+/* ── Main ───────────────────────────────────────── */
+main {
+    flex: 1;
+    padding-top: 4.5rem;
+}
+
+/* ── Footer ─────────────────────────────────────── */
+.footer {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    font-family: var(--font-mono);
+    border-top: 1px solid var(--border);
+}
+
+.footer span { color: var(--accent); }
+
+/* ── Utilities ───────────────────────────────────── */
+.container {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 6%;
+}
+
+.section-title {
+    font-size: clamp(1.8rem, 4vw, 2.4rem);
+    font-weight: 700;
+    margin-bottom: 0.4rem;
+    letter-spacing: -0.02em;
+}
+
+.section-title span { color: var(--accent); }
+
+.section-subtitle {
+    color: var(--text-muted);
+    font-size: 0.93rem;
+    margin-bottom: 3.5rem;
+}
+
+.tag {
+    display: inline-block;
+    padding: 0.22rem 0.65rem;
+    background: var(--accent-dim);
+    color: var(--accent);
+    border-radius: 4px;
+    font-size: 0.72rem;
+    font-family: var(--font-mono);
+    font-weight: 500;
+    letter-spacing: 0.03em;
+}
+
+/* ── Buttons ─────────────────────────────────────── */
+.btn-primary {
+    display: inline-block;
+    padding: 0.75rem 1.75rem;
+    background: var(--accent);
+    color: #ffffff;
+    text-decoration: none;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 0.88rem;
+    transition: opacity 0.2s, transform 0.2s;
+    border: none;
+    cursor: pointer;
+    font-family: var(--font-main);
+}
+
+.btn-primary:hover {
+    opacity: 0.82;
+    transform: translateY(-2px);
+}
+
+.btn-secondary {
+    display: inline-block;
+    padding: 0.75rem 1.75rem;
+    border: 1px solid var(--border);
+    color: var(--text);
+    text-decoration: none;
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 0.88rem;
+    transition: border-color 0.2s, transform 0.2s;
+}
+
+.btn-secondary:hover {
+    border-color: var(--accent);
+    transform: translateY(-2px);
+}
+
+/* ── Mobile nav ──────────────────────────────────── */
+@media (max-width: 600px) {
+    .navbar { flex-direction: column; gap: 1rem; padding: 1rem 6%; }
+    .nav-links { gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
+}
diff --git a/web/static/index.css b/web/static/index.css
index bf20c68..08923d1 100644
--- a/web/static/index.css
+++ b/web/static/index.css
@@ -1,3 +1,51 @@
-.test{
-    
-}
\ No newline at end of file
+.hero {
+    min-height: calc(100vh - 4.5rem);
+    display: flex;
+    align-items: center;
+}
+
+.hero-inner { max-width: 680px; }
+
+.hero-pre {
+    font-family: var(--font-mono);
+    color: var(--accent);
+    font-size: 0.85rem;
+    letter-spacing: 0.12em;
+    margin-bottom: 0.5rem;
+}
+
+.hero-name {
+    font-size: clamp(3rem, 9vw, 5.5rem);
+    font-weight: 700;
+    line-height: 1.03;
+    letter-spacing: -0.03em;
+    margin-bottom: 0.4rem;
+}
+
+.hero-title {
+    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
+    font-weight: 400;
+    color: var(--text-muted);
+    margin-bottom: 1.75rem;
+}
+
+.hero-desc {
+    color: var(--text-muted);
+    font-size: 1rem;
+    line-height: 1.85;
+    max-width: 540px;
+    margin-bottom: 2.5rem;
+}
+
+.hero-cta {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+}
+
+.hero-stack {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
diff --git a/web/static/projecs.css b/web/static/projecs.css
index e69de29..1f13477 100644
--- a/web/static/projecs.css
+++ b/web/static/projecs.css
@@ -0,0 +1,63 @@
+.projects-section { padding: 5rem 0 6rem; }
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
+    gap: 1.25rem;
+}
+
+.project-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 2rem;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.25s, transform 0.25s;
+}
+
+.project-card::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 10px;
+    background: radial-gradient(circle at top left, var(--accent-dim), transparent 60%);
+    opacity: 0;
+    transition: opacity 0.3s;
+    pointer-events: none;
+}
+
+.project-card:hover {
+    border-color: rgba(34, 211, 238, 0.35);
+    transform: translateY(-4px);
+}
+
+.project-card:hover::after { opacity: 1; }
+
+.project-num {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--accent);
+    opacity: 0.6;
+    margin-bottom: 0.75rem;
+    letter-spacing: 0.05em;
+}
+
+.project-card h3 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+}
+
+.project-card p {
+    color: var(--text-muted);
+    font-size: 0.88rem;
+    line-height: 1.75;
+    margin-bottom: 1.25rem;
+}
+
+.project-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
diff --git a/web/templates/view/about.html b/web/templates/view/about.html
index a5550df..fc2496d 100644
--- a/web/templates/view/about.html
+++ b/web/templates/view/about.html
@@ -1,16 +1,73 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1>about</h1>
-    <a href="/">index</a>
-    <a href="/projects">projects</a>
-    <a href="/about">about</a>
-    <a href="/contact">contact</a>
-    <a href="/experiences">experiences</a>
-</body>
-</html>
\ No newline at end of file
+{% extends "view/base.html" %}
+{% block title %}À propos — Nino LABAT{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='about.css') }}">
+{% endblock %}
+
+{% block content %}
+<section class="about-section">
+    <div class="container">
+        <h1 class="section-title">À <span>propos</span></h1>
+        <p class="section-subtitle">Qui je suis, ce que j'aime, ce que je maîtrise.</p>
+
+        <div class="about-grid">
+            <div class="about-text">
+                <p>
+                    Je m'appelle <strong>Nino LABAT</strong>, développeur passionné par les systèmes
+                    embarqués, la robotique et l'infrastructure. J'aime comprendre les systèmes dans
+                    leur globalité — du composant électronique jusqu'au déploiement en production.
+                </p>
+                <p>
+                    Curieux et autonome, j'apprends en construisant : chaque projet est pour moi
+                    l'occasion de concevoir, câbler, programmer, déboguer et documenter une solution
+                    technique complète. Je crois qu'on n'apprend vraiment que par la pratique.
+                </p>
+                <p>
+                    Mon objectif est de renforcer mes compétences en programmation bas niveau,
+                    en électronique et en intégration système, vers une carrière dans l'embarqué
+                    et la robotique.
+                </p>
+                <p>
+                    En dehors du code, je m'intéresse à la culture open source, au mouvement
+                    maker, et à tout ce qui mêle ingéniosité et praticité.
+                </p>
+            </div>
+
+            <div class="about-stack">
+                <div class="stack-group">
+                    <h3>Embarqué &amp; Hardware</h3>
+                    <div class="stack-tags">
+                        <span class="tag">ESP32</span>
+                        <span class="tag">Arduino</span>
+                        <span class="tag">Raspberry Pi</span>
+                        <span class="tag">C / C++</span>
+                        <span class="tag">MQTT</span>
+                        <span class="tag">I2C / SPI / UART</span>
+                    </div>
+                </div>
+                <div class="stack-group">
+                    <h3>Infrastructure &amp; DevOps</h3>
+                    <div class="stack-tags">
+                        <span class="tag">Docker</span>
+                        <span class="tag">Nginx</span>
+                        <span class="tag">Linux</span>
+                        <span class="tag">Windows</span>
+                        <span class="tag">Portainer</span>
+                    </div>
+                </div>
+                <div class="stack-group">
+                    <h3>Développement</h3>
+                    <div class="stack-tags">
+                        <span class="tag">Python</span>
+                        <span class="tag">Flask</span>
+                        <span class="tag">HTML / CSS</span>
+                        <span class="tag">SQLite</span>
+                        <span class="tag">Git</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
diff --git a/web/templates/view/base.html b/web/templates/view/base.html
new file mode 100644
index 0000000..44ece4d
--- /dev/null
+++ b/web/templates/view/base.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Nino LABAT{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='global.css') }}">
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    <nav class="navbar">
+        <a class="nav-brand" href="https://git.ninolbt.com/Nono">M1n-0</a>
+        <ul class="nav-links">
+            <li><a href="/" {% if request.path == '/' %}class="active"{% endif %}>Accueil</a></li>
+            <li><a href="/about" {% if request.path == '/about' %}class="active"{% endif %}>À propos</a></li>
+            <li><a href="/experiences" {% if request.path == '/experiences' %}class="active"{% endif %}>Parcours</a></li>
+            <li><a href="/projects" {% if request.path == '/projects' %}class="active"{% endif %}>Projets</a></li>
+            <li><a href="/contact" {% if request.path == '/contact' %}class="active"{% endif %}>Contact</a></li>
+        </ul>
+    </nav>
+
+    <main>
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="footer">
+        <p>Nino LABAT &mdash; <span>M1n-0</span> &copy; 2025</p>
+    </footer>
+</body>
+</html>
diff --git a/web/templates/view/contact.html b/web/templates/view/contact.html
index 51819f7..0efdb39 100644
--- a/web/templates/view/contact.html
+++ b/web/templates/view/contact.html
@@ -1,16 +1,51 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1>contact</h1>
-    <a href="/">index</a>
-    <a href="/projects">projects</a>
-    <a href="/about">about</a>
-    <a href="/contact">contact</a>
-    <a href="/experiences">experiences</a>
-</body>
-</html>
\ No newline at end of file
+{% extends "view/base.html" %}
+{% block title %}Contact — Nino LABAT{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='contact.css') }}">
+{% endblock %}
+
+{% block content %}
+<section class="contact-section">
+    <div class="container">
+        <h1 class="section-title">Me <span>contacter</span></h1>
+        <p class="section-subtitle">Une idée, un projet, une question ? Écrivez-moi.</p>
+
+        <div class="contact-grid">
+            <div class="contact-info">
+                <p class="contact-intro">
+                    Je suis ouvert aux collaborations, stages, et projets techniques
+                    qui touchent à l'embarqué, la robotique ou l'infrastructure.
+                    N'hésitez pas à me contacter.
+                </p>
+                <div class="contact-links">
+                    <a class="contact-link" href="https://github.com/M1n-0" target="_blank" rel="noopener">
+                        <span class="contact-link-label">GitHub</span>
+                        <span class="contact-link-value">github.com/M1n-0</span>
+                    </a>
+                    <a class="contact-link" href="mailto:labatnino@gmail.com">
+                        <span class="contact-link-label">Email</span>
+                        <span class="contact-link-value">labatnino@gmail.com</span>
+                    </a>
+                </div>
+            </div>
+
+            <!-- <form class="contact-form" onsubmit="return false;">
+                <div class="form-group">
+                    <label for="name">Nom</label>
+                    <input type="text" id="name" name="name" placeholder="Votre nom" autocomplete="off">
+                </div>
+                <div class="form-group">
+                    <label for="email">Email</label>
+                    <input type="email" id="email" name="email" placeholder="votre@email.com" autocomplete="off">
+                </div>
+                <div class="form-group">
+                    <label for="message">Message</label>
+                    <textarea id="message" name="message" rows="5" placeholder="Votre message..."></textarea>
+                </div>
+                <button type="submit" class="btn-primary">Envoyer</button>
+            </form> -->
+        </div>
+    </div>
+</section>
+{% endblock %}
diff --git a/web/templates/view/experiences.html b/web/templates/view/experiences.html
index eade703..adc8d50 100644
--- a/web/templates/view/experiences.html
+++ b/web/templates/view/experiences.html
@@ -1,16 +1,107 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1>experiences</h1>
-    <a href="/">index</a>
-    <a href="/projects">projects</a>
-    <a href="/about">about</a>
-    <a href="/contact">contact</a>
-    <a href="/experiences">experiences</a>
-</body>
-</html>
\ No newline at end of file
+{% extends "view/base.html" %}
+{% block title %}Parcours — Nino LABAT{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='experiences.css') }}">
+{% endblock %}
+
+{% block content %}
+<section class="experiences-section">
+    <div class="container">
+        <h1 class="section-title">Mon <span>parcours</span></h1>
+        <p class="section-subtitle">Formation, projets clés et étapes marquantes.</p>
+
+        <div class="timeline">
+
+            <div class="timeline-item">
+                <div class="timeline-dot"></div>
+                <div class="timeline-date"><span class="tag">En cours</span></div>
+                <div class="timeline-content">
+                    <h3>Formation — [à compléter]</h3>
+                    <p class="tl-org">[Établissement]</p>
+                    <p class="tl-desc">Description de la formation en cours — spécialisation, compétences visées.</p>
+                    <div class="tl-tags">
+                        <span class="tag">Embarqué</span>
+                        <span class="tag">Robotique</span>
+                        <span class="tag">Systèmes</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="timeline-item">
+                <div class="timeline-dot"></div>
+                <div class="timeline-date">2024 – 2025</div>
+                <div class="timeline-content">
+                    <h3>Infrastructure self-hosted</h3>
+                    <p class="tl-org">Projet personnel</p>
+                    <p class="tl-desc">
+                        Mise en place d'un serveur Debian avec stack Docker complète : reverse proxy Nginx,
+                        Portainer, Nextcloud, Vaultwarden. Administration réseau, sécurisation et automatisation
+                        des déploiements via Docker Compose.
+                    </p>
+                    <div class="tl-tags">
+                        <span class="tag">Docker</span>
+                        <span class="tag">Linux</span>
+                        <span class="tag">Nginx</span>
+                        <span class="tag">WireGuard</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="timeline-item">
+                <div class="timeline-dot"></div>
+                <div class="timeline-date">2024</div>
+                <div class="timeline-content">
+                    <h3>ModulX — Domotique DIY</h3>
+                    <p class="tl-org">Projet personnel</p>
+                    <p class="tl-desc">
+                        Conception d'un système modulaire de domotique sur ESP32 avec communication MQTT,
+                        interface web locale et contrôle de modules (lumière, capteurs, relais).
+                        Apprentissage de l'intégration système complet : hardware, firmware, réseau, UI.
+                    </p>
+                    <div class="tl-tags">
+                        <span class="tag">ESP32</span>
+                        <span class="tag">C++</span>
+                        <span class="tag">MQTT</span>
+                        <span class="tag">IoT</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="timeline-item">
+                <div class="timeline-dot"></div>
+                <div class="timeline-date">2023</div>
+                <div class="timeline-content">
+                    <h3>Robot mini-foot &amp; Pong LED</h3>
+                    <p class="tl-org">Projets personnels</p>
+                    <p class="tl-desc">
+                        Deux projets d'électronique et robotique menés en parallèle : un robot autonome
+                        de mini-football (ESP32, capteurs ultrason, moteurs DC) et une implémentation
+                        du jeu Pong sur matrice LED avec Arduino.
+                    </p>
+                    <div class="tl-tags">
+                        <span class="tag">Arduino</span>
+                        <span class="tag">ESP32</span>
+                        <span class="tag">Robotique</span>
+                        <span class="tag">C++</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="timeline-item">
+                <div class="timeline-dot"></div>
+                <div class="timeline-date">[Année]</div>
+                <div class="timeline-content">
+                    <h3>[Expérience / Formation — à compléter]</h3>
+                    <p class="tl-org">[Organisation]</p>
+                    <p class="tl-desc">Description de l'expérience ou de la formation.</p>
+                    <div class="tl-tags">
+                        <span class="tag">À compléter</span>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+{% endblock %}
diff --git a/web/templates/view/index.html b/web/templates/view/index.html
index e3c0549..b4e9060 100644
--- a/web/templates/view/index.html
+++ b/web/templates/view/index.html
@@ -1,17 +1,35 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../../static/index.css">
-    <title>Document</title>
-</head>
-<body>
-    <h1 class="test">index</h1>
-    <a href="/">index</a>
-    <a href="/projects">projects</a>
-    <a href="/about">about</a>
-    <a href="/contact">contact</a>
-    <a href="/experiences">experiences</a>
-</body>
-</html>
\ No newline at end of file
+{% extends "view/base.html" %}
+{% block title %}Nino LABAT{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
+{% endblock %}
+
+{% block content %}
+<section class="hero">
+    <div class="container">
+        <div class="hero-inner">
+            <p class="hero-pre">Bonjour, je suis</p>
+            <h1 class="hero-name">Nino LABAT</h1>
+            <h2 class="hero-title">Développeur embarqué &amp; Maker</h2>
+            <p class="hero-desc">
+                Passionné par les systèmes embarqués, la robotique et l'infrastructure,
+                je conçois des projets mêlant logiciel, matériel et déploiement concret.
+                Du composant électronique jusqu'au serveur en production.
+            </p>
+            <div class="hero-cta">
+                <a href="/projects" class="btn-primary">Voir mes projets</a>
+                <a href="/about" class="btn-secondary">En savoir plus</a>
+            </div>
+            <div class="hero-stack">
+                <span class="tag">ESP32</span>
+                <span class="tag">Arduino</span>
+                <span class="tag">Raspberry Pi</span>
+                <span class="tag">Docker</span>
+                <span class="tag">Python</span>
+                <span class="tag">C / C++</span>
+            </div>
+        </div>
+    </div>
+</section>
+{% endblock %}
diff --git a/web/templates/view/projects.html b/web/templates/view/projects.html
index eb019e9..ae3ef42 100644
--- a/web/templates/view/projects.html
+++ b/web/templates/view/projects.html
@@ -1,16 +1,113 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    <h1>projects</h1>
-    <a href="/">index</a>
-    <a href="/projects">projects</a>
-    <a href="/about">about</a>
-    <a href="/contact">contact</a>
-    <a href="/experiences">experiences</a>
-</body>
-</html>
\ No newline at end of file
+{% extends "view/base.html" %}
+{% block title %}Projets — Nino LABAT{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='projecs.css') }}">
+{% endblock %}
+
+{% block content %}
+<section class="projects-section">
+    <div class="container">
+        <h1 class="section-title">Mes <span>projets</span></h1>
+        <p class="section-subtitle">6 réalisations mêlant logiciel, matériel et déploiement concret.</p>
+
+        <div class="projects-grid">
+
+            <div class="project-card">
+                <div class="project-num">01</div>
+                <h3>Infrastructure self-hosted</h3>
+                <p>
+                    Mise en place d'une infrastructure complète sur serveur Debian — reverse proxy Caddy,
+                    Portainer, Nextcloud, Vaultwarden, automatisation Docker Compose.
+                </p>
+                <div class="project-tags">
+                    <span class="tag">Docker</span>
+                    <span class="tag">Caddy</span>
+                    <span class="tag">Debian</span>
+                </div>
+            </div>
+
+            <div class="project-card">
+                <div class="project-num">02</div>
+                <h3>GestHub</h3>
+                <p>
+                    Application web de gestion de projets personnels avec authentification et sso,
+                    tableaux blancs, suivi de tâches et nextcloud. Stack Python Flask + SQLite, déployée
+                    en conteneur Docker.
+                </p>
+                <div class="project-tags">
+                    <span class="tag">Python</span>
+                    <span class="tag">Flask</span>
+                    <span class="tag">SQLite</span>
+                    <span class="tag">Docker</span>
+                    <span class="tag">Keycloak</span>
+                    <span class="tag">Nextcloud</span>
+                </div>
+            </div>
+
+            <div class="project-card">
+                <div class="project-num">03</div>
+                <h3>Mini Borne d'arcade</h3>
+                <p>
+                    Construction d'une borne d'arcade miniature. Boîtier conçu
+                    sur mesure, écran intégré, joystick et boutons et creation d'un jeu sur
+                    la robotique (RobAdventure).
+                </p>
+                <div class="project-tags">
+                    <span class="tag">Raspberry Pi</span>
+                    <span class="tag">Linux</span>
+                    <span class="tag">Unity</span>
+                    <span class="tag">Électronique</span>
+                </div>
+            </div>
+
+            <div class="project-card">
+                <div class="project-num">04</div>
+                <h3>ModulX</h3>
+                <p>
+                    Système de cartes électroniques modulaires pour divers projets.
+                    Carte de base avec ESP32, modules d'extension pour capteurs, actionneurs, gestion de l'alimentation et du firmware.
+                </p>
+                <div class="project-tags">
+                    <span class="tag">ESP32</span>
+                    <span class="tag">CAO Electronique</span>
+                    <span class="tag">Electronique</span>
+                    <span class="tag">IoT</span>
+                </div>
+            </div>
+
+            <div class="project-card">
+                <div class="project-num">05</div>
+                <h3>Pong Pong Arduino</h3>
+                <p>
+                    Recréation du jeu Pong sur une matrice LED avec Arduino. Boutons physiques,
+                    logique de jeu complète en C++, affichage du score en temps réel sur 7 segments.
+                </p>
+                <div class="project-tags">
+                    <span class="tag">Arduino</span>
+                    <span class="tag">C++</span>
+                    <span class="tag">Matrice LED</span>
+                    <span class="tag">Embarqué</span>
+                </div>
+            </div>
+
+            <div class="project-card">
+                <div class="project-num">06</div>
+                <h3>Robot mini-foot</h3>
+                <p>
+                    Robot autonome pour jeu de mini-football — moteurs DC, capteurs ultrason,
+                    algorithme de détection et poursuite de balle, contrôle via ESP32 avec
+                    alimentation embarquée.
+                </p>
+                <div class="project-tags">
+                    <span class="tag">ESP32</span>
+                    <span class="tag">Robotique</span>
+                    <span class="tag">C++</span>
+                    <span class="tag">Capteurs</span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</section>
+{% endblock %}