My Portfolio

Project Overview

Key Features

• Bilingual experience: English at the root and Arabic under /ar, with a full RTL layout and native Arabic typography
• Dark/light mode: theme switching with a view transition and shared color tokens
• Project case studies: MDX case studies with galleries, live demos, and links to the career entries and certificates they relate to
• Career and achievements: a timeline of roles and education, and certifications with detail views
• Testimonials: recommendations from clients, mentors, and teachers, on their own page and in a home-page card that opens each one in a dialog
• Contact form: validated messages delivered through Postmark, with spam protection, a Request CV button that pre-fills the message, and a project inquiry from every case study
• Machine-readable: an llms.txt index, a Markdown version of every page, and browser tools for AI agents (WebMCP)

Technical Highlights

• Next.js 16 App Router: every page is prerendered at build time, with server components wherever a component does not need the browser
• No loading screens: every page arrives prerendered with no skeletons, and a thin progress bar appears only when a navigation takes longer than 150 ms
• Internationalization: next-intl with locale routing, translated metadata, plural-aware messages, and automatic RTL
• Readable without JavaScript: page entrances only move content, and no text waits on JavaScript to appear
• Lean client JavaScript: animation features load in their own chunk, off the critical path, and the custom cursor and smooth scrolling only load on devices that use them
• One source of truth: the Markdown pages, llms.txt, structured data, and the years of experience are all generated from the same data the pages render
• SEO: per-page metadata with hreflang links, structured data, breadcrumbs, and a 1200x630 share image for every project
• Accessibility: a skip link, testimonial and certificate dialogs that keep focus inside, close on Esc, and return focus to what opened them, and reduced-motion support for page entrances, smooth scrolling, the cursor, and the contact form
• Security and monitoring: security headers, a Content Security Policy in report-only mode, Cloudflare Turnstile on the contact form, and Sentry error tracking
• Quality checks: strict TypeScript, ESLint, and Prettier, with a pre-commit hook on staged files

My Contributions

• Added the Arabic version: /ar with a right-to-left layout, Arabic typography, case studies in both languages, and hreflang links
• Built the contact pipeline: validation shared by the form and the server, delivery through Postmark, Cloudflare Turnstile, a honeypot, and a rate limit, plus the Request CV and project inquiry flows
• Built the testimonials page, which lists every recommendation grouped by clients, mentors, and teachers, and the home-page card that opens each one in a dialog. On the Arabic site, each recommendation can switch between the Arabic translation and the English original
• Built the layer for AI agents: llms.txt, a Markdown version of every page (at /api/md and through Accept: text/markdown), and WebMCP tools in the browser
• Removed the route skeletons so every prerendered page renders its content directly, and replaced the top loader with a single progress bar that appears only on slow navigations
• Worked on performance, SEO, and accessibility: leaner client JavaScript, structured data and share images, keyboard-accessible dialogs, and a skip link
• Designed the light and dark color tokens in CSS variables, the view-transition theme switch, and a custom cursor that names icon-only controls, logos, and image links

Challenges & Solutions

Tech Stack