A modern, scalable, and responsive portfolio website built with Next.js and Supabase, designed to showcase my projects, skills, and developer journey with a clean and professional UI.
pie title Technology Stack Distribution
"Next.js/React" : 40
"Supabase" : 25
"CSS/Styling" : 20
"Vercel/Deployment" : 15
gantt
title Technical Skill Development Timeline
dateFormat YYYY-MM
axisFormat %b %Y
section Frontend
HTML/CSS Fundamentals :2022-01, 4M
JavaScript Mastery :2022-04, 6M
React Foundation :2022-09, 5M
Next.js Advanced :2023-02, 8M
section Backend
API Integration :2022-11, 4M
Supabase & Databases :2023-03, 7M
Full-Stack Projects :2023-08, 9M
This portfolio is built as a production-style personal website, not just a static page.
It focuses on:
- ⚡ Performance & scalability using Next.js
- 🗄️ Backend services powered by Supabase
- 🎨 Clean, modern, and readable UI
- 📱 Fully responsive design
- 🎯 Recruiter-friendly structure
The goal is to represent my technical skills and design sense in one place.
flowchart TD
A[Home Page] --> B[About Me]
A --> C[Skills Overview]
A --> D[Projects Showcase]
B --> E[Resume Download]
C --> F[Contact Section]
D --> E
E --> F
style A fill:#2563eb,color:#fff
style D fill:#7c3aed,color:#fff
├── 🏠 Home → Introduction & highlights with interactive elements
├── 👤 About → Background and interests with timeline visualization
├── ⚡ Skills → Technical stack with proficiency charts
├── 🚀 Projects → Real-world project showcase with metrics
├── 📄 Resume → Downloadable resume with view statistics
└── 📞 Contact → Easy reach & social links with form
Each section is intentionally designed to be minimal, clear, and content-focused.
- ✨ Clean layout with balanced spacing and visual hierarchy
- 📱 Mobile-first & fully responsive across all devices
- 🧠 Content-first design approach with data visualization
- 🎯 Smooth navigation flow with interactive elements
- 💎 Subtle, professional color palette with accent colors
- 📊 Data visualization integrated to showcase metrics effectively
The UI avoids unnecessary clutter and focuses on clarity and usability while incorporating meaningful visual elements.
graph TB
subgraph "Frontend Layer"
A[Next.js App] --> B[React Components]
B --> C[UI Library]
C --> D[Visualization Charts]
end
subgraph "Backend Layer"
E[Supabase] --> F[PostgreSQL Database]
E --> G[Authentication]
E --> H[Real-time Subscriptions]
end
subgraph "Deployment"
I[Vercel Platform] --> J[Edge Network]
J --> K[Global CDN]
end
D --> E
A --> I
| Layer | Technology | Usage | Visualization |
|---|---|---|---|
| Frontend | Next.js 14, React 18 | Core framework, SSR, routing | ⭐⭐⭐⭐⭐ |
| Styling | CSS Modules, Tailwind | Component styling, utilities | ⭐⭐⭐⭐ |
| Visualization | Recharts, Framer Motion | Charts, animations, interactions | ⭐⭐⭐⭐ |
| Backend | Supabase | Database, Auth, APIs | ⭐⭐⭐⭐⭐ |
| Deployment | Vercel | Hosting, CI/CD, analytics | ⭐⭐⭐⭐⭐ |
| Monitoring | Vercel Analytics | Performance tracking | ⭐⭐⭐ |
xychart-beta
title "Monthly Development Activity"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
y-axis "Commits" 0 --> 100
bar [35, 42, 28, 55, 60, 48, 65, 72, 80, 75, 68, 85]
line [30, 38, 45, 52, 58, 62, 67, 73, 78, 82, 85, 90]
| Metric | Current Value | Target | Status |
|---|---|---|---|
| Page Load Time | < 1.5s | < 2s | ✅ Exceeding |
| Mobile Score | 98/100 | > 90 | ✅ Excellent |
| Desktop Score | 100/100 | > 95 | ✅ Perfect |
| SEO Score | 95/100 | > 85 | ✅ Excellent |
| Accessibility | 92/100 | > 90 | ✅ Meeting |
Supabase powers the dynamic aspects of this portfolio:
- 📦 Store and manage dynamic content with PostgreSQL
- 🔐 Handle authentication and secure endpoints
- ⚡ Enable real-time updates for future features
- 📊 Collect analytics on portfolio interactions
- 🔄 Manage form submissions and contact data
This makes the portfolio future-ready and scalable, not just a static brochure site.
portfolio/
│
├── 📁 app/ # Next.js 13+ App Router
│ ├── 🏠 page.jsx # Home page
│ ├── 👤 about/ # About section
│ ├── ⚡ skills/ # Skills with charts
│ ├── 🚀 projects/ # Project showcase
│ └── 📞 contact/ # Contact form
│
├── 📁 components/ # Reusable UI components
│ ├── 📊 Charts/ # Data visualization components
│ ├── 🎨 UI/ # Basic UI elements
│ ├── 📱 Layout/ # Layout components
│ └── 🚀 Projects/ # Project cards & displays
│
├── 📁 lib/ # Utilities & configurations
│ ├── supabase.js # Supabase client config
│ ├── data/ # Chart data & constants
│ └── utils/ # Helper functions
│
├── 📁 styles/ # Global & modular styles
├── 📁 public/ # Static assets
└── 📄 package.json # Dependencies
- 🎯 Present projects professionally with interactive demos
- 🏢 Act as a central developer hub for all my work
- 👔 Share work with recruiters in an engaging format
- 🛠️ Demonstrate Next.js + Supabase integration skills
- 🌐 Build a strong online presence with measurable impact
- 📊 Showcase data visualization capabilities in real projects
This portfolio will evolve continuously as I grow and build more projects, with new visualizations and interactive elements added regularly.
If you like the design or find inspiration from this portfolio:
⭐ Star this repository — it motivates me to keep improving!
graph LR
A[Star ⭐] --> B[Increased Visibility]
B --> C[More Feedback]
C --> D[Better Portfolio]
D --> E[Career Growth]
E --> A
Feel free to:
- 🐛 Report issues for bugs or improvements
- 💡 Suggest features for new visualizations
- 🔄 Fork the project for your own portfolio
- 📬 Contact me for collaboration opportunities
To add these visualizations to your actual README file:
- Copy the entire enhanced README above
- Save it as
README.mdin your repository root - Customize the data in the charts with your actual metrics
- Add your social media links in the footer section
- Update the screenshot URL with a real screenshot of your portfolio
The Mermaid.js diagrams will render automatically on GitHub, GitLab, and other platforms that support Markdown with Mermaid. No additional setup is required!
