A content platform cataloguing real-world AI use cases for non-technical professionals - marketers, business owners, educators, hobbyists. Built as a fun side project to explore and test modern techniques like SEO, Agentic SEO (AEO), AI-friendly schema markup, and content-first static site architecture - all grounded in real research and real stories.
Live site: cc4.life
CC4.life answers one question: "What are people actually building with AI tools like Claude Code - beyond writing code?"
The site features 130+ stories showing how real people use AI to automate reports, build side businesses, manage personal finances, create educational content, and more. Each story follows a problem-solution-outcome arc with measurable results.
This is not a production SaaS - it's a hands-on project for learning and experimenting with:
- Building a performant content platform from scratch
- SEO and AEO (AI Engine Optimization) - making content discoverable by both Google and AI crawlers (GPTBot, ClaudeBot, PerplexityBot)
- Structured data / schema markup (Article, FAQ, HowTo, Breadcrumb, Organization)
- Static site generation with Astro for near-instant page loads
- Docker-based deployment behind Cloudflare CDN
- Content workflows powered by markdown and git (no database, no CMS)
| Layer | Technology |
|---|---|
| Framework | Astro 5 (static site generation) |
| Language | TypeScript |
| Styling | CSS with custom properties (terminal/hacker aesthetic) |
| Typography | JetBrains Mono (self-hosted) |
| Content | Markdown / MDX with Zod-validated frontmatter |
| Search | Pagefind (client-side static search) |
| Image Processing | Sharp (WebP optimization) |
| Containerization | Docker (multi-stage build, nginx-alpine) |
| Infrastructure | Cloudflare CDN → Apache (SSL) → Docker/Nginx |
| CI/CD | GitHub Actions → Docker Hub |
| Analytics | Google Analytics |
storage-cc4life/
├── src/
│ ├── pages/ # File-based routing
│ │ ├── index.astro # Homepage - terminal-styled catalogue
│ │ ├── ai-stories/ # 130+ real AI use case stories
│ │ ├── ai-bites/ # Quick tips and insights
│ │ ├── blog/ # Analysis and experiments
│ │ └── claude-code/tutorials/# Step-by-step guides
│ ├── components/ # 15+ Astro components
│ │ ├── SearchBar.astro # Terminal-style search with filters
│ │ ├── RelatedArticles.astro # Smart scoring recommendation engine
│ │ ├── FaqSection.astro # FAQ with schema markup
│ │ └── ...
│ ├── content/docs/ # All content as markdown files
│ │ ├── ai-stories/ # ~139 articles
│ │ ├── tutorials/
│ │ └── blog/
│ ├── data/ # Article registries and metadata
│ ├── utils/ # Content filtering, category config
│ └── styles/ # Terminal-aesthetic CSS system
├── DocumentationApp/ # Operational docs and guides
├── nginx/ # Container nginx config
├── Dockerfile # Multi-stage production build
└── astro.config.mjs
- 130+ curated AI stories across 8 categories (Enterprise, Small Business, Hobby, Health, Education, Finance, Personal Projects, Others)
- 4 complexity levels - Beginner, Intermediate, Advanced, "Let It Cook"
- Smart related articles - scoring algorithm based on category match (+10) and tag overlap (+2 per tag)
- Client-side search with complexity filtering
- Schema markup on every page - Article, FAQ, HowTo, Breadcrumb, Organization
- AI crawler friendly - robots.txt explicitly allows GPTBot, ClaudeBot, OAI-SearchBot, PerplexityBot
- Optimized meta tags - unique titles, descriptions, Open Graph images per page
- Sitemap generation via Astro integration
- Performance targets - >90 desktop / >80 mobile PageSpeed scores
- Terminal/hacker aesthetic - dark theme, scanline effects, blinking cursors, ASCII art
- Fully responsive - mobile-first with progressive enhancement
- CSS custom properties for consistent theming across 30+ design tokens
- Git as CMS - no database, all content versioned in markdown
- Draft/schedule system -
draft: truefor WIP,publishDatefor scheduled releases - Inspiration flag - marks stories based on tool capabilities vs. documented real cases
- Image pipeline - raw images converted to optimized WebP (1200x675px)
- Multi-stage Docker build - Node 22 build → nginx-alpine runtime
- Cloudflare CDN with aggressive caching
- Gzip compression, security headers, long-lived asset caching via nginx
- Multi-domain - single codebase serves cc4.life, aiskillsmarketplace.com, agentskillsmarketplace.com
# Install dependencies
cd storage-cc4life && npm install
# Development server (hot reload)
npm run dev
# → http://localhost:4000
# Production build
npm run build
# Type checking + build verification
npm run test# Development with hot reload
docker compose -f docker-compose.cc4life.yml up
# Production build
docker compose -f docker-compose.cc4life.prod.yml up| Category | Icon | Focus |
|---|---|---|
| Enterprise | 🏢 |
Corporate AI solutions |
| Small Business | 💼 |
SMB automation and tools |
| Hobby | 🎨 |
Creative and personal projects |
| Health & Wellness | 🏃 |
Fitness, health tracking |
| Education | 🎓 |
Learning and training tools |
| Personal Finance | 💰 |
Budgeting, investing |
| Personal Project | 🛠️ |
Side projects and experiments |
| Others | 📦 |
Everything else |
This project is a playground for testing ideas in practice:
- SEO is not just meta tags - structured data, page speed, crawl budget, and content architecture all matter
- AEO is emerging - optimizing for AI crawlers (schema markup, clear content structure, explicit bot permissions) is a real and growing discipline
- Astro is excellent for content sites - static output, file-based routing, and markdown-first workflow make it ideal for this use case
- Git as CMS works - for a single-author content site, markdown in git with a proper frontmatter schema is simpler and more reliable than any headless CMS
- Terminal aesthetics are surprisingly effective - the hacker/dev theme creates strong visual identity and stands out from generic blog templates
This is a personal project. The code is shared for reference and portfolio purposes.