💻 Benjamin Dev - Developer Portfolio

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

---

✨ Features

• ⚡ 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

---

🛠️ Tech Stack

Frontend

• 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

Build & Deployment

• Package Manager: pnpm
• Deployment: Vercel
• Analytics: Vercel Analytics
• Linting: ESLint
• Build Tool: Next.js built-in

---

📋 Prerequisites

• Node.js 18+ or 22+
• pnpm (or npm/yarn)
• Modern browser with WebGL support (for 3D features)

---

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/Benjaminofili/benjamin-dev.git
cd benjamin-dev

2. Install Dependencies

pnpm install

3. Run Development Server

pnpm dev

The site will be available at http://localhost:3000

4. Build for Production

pnpm build
pnpm start

5. Lint Code

pnpm lint

---

📁 Project Structure

├── 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

---

🎨 Customization

Change Theme Colors

Edit tailwind.config.ts to customize the color scheme.

Add New Pages

Create new files in the app/ directory following Next.js conventions.

Modify Components

All Radix UI components are wrapped in components/ui/ for easy customization.

Update Content

Modify component content in components/sections/ to showcase your projects and skills.

---

🎬 Features in Detail

Dark Mode Support

• Automatic theme detection based on system preferences
• Manual toggle with persistent storage
• Smooth transitions between themes

Responsive Layouts

• Mobile-first design approach
• Flexible grid and flex layouts
• Touch-friendly interactive elements

Form Handling

• React Hook Form for performance
• Zod schema validation
• Real-time validation feedback
• Accessible form controls

3D Visualization

• Three.js for 3D graphics
• React Three Fiber for React integration
• Interactive 3D models and animations
• Leva for real-time parameter control

Animations

• Framer Motion for smooth page transitions
• Gesture recognition (drag, swipe, hover)
• Spring physics animations
• Stagger and sequence effects

---

🚀 Deployment

Deploy to Vercel

# Simply push to GitHub and connect with Vercel
# Automatic deployments on every push to main

Environment Variables

Create a .env.local file if needed:

# Add any environment variables here
NEXT_PUBLIC_ANALYTICS_ID=your_vercel_analytics_id

---

📊 Performance

✅ 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

---

♿ Accessibility

• Semantic HTML structure
• ARIA labels and attributes
• Keyboard navigation support
• Color contrast compliance
• Screen reader friendly

---

🧪 Code Quality

• TypeScript for type safety
• ESLint for code linting
• Tailwind CSS for consistent styling
• Error Boundaries for error handling

---

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is currently unlicensed. Add a LICENSE file if you plan to share it publicly.

---

💬 Support & Contact

For questions or feedback:

• Open an issue on GitHub
• Check the project's documentation
• Visit the live site: benjamin-dev-omega.vercel.app

---

🌟 Key Dependencies

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

---

🚀 Future Enhancements

• Blog section with MDX support
• Dark mode image optimization
• PWA capabilities
• SEO optimization
• Performance monitoring dashboard
• Contact form with email integration

---

📈 Lighthouse Scores

Target metrics:

• Performance: 90+
• Accessibility: 95+
• Best Practices: 95+
• SEO: 100

---

Made with ❤️ by Benjamin