Salma Awad — Designer Portfolio

Salma Awad is a UI/UX designer working out of Tripoli, Lebanon. salmaawad.com is her professional home: a selected-work index, four full case studies, and the usual supporting pages — experience, about, contact and a résumé.

The site is a Next.js application deployed on Vercel. Pages are prerendered rather than assembled in the browser, so a visitor on mobile data gets finished HTML on the first response, and search engines get a complete document without having to execute JavaScript to see the content.

A designer's portfolio has a particular problem: the work has to be the loudest thing on the page, and everything around it — navigation, type, loading behaviour — has to stay out of the way without looking unfinished.

Salma needed a professional home for her selected work, with room for full case studies rather than a grid of thumbnails, and she needed to be able to publish a new one herself. A portfolio that requires a developer every time the designer finishes a project stops being current within months, and a portfolio that is out of date says something worse about its owner than a short one does.

I built the site and owned the technical side of it: the Next.js application, the content model, the custom admin panel, and all of the search and structured-data work. The visual direction was worked out together — Salma is a designer, and the interface decisions were hers to lead. My job was to make sure what we agreed on could be built properly and would hold up in production.

Next.js App Router with static prerendering. Every page is generated ahead of time and revalidated on a short interval, so the site is served from Vercel's edge cache rather than rendered per request — the response headers on the live site show prerendered pages being served straight from cache.

Content lives in a custom admin panel rather than in the codebase, so new case studies and edits do not require a developer or a deployment. Images go through Next.js image optimisation, served in modern formats at the size the layout actually asks for.

On the search side the site carries a linked structured-data graph — Person, WebSite, WebPage, site navigation and an ItemList of the selected work — so the designer, the site and the individual case studies are described as connected entities rather than as unrelated pages. There is also a location landing page for UI/UX design in North Lebanon, targeting local search the way the rest of the site targets her name.

Prerendering rather than rendering in the browser. Every page is generated ahead of time and revalidated on an interval, so the first response carries finished HTML. The live site's headers still show it: X-Nextjs-Prerender: 1 with a Vercel cache hit. On mobile data that is the difference between seeing the work and watching a spinner, and it means search engines index the content without having to execute JavaScript to find it.

A custom admin panel rather than a hosted CMS. A hosted CMS would have been faster to stand up and would have meant a monthly fee, a content model shaped by someone else's product, and a second place to log in. The panel is built into the site, so publishing a case study is a form, not a deployment.

A linked structured-data graph rather than isolated snippets. The designer, the site, each page and the selected work are described as connected entities — Person, WebSite, WebPage, SiteNavigationElement and an ItemList — so a search engine reads one coherent description of who she is and what she has made, instead of four unrelated fragments.

A location page for UI/UX design in North Lebanon. Her name is the term that matters most, but nobody searching for a designer for the first time knows it yet. The location page targets the search someone makes before they know who to ask for.