From f8b0dda08d86dca7b56f6d0ef4d4cdebb45c6262 Mon Sep 17 00:00:00 2001
From: Ayc0 <ayc0.benj@gmail.com>
Date: Sat, 2 Nov 2024 19:18:01 +0100
Subject: [PATCH] Update home page sections

---
 src/content/docs/index.mdx | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index f4d5551..f917d32 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -13,22 +13,39 @@ lastUpdated: false
 
 import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components";
 
+<a href="/posts/" style="text-decoration: none; color: initial; display: grid">
+  <Card title="Blog posts">List of all the blog posts I wrote</Card>
+</a>
+
+## Projects
+
 <CardGrid stagger>
-  <a href="/posts/" style="text-decoration: none; color: initial">
-    <Card title="Blog posts">List of all the blog posts I wrote</Card>
-  </a>
-  <a href="/length-units/" style="text-decoration: none; color: initial">
+  <a
+    href="/length-units/"
+    style="text-decoration: none; color: initial; display: grid"
+  >
     <Card title="CSS length units">
       Listing of all CSS length units available, with their definitions, links
       to doc, and live visualization of their sizes
     </Card>
   </a>
-  <a href="/color-visualizer/" style="text-decoration: none; color: initial">
+  <a
+    href="/color-visualizer/"
+    style="text-decoration: none; color: initial; display: grid"
+  >
     <Card title="Color visualizer">
       Page to play with colors, and represent then in different color spaces
     </Card>
   </a>
-  <a href="/react-timings/" style="text-decoration: none; color: initial">
+</CardGrid>
+
+## Experiments
+
+<CardGrid stagger>
+  <a
+    href="/react-timings/"
+    style="text-decoration: none; color: initial; display: grid"
+  >
     <Card title="React timings">
       Experiment around React, life cycles, timings, and different rendering
       modes
@@ -36,7 +53,7 @@ import { CardGrid, Card, LinkCard } from "@astrojs/starlight/components";
   </a>
   <a
     href="/hexagons-without-rules/"
-    style="text-decoration: none; color: initial"
+    style="text-decoration: none; color: initial; display: grid"
   >
     <Card title="Hexagons">
       Small sandbox to play with hexagons, and with React & canvas.
-- 
2.51.2