ajout du lien daily dans le bandeau de navigation

README.md

@@ -0,0 +1,12 @@
+# Site internet de Hatmos
+
+## Pages ajoutees
+- [x] IMEMA
+- [ ] Pongzilla
+- [x] Alize
+- [x] Porsche 944
+- [x] Gitea
+- [x] Les Copains
+- [ ] Auto-water
+- [ ] Auto-Slicer
+- [ ] Clap

content/404.md

@@ -0,0 +1,4 @@
++++
+title = "Page non trouve"
+template = "404.html"
++++

content/CV.md

@@ -0,0 +1,45 @@
++++
+title = "CV Thomas LETELLIER"
+description = "Curriculum Vitae de Thomas LETELLIER"
+
+[extra]
+keywords = ["CV", "Thomas LETELLIER", "letellier", "Hatmos", "hatmos"]
++++
+
+# Thomas LETELLIER
+
+- Tel : 07 80 33 57 13
+- Mail : thomas.letellier2812@gmail.com
+
+---
+
+## Experiences Professionnelles
+
+>### Technicien en Automatisme
+>#### Direction Maitre de l'Energie Ville de Besancon
+>- Developpement et mise a jour de logiciel de journalisation Modbus
+>- Conception et cablage d'armoires electriques
+>- Programmation d'automates Siemens et Soffrel
+
+>### Alternant Technicien en Automatisme
+>#### Eiffage Energie Systemes Clemessy
+>- Conception de vues de supervision pour une Unite de Valorisation Energetique
+>- Installation et interfacage d'une Interface Homme Machine pour un reseau de froid urbain
+>- Conception et presentation d'une supervision aupres d'un client
+
+## Formation
+
+>### DUT Genie Electrique et informatique industrielle
+>#### Institut Universitaire de Technologie de Rouen
+
+>### Baccalaureat General
+>#### Lycee Polyvalent Raymond Queneau
+
+## Competences
+
+>- Programmation informatique : Rust, C, Python
+>- Programmation Automate : Structure, LADDER, Grafcet
+>- Conception et assemblage de cartes electroniques
+>- Conception de modeles 3D sur Solidworks 3DExperience
+>- Pack Office
+>- Systemes Linux

content/_index.md

@@ -0,0 +1,18 @@
++++
+title = "Hatmos"
+description = "Site portefolio de mes objectifs et accomplissements"
+
+[extra]
+keywords = ["Hatmos", "hatmos", "portefolio"]
+aside = "aside-index.md"
++++
+
+# Accomplissements
+- [IMEMA](@/accomplissements/IMEMA.md)
+- Pongzilla
+- [Serveur Gitea](@/accomplissements/server-gitea.md)
+- Serveur d'impression CUPS
+
+# Objectifs
+- [Alize](@/objectifs/alize.md)
+- [Porsche 944](@/objectifs/porsche-944.md)

content/accomplissements/IMEMA.md

@@ -1,5 +1,9 @@
 +++
 title = "IMEMA"
+description = "Interface Modbus pour l'Enregistrement des Mesures d'Automates"
+
+[extra]
+keywords = ["IMEMA", "Modbus", "PLC", "Automate", "DB", "Hatmos", "hatmos"]
 +++
 
 Interface Modbus pour l'Enregistrement des Mesures d'Automates

content/accomplissements/_index.md

@@ -1,6 +1,7 @@
 +++
 title = "Liste des Accomplissements"
+description = "Liste "
 sort_by = "title"
-template = "accomplissements.html"
+template = "sections.html"
 page_template = "page.html"
 +++

content/accomplissements/server-gitea.md

