Redesign homepage into personal showcase with project stories

Replace technical card descriptions with first-person project stories
(maintainer's voice, verbatim) and add italic section intros (ledes).
Soften the layout: larger readable story text, generous whitespace,
de-emphasized muted tech tags, subtle GitHub links under each story.
Keep dark mode + mobile friendly; Dockerfile and footer unchanged.

styles.css

@@ -6,7 +6,7 @@
   --accent: #58a6ff;
   --border: #30363d;
   --tag-bg: #1f2630;
-  --radius: 10px;
+  --radius: 12px;
   --maxw: 64rem;
 }
 
@@ -29,7 +29,7 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   color: var(--fg);
   background: var(--bg);
-  line-height: 1.6;
+  line-height: 1.7;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
@@ -43,7 +43,7 @@ body {
 
 /* Header */
 .site-header {
-  padding: 2.5rem 0 1.5rem;
+  padding: 3rem 0 2rem;
   border-bottom: 1px solid var(--border);
 }
 .site-title {
@@ -61,21 +61,23 @@ body {
 
 /* Sections */
 .section {
-  padding: 2rem 0 0.5rem;
+  padding: 2.75rem 0 1rem;
   scroll-margin-top: 1rem;
 }
-.section-head { margin-bottom: 1.25rem; }
+.section-head { margin-bottom: 1.75rem; }
 .section-title {
-  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
-  margin: 0 0 0.35rem;
+  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
+  margin: 0 0 0.6rem;
   letter-spacing: -0.01em;
   font-weight: 700;
 }
-.section-desc {
-  margin: 0 0 0.4rem;
+.section-lede {
+  margin: 0 0 0.6rem;
   color: var(--muted);
-  font-size: 0.95rem;
-  max-width: 48rem;
+  font-size: 1.05rem;
+  max-width: 46rem;
+  font-style: italic;
+  line-height: 1.65;
 }
 .section-link {
   color: var(--accent);
@@ -88,8 +90,8 @@ body {
 /* Cards grid */
 .cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
-  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  gap: 1.25rem;
 }
 
 .card {
@@ -98,59 +100,61 @@ body {
   background: var(--bg-elev);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 1.1rem 1.15rem 1.15rem;
-  transition: border-color 0.15s ease, transform 0.15s ease;
+  padding: 1.5rem 1.4rem 1.4rem;
+  transition: border-color 0.15s ease;
 }
 .card:hover { border-color: var(--accent); }
 .card:focus-within { border-color: var(--accent); }
 
 .card-name {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.75rem;
   font-size: 1.1rem;
   font-weight: 700;
   letter-spacing: -0.01em;
 }
-.card-desc {
-  margin: 0 0 0.85rem;
-  color: var(--muted);
-  font-size: 0.92rem;
+.card-story {
+  margin: 0 0 1.1rem;
+  color: var(--fg);
+  font-size: 1.02rem;
+  line-height: 1.65;
   flex: 1 1 auto;
 }
 
-/* Tags */
+/* Tags — small, muted detail */
 .tags {
   list-style: none;
-  margin: 0 0 0.9rem;
+  margin: 0 0 0.85rem;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
 }
 .tags li {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   line-height: 1.4;
   color: var(--muted);
   background: var(--tag-bg);
   border: 1px solid var(--border);
   border-radius: 999px;
-  padding: 0.12rem 0.55rem;
+  padding: 0.1rem 0.5rem;
   white-space: nowrap;
+  opacity: 0.85;
 }
 
-/* Card link */
+/* Card link — subtle, sits below the story */
 .card-link {
   align-self: flex-start;
-  color: var(--accent);
+  color: var(--muted);
   text-decoration: none;
-  font-size: 0.9rem;
-  font-weight: 600;
+  font-size: 0.82rem;
+  font-weight: 500;
 }
-.card-link:hover { text-decoration: underline; }
+.card-link:hover { color: var(--accent); text-decoration: underline; }
 
 /* Footer */
 .site-footer {
-  margin-top: 2.5rem;
-  padding: 1.5rem 0 2rem;
+  margin-top: 3rem;
+  padding: 1.75rem 0 2.25rem;
   border-top: 1px solid var(--border);
 }
 .footer-links {
@@ -185,6 +189,6 @@ a:focus-visible {
   .cards {
     grid-template-columns: 1fr;
   }
-  .site-header { padding: 1.75rem 0 1rem; }
-  .section { padding: 1.5rem 0 0.25rem; }
+  .site-header { padding: 2rem 0 1.25rem; }
+  .section { padding: 2rem 0 0.5rem; }
 }