fix: incorrect main card

Author: adelphi-liong

.claude/skills/write-blog-post/SKILL.md

@@ -181,6 +181,126 @@ const post = getBlogPost('post-slug')!;
 </BlogPostLayout>
 ```
 
+## Content Quality Standards
+
+When creating blog posts, prioritize these non-functional requirements to ensure exceptional quality:
+
+### 1. Rigorous & Research-Backed
+
+- **Cite credible sources**: Reference academic papers, industry research, or authoritative publications
+- **Provide evidence**: Back up claims with data, statistics, or expert opinions
+- **Include references**: Add inline citations or a "References" section at the end
+- **Verify facts**: Cross-check information before including it
+- **Use Badge components** to highlight research citations: `<Badge client:load variant="outline">Source: Nature 2024</Badge>`
+
+Example citation format:
+
+```astro
+<p class="mb-4">
+  Recent studies show that AI-assisted writing increases productivity by 40%
+  <Badge client:load variant="outline" className="ml-2">MIT Study 2024</Badge>
+</p>
+```
+
+### 2. Unique & Original
+
+- **Fresh perspective**: Avoid rehashing common takes; find a novel angle
+- **Original insights**: Share observations that aren't widely discussed
+- **Unique examples**: Use specific, concrete examples rather than generic scenarios
+- **Personal research**: Consider conducting small experiments or surveys
+- **Challenge assumptions**: Question conventional wisdom where appropriate
+
+### 3. Insightful & Thought-Provoking
+
+- **Second-order thinking**: Go beyond obvious observations
+- **Hidden connections**: Reveal non-obvious relationships between concepts
+- **"Aha!" moments**: Structure content to deliver surprising realizations
+- **Counterintuitive points**: Highlight phenomena that contradict expectations
+- **Deep implications**: Explore the broader consequences of the topic
+
+Use Card components to spotlight key insights:
+
+```astro
+<Card client:load className="bg-primary/5 border-primary">
+  <CardHeader>
+    <CardTitle className="text-xl">💡 Key Insight</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p class="text-muted-foreground">
+      The surprising observation that changes how we think about [topic]...
+    </p>
+  </CardContent>
+</Card>
+```
+
+### 4. Click-Baity & Engaging (Ethically)
+
+- **Compelling hook**: Open with a surprising fact, provocative question, or vivid scenario
+- **Curiosity gaps**: Tease interesting information that gets revealed later
+- **Pattern interrupts**: Break expectations to maintain attention
+- **Progressive disclosure**: Build tension by revealing information gradually
+- **Payoff**: Ensure the content delivers on the promise of the title
+- **Scroll-stopping subheadings**: Make H2/H3 headings intriguing enough to keep reading
+
+**Opening hook strategies:**
+
+- Start with a counterintuitive statement
+- Begin with a mini-story or anecdote
+- Ask a provocative question
+- Present a surprising statistic
+- Describe a relatable problem vividly
+
+### 5. Narrative & Story-Driven
+
+- **Story arc**: Structure with beginning (setup), middle (tension), end (resolution)
+- **Concrete scenarios**: Use specific examples and case studies
+- **Character elements**: Feature real people or personified concepts
+- **Tension and conflict**: Highlight problems, challenges, or paradoxes
+- **Visual storytelling**: Use descriptive language that paints mental pictures
+- **Emotional resonance**: Connect with readers' experiences and feelings
+
+**Narrative techniques:**
+
+- Use "Before/After" frameworks
+- Tell origin stories of ideas or technologies
+- Create hypothetical scenarios readers can visualize
+- Use metaphors and analogies to make abstract concepts concrete
+- Include micro-stories within sections (2-3 sentence anecdotes)
+
+**Story structure template:**
+
+```astro
+<!-- Act 1: Setup -->
+<p class="text-lg">
+  [Hook: Surprising observation or relatable problem]
+</p>
+
+<!-- Act 2: Investigation -->
+<h2>The Hidden Pattern</h2>
+<p>[Explore the phenomenon with research and examples]</p>
+
+<!-- Act 3: Implications -->
+<h2>What This Means For You</h2>
+<p>[Connect insights to reader's life]</p>
+
+<!-- Resolution: Key Takeaways -->
+<h2>Key Takeaways</h2>
+[Distill the lessons learned]
+```
+
+### Content Quality Checklist
+
+Before publishing, verify:
+
+- [ ] At least 2-3 credible sources cited
+- [ ] Unique angle or perspective not commonly discussed
+- [ ] At least one "aha!" insight that surprises readers
+- [ ] Opening hook that grabs attention within first 2 sentences
+- [ ] Clear narrative arc with tension and resolution
+- [ ] Concrete examples and scenarios (not just abstract concepts)
+- [ ] Title delivers on its promise
+- [ ] Ending provides satisfying closure and actionable takeaways
+
 ## SEO & Design Requirements
 
 ### Typography

CLAUDE.md

@@ -478,5 +478,28 @@ For static sites, Astro's built-in image optimization works during build time:
 
 Each environment (lapras/pichu/pikachu/raichu) has a `LANDSCAPE` variable to identify the deployment environment. Build metadata is automatically injected during all deployment workflows.
 
+## Content Conventions
+
+### Author Name Formatting
+
+When using git usernames or machine-readable identifiers as author names in blog posts or other content, always convert them to human-readable format:
+
+**Examples:**
+
+- `adelphi-liong` → `Adelphi Liong`
+- `john-doe-123` → `John Doe`
+- `jane_smith` → `Jane Smith`
+
+**Rules:**
+
+- Replace hyphens and underscores with spaces
+- Capitalize the first letter of each word (title case)
+- Remove numeric suffixes unless they're part of the actual name
+- Use proper name formatting conventions
+
+This ensures content feels natural and professional rather than machine-generated.
+
+## Development Notes
+
 - never run `pls dev` yourself, the user will always run the server
 - Not start the development server with pls dev since the user users will run it themselves. We can assume that the server is already running at localhost:4321 at any time.

src/components/CompressionDiagram.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+export default function CompressionDiagram() {
+  return (
+    <div className="my-8 md:my-12">
+      <div className="grid grid-cols-2 gap-2 md:gap-6">
+        {/* Traditional Compression */}
+        <div className="border border-green-500/30 rounded p-2 md:p-3 bg-green-500/5">
+          <div className="text-center mb-2 text-xs md:text-sm font-semibold">Traditional</div>
+          <div className="space-y-1 md:space-y-2">
+            <div className="bg-primary/20 border border-primary rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">Start</div>
+              <div className="font-mono text-xs md:text-sm font-bold">3 bytes</div>
+            </div>
+            <div className="text-center text-sm md:text-lg">↓</div>
+            <div className="bg-green-500/20 border border-green-500 rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">Compress</div>
+              <div className="font-mono text-xs md:text-sm font-bold">1 byte</div>
+            </div>
+            <div className="text-center text-sm md:text-lg">↓</div>
+            <div className="bg-blue-500/20 border border-blue-500 rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">Transmit</div>
+              <div className="font-mono text-xs md:text-sm font-bold">1 byte</div>
+            </div>
+            <div className="text-center text-sm md:text-lg">↓</div>
+            <div className="bg-green-500/20 border border-green-500 rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">Decompress</div>
+              <div className="font-mono text-xs md:text-sm font-bold">3 bytes</div>
+            </div>
+          </div>
+          <div className="text-center mt-2 text-[10px] md:text-xs text-muted-foreground">Minimize wire cost</div>
+        </div>
+
+        {/* The Decompression Tax */}
+        <div className="border border-destructive/30 rounded p-2 md:p-3 bg-destructive/5">
+          <div className="text-center mb-2 text-xs md:text-sm font-semibold">LLM Decompression</div>
+          <div className="space-y-1 md:space-y-2">
+            <div className="bg-primary/20 border border-primary rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">Start</div>
+              <div className="font-mono text-xs md:text-sm font-bold">3 bytes</div>
+            </div>
+            <div className="text-center text-sm md:text-lg">↓</div>
+            <div className="bg-destructive/20 border border-destructive rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">AI Expand</div>
+              <div className="font-mono text-xs md:text-sm font-bold">10 bytes</div>
+            </div>
+            <div className="text-center text-sm md:text-lg">↓</div>
+            <div className="bg-destructive/30 border border-destructive rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">Transmit</div>
+              <div className="font-mono text-xs md:text-sm font-bold">10 bytes</div>
+            </div>
+            <div className="text-center text-sm md:text-lg">↓</div>
+            <div className="bg-primary/20 border border-primary rounded p-1.5 md:p-2 text-center">
+              <div className="text-[10px] md:text-xs text-muted-foreground">AI Compress</div>
+              <div className="font-mono text-xs md:text-sm font-bold">3 bytes</div>
+            </div>
+          </div>
+          <div className="text-center mt-2 text-[10px] md:text-xs text-destructive font-semibold">
+            Maximize wire cost
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Footer.tsx

@@ -38,9 +38,24 @@ export function Footer({ config }: FooterProps) {
   ];
 
   return (
-    <footer className="mt-auto border-t border-border bg-background">
+    <footer className="mt-auto border-t border-border bg-background relative z-20">
       <div className="container mx-auto px-6 py-8 max-w-4xl">
         <div className="flex flex-col items-center gap-6">
+          {/* Links */}
+          <nav className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm">
+            <a href="/" className="text-muted-foreground hover:text-foreground transition-colors">
+              Home
+            </a>
+            <span className="text-muted-foreground">•</span>
+            <a href="/about" className="text-muted-foreground hover:text-foreground transition-colors">
+              About
+            </a>
+            <span className="text-muted-foreground">•</span>
+            <a href="/legal" className="text-muted-foreground hover:text-foreground transition-colors">
+              Legal
+            </a>
+          </nav>
+
           {/* Social Links */}
           <div className="flex flex-wrap items-center justify-center gap-4">
             {socialLinks.map(({ name, icon: Icon, url }) => (
@@ -58,25 +73,10 @@ export function Footer({ config }: FooterProps) {
             ))}
           </div>
 
-          {/* Links & Copyright */}
-          <div className="flex flex-col items-center gap-3">
-            <nav className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm">
-              <a href="/" className="text-muted-foreground hover:text-foreground transition-colors">
-                Home
-              </a>
-              <span className="text-muted-foreground">•</span>
-              <a href="/about" className="text-muted-foreground hover:text-foreground transition-colors">
-                About
-              </a>
-              <span className="text-muted-foreground">•</span>
-              <a href="/legal" className="text-muted-foreground hover:text-foreground transition-colors">
-                Legal
-              </a>
-            </nav>
-            <p className="text-xs text-muted-foreground text-center">
-              &copy; {currentYear} {config.app.name}. All rights reserved.
-            </p>
-          </div>
+          {/* Copyright */}
+          <p className="text-xs text-muted-foreground text-center">
+            &copy; {currentYear} {config.app.name}. All rights reserved.
+          </p>
         </div>
       </div>
     </footer>