Vincent Ramdhanie - Personal Website

A modern, responsive personal website built with Next.js 15, featuring a comprehensive blog, reading lists, and professional portfolio. This project demonstrates modern web development practices with static site generation, theme switching, and MDX content management.

✨ Features

• 🎨 Theme System: Light, dark, and system theme support with local storage persistence
• 📝 MDX Blog: Auto-discovering article system with rich content support
• 📚 Reading Lists: Yearly book collections with dynamic data integration
• 🎧 Podcast Directory: Curated podcast recommendations with ratings
• 🛠️ Uses Page: Professional tools and environment showcase
• 📱 Responsive Design: Mobile-first approach with Tailwind CSS
• ⚡ Performance: Static site generation for optimal loading speeds
• 🔍 SEO Optimized: Comprehensive metadata and Open Graph support
• 📱 PWA Ready: Web app manifest and favicon support

🚀 Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS with custom CSS variables
• Content: MDX with next-mdx-remote
• Build Tool: Turbopack for faster builds
• Package Manager: pnpm for efficient dependency management
• Deployment: Vercel platform

📁 Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── articles/          # Blog articles with MDX
│   ├── books/            # Reading lists by year
│   ├── podcasts/         # Podcast recommendations
│   └── uses/             # Professional tools showcase
├── components/            # Reusable React components
├── content/               # MDX content files
│   ├── articles/         # Blog post MDX files
│   └── books/            # Year-based reading list MDX files
├── contexts/              # React context providers
├── lib/                   # Utility functions and data fetching
└── types/                 # TypeScript type definitions

🛠️ Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository

   git clone https://github.com/vramdhanie/astroweb.git
   cd astroweb

2. Install dependencies

   pnpm install

3. Run the development server

   pnpm run dev

4. Open your browser Navigate to http://localhost:3000

Available Scripts

pnpm run dev          # Start development server
pnpm run build        # Build for production
pnpm run start        # Start production server
pnpm run lint         # Run ESLint
pnpm run type-check   # Run TypeScript type checking

📝 Content Management

Adding New Articles

1. Create a new .mdx file in src/content/articles/
2. Add frontmatter with title, date, tags, and description
3. Write your content using MDX syntax
4. The article will be automatically discovered and listed

Adding New Reading Years

1. Create a new .mdx file in src/content/books/
2. Add frontmatter with year, slug, cover image, and description
3. Update your books.json data file with the new year's books
4. The year will appear in the books landing page

Theme Customization

The theme system uses CSS custom properties defined in globals.css. Colors automatically adapt to light/dark modes:

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --primary: #3b82f6;
  /* ... more variables */
}

Any Platforms

The project builds to static files and can be deployed to any static hosting service:

pnpm run build
# Deploy the 'out' directory

📱 Progressive Web App

This site includes PWA features:

• Web app manifest (site.webmanifest)
• Multiple favicon sizes for different devices
• Theme color configuration
• Standalone display mode support

🔧 Configuration

Environment Variables

Create a .env.local file for local development:

NEXT_PUBLIC_SITE_URL=http://localhost:3000

Next.js Configuration

The project uses Turbopack for faster builds and includes optimized image handling:

// next.config.ts
const nextConfig = {
  experimental: {
    turbo: {
      root: process.cwd(),
    },
  },
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Vincent Ramdhanie

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

🙏 Acknowledgments

• Built with Next.js and Tailwind CSS
• Icons from Lucide
• Fonts optimized with next/font

---

Vincent Ramdhanie - Senior Software Engineer
🌐 Website | 💼 LinkedIn | 🐙 GitHub