add all modif in the portfolio git
This commit is contained in:
M1n-0
@@ -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>
|
||||
{% 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é & 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 & 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 %}
|
||||
|
||||
33
web/templates/view/base.html
Normal file
33
web/templates/view/base.html
Normal file
@@ -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 — <span>M1n-0</span> © 2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
</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>
|
||||
{% 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 %}
|
||||
|
||||
@@ -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>
|
||||
{% 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 & 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 %}
|
||||
|
||||
@@ -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>
|
||||
{% 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é & 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 %}
|
||||
|
||||
@@ -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>
|
||||
{% 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 %}
|
||||
|
||||
Reference in New Issue
Block a user