Portfolio Website

A modern, full-featured portfolio website built with Next.js, React, and TypeScript.

Features

• Portfolio Showcase: Display your projects with descriptions and links
• Blog System: MDX-powered blogging with syntax highlighting
• Resume & Experience: Timeline view of your professional experience
• Certifications Grid: Organized display of your certifications
• Contact Form: Email-based contact system using Nodemailer
• Business Card: Digital business card with QR code
• Responsive Design: Mobile-first responsive design with Tailwind CSS
• SEO Optimized: Sitemap, robots.txt, Open Graph images, and Twitter card support
• Smooth Animations: Framer Motion for beautiful transitions

Tech Stack

• Framework: Next.js 16.0.7
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI
• Content: MDX for blog posts
• Forms: React Hook Form + Zod
• Email: Nodemailer
• PDF Generation: jsPDF
• Animations: Framer Motion
• Code Quality: Biome for linting and formatting
• Icons: Lucide React + Simple Icons
• Notifications: Sonner

Project Structure

src/
├── app/                 # Next.js app directory
│   ├── (pages)/        # Page routes with layout
│   ├── api/            # API routes (contact form, etc.)
│   └── layout.tsx      # Root layout
├── components/         # React components
│   ├── core/          # Core reusable components
│   ├── home/          # Home page components
│   ├── blogs/         # Blog-related components
│   ├── projects/      # Project showcase components
│   ├── rates/         # Pricing calculator components
│   └── ui/            # Shadcn UI component library
├── data/              # Static data
│   ├── certifications.ts
│   ├── experiences.ts
│   ├── projects.ts
│   ├── rates.ts
│   └── ...
├── lib/               # Utilities and helpers
│   ├── blogs.tsx     # Blog processing
│   ├── pricing.ts    # Pricing logic
│   └── utils.ts      # General utilities
├── hooks/             # React hooks
└── styles/            # Global styles

Getting Started

Prerequisites

• Node.js 18+ (recommended: 20+)
• bun or yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/karume-lab/portfolio.git
cd portfolio

2. Install dependencies:

bun install

3. Set up environment variables (if needed for email):

# Create a .env.local file with your configuration

Development

Start the development server with Turbopack:

bun run dev

Open http://localhost:3000 to view the site.

Building

bun run build
bun start

Code Quality

Format your code with Biome:

bun run format

Lint your code:

bun run lint