← Back to Projects
Omar Monib — Portfolio
Personal portfolio built with Next.js, Tailwind CSS v4, and Framer Motion. Scores 97/100 on Lighthouse performance (mobile), LCP 2.4s, CLS 0. Contact form delivers via Resend and stores in Supabase. 93 passing tests.
omar-monib.vercel.app/
Omar Monib — Portfolio
Next.js
TypeScript
Tailwind CSS v4
Framer Motion
Supabase
Resend
Project Overview
This portfolio is itself a production-grade Next.js application — not a template. It features a custom Tailwind CSS v4 design system with CSS variable theming, a working contact form backed by Resend (email) and Supabase (storage), animated page transitions with Framer Motion, and a full test suite (93 passing tests). Lighthouse scores (mobile): Performance 97, Accessibility 94, Best Practices 100, SEO 100. LCP 2.4s, CLS 0, TBT near zero.
✨ Key Features
- 🎨 Custom design system — CSS variables + Tailwind v4 theme tokens
- 📧 Contact form — Resend email delivery + Supabase message storage
- 🌗 Theme switching — dark/light with zero flash-of-unstyled-content
- ♿ Accessible — skip-to-content, ARIA labels, keyboard navigation, route announcer
- 📱 Fully responsive — mobile-first across all breakpoints
- ⚡ 97/100 Lighthouse performance · 94 Accessibility · 100 Best Practices · 100 SEO
🏆 Why It Matters
A portfolio that practices what it preaches: the same standards applied to client projects — testing, accessibility, performance, and real backend integration — are applied here. Perfect scores on Best Practices and SEO, 97 on Performance, and a working backend make this a demonstration of production engineering habits, not just a showcase.
Interested in working together?
I'm available for freelance and full-time roles.