Portfolio for an instructional designer, Cairo
Adham Tarek
A portfolio built as a flight: visitors board with a boarding pass and travel through each stop of a career. It comes with an Arabic admin panel that edits every word.
- Type
- Personal portfolio
- Languages
- English and right-to-left Arabic
- Admin panel
- 12 sections, in Arabic
- Security
- Two-step sign-in
- Hosting
- Cloudflare Pages
The idea
Most portfolios read like a CV. Here, visitors live it: they drag a boarding pass into a reader to get in, then find an airplane window. Close the shade and the site turns to night mode and shows the freelance work.
That fits the owner's own work: he designs learning people practise, not just read. Each project page starts with the problem the business saw and its real cause, then the solution and results.
Learning people practise, not just read.
A walk through the site
Click any screenshot to see it full size.
-
The gate
A FOLIO AIR boarding pass in the owner's name. Visitors drag it into the reader, which reads READY, then WELCOME. A Skip button is there for anyone in a hurry.
-
The flight
A sidebar with name, city and local time, an airplane window with a live sky, key figures, and a "flight plan" timeline drawn between each company.
-
In Arabic
A full Arabic edition at /ar/, with direction set before the page paints, so it never flashes the wrong way round.
-
A project page
The problem and its cause, results, tools, slides that open large, an interactive demo, video, and a "Try it live" link.
Features
The window is a switch
Closing the shade switches to night and freelance work; opening it brings back the experience.
A spam-proof contact form
A hidden field for bots, a minimum fill time, and a limit of 5 messages an hour per visitor.
Stats without tracking
Visits are counted day by day with no cookies or IP addresses, and bots and the owner's own visits are left out.
Ready for Google in both languages
A title, description and share image for every page, Arabic and English linked together, and a sitemap that builds itself.
A downloadable CV
A CV download button, with an optional Arabic version.
Edits go live instantly
Anything saved in the admin panel is live straight away, with no redeploy.
The admin panel
An Arabic panel at /admin that edits every part of the site, with each field in Arabic and English side by side. Save with a button or Ctrl+S, with a warning for unsaved changes.
These screenshots come from a demo copy with made-up data: the messages and stats are not real.
- Two-step sign-in with an authenticator app
- 10 recovery codes
- Locks after 8 wrong tries
- Sign out every other device
- The last 20 saves kept
- A weekly backup
The home page
Name, city, languages, the main lines, and the boarding pass details.
- Every field in Arabic and English side by side
Experience and freelance
Every company in one list.
- Add and reorder with arrows
- Hide without deleting
A company
Logo and colours, projects, and the "Try it live" activities.
A project
The problem, results, client quote, and the slides.
- Upload a PDF or images and the browser turns them into WebP slides
- Pick which slides to show
- Upload a video or an HTML demo
Messages
Every contact-form message in one place, with unread ones marked.
- Mark as read or delete
Stats
Daily visits, most-opened projects, where visitors came from, countries, language, and key actions: CV downloads, contact, WhatsApp.
- From 7 days to a year
- A utm_source tag shows where any shared link came from
Security
Turn on two-step sign-in with a QR code, get recovery codes, and sign out other devices.
And on a phone
The whole panel works on a phone.
Accessibility
A site everyone can use: by touch, keyboard or screen reader, and for anyone who asks for less motion.
- Each page sets its language and direction before it paints.
- The boarding pass works from the keyboard (Enter or Space), there is a real Skip button, and the rest stays inert until boarding.
- The window shade is a button that reports its state and works with the arrow keys.
- Dialogs take focus, hand it back to whatever opened them, and close with Esc.
- Slides carry alt text such as "Project name, slide 3 of 12".
- Form errors are announced and focus moves to the field.
- With reduced motion, the sky stops and transitions are switched off.
Under the hood
- One HTML, CSS and JavaScript page with Cloudflare Functions, KV storage and a D1 database for stats.
- WebP slides with 480 px thumbnails that load on arrival, and a sky that pauses when off screen.
- Content is backed up to GitHub every Sunday, and code changes deploy automatically.
Want a site like this for your business?
Tell us about your business on WhatsApp and we'll tell you where to start.