Project Overview
This site is my personal portfolio — a bilingual, multi-page application showcasing my projects, achievements, and experience to recruiters and international employers.
Developer portfolios often sacrifice performance for visual complexity, or strip away personality in pursuit of speed. This site is built to prove the opposite is possible: near-instant page loads, layered animation, complete English/Arabic internationalization, and a consistent design system across dark and light modes — all in one codebase.
The site doubles as an engineering reference: the same standards I apply to client work (type safety, monitoring, automated quality gates) apply here.
Key Features
- Bilingual experience — English and Arabic with locale-based routing (/en, /ar) and full RTL layout
- Dark/light mode — seamless theme switching with consistent design tokens
- Project case studies — MDX-driven content with live demos and GitHub links
- Achievements section — certifications and awards with detail views
- Interactive contact section — direct channels for reaching out
- Polished loading states — skeleton loaders and smooth page transitions
Technical Highlights
- Next.js 16 App Router — static generation with React 19 server components
- Internationalization architecture — next-intl with locale routing, translated metadata, and automatic RTL switching
- MDX content pipeline — case studies authored in MDX with gray-matter, keeping content separate from code
- SEO implementation — metadata, Open Graph images, and structured data per locale
- Animation choreography — Framer Motion with Lenis smooth scrolling, layered without blocking interaction
- Production monitoring — Sentry error tracking and Vercel Analytics
- Quality gates — Husky and lint-staged enforce linting and formatting on every commit
My Contributions
- Designed and developed the entire site, including the visual design system built on CSS variables
- Built the internationalization architecture covering routes, content, metadata, and RTL layout
- Created the MDX content pipeline for project case studies
- Implemented SEO: per-locale metadata, Open Graph, and structured data
- Optimized performance with static generation, Turbopack, and sharp image processing
Challenges & Solutions
Challenge: Combining rich animation, full bilingual support, and a complete design system without compromising load times.
Solution: Static generation with server components keeps the initial payload small; animations are layered with Framer Motion and Lenis on top of already-rendered content; images are optimized through sharp and next/image.
Result: A visually rich, fully internationalized site that still loads near-instantly — serving as both a portfolio piece and a template for high-quality Next.js applications.
Tech Stack
Frontend: Next.js 16, React 19, TypeScript 5.7, Tailwind CSS 4, Radix UI, Framer Motion, Lenis
Content: MDX, React Markdown, gray-matter
State & Forms: Zustand, React Hook Form, nuqs
Infrastructure: Vercel, Sentry, Vercel Analytics
Tools: Turbopack, sharp, ESLint, Prettier, Husky, lint-staged, pnpm
