Personal Portfolio - MudassirDev (Portfolio 2.0)
React 19
TanStack StartTanStack Router
TypeScript
Tailwind CSS v4
Vite
Supabase
Framer Motion
COBE
LenisMudassirDev Portfolio 2.0 is a complete redesign of my personal developer portfolio, engineered with a production-level architecture and a strong focus on performance, accessibility, scalability, and content flexibility. Powered by TanStack Start with React 19, styled with Tailwind CSS v4, enhanced through Framer Motion, and backed by Supabase for auth and data, this portfolio represents the standard I aim for in professional software development.
🎯Project Purpose
The goal behind Portfolio 2.0 was simple:
Build a polished, scalable, and future-ready platform that reflects my skills as a modern full-stack developer.
This version introduces:
- A static blog system with JSON-driven content
- Strong SEO foundations
- Smooth animations and UX interactions
- A real-time guestbook powered by Supabase
- A professional booking form with Formspree integration
- OAuth-based authentication via GitHub and Google
This is not just a portfolio — it is a complete developer platform.
🧩Technology Stack Overview
TanStack Start & Router
TanStack Start serves as the backbone of the entire portfolio, powering:
- Hybrid SSR / CSR rendering
- File-based routing via TanStack Router
- Server functions for secure API calls
TanStack Start ensures scalability, performance, and a premium developer experience.
⚛️TypeScript Integration
TypeScript provides:
- End-to-end type safety
- Strongly typed APIs, components & schemas
- Fewer bugs
- A smoother DX
🎨Tailwind CSS v4 Integration
Tailwind CSS v4 ensures:
- Fully responsive UI
- Clean, scalable design
- Fast development workflow
- Elegant interactions
🧠TanStack React Query
TanStack React Query powers client-side data management:
- Async state caching
- Server function integration
- Automatic refetching & stale data management
🛡️Zod Validation Layer
Used for validating:
- Forms
- Auth flows
- Booking submissions
- API response shapes
🔐Supabase Authentication & Database
Supabase provides:
- OAuth authentication (GitHub & Google) via PKCE flow
- PostgreSQL database for guestbook notes
- Real-time WebSocket subscriptions
📚Content Layer
Static JSON Blog
Blog content is managed via a static JSON data file, providing:
- Fast, zero-dependency content loading
- Simple content structure
- Direct integration with route loaders
- No external CMS overhead
It provides a lightweight, maintainable approach to content management.
📝Supabase Realtime Data
Supabase powers the dynamic data layer, enabling:
- Real-time guestbook with live updates
- WebSocket-driven change feeds
- Server-side cookie-based auth via @supabase/ssr
Pro Tip: Supabase Realtime transforms the guestbook into a collaborative, live experience.
🎬Motion & UI Enhancements
Framer Motion
- Smooth page transitions
- Scroll-triggered animations
- Micro-interactions
- GPU-accelerated performance
🎛️Lenis & COBE Globe
- Lenis-powered smooth scrolling across all pages
- 3D interactive WebGL globe via COBE
- CMDK-powered command palette with live search
📅Additional Integrations
Formspree
- Contact form handling via API
- Zod-validated submission pipeline
- Client-side integration with React Hook Form
📨GitHub API & Contributions
- Server-side GitHub profile data fetching
- Contribution calendar visualization
- Cached with 5-minute TTL for performance
🌐SEO + Custom Domain
Portfolio includes:
- Dynamic metadata
- OpenGraph + Twitter Cards
- Sitemap + robots.txt
- Optimized URLs
- High Lighthouse scores
Deployed on: https://mudassirasghar.dev
⭐Conclusion
MudassirDev Portfolio 2.0 is a scalable, modern, and future-proof platform — showcasing not just my work, but the engineering principles and craftsmanship I believe in.
FROM CONCEPT TO CODE </>
LET'S TURN IDEAS INTO SOLUTIONS
I'm available for full-time roles & freelance projects.
I thrive on crafting dynamic web applications
and delivering seamless user experiences.