A modern, responsive personal portfolio and blog built with Astro, TypeScript, and Tailwind CSS.

Rithfolio is a showcase of my professional work, skills, and experience. This portfolio website features a clean, modern design with dark/light mode support, a fully-featured MDX blog, and responsive layouts for all devices.

• Responsive Design: Looks great on desktop, tablet, and mobile devices
• Dark/Light Mode: Toggle between dark and light themes
• MDX Blog: Full blog with syntax-highlighted code blocks, tag filtering, and search
• Project Showcase: Highlight your best work with images and descriptions
• Skills Section: Display your technical skills and expertise
• Contact Form: Allow visitors to reach out directly (serverless API endpoint)
• Social Links: Connect with your professional networks
• SEO Optimised: Open Graph, Twitter Cards, JSON-LD structured data, sitemap, robots.txt
• Comments: Giscus-powered comments on blog posts

• Astro - Static site generator with islands architecture
• React - Interactive islands (theme toggle, search, comments, forms)
• TypeScript - Static type-checking
• Tailwind CSS v4 - Utility-first CSS framework (CSS-first config, no tailwind.config.js or postcss.config needed)
• Astro Icon + Lucide - SVG icon library
• MDX - Markdown with JSX for blog content
• rehype-pretty-code - Syntax highlighting with dual theme support
• Giscus - GitHub Discussions-powered comments
• Shadcn UI - Component library (Button, Card, Badge)

• Node.js (v18 or later recommended)
• pnpm package manager

1. Clone the repository:

   git clone https://github.com/rithbennet/rithfolio.git
   cd rithfolio

2. Install dependencies:

   pnpm install

3. Run the development server:

   pnpm dev

4. Open http://localhost:4321 in your browser to see the result.

rithfolio/
├── content/
│   └── posts/         # MDX blog posts (each in its own folder)
├── public/            # Static assets
├── src/
│   ├── components/    # Astro & React components
│   ├── layouts/       # Base HTML layout
│   ├── lib/           # Utility functions
│   ├── pages/         # File-based routing
│   │   ├── api/       # Serverless API endpoints
│   │   └── blog/      # Blog pages & tag pages
│   └── styles/        # Global CSS (Tailwind v4 CSS-first config)
├── astro.config.mjs   # Astro configuration
├── components.json    # Shadcn UI configuration
└── ...

Update your personal information and portfolio content in the appropriate components.

The project uses Tailwind CSS v4 with CSS-first configuration — all theme tokens and custom styles live in src/styles/globals.css. No tailwind.config.js or postcss.config files are needed.

Add new blog posts by creating a folder under content/posts/ with an index.mdx file. See BLOG_GUIDE.md for details.

This project is configured for Vercel deployment with the @astrojs/vercel adapter:

MIT

Harith - harith.bennett@gmail.com

Project Link: https://github.com/rithbennet/rithfolio