MOSAB — A Living Portfolio
An editorial front door to a much larger body of work. I directed the strategy, content architecture and visual decisions behind a portfolio that keeps the homepage selective while making the full archive discoverable and manageable.
A portfolio designed as a living publishing system: curated at the entrance, comprehensive underneath, and editable as the work evolves.
The contribution.
- Defined the portfolio’s positioning and the distinction between Featured Work and the complete library.
- Directed the visual language and reviewed desktop and mobile storytelling through multiple iterations.
- Guided evidence-based project grouping, publication and factual attribution across visual, video, print and web work.
- Made editorial and privacy decisions and requested deeper presentations where the first versions underrepresented the work.
- Supervised CMS requirements, implementation review, testing and launch through an AI-assisted workflow.
The problem was not a shortage of work.
The first portfolio made a wide-ranging practice look small. A handful of project cards could not represent campaigns, photography, films, catalogues, websites and the thinking behind them.
The rebuild began with a different question: how can the entrance stay selective while the work underneath remains complete, credible and easy to explore?
A curated first impression.
A later desktop review of the homepage.
01 / Audit the work before designing the frame.
The process began with the CV, project notes, discovery records and RAW-WORK archive. During the recovery audit, 3,767 source files were accounted for and 103 content groups mapped for review. The counts described the source material, not a promise to publish every raw file.
Campaign systems were regrouped from related images, films and documents. Final work was separated from duplicates, raw footage and private planning material; unclear authorship or suitability stayed in review rather than being invented.
Source archive → review groups → projects and galleries → web-ready derivatives
02 / One library. Several ways in.
The site separates the curated homepage from the comprehensive Work library. Visual Gallery, Video, Catalogues & Print and Websites each give a different medium its own browsing logic, while a project can appear in more than one collection.
Collection views from the build and review process.
03 / Architectural cinema, made responsive.
The art direction pairs editorial typography with architectural depth, a dark green and warm gold identity, generous space and purposeful motion. Multiple desktop, tablet and mobile reviews led to changes in hierarchy, navigation, spacing and image treatment. The goal was a recognizable visual identity, not a generic template or motion for its own sake.
04 / Make room for the medium.
A campaign needs its system of adaptations; a film needs a poster and a way to watch; a catalogue needs selected spreads and the option to browse the complete publication; a website needs desktop and mobile screens, structure and an honest account of the contribution.
The CMS keeps projects, gallery items, video records and PDFs connected without forcing every piece into the same shallow page template.
A place for film, print and digital work.
Collection views from a later visual review of the site.
The same identity, rethought for smaller screens.
Mobile layouts, navigation, motion and spacing were reviewed as their own experience. The visual language survives the change in scale without relying on a desktop layout squeezed into a phone.
05 / A portfolio that can keep growing.
The public site is only one side of the work. MOSAB Studio manages projects, media, videos, PDFs, categories, visibility and homepage order. A project can be published without being featured; uncertain or private work can remain in draft or hidden.
The site uses native PHP and MySQL on Hostinger, with HTML, CSS, JavaScript, Tailwind CSS and selective scroll animation on the front end. Source files remain separate from optimized public media. Video records can be completed later with YouTube links without losing their place in the archive.
Editorial control is part of the design, not an afterthought.
06 / AI-assisted, human-directed.
I brought the work, context, decisions and critique. ChatGPT and Codex supported research synthesis, visual exploration, writing, code, testing and deployment tasks. The direction changed repeatedly when the output did not reflect the real work: too few projects, thin case studies, missing videos, incomplete catalogues and weak mobile details were all challenged and rebuilt.
This was not a one-prompt website. The value was in judgment: deciding what belonged together, what was publishable, what needed evidence and how each part should feel.
Direction → review → correction → refinement.
07 / Launch a foundation, not a frozen archive.
The site was deployed to Hostinger, placed behind Cloudflare and connected to the live domain while retaining the existing Zoho mail configuration. Publication controls allow new work, corrected credits and YouTube links to be added without rebuilding the front end.
The outcome is a working portfolio system with a selective homepage and a larger, searchable body of work. Its continuing value is that it can be edited as the practice grows.
Explore the live portfolio.
Visit mosabs.comThe best way to understand the system is to move through it: the selected entrance, the full library and the different paths for visual, film, print and website work.
Visit mosabs.com
Credits & tools.
Creative direction, editorial decisions and project ownership: Mosab Abu Khaled. Research, design exploration, implementation and QA support: AI-assisted workflow with ChatGPT and Codex.
Native PHP, MySQL, HTML, CSS, JavaScript, Tailwind CSS, GSAP / ScrollTrigger, PDF.js, Hostinger and Cloudflare