Omar Abolaban

PROBLEM

A working photographer's portfolio lived only on Behance and Instagram — platforms he doesn't control, that don't rank for his name, and that frame his work in someone else's interface. He needed his own site, and the hard part was the photos: nearly every frame is a tall portrait, but full-bleed sections are wide, so naive CSS cropping cuts off heads.

WHAT'S IN IT

• +Four complete design directions built as clickable demos; the client picked "Gallery Monochrome", which became the site.
• +A camera-viewfinder motion system: an aperture intro on first visit, a focus-bracket cursor on fine pointers, and headlines that rise out of a mask — all switched off under reduced motion.
• +An image pipeline that encodes AVIF with content-hashed filenames (cached forever), explicit dimensions (no layout shift), and per-project 1200×630 share images.
• +Full structured data — Person, ProfessionalService, ImageGallery with an ImageObject per photo, breadcrumbs — plus an image sitemap, and noindex until the real domain is live.
• +A contact form that answers honestly when email isn't configured and points to WhatsApp, instead of pretending a message was sent.

ROLE

Engineer at SaySoft — four design directions for the client to choose from, then the full Next.js build, the image pipeline, SEO, and deployment.

NOTABLE DECISION

Made "never cut a head" a build failure instead of a hope. Every wide or tall crop has a hand-measured safe box around the subject's head, and the image build script refuses to finish if that box could be clipped at any screen shape the layout can produce — parallax drift and the Ken Burns zoom included. It was then verified in a real browser across 21 viewports, from phones to a 3440-px ultrawide.