Differentiate projects vs libraries on homepage

[will-lamerton]

Summary

The homepage currently treats all projects the same, but there's a distinction: Nanocoder and Nanotune are full-fledged applications/projects, while get-md and json-up are libraries. This issue requests a visual and structural differentiation to give projects the spotlight they deserve.

Current State

From lib/projects.ts and components/home/ProjectCardsSection.tsx:

export const PROJECTS: ProjectConfig[] = [
  {
    id: "nanocoder",
    name: "Nanocoder",
    description: "A beautiful privacy-first coding agent running in your terminal",
    // ...
  },
  {
    id: "nanotune",
    name: "Nanotune",
    description: "A simple, interactive CLI for fine-tuning small language models...",
    // ...
  },
  {
    id: "get-md",
    name: "get-md",
    description: "Extract and convert content to Markdown format.",
    // ...
  },
  {
    id: "json-up",
    name: "json-up",
    description: "A fast, type-safe JSON migration tool with Zod schema validation.",
    // ...
  },
];

All projects are rendered identically in ProjectCardsSection.

Problem

• No visual distinction - Libraries and projects look the same
• Missing showcase elements - Projects could benefit from screenshots, demos, or visuals
• Incorrect terminology - "Nano Projects" groups both apps and libs
• User confusion - Visitors may not understand the difference

Proposed Solution

1. Update Project Config

Add a type field to distinguish projects from libraries:

export interface ProjectConfig {
  // ... existing fields
  type: "project" | "library";
  screenshot?: string; // URL to screenshot for projects
  heroImage?: string;  // Optional hero/featured image
}

2. Homepage Redesign

Create two sections on the homepage:

┌─────────────────────────────────────┐
│           Nano Projects              │
│  (Nanocoder, Nanotune)              │
│  ┌─────────┐  ┌─────────┐           │
│  │ Screen  │  │ Screen  │  ← Visual  │
│  │  shot   │  │  shot   │            │
│  │  Name   │  │  Name   │            │
│  └─────────┘  └─────────┘           │
└─────────────────────────────────────┘

┌─────────────────────────────────────┐
│           Nano Libraries            │
│  (get-md, json-up)                  │
│  ┌─────────┐  ┌─────────┐           │
│  │  Name   │  │  Name   │  ← Simple │
│  │ Desc    │  │ Desc    │            │
│  └─────────┘  └─────────┘           │
└─────────────────────────────────────┘

3. Visual Treatment

Projects:

• Larger cards with screenshot/hero image
• More prominent CTA buttons
• Optional: animated demo or video
• "Get Started" emphasized

Libraries:

• Simpler, compact cards
• Focus on description
• "Install" or "Get Started" as primary CTA

Requirements

1. Type classification - Add type: "project" | "library" to config
2. Two-section layout - Separate sections for projects and libraries
3. Visual differentiation - Projects get larger, image-forward cards
4. Updated terminology - "Projects" vs "Libraries" headings
5. Consistent styling - Libraries use compact, simple cards

Files Likely Affected

• lib/projects.ts - Add type field to ProjectConfig
• components/home/ProjectCardsSection.tsx - Conditional rendering based on type
• app/page.tsx - May need layout changes
• Possibly add new components for project showcase

Success Criteria

• Projects (Nanocoder, Nanotune) visually distinct from libraries
• Projects include screenshot/image area
• Homepage has clear "Projects" and "Libraries" sections
• Type classification in project config
• Responsive layout works for both sections

Additional Ideas

• Add "Featured" badge to flagship projects
• Add download/install count indicators
• Add links to GitHub stars
• Consider adding quick-start code snippets for libraries