Portfolio Website with Blog

A modern, responsive portfolio website built with Next.js, featuring a blog section that automatically parses markdown files.

Features

• 🎨 Modern Design: Clean, responsive design with Tailwind CSS
• 📝 Blog System: Automatic markdown parsing with frontmatter support
• 🏷️ Categories & Tags: Organize blog posts by categories and tags
• ⏱️ Reading Time: Automatic calculation of reading time
• 🔍 Category Filtering: Filter blog posts by category
• 📱 Mobile Responsive: Optimized for all device sizes
• ⚡ Fast Performance: Built with Next.js for optimal performance
• 🖼️ Image Optimization: Automatic image optimization with Next.js Image component

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Markdown Parsing: gray-matter, remark
• Date Handling: date-fns

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <your-repo-url>
cd portfolio-website

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

Project Structure

portfolio-website/
├── content/
│   └── blog/                 # Blog posts (markdown files)
├── public/
│   └── images/
│       └── posts/           # Blog post images
├── src/
│   ├── app/                 # Next.js app router pages
│   ├── components/          # React components
│   └── lib/                 # Utility functions
└── README.md

Adding Blog Posts

1. Create Markdown Files

Place your blog posts in the content/blog/ directory. Each post should be a .md file with the following frontmatter format:

---
title: "Your Blog Post Title"
excerpt: "A brief description of your blog post"
date: "2025-01-20"
author: "Your Name"
category: "Category Name"
tags: ["tag1", "tag2", "tag3"]
image: "/images/posts/your-image.jpg"
featured: false
---

# Your Blog Content

Your markdown content goes here...

2. Add Images

Place your blog post images in public/images/posts/ and reference them in the frontmatter using the path starting with /images/posts/.

3. Supported Frontmatter Fields

• title (required): The title of your blog post
• excerpt (required): A brief description for previews
• date (required): Publication date in YYYY-MM-DD format
• author (required): Author name
• category (required): Post category
• tags (required): Array of tags
• image (required): Featured image path
• featured (optional): Set to true to feature on homepage

4. Markdown Features

Your blog posts support:

• Headers: #, ##, ###
• Lists: Ordered and unordered lists
• Code blocks: Syntax highlighting
• Links: Standard markdown links
• Images: Standard markdown images
• Blockquotes: > Quote text
• Bold/Italic: **bold**, *italic*

Customization

1. Personal Information

Update the following files with your information:

• src/components/Header.tsx: Change "Your Name" to your actual name
• src/components/Footer.tsx: Update social links and contact information
• src/app/about/page.tsx: Update your personal story and experience
• src/app/contact/page.tsx: Update contact information

2. Styling

The website uses Tailwind CSS. You can customize the design by:

• Modifying the color scheme in tailwind.config.js
• Updating component styles in the respective files
• Adding custom CSS in src/app/globals.css

3. Blog Configuration

Modify blog-related settings in src/lib/markdown.ts:

• Change the posts directory path
• Adjust reading time calculation (currently 200 words per minute)
• Modify sorting behavior

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically

Other Platforms

The website can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• DigitalOcean App Platform

Performance Optimization

The website includes several performance optimizations:

• Static Generation: Blog posts are pre-rendered at build time
• Image Optimization: Automatic image optimization with Next.js
• Code Splitting: Automatic code splitting by Next.js
• SEO Optimization: Proper meta tags and structured data

SEO Features

• Meta tags for each page
• Open Graph tags for social sharing
• Structured data for blog posts
• Sitemap generation (can be added)
• RSS feed (can be added)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is open source and available under the MIT License.

Support

If you have any questions or need help, please open an issue on GitHub.

---

Happy blogging! 🚀