# Technical Problem Solver's Blog

A clean, readable blog built with Astro and React. Focus on practical insights and learning notes.

## Features

- **Clean Architecture**: Modular React components for article elements
- **TypeScript**: Full type safety throughout
- **MDX Support**: Write content with JSX components
- **Fast**: Static site generation with Astro
- **Readable**: Carefully designed typography and spacing

## Project Structure

```
src/
├── components/          # Modular React components
│   ├── ArticleHeading.tsx
│   ├── ArticleParagraph.tsx
│   ├── ArticleList.tsx
│   ├── ArticleBlockquote.tsx
│   ├── BlogPostCard.tsx
│   └── Container.tsx
├── data/
│   └── blogPosts.ts    # Blog post metadata
├── layouts/            # Astro layouts
│   ├── BaseLayout.astro
│   └── BlogLayout.astro
└── pages/              # Routes
    ├── index.astro     # Home page
    └── blog/           # Blog posts
        ├── first-note.astro
        └── debugging-tips.astro
```

## Development

```bash
# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

## Writing Posts

1. Add post metadata to `src/data/blogPosts.ts`
2. Create a new `.astro` file in `src/pages/blog/`
3. Import and use the modular components
4. The post will automatically appear on the home page

## Components

The blog uses modular React components for article elements:

- `H1`, `H2`, `H3` - Headings with consistent styling
- `Paragraph`, `LeadParagraph` - Text with proper spacing
- `UL`, `OL`, `LI` - Lists with proper indentation
- `Blockquote`, `CodeBlock`, `InlineCode` - Code and quotes

## Design Philosophy

- **Readability First**: Clear typography, generous spacing
- **No Distractions**: Clean layout, focus on content
- **Practical**: Tools and techniques that work
- **Calm**: No hype, just facts

## 🎥 UI Showcase Toolkit
A Remotion-based toolkit for creating high-quality, deterministic showcase videos of our React components.

- **Source of Truth**: Renders real project components.
- **Automated**: CLI-driven rendering for LinkedIn-ready videos.
- **Pixel-Perfect**: 60fps, crisp text, brand-aligned style.

### Quick Start
```bash
# Preview compositions
npm run video:preview

# Render the showcase video
npm run video:render
```
See `.agent/workflows/video-toolkit.md` for more details.