A modern, interactive Next.js portfolio website showcasing projects, skills, and experience. Built with TypeScript, Tailwind CSS, and Radix UI with 3D graphics and smooth animations.
🌐 Live Site: benjamin-dev-omega.vercel.app
- ⚡ Next.js 16 – Latest React framework with server components
- 🎨 Beautiful UI – Radix UI components with Tailwind CSS
- 🎭 Dark/Light Mode – Theme switching with next-themes
- ✨ Smooth Animations – Framer Motion for fluid interactions
- 🎮 3D Graphics – Three.js and React Three Fiber for interactive 3D elements
- 📱 Responsive Design – Mobile-first, fully responsive layout
- 🔧 Form Validation – React Hook Form with Zod validation
- 📊 Data Visualization – Recharts for analytics and charts
- ♿ Accessibility – Accessible components with Radix UI
- 🔍 Analytics – Vercel Analytics integration
- ⚙️ TypeScript – Full type safety throughout the project
- 📈 Error Boundaries – React Error Boundary for robust error handling
- Framework: Next.js 16 (React 19)
- Language: TypeScript 5
- Styling: Tailwind CSS 4, PostCSS
- UI Components: Radix UI (20+ components)
- State & Forms: React Hook Form, Zod validation
- Animations: Framer Motion
- 3D Graphics: Three.js, React Three Fiber, Drei
- Data Viz: Recharts
- Icons: Lucide React
- Theme: next-themes (dark/light mode)
- Toast/Notifications: Sonner
- Package Manager: pnpm
- Deployment: Vercel
- Analytics: Vercel Analytics
- Linting: ESLint
- Build Tool: Next.js built-in
- Node.js 18+ or 22+
- pnpm (or npm/yarn)
- Modern browser with WebGL support (for 3D features)
git clone https://github.com/Benjaminofili/benjamin-dev.git
cd benjamin-devpnpm installpnpm devThe site will be available at http://localhost:3000
pnpm build
pnpm startpnpm lint├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with theme provider
│ ├── page.tsx # Home page
│ └── ... # Other pages
├── components/ # Reusable React components
│ ├── ui/ # Radix UI component wrappers
│ ├── sections/ # Page sections (hero, projects, etc.)
│ └── ...
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── styles/ # Global styles and CSS
├── public/ # Static assets (images, fonts, etc.)
├── next.config.mjs # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Project dependencies
Edit tailwind.config.ts to customize the color scheme.
Create new files in the app/ directory following Next.js conventions.
All Radix UI components are wrapped in components/ui/ for easy customization.
Modify component content in components/sections/ to showcase your projects and skills.
- Automatic theme detection based on system preferences
- Manual toggle with persistent storage
- Smooth transitions between themes
- Mobile-first design approach
- Flexible grid and flex layouts
- Touch-friendly interactive elements
- React Hook Form for performance
- Zod schema validation
- Real-time validation feedback
- Accessible form controls
- Three.js for 3D graphics
- React Three Fiber for React integration
- Interactive 3D models and animations
- Leva for real-time parameter control
- Framer Motion for smooth page transitions
- Gesture recognition (drag, swipe, hover)
- Spring physics animations
- Stagger and sequence effects
# Simply push to GitHub and connect with Vercel
# Automatic deployments on every push to mainCreate a .env.local file if needed:
# Add any environment variables here
NEXT_PUBLIC_ANALYTICS_ID=your_vercel_analytics_id✅ Fast Load Times – Next.js optimizations & code splitting
✅ Optimized Images – Next.js Image component
✅ CSS-in-JS – Tailwind CSS with purging
✅ Bundle Analysis – Monitor bundle size
✅ Web Vitals – Core Web Vitals optimized
- Semantic HTML structure
- ARIA labels and attributes
- Keyboard navigation support
- Color contrast compliance
- Screen reader friendly
- TypeScript for type safety
- ESLint for code linting
- Tailwind CSS for consistent styling
- Error Boundaries for error handling
Contributions are welcome! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is currently unlicensed. Add a LICENSE file if you plan to share it publicly.
For questions or feedback:
- Open an issue on GitHub
- Check the project's documentation
- Visit the live site: benjamin-dev-omega.vercel.app
| Package | Purpose |
|---|---|
| Next.js 16 | React framework |
| React 19 | UI library |
| TypeScript | Type safety |
| Tailwind CSS 4 | Utility-first CSS |
| Radix UI | Accessible components |
| Framer Motion | Animations |
| Three.js | 3D graphics |
| React Hook Form | Form management |
| Zod | Schema validation |
| Recharts | Data visualization |
- Blog section with MDX support
- Dark mode image optimization
- PWA capabilities
- SEO optimization
- Performance monitoring dashboard
- Contact form with email integration
Target metrics:
- Performance: 90+
- Accessibility: 95+
- Best Practices: 95+
- SEO: 100
Made with ❤️ by Benjamin