{% 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 %}