Web Project
Portfolio Website
Fully managable modern portfolio website made by Next.js.
Stars
0
Forks
0
Open Issues
0
Watchers
0
Languages
3Languages
- TypeScript99%
- CSS1%
- JavaScript0%
Fully managable modern portfolio website made by Next.js.
A full-stack developer portfolio built with Next.js 16, Supabase, and an arsenal of modern web technologies — featuring a full admin panel, live GitHub integration, custom 3D shader backgrounds, reCAPTCHA-protected contact, and three built-in utility tools.
| Layer | Technologies |
|---|---|
| Framework | Next.js 16 (App Router), React 19 |
| Styling | Tailwind CSS 4, shadcn/ui, Radix UI |
| Animation | Framer Motion, GSAP, Three.js (custom GLSL shaders) |
| Database | Supabase (Postgres + Auth + Storage + Realtime) |
| Nodemailer (SMTP) with HTML templates | |
| APIs | GitHub REST + GraphQL, reCAPTCHA v2 |
| Icons | Lucide, Tabler, React Icons |
| Deployment | Vercel-ready |
Every project has a rich detail page (/projects/[id]) with:
Three sub-applications live under /tools:
/admin)Full content management system protected by Supabase Auth (email/password + custom password reset flow):
| Section | Management |
|---|---|
| Projects | Add/edit/delete with multi-image upload, pagination, search, client filter |
| Achievements | Rank, date, team, image upload |
| Activities | Organization, period, active status |
| Education | Degree, institution, period, status (current/completed) |
| Skills | Categorized with highlight toggle |
| Hobbies | Icon-picker, description |
| Metrics | Value, suffix, featured flag |
Unified settings editor covering:
Real-time contact message inbox with Supabase Realtime. Threaded view, mark as read, delete threads. Paginated.
GSAP-powered cursor with four corner brackets. Snaps to interactive elements (cursor-target), rotates when idle, hides on touch devices.
ColorBends component renders fluid GLSL color bends with up to 8 configurable colors, warp controls, mouse influence, and parallax — used on the hero section and admin login.
A boot-sequence animation (init → import → tsc → build → api → perf → deploy → done) with progress bar, floating code snippets, scanline overlay, and blinking cursor. Plays once per session via sessionStorage.
Subtle glass card effects (backdrop-blur, rgba borders, bg-slate-900/30) across the admin panel and public sections.
Framer Motion-powered scroll-reveal primitives with direction and stagger support.
generateMetadata reading from Supabase settings (per-deploy control)robots.ts — full crawl accesssitemap.ts — all static routes + every project by IDforce-dynamic on admin and dynamic pagesapp/ # Next.js App Router (pages, API, admin)
├── api/ # Contact, settings, GitHub, auth, tools
├── admin/ # Dashboard, CRUD pages, login, settings
├── projects/ # Projects listing + detail pages
└── tools/ # GitHub Unwrapped, Exam Routine, CGPA Calculator
components/ # React components
├── shared/ # Header, backgrounds, scroll-reveal
├── custom-new/ # Home page sections, preloader, footer
├── admin/ # Admin tables, forms, charts, inbox
└── ui/ # shadcn/ui primitives
lib/ # Data fetching, GitHub client, Supabase, utilities
types/ # TypeScript types (content, project)
supabase/migrations/ # Database schema (0001–0007)
| Table | Purpose |
|---|---|
projects | Portfolio projects with multi-image gallery |
achievements | Awards and competitions |
activities | Co-curricular activities |
education | Academic history |
skills | Skills grouped by category |
hobbies | Personal interests |
metrics | Impact statistics |
site_settings | Global site configuration |
contact_messages | Contact form submissions |
resume | Resume/CV download link |
password_resets | Password reset tokens |
Designed and developed by Kaium Al Limon — full-stack developer from Dhaka, Bangladesh.