My Portfolio
A high-performance portfolio balancing refined animations, full internationalization, and a polished design system across dark and light modes.
Tech Stack :
The Problem
Developer portfolios often sacrifice performance for visual complexity, or strip away personality in pursuit of speed.
Balancing instant load times, multi-language support, and clear presentation requires deliberate architectural decisions.
The Solution
A portfolio that combines aesthetics with engineering rigor:
- Fast experience — Near-instant page loads
- Smooth animations — Without performance impact
- Complete i18n — English and Arabic with RTL
- Consistent design system — Works in dark and light modes
Technical Implementation
Core Architecture
Built on Next.js 16 with App Router and React 19.
Key Technologies
- Turbopack — Near-instant development iteration
- next-intl — Localization with automatic RTL switching
- Framer Motion + GSAP + Lenis — Layered animations
- Radix UI — Accessible, customizable components
- Zustand — Simple state management with zero boilerplate
Design
Design system uses CSS variables for consistent theming. SEO metadata auto-generated including Open Graph images.
Content
Managed through MDX — rich descriptions while maintaining static generation benefits.
Sentry provides production error tracking without bundle impact.
Outcome
This site demonstrates senior-level frontend engineering:
- Performance optimization
- Internationalization architecture
- Animation choreography
- Attention to developer experience
Serves as both a portfolio piece and a template for high-quality Next.js applications.