Add blog feature with automatic markdown parsing and rendering

BLOG_FEATURE.md

@@ -0,0 +1,102 @@
+# Blog Feature Documentation
+
+## Overview
+
+The website now includes a blog feature that automatically parses markdown files (`.md`) from the `md/` folder and displays them as blog posts on the website.
+
+## How to Add a New Blog Post
+
+1. Create a new `.md` file in the `md/` folder at the root of the project
+2. Write your content in markdown format
+3. The first `# Heading` in the file will be used as the blog post title
+4. The file name (without `.md`) will be used as the URL slug
+
+### Example
+
+Create a file `md/my-new-post.md`:
+
+```markdown
+# My New Blog Post
+
+This is the introduction paragraph that will be used as an excerpt.
+
+## Section 1
+
+Your content here...
+
+## Section 2
+
+More content...
+```
+
+The post will automatically be available at `/blog/my-new-post`
+
+## Supported Markdown Features
+
+- **Headings**: `#`, `##`, `###` for h1, h2, h3
+- **Paragraphs**: Regular text separated by blank lines
+- **Lists**: 
+  - Unordered lists with `-` or `*`
+  - Ordered lists with `1.`, `2.`, etc.
+- **Code**:
+  - Inline code with \`backticks\`
+  - Code blocks with triple backticks
+- **Links**: `[text](url)`
+- **Bold**: `**text**` or `__text__`
+- **Italic**: `*text*` or `_text_`
+- **Blockquotes**: `> quote text`
+
+## File Structure
+
+```
+react-folio/
+├── md/                          # Blog posts directory
+│   ├── welcome.md              # Sample post
+│   ├── nextjs-tips.md          # Sample post
+│   └── tailwind-design.md      # Sample post
+├── src/
+│   ├── app/
+│   │   ├── blog/
+│   │   │   ├── page.tsx        # Blog listing page
+│   │   │   └── [slug]/
+│   │   │       └── page.tsx    # Individual blog post page
+│   │   └── components/
+│   │       ├── BlogSection.tsx      # Blog cards component
+│   │       └── BlogPostSection.tsx  # Markdown renderer
+│   └── data/
+│       └── blogUtils.ts        # Markdown parsing utilities
+```
+
+## Technical Details
+
+### Dependencies
+
+- `react-markdown`: Converts markdown to React components
+- `remark-gfm`: GitHub Flavored Markdown support
+
+### Static Generation
+
+All blog posts are statically generated at build time using Next.js `generateStaticParams`. This means:
+- Fast page loads
+- No runtime markdown parsing
+- SEO-friendly
+
+### Adding/Removing Posts
+
+Simply add or remove `.md` files from the `md/` folder and rebuild:
+
+```bash
+npm run build
+```
+
+The build process will automatically detect and generate pages for all markdown files.
+
+## Styling
+
+Blog posts use Tailwind CSS for styling with a custom markdown component configuration that provides:
+- Proper typography hierarchy
+- Code syntax highlighting
+- Responsive design
+- Consistent spacing
+
+You can customize the styling by editing `src/app/components/BlogPostSection.tsx`.

md/nextjs-tips.md

@@ -0,0 +1,38 @@
+# Next.js 15 Tips and Tricks
+
+Next.js 15 brings some exciting new features and improvements. Here are my favorite tips for working with the latest version.
+
+## App Router Best Practices
+
+The App Router is now the recommended approach for new Next.js applications. Here's what you need to know:
+
+### Server Components by Default
+
+All components in the app directory are Server Components by default. This means:
+
+- Better performance
+- Smaller bundle sizes
+- Direct access to backend resources
+
+### Static Site Generation
+
+Use `generateStaticParams` to pre-render dynamic routes at build time:
+
+```typescript
+export async function generateStaticParams() {
+  return posts.map((post) => ({ slug: post.slug }));
+}
+```
+
+## Performance Optimization
+
+Here are some key strategies:
+
+1. Use Server Components whenever possible
+2. Implement proper metadata for SEO
+3. Optimize images with next/image
+4. Leverage static generation for content pages
+
+## Conclusion
+
+Next.js 15 is a powerful framework that makes building modern web applications easier than ever. Take advantage of its features to create fast, SEO-friendly sites!

md/tailwind-design.md

@@ -0,0 +1,45 @@
+# Building Beautiful UIs with Tailwind CSS
+
+Tailwind CSS has revolutionized how I approach styling web applications. Here's why I love it and some tips for getting the most out of it.
+
+## Why Tailwind?
+
+Tailwind CSS offers several advantages:
+
+- **Utility-first**: Build complex designs quickly with utility classes
+- **Customizable**: Easy to extend and customize to match your brand
+- **Responsive**: Built-in responsive design utilities
+- **Performance**: Purge unused styles in production
+
+## Key Concepts
+
+### Color Palette
+
+Define a consistent color palette in your tailwind.config:
+
+```javascript
+colors: {
+  primary: '#1A365D',
+  secondary: '#2B6CB0',
+  accent: '#F6E05E',
+}
+```
+
+### Spacing System
+
+Use the spacing scale consistently:
+
+- `p-4` for padding
+- `m-8` for margin
+- `gap-6` for flex/grid gaps
+
+## Best Practices
+
+1. **Create components**: Don't repeat long class strings
+2. **Use @apply sparingly**: Embrace utility classes in JSX
+3. **Configure intelligently**: Extend the default theme thoughtfully
+4. **Dark mode**: Plan for it from the start
+
+## Conclusion
+
+Tailwind CSS is an excellent choice for modern web development. Its utility-first approach speeds up development while maintaining flexibility and customization options.

md/welcome.md

@@ -0,0 +1,22 @@
+# Welcome to My Blog
+
+This is the first post on my blog! I'm excited to share my thoughts and experiences with you.
+
+## Getting Started
+
+Building a portfolio website is an important step for any developer. Here are some key things I learned:
+
+- **Design matters**: A clean, professional design makes a great first impression
+- **Content is king**: Make sure your content showcases your best work
+- **Keep it updated**: Regular updates show you're active and engaged
+
+## What's Next?
+
+I'll be posting about:
+
+1. Web development tips and tricks
+2. Project case studies
+3. Technology trends
+4. Career advice
+
+Stay tuned for more!