diff --git a/assets/buttons/firefox-now.png b/assets/buttons/firefox-now.png
new file mode 100644
index 0000000..9b2cd15
Binary files /dev/null and b/assets/buttons/firefox-now.png differ
diff --git a/assets/buttons/get-blender-2.8.png b/assets/buttons/get-blender-2.8.png
new file mode 100644
index 0000000..f6ae397
Binary files /dev/null and b/assets/buttons/get-blender-2.8.png differ
diff --git a/assets/buttons/iso-8601.png b/assets/buttons/iso-8601.png
new file mode 100644
index 0000000..aab523f
Binary files /dev/null and b/assets/buttons/iso-8601.png differ
diff --git a/assets/buttons/made-with-notepad++.png b/assets/buttons/made-with-notepad++.png
new file mode 100644
index 0000000..9220d3b
Binary files /dev/null and b/assets/buttons/made-with-notepad++.png differ
diff --git a/assets/buttons/minecraft.png b/assets/buttons/minecraft.png
new file mode 100644
index 0000000..7202f82
Binary files /dev/null and b/assets/buttons/minecraft.png differ
diff --git a/assets/buttons/powered-by-ubuntu.png b/assets/buttons/powered-by-ubuntu.png
new file mode 100644
index 0000000..017c3b2
Binary files /dev/null and b/assets/buttons/powered-by-ubuntu.png differ
diff --git a/assets/buttons/tea-powered.png b/assets/buttons/tea-powered.png
new file mode 100644
index 0000000..c7fc804
Binary files /dev/null and b/assets/buttons/tea-powered.png differ
diff --git a/assets/buttons/ubuntu.png b/assets/buttons/ubuntu.png
new file mode 100644
index 0000000..3a64cd9
Binary files /dev/null and b/assets/buttons/ubuntu.png differ
diff --git a/assets/links/maya.land.png b/assets/links/maya.land.png
new file mode 100644
index 0000000..aac56f4
Binary files /dev/null and b/assets/links/maya.land.png differ
diff --git a/content/_index.md b/content/_index.md
index 99a2f6c..6c252dc 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -4,4 +4,18 @@ date: 2018-02-09T10:17:00
 draft: false
 ---
 
-Minions ipsum gelatooo uuuhhh para tú bappleees para tú tank yuuu! Gelatooo po kass. Bappleees poopayee tulaliloo pepete belloo! Wiiiii. Baboiii hana dul sae bappleees pepete hana dul sae po kass po kass baboiii. Belloo! hahaha baboiii poopayee hahaha belloo! La bodaaa bee do bee do bee do chasy. Pepete poopayee tank yuuu! Butt la bodaaa wiiiii aaaaaah ti aamoo! Poulet tikka masala. Tatata bala tu daa ti aamoo! Poulet tikka masala poopayee wiiiii bappleees hana dul sae ti aamoo! Jeje belloo!
\ No newline at end of file
+## Salut !
+
+Je suis Achille Toupin, un 
+
+Ce site personnel regroupe ma présence sur internet
+
+Je collectionne les machines à écrire (entre autres)
+
+J'aime bien bricoler, les motos, le bois
+
+J'aime bien coder [git]()
+
+J'écris des [articles de blog](blog) quand ça me chante
+
+
diff --git a/layouts/home.html b/layouts/home.html
index c7aeb88..4133aa4 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -19,66 +19,117 @@
     <link rel="stylesheet" href="{{ $core.RelPermalink }}">
     
     <style>
-      body {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        justify-content: center; /* Center the main-screen horizontally */
-        align-items: stretch; /* Ensure full height */
-        min-height: 100vh; /* Ensure the body takes up the full viewport height */
-      }
-
-      .main-screen {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between; /* Ensure side-screens are adjacent to main-content */
-        width: auto; /* Allow the width to adjust based on content */
-        max-width: 100%; /* Prevent overflow */
-        gap: 0;
-        text-align: justify;
-      }
-
-      .side-screen {
-        height: 100vh;
-        overflow-y: auto; /* Allow scrolling if content overflows */
-        flex: 0 0 400px; /* Fixed width of 400px */
-      }
-
-      .main-content {
-        flex-grow: 1; /* Take up the remaining space between side-screens */
-        max-width: 750px; /* Optional: Limit max width */
-        margin: 0 25px;
-      }
-
-      .site-title {
-        width: 100%;
-        text-align: center;
-      }
-
-      .icon-row {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        width: 100%;
-        gap: 2rem;
-      }
-
-      .icon-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1rem;
-      }
-
-      @media (max-width: 1380px) {
-        .side-screen {
-          display: none; /* Hide side-screens on smaller screens */
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center; /* Center the main-screen horizontally */
+            align-items: stretch; /* Ensure full height */
+            min-height: 100vh; /* Ensure the body takes up the full viewport height */
         }
 
         .main-screen {
-          justify-content: center; /* Center main-content when side-screens are hidden */
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between; /* Ensure side-screens are adjacent to main-content */
+            width: auto; /* Allow the width to adjust based on content */
+            max-width: 100%; /* Prevent overflow */
+            gap: 0;
+            text-align: justify;
         }
-      }
+
+        .side-screen {
+            height: 100vh;
+            overflow-y: auto; /* Allow scrolling if content overflows */
+            flex: 0 0 400px; /* Fixed width of 400px */
+        }
+
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1; /* Take up the remaining space between side-screens */
+            max-width: 900px; /* Optional: Limit max width */
+            margin: 0 25px;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between; /* Space between the title and navigation */
+            align-items: center; /* Align items vertically in the center */
+            padding: 10px 20px; /* Optional: Add some padding */
+        }
+        
+        .site-title {
+            flex-grow: 1;
+            margin: 0; /* Remove default margin */
+            font-size: 3rem; /* Adjust font size as needed */
+
+        }
+
+        .navigation {
+            flex-grow: 3;
+            display: flex;
+
+        }
+
+        .navigation ul {
+            display: flex;
+            flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
+            list-style: none;
+            margin: 0; /* Remove default margin */
+            padding: 0; /* Remove default padding */
+            justify-content: flex-end; /* Align items to the right */
+        }
+
+        .navigation ul li {
+            margin: 0 10px 0 10px;
+            
+        }
+
+        .navigation ul li a:hover {
+            text-decoration: underline; /* Add underline on hover */
+            
+        }
+
+        .center-content {
+            display: flex;
+            flex-grow: 1; /* Allow it to grow */
+            gap: 20px; /* Optional: Add spacing between child elements */
+        }
+
+        .presentation, .side-content-column {
+            flex: 1; /* Make both elements take up equal width */
+        }
+
+        .presentation {
+            max-width: 100%; /* Ensure it doesn't exceed its container */
+        }
+
+        .side-content-column {
+            max-width: 100%; /* Ensure it doesn't exceed its container */
+        }
+
+        @media (max-width: 1380px) {
+            .side-screen {
+            display: none; /* Hide side-screens on smaller screens */
+            }
+
+            .main-screen {
+            justify-content: center; /* Center main-content when side-screens are hidden */
+            }
+        }
+          /* Media query for when main-content is less than 700px wide */
+        @media (max-width: 700px) {
+            .center-content, .header{
+                flex-direction: column; /* Stack elements vertically */
+            }
+
+            .presentation, .side-content-column, .site-title, .navigation{
+                flex: none; /* Reset flex property */
+                width: 100%; /* Make them take full width */
+            }
+        }
+
     </style>
 </head>
 
@@ -137,51 +188,86 @@
             {{ partial "posts-defile.html" (dict "context" . "direction" "up") }}
         </div>
         <div class="main-content">
-            <h1 class="site-title">{{ .Title }}</h1>
+            
+            <div class="header">
 
-            {{- if (not site.Params.disableThemeToggle) }}
-            <button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
-                <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
-                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                </svg>
-                <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
-                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                    stroke-linejoin="round">
-                    <circle cx="12" cy="12" r="5"></circle>
-                    <line x1="12" y1="1" x2="12" y2="3"></line>
-                    <line x1="12" y1="21" x2="12" y2="23"></line>
-                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-                    <line x1="1" y1="12" x2="3" y2="12"></line>
-                    <line x1="21" y1="12" x2="23" y2="12"></line>
-                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-                </svg>
-            </button>
-            {{- end }}
+                <h1 class="site-title">Achille Toupin</h1>
+
+                <nav class="navigation">
+                    <ul>
+                        <li>📝 <a href="blog">Blog</a></li>
+                        <p> · </p>
+                        <li>📠 <a href="collection">Machines</a></li>
+                        <p> · </p>
+                        <li>🔗 <a href="liens">Liens</a></li>
+                        <p> · </p>
+                        <li>🔖 <a href="liens">Marque-pages</a></li>
+                        <p> · </p>
+                        <li>🌐 <a href="blogroll">Blogroll</a></li>
+                        <p> · </p>
+                        <li>❓ <a href="blogroll">A propos</a></li>
+                        <p> · </p>
+                        <li>✉️ <a href="contact">Contact</a></li>
+                        
+                    </ul>
+
+                    {{- if (not site.Params.disableThemeToggle) }}
+                    <button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
+                        <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                        </svg>
+                        <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
+                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <circle cx="12" cy="12" r="5"></circle>
+                            <line x1="12" y1="1" x2="12" y2="3"></line>
+                            <line x1="12" y1="21" x2="12" y2="23"></line>
+                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                            <line x1="1" y1="12" x2="3" y2="12"></line>
+                            <line x1="21" y1="12" x2="23" y2="12"></line>
+                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                        </svg>
+                    </button>
+                    {{- end }}
+                </nav>
+
+
+                
 
 
-            {{ .Content }}
-            <div class="icon-row">
-                <a class="icon-item" href="/blog">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Blog</span>
-                </a>
-                <a class="icon-item" href="/collection">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Collection</span>
-                </a>
-                <a class="icon-item" href="/recettes">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Recettes</span>
-                </a>
-                <a class="icon-item" href="/livres">
-                    <img src="/icon_work.webp" alt="Work icon by Shar"></img>
-                    <span>Livres</span>
-                </a>
             </div>
+
+
+            
+            <div class="center-content">
+
+                <div class="presentation">
+                    {{ .Content }}
+                </div>
+
+                <div class="side-content-column">
+
+                    <div class="dernier-article">
+                        <h2>Mon dernier article</h2>
+                        {{ partial "posts-recents-carte.html" . }}
+                    </div>
+                    
+                    <div class="dernier-article">
+                        <h2>Mon dernier article</h2>
+                        {{ partial "posts-recents-carte.html" . }}
+                    </div>
+                </div>
+
+            </div>
+
+            {{ partial "buttons.html"}}
+
+            {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
+
         </div>
         <div class="side-screen">
             {{ partial "posts-defile.html" (dict "context" . "direction" "down") }}
diff --git a/layouts/partials/buttons.html b/layouts/partials/buttons.html
new file mode 100644
index 0000000..faf4c5d
--- /dev/null
+++ b/layouts/partials/buttons.html
@@ -0,0 +1,34 @@
+<style>
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        max-width: 100vw; /* Make the container as wide as the viewport */
+        gap: 3px;
+        margin: 0; /* Remove any default margin */
+        padding: 0; /* Remove any default padding */
+    }
+    .button {
+        display: inline-block; 
+        border: none;
+        margin: 0;
+        padding: 0;
+        border-radius: 0;
+        background: none;
+        image-rendering: auto;
+        image-rendering: crisp-edges;
+        image-rendering: pixelated;
+        image-rendering: -webkit-optimize-contrast;
+    }
+</style>
+
+<div class="buttons">
+{{ $buttons := resources.Match "buttons/*" }}
+{{ if $buttons }}
+    {{ range $index, $button := $buttons }}
+        <img class="button" src="{{ $button.RelPermalink }}" alt="Button {{ $button.Name | path.Base }}" />
+    {{ end }}
+{{ else }}
+    <p>No buttons available.</p>
+{{ end }}
+</div>
\ No newline at end of file
diff --git a/layouts/partials/donnees-chargement.html b/layouts/partials/donnees-chargement.html
index 1399e29..829ad69 100644
--- a/layouts/partials/donnees-chargement.html
+++ b/layouts/partials/donnees-chargement.html
@@ -3,7 +3,7 @@ Code volé chez lucien
 https://git.shenanigans.cc/globuzma/blog/commit/695e63b275ca03ec53a099d68f274c9466d0539f 
 -->
 
-<p class="small-text" id="data-used">0kB chargés</p>
+<span class="small-text" id="data-used">0kB chargés</span>
 <script>
   window.addEventListener('load', function () {
     let totalTransferSize = 0;
diff --git a/layouts/partials/posts-recents-carte.html b/layouts/partials/posts-recents-carte.html
new file mode 100644
index 0000000..8008960
--- /dev/null
+++ b/layouts/partials/posts-recents-carte.html
@@ -0,0 +1,19 @@
+{{ $n := 1 }} <!-- Change this value to set the number of posts to display -->
+{{ range first $n (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
+
+  {{- $image := .Resources.GetMatch (printf "%s" .Params.cover.image) -}}
+  {{- if $image -}}
+
+    {{- $optimizedImage := $image.Fill "100x100 webp q95 Center" -}}
+    <a href="{{ .RelPermalink }}" >
+        <h3>{{ .Title }}</h3>
+        <img src="{{ $optimizedImage.RelPermalink }}" alt="{{ .Title }} cover image"></img>
+        <small>{{ .Date.Format "January 2, 2006" }}</small>
+        <p>{{ .Summary | truncate 100 }}</p>
+        
+    </a>
+  {{ end }}
+  
+
+{{ end }}
+
diff --git a/readMe.md b/readMe.md
index a8a3d09..25f71a0 100644
--- a/readMe.md
+++ b/readMe.md
@@ -38,5 +38,6 @@
     - [x] Faire fonctionner l'auth avec forgejo
     - [ ] Configurer decap CMS pour qu'il affiche les posts, et fonctionne avec les page bundles
     - [ ] Configurer les galleries dans Decap CMS
-
+- [ ] Ajouter des catégories aux articles et une liste de catégories sur page accueil
+- [ ] Boutons grossissent quand la souris est dessus, comme https://88x31.kate.pet/