init blog

README.md

@@ -0,0 +1,73 @@
+# 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