init: stat block

package.json

@@ -13,7 +13,8 @@
     "@astrojs/rss": "^4.0.10",
     "@astrojs/sitemap": "^3.2.1",
     "@deno/astro-adapter": "^0.2.0",
-    "astro": "^5.1.1"
+    "astro": "^5.1.1",
+    "motion": "^11.16.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

src/components/Stats.astro

@@ -0,0 +1,69 @@
+---
+const level = 31;
+const name = "Dev Wells";
+const cls = "Software Engineer";
+const guild = "GoodRx";
+---
+
+<div class="greeting">
+  <h2>Greetings wanderer.</h2>
+  <p>I'm <span class="name">{name}</span>.</p>
+</div>
+
+<div class="stat-block">
+  <div class="stat">
+    <span class="stat-label">Level</span>
+    <span class="stat-value">{level}</span>
+  </div>
+  <div class="stat">
+    <span class="stat-label">Class</span>
+    <span class="stat-value">{cls}</span>
+  </div>
+  <div class="stat">
+    <span class="stat-label">Guild</span>
+    <span class="stat-value">{guild}</span>
+  </div>
+</div>
+<style>
+  .greeting {
+    margin-bottom: 2rem;
+  }
+
+  .greeting .name {
+    font-weight: bold;
+    color: var(--mauve);
+  }
+
+  .stat-block {
+    width: 100%;
+    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .stat {
+    background: var(--surface0);
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 140px;
+  }
+
+  .stat-label {
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-family: monospace;
+    color: var(--sky);
+    margin-bottom: 0.25rem;
+  }
+
+  .stat-value {
+    color: var(--rosewater);
+    font-weight: 600;
+  }
+</style>

src/pages/about.astro

@@ -1,23 +1,14 @@
 ---
+import Stats from "../components/Stats.astro";
 import Layout from "../layouts/BlogPost.astro";
-
-const level = 31;
 ---
 
 <Layout
   title="Lore"
   description="About Devon Wells"
   pubDate={new Date("Jan 2 2025")}
 >
-  <h2>Greetings wanderer.</h2>
-  <p>
-    I'm <span>Dev Wells</span>.
-  </p>
-  <div>
-    <span>lvl {level}</span>
-    <span>Principal Software Engineer @ GoodRx</span>
-    <span>they/he</span>
-  </div>
+  <Stats />
   <ul>
     <li>Father to two young apprentices</li>
     <li>Digital spellcrafter</li>