@@ -0,0 +1,27 @@
++++
+title = "Serveur Gitea"
+description = "Une page qui explique comment j'ai mis en place un clone auto-heberge de github dans mon salon."
+
+[extra]
+keywords = ["gitea", "github", "homeserver"]
+aside = "aside-server-gitea.md"
++++
+
+# Les premices du projet
+
+Dans mon voyage dans le monde de la programmation informatique, j'ai fini par eprouver la necessite de versionner les programmes que je developpe.
+Pour repondre a cette necessite j'ai commence a utiliser git mais le besoin de travailler durant les trajets pour optimiser le temps de locomotion m'a pousse a chercher une solution de serveur pour stocker tous ces repo git.
+Je ne voulais pas dependre de microsoft et leur grille tariffaire, j'ai donc porte mon choix sur [Gitea](https://about.gitea.com/).
+
+# La mise en oeuvre
+
+Pour mettre en place Gitea sur mon serveur personnel, j'ai tout simplement suivi la documentation fournie par l'editeur du logiciel et tout a fonctionne du premier coup.
+J'ai egalement fais en sorte que mon serveur sois accessible en dehors de mon reseau local et sois accessible sans que j'ai a tapper l'ip de ma box internet.
+J'ai donc tout naturellement fais de la redirection de port avec ma box et j'ai editer une zone DNS avec mon fournisseur de nom de domaine.
+Pour eviter d'etre pollue par des inconnus qui s'amuseraient a creer des comptes et saturer le stockage de mon serveur j'ai retire la possibilite de creer des comptes.
+Si jamais vous souhaitez creer un compte pour heberger vos propres repo git veuillez me contacter en precisant vos intentions.
+
+# La version actuelle de l'installation
+
+Il me reste encore a automatiser la publication des nouvelles versions de mon site apres un push sur le repo consacre, mais cela ne fais que tarder.
+Finalement, si vous souhaitez voir ce que donne le serveur dans les faits, je vous invite a suivre [ce lien](https://git.hatmos.xyz/) pour acceder a la page d'acceuil, vous pourrez vous connecter si vous possedez un compte ou voir les repo visibles et voir mon compte via le bouton "Explore".

content/aside/aside-index.md

@@ -0,0 +1,6 @@
++++
+title = "photo red glass porsche"
+description = "une photo d'une porsche 944 avec uniquement la couleur rouge et en effet verre raye"
++++
+
+{{ image(src="/porsche-944-turbo-red-glass.jpg", alt="Une photo d'une porsche 944 avec uniquement la couleur rouge et un effet de verre raye", height="100%") }}

content/aside/aside-server-gitea.md

@@ -0,0 +1,6 @@
++++
+title = "tl;dr server-gitea"
+description = "tl;dr server-gitea"
++++
+# *TL;DR :*
+L’auteur voulait versionner ses projets et travailler dessus même en déplacement. Pour éviter les services payants de Microsoft, il a installé **Gitea** sur son serveur personnel en suivant la documentation. Il a rendu le serveur accessible depuis Internet via redirection de port et DNS. Pour éviter les abus, la création de comptes est désactivée (il faut le contacter pour en obtenir un). Il prévoit encore d’automatiser la publication de son site après un push Git, et invite les gens à visiter le serveur pour voir les dépôts publics.

content/copains.md

@@ -0,0 +1,11 @@
++++
+title = "Les copains"
+description = "Page de redirection vers les sites respectifs de mes amis"
+
+[extra]
+keywords = ["amis", "site", "lien"]
++++
+
+- [SpicyFire](https://spicyfire21.github.io/)
+- [MasterAcnolo](http://masteracnolo.github.io/)
+- [Paul Marchiset](https://paulmarchiset.me/)

content/cv/CV.md

@@ -1,10 +1,15 @@
 +++
+title = "CV Thomas LETELLIER"
+description = "Curriculum Vitae de Thomas LETELLIER"
+
+[extra]
+keywords = ["CV", "Thomas LETELLIER", "letellier", "Hatmos", "hatmos"]
 +++
 
 # Thomas LETELLIER
 
-Tel : 07 80 33 57 13
-Mail : thomas.letellier2812@gmail.com
+- Tel : 07 80 33 57 13
+- Mail : thomas.letellier2812@gmail.com
 
 ---
 

content/daily/16-03-2026.md

@@ -0,0 +1,11 @@
++++
+title = "16/03/2026"
+description = "Apprentissage du Ukulele"
+[extra]
+keywords = ["Ukulele"]
++++
+
+# 16/03/2026
+## Ukulele
+---
+{{ audio(src="/audio/ukulele/16-03-2026.mp3")}}

content/daily/_index.md

@@ -0,0 +1,6 @@
++++
+title = "Daily"
+description = "Ajout journalier d'entrees sur le site"
+template = "sections.html"
+page_template = "page.html"
++++

content/objectifs/_index.md

@@ -1,6 +1,7 @@
 +++
 title = "Liste des Objectifs"
+description = "Objectifs a atteindre de Hatmos"
 sort_by = "title"
-template = "objectifs.html"
+template = "sections.html"
 page_template = "page.html"
 +++

content/objectifs/alize.md

@@ -0,0 +1,29 @@
++++
+title = "Alize"
+description = "Presentation de Concord le service de voice chat rapide et ephemere"
+
+[extra]
+keywords = ["voice chat", "voice room", "hatmos", "Hatmos", "League of Legends"]
++++
+
+Alize Voice Chat est une application web qui a pour but de fournir un salon vocal sans friction, ephemere et freemium pour le plus grand nombre.
+La raison qui justifie l'existance de ce service est l'absence de chat vocal pour les joueurs de partie classe solo sur League of Legends.
+Le jeu est un jeu d'equipe a 5 cinq joueurs qui demande de la coordination et de la planification. Sans chat vocal, il n'est pas possible d'exploiter le potentiel des joueurs.
+Voila les premices a l'origine de ce projet.
+
+Cette Application web doit pouvoir repondre a certaines necessites:
+- Une page d'acceuil pour diriger les inities vers les fonctionnalites qu'ils souhaitent
+- Une page applicative qui fourni le service principal (en l'occurence ici, le salon vocal)
+- Une page qui permet la modifications de preferences et parametres pour les membres inscrits mais egalement les membres payants
+
+L'objectif pour la page applicative est de charger rapidement et donner acces a toutes les fonctionnalites sans rendre l'interface illisible.
+Par exemple avec une liste optionnelle de choses a verifier par l'utilisateur dispose en colonne sur un bord de l'ecran.
+Dans tous les cas, l'utilisateur doit pouvoir utiliser le service avec le moins de clics possibles.
+
+Le nombre de clics doit augmenter avec l'implication de l'utilisateur dans l'application :
+- Un nouvel invite ne doit faire que 3 clics maximum pour avoir acces au service fonctionnel
+- Un invite membre doit faire plus de clics pour obtenir la configuration qu'il souhaite (par exemple via les preferences)
+- Un membre payant peux creer un salon preconfigure depuis ses preferences
+- Un membre gratuit doit configurer son salon a la main avant de diffuser son invitation
+
+Ce sont des pistes de design cote client et ne correspondent en rien a des decision arretes pour le design de l'application.

content/objectifs/porsche-944.md

@@ -1,5 +1,9 @@
 +++
 title = "Porsche 944"
+description = "Objectifs de Voiture de reve"
+
+[extra]
+keywords = ["porsche 944", "porsche", "dream car", "hatmos", "Hatmos"]
 +++
 
-{{ image(src="/porsche-944-2-7.jpeg" ,alt="Porsche 944 2.7L 1989", width="1200px") }}
+{{ image(src="/porsche-944-2-7.jpeg" ,alt="Porsche 944 2.7L 1989", width="100%") }}

public/style.css

@@ -0,0 +1,80 @@
+.titre{
+  font-family: "Courier New", monospace;
+  margin-left: 1%;
+}
+
+blockquote{
+  background-color: lightgrey;
+}
+
+.footer-text{
+  background-color: lightgrey;
+  margin: 5px;
+  text-decoration: none;
+}
+
+.nav-list{
+  list-style-type: none;
+  margin: 5px;
+  padding: 0;
+  overflow: hidden;
+  background-color: #cc0000;
+  border-radius: 10px 10px 10px 10px;
+}
+
+.nav-element{
+  float: left;
+}
+
+.nav-link{
+  display: block;
+  text-align: center;
+  color: white;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.nav-link:hover{
+  background-color: #cc2222;
+}
+
+.home{
+  color: black;
+  margin: 5px;
+  text-decoration: none;
+}
+
+.main-content{
+  margin: 5px;
+  border-style: solid;
+  border-width: 5px;
+  border-color: #cc0000;
+  border-radius: 10px 10px 10px 10px;
+  padding: 10px;
+}
+
+footer{
+  margin: 5px;
+}
+
+.layout:has(aside) {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+}
+
+@media (max-width: 768px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+ aside{
+   margin: 5px;
+   background-color: #cc0000;
+   color: white;
+   border-radius: 10px 10px 10px 10px;
+   padding: 10px;
+ }
+
+p {
+  text-align: justify;
+}

static/style.css

@@ -1,11 +1,80 @@
 .titre{
   font-family: "Courier New", monospace;
+  margin-left: 1%;
 }
 
 blockquote{
   background-color: lightgrey;
 }
 
-footer{
+.footer-text{
   background-color: lightgrey;
+  margin: 5px;
+  text-decoration: none;
+}
+
+.nav-list{
+  list-style-type: none;
+  margin: 5px;
+  padding: 0;
+  overflow: hidden;
+  background-color: #cc0000;
+  border-radius: 10px 10px 10px 10px;
+}
+
+.nav-element{
+  float: left;
+}
+
+.nav-link{
+  display: block;
+  text-align: center;
+  color: white;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+.nav-link:hover{
+  background-color: #cc2222;
+}
+
+.home{
+  color: black;
+  margin: 5px;
+  text-decoration: none;
+}
+
+.main-content{
+  margin: 5px;
+  border-style: solid;
+  border-width: 5px;
+  border-color: #cc0000;
+  border-radius: 10px 10px 10px 10px;
+  padding: 10px;
+}
+
+footer{
+  margin: 5px;
+}
+
+.layout:has(aside) {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+}
+
+@media (max-width: 768px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+ aside{
+   margin: 5px;
+   background-color: #cc0000;
+   color: white;
+   border-radius: 10px 10px 10px 10px;
+   padding: 10px;
+ }
+
+p {
+  text-align: justify;
 }

templates/404.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <div>
+    <h1>404 Not Found</h1>
+    <p>Aucune page trouvee comportant cet url</p>
+  </div>
+{% endblock content %}

templates/accomplissements.html

@@ -1,13 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<h1>
-  {{section.title}}
-</h1>
-<ul>
-  {% for page in section.pages %}
-  <li><a href="{{page.permalink | safe }}">{{ page.title }}</a></li>
-  {% endfor %}
-</ul>
-
-{% endblock content %}

templates/base.html

@@ -2,27 +2,27 @@
 
 <html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <title>Hatmos</title>
-  <meta name="viewport" content="device-width, initial-scale=1">
-  <meta name="description" content="Site portefolio de mes objectifs de vie et mes accomplissements">
-  <link rel="stylesheet" href="{{get_url(path='style.css')}}">
-  <link rel="icon" type="image/png" href="{{get_url(path='favicon.png')}}">
+  {% include "partials/head.html" %}
 </head>
-<header>
-  <h1 class="titre"><a href="https://www.hatmos.xyz/">Le site de Hatmos</a></h1>
-  <ul>
-    <li class="titre"><a href="{{ get_url(path='@/accomplissements/_index.md')}}">Accomplissements</a></li>
-    <li class="titre"><a href="{{ get_url(path='@/objectifs/_index.md')}}">Objectifs</li>
-    <li class="titre"><a href="{{ get_url(path='@/cv/CV.md')}}">CV</a></li>
-  </ul>
-</header>
 <body>
-  <section>
+  <header>
+    <h1><a class="home" href="https://www.hatmos.xyz/">Le site de Hatmos</a></h1>
+  </header>
+  <nav>
+    <ul class="nav-list">
+      <li class="nav-element"><a class="nav-link" href="{{ get_url(path='@/daily/_index.md')}}">Daily</a></li>
+      <li class="nav-element"><a class="nav-link" href="{{ get_url(path='@/accomplissements/_index.md')}}">Accomplissements</a></li>
+      <li class="nav-element"><a class="nav-link" href="{{ get_url(path='@/objectifs/_index.md')}}">Objectifs</a></li>
+      <li class="nav-element"><a class="nav-link" href="{{ get_url(path='@/CV.md')}}">CV</a></li>
+    </ul>
+  </nav>
+  <div class="layout">
     {% block content %} {% endblock content %}
-  <section>
+    {% include "partials/aside.html" %}
+   </div>
 </body>
 <footer>
-  <small id="footer-text">© <script>document.write(new Date().getFullYear())</script> Hatmos. All Rights Reserved.</small>
+  <small class="footer-text">© <script>document.write(new Date().getFullYear())</script> Hatmos. All Rights Reserved.</small>
+  <small class="footer-text"><a href="{{ get_url(path='@/copains.md')}}">Chez les copains</a></small>
 </footer>
 </html>

templates/index.html

@@ -1,29 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-  <div>
-    <h2 class="titre">Bienvenue.</h2>
-    <p id="presentation">
-      Voici un site pour faire le tour de mes objectifs de vie et projets personnels et professionels ainsi que mes accomplissements.
-    </p>
-  </div>  
-  <div>
-    <h2 class="titre">Accomplissements</h2>
-    <p>
-      <ul>
-        <li class="second-section-list-element"><a href="{{ get_url(path='@/accomplissements/IMEMA.md')}}">IMEMA</a></li>
-        <li class="second-section-list-element"><a href="pongzilla.html">Pongzilla</a></li>
-      </ul>
-    </p>
-  </div>
-  <div>
-    <h2 class="titre">Objectifs</h2>
-    <ul>
-      <li class="third-section-list-element"><a href="concordvc.html">ConcordVC</a></li>
-      <li class="third-section-list-element"><a href="autoslicer.html">Auto-Slicer</a></li>
-      <li class="third-section-list-element"><a href="autowater.html">Auto-water</a></li>
-      <li class="third-section-list-element"><a href="{{ get_url(path='@/objectifs/porsche-944.md')}}">Porsche 944 turbo</a></li>
-      <li class="third-section-list-element"><a href="mobilite.html">Mobilite</a></li>
-    </ul>
-  </div>
+    <main class="main-content" id="landing">
+        {{ section.content | safe }}
+    </main>
 {% endblock content %}

templates/objectifs.html

@@ -1,13 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<h1>
-  {{section.title}}
-</h1>
-<ul>
-  {% for page in section.pages %}
-  <li><a href="{{page.permalink | safe}}">{{page.title}}</a></li>
-  {% endfor %}
-</ul>
-
-{% endblock content %}

templates/page.html

@@ -1,11 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-
-<h1>
-  {{ page.title }}
-</h1>
-
+  <main class="main-content">  
     {{ page.content | safe }}
-
+  </main>
 {% endblock content %}

templates/partials/aside.html

@@ -0,0 +1,6 @@
+{% if page.extra.aside %}
+<aside>
+  {% set aside = get_page(path="aside/" ~ page.extra.aside) %}
+  {{ aside.content | safe }}
+</aside>
+{% endif %}

templates/partials/head.html

@@ -0,0 +1,20 @@
+<meta charset="UTF-8">
+<title>
+  {% if page %}
+    {{page.title}}
+  {% elif section %}
+    {{section.title}}
+  {% endif %}
+</title>
+<meta name="viewport" content="device-width, initial-scale=1.0">
+{% if page %}
+<meta name="description" content="{{page.description}}">
+{% elif section %}
+<meta name="description" content="{{section.description}}">
+{% endif %}
+{% if page and page.extra.keywords %}
+<meta name="keywords" content="{{page.extra.keywords | join(sep=', ')}}">
+{% endif %}
+<link rel="stylesheet" href="{{get_url(path='style.css')}}">
+<link rel="icon" type="image/png" href="{{get_url(path='favicon.png')}}">
+

templates/sections.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% block content %}
+<main class="main-content">
+  <h1>
+    {{section.title}}
+  </h1>
+  <ul>
+    {% for page in section.pages %}
+    <li><a href="{{page.permalink | safe }}">{{ page.title }}</a></li>
+    {% endfor %}
+  </ul>
+</main>  
+{% endblock content %}

templates/shortcodes/audio.html

@@ -0,0 +1,3 @@
+<audio controls>
+  <source src="{{ get_url(path=src) }}" type="audio/mpeg">
+</audio>

zola.toml

@@ -0,0 +1,18 @@
+# The URL the site will be built for
+base_url = "https://www.hatmos.xyz"
+
+title = "Hatmos"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+
+[markdown.highlighting]
+theme = "catppuccin-mocha"
+
+[extra]
+# Put all your custom variables here