A modern, responsive portfolio website built with Next.js 16, React 19, and Tailwind CSS v4. Features a beautiful dark/light mode theme system with a custom teal color palette.
- Modern Design - Clean, professional UI with smooth animations
- Dark/Light Mode - Seamless theme switching with next-themes
- Custom Color Palette - Teal primary color with carefully crafted light and dark variants
- Fully Responsive - Optimized for all device sizes
- Performance Optimized - Built with Next.js 16 App Router for lightning-fast load times
- Smooth Animations - Custom keyframe animations for engaging user experience
- Component-Based - Built with reusable shadcn/ui components
- SEO Ready - Optimized meta tags and structure
- Next.js 16 - React framework with App Router
- React 19 - UI library
- TypeScript - Type safety
- Tailwind CSS v4 - Utility-first CSS framework
- next-themes - Theme management
- OKLCH Color Space - Modern perceptually uniform colors
- shadcn/ui - Beautifully designed components
- Radix UI - Unstyled, accessible components
- Lucide React - Beautiful icon library
- class-variance-authority - Component variants
- Clone the repository
git clone https://github.com/solonkonora/my-portfolio.git
cd my-portfolio- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev- Open in browser Navigate to http://localhost:3000
- Primary: Teal
#009688(oklch(65% 0.15 180)) - Secondary: Blush Pink
#FADADD - Background: Off-White
#FAFAFA - Text: Deep Navy
#1A1A40
- Primary: Teal
#009688(oklch(70% 0.15 180)) - Secondary: Muted Rose
#D4A5A5 - Background: Charcoal Gray
#121212 - Text: Soft Lavender Gray
#C7C9E2
- Hover/Focus: Aqua Glow
#20C997| Soft Mint#98FF98
This project is open source and available under the MIT License.
Nkwada Nora Solonko
- GitHub: @solonkonora
- Portfolio: [Your Portfolio URL]
- Next.js - The React Framework
- shadcn/ui - Beautiful component library
- Tailwind CSS - Utility-first CSS framework
- Vercel - Deployment platform
If you found this project helpful, please consider giving it a star!
Built using Next.js and Tailwind CSS