120portfolio designs
Portfolio Gallery
Personas, scroll stories, interactive machines and whole worlds — a city builder, a solar system, a museum, a stock exchange — each one a single hand-crafted HTML file.
- HTML
- CSS
- Canvas
- Three.js
- GSAP
- Web Audio
Showcase
Showcase
Websites I designed and built for people, companies and shops. Each one starts from who they are, not from a template.
-
Aya Rady
Personal branding strategist for experts and consultants
- The idea
- On arrival a search plays out: look-alike results blur away and one name rises through her three verbs, remembered, trusted, chosen. Inside-Out, her programme drawn as rings, now opens her method.
- A before-and-after case study shown as a real LinkedIn profile
- A gap check that names your first gap and opens a ready message
- Her brand on one page: message, pillars, voice and colours
- Arabic + English
- RTL
- JSON-LD
- llms.txt
-
Mohammed Alhabbarah
Head of Learning & Capability Development, Riyadh Metro
- The idea
- Arrival on a platform: a split-flap board flips his name, his role and his destination, operational readiness, while a small train calls at the stages of his work; then the platform doors slide open onto the page. Behind every page, a living metro map.
- A page for each of his programmes: scope, role, dates and impact
- A metro-line footer where the page you are on is the lit station
- Tested across screen sizes, both themes, touch and accessibility
- Arabic + English
- RTL
- Dark mode
- Playwright
-
Layal Joumaa
CV writer, LinkedIn optimisation and personal branding
- The idea
- Her craft is the opening: a red pen sharpens a sample CV, the page folds into a paper plane and flies across a dotted map to where her clients landed, then opens on her real profile. No photos: a pen mark, a one-page CV and a letter that writes itself.
- A LinkedIn headline checker
- Client stories on a map of where they landed
- A few taps to a ready first message
- Arabic + English
- WebGL
- RTL
- llms.txt
-
Salam Aksimi
Personal branding and content on LinkedIn
- The idea
- The post that lands: her own hook types itself into a post, she publishes, the card lifts out of the feed while reactions float up and ripples spread, then a spark flies to the booking button. Threads and sparks run behind every page.
- Her stage story as real event badges that flip between years
- A page for every event she spoke at or hosted
- Mobile first, with an app-like dock and a booking button
- Arabic + English
- RTL
- Dark mode
- Canvas
-
Tawheed Malkat
Product designer (UI/UX)
- The idea
- The portfolio as a design file that never stops working: on arrival the hero designs itself, one of her skills at a time — research, wireframe, type, colour, prototype.
- An opening where her own toolbar replays each stage of the design
- A deck of projects to swipe through, each card fanning its own screens
- A page for every project, with its whole case study screen by screen
- Arabic + English
- 3D
- RTL
- Dark mode
-
Monther Al-Ashqar
Senior project manager and owner's representative
- The idea
- The hero is an engineering sheet: a tower elevation draws itself floor by floor while a progress S-curve falls behind plan, recovers and lands on completion, and a handed-over stamp settles.
- A page for every major project
- English and Arabic, each under its own path
- Structured data and llms.txt for search engines and AI assistants
- English + Arabic
- JSON-LD
- llms.txt
-
Othman Almashaqba
Technology leader, ERP and IT governance, Riyadh
- The idea
- Threads arrive tangled at the start of the line and leave as ordered lanes once they pass behind his portrait, the way he puts a process in order before he automates it. A band of them heads every page and straightens further as you scroll.
- Each of his programmes in its place on a scale of Odoo versions, opened with a tap
- A lens passes over a clear process and a confused one to show what technology enlarges
- Pick a topic and the email opens with its subject and greeting ready
- Arabic + English
- RTL
- Dark mode
- Canvas
-
Dr. Hamad Al-Thiapi
AI and digital transformation leader in government
- The idea
- Convergence: gold routes cross a night sky over Najd and all meet at his portrait, with light travelling along them, the way networks settle on one path, the subject of his doctorate. Najdi parapets edge every section.
- His doctoral question drawn as a diagram you switch between classic BGP and SDN
- A journey whose gold line swings out with each scholarship abroad and comes home
- Tested at every screen size, in both languages and both themes
- Arabic + English
- RTL
- Dark mode
- JSON-LD
-
Mazen Alobaidi
General manager, IT and digital transformation
- The idea
- The stack: in the hero, isometric planes float one above another, server boxes and databases below and a target on top, while gold pulses climb between the layers. On the home page his roles stack the same way, each tagged with its layer, and a light climbs from his first role to today.
- Every area of expertise names where he practised it before he led it
- Notes from the field: short reads he wrote on running technology
- A message form that opens a ready email for the visitor to review
- Arabic + English
- RTL
- Dark mode
- llms.txt
-
Ayman Alawwad
PMO manager, portfolio and program governance
- The idea
- Drafted on linen: behind the page a portfolio roadmap draws itself in ink, task bars, dependency lines and diamond milestones, while a red status line drifts slowly across the plan. Linen and ink come from his LinkedIn banner, the deep red from his shemagh.
- Four engagements, each told as the mandate, the complexity, how he led and the result
- An executive bio, short and long, ready to copy for organisers and media
- His leadership programme as a dated path, module by module
- English
- Dark mode
- JSON-LD
- llms.txt
-
TechSpark Karam
A young creator and explorer, inspiring kids to love technology
- The idea
- A night sky for a young tech fan: words like HTML, JS, Robots and Gaming drift down behind the page, his TechSpark badge glows at the centre, and a typewriter spells out TechSpark Karam, coding fun, cool gadgets and future tech in turn.
- His achievements on cards: his first website, a gaming milestone and a digital art award
- His YouTube, TikTok and Instagram in one place
- Made for a young audience: big type, bright colours and playful motion
- English
- HTML
- CSS
- JavaScript
-
Gambit Tournaments
Tournaments platform for a chess club in Dammam
- The idea
- The club's black and gold, built as a full product: upcoming tournaments with live seats, guest registration, and an archive of past tournaments.
- Transfer receipts checked automatically by an AI workflow in n8n
- Arabic, English and Urdu
- An admin dashboard for tournaments, gallery and registrations
- Next.js
- React
- Prisma
- MySQL
- n8n
-
Al-Bader Transport
Transport, logistics and contracting, Madinah
- The idea
- Al-Bader is the full moon, so the site opens at night: the logo's three road lines sweep in and climb into a moon, then the night folds into the hero's moon over Madinah, with Uhud on the horizon, city lights, and long-exposure trails on the highway. Further down, lights travel along route lanes and a truck drives from step to step.
- A quote request that fills in the WhatsApp message as you type
- Each service shown as a technical drawing on a drafting grid
- On the phone it works like an app: a bottom bar and a quote in three steps
- Arabic
- Canvas
- Mobile first
-
Arabian Access
Business setup consultancy, Riyadh
- The idea
- Built on their logo: two waves in two colours, the firm and its client, moving together. They flow through the hero and draw themselves across the stages of the work, over the star lattice etched on the glass of their Al Malaz reception, with points of light travelling along its lines. The real reception photo drifts in a slow zoom beside a glass card that steps through the setup journey.
- A switch for foreign investors, local entrepreneurs and established companies, each with its own services
- A three-step consultation request that opens WhatsApp with the message ready
- A live open-or-closed badge on Riyadh time
- Arabic + English
- RTL
- Dark mode
-
Saudi Brothers
Hajj services for domestic pilgrims, Makkah and Al-Qassim
- The idea
- From Al-Qassim to the holy sites. A gold eight-pointed star draws itself, the Talbiyah appears word by word, and the page opens from the heart of the star. The hero is a living scene of Arafat's mountains, the tents of Mina and the dunes, under a rising dawn sun in light mode and a crescent, stars and tent lights in dark.
- A journey card where a marker travels from Al-Qassim to Makkah, Mina, Arafat and Muzdalifah
- A live countdown to the Day of Arafah, on the Umm al-Qura calendar
- A review form that previews the card as you type and sends it on WhatsApp
- Arabic
- Mobile first
- JSON-LD
-
Al-Hemaya Al-Kamela
Fire alarm and fire suppression systems, Khamis Mushait
- The idea
- The site is a fire alarm control panel. Each section is a zone with its own lamp, which blinks amber while it is checked and settles green as you reach it, and an LCD readout in the header names the zone. Behind the hero, flow runs through a sprinkler network past pressure gauges; the inspection request is a hanging tag, and the company's history is an engraved equipment data plate.
- An inspection request on a three-step tag that opens WhatsApp with the message ready
- A live lamp that says whether the showroom is open right now
- Photos of the real showroom shelves, each opening full screen
- Arabic
- Dark mode
- llms.txt
-
Prestige VIP Tailor
Men's tailor, Al Khobar
- The idea
- Cut to measure: tailor's chalk drafts the thobe pattern, a tape measures it and a running stitch closes it, then the cloth fills in and becomes the thobe on its hanger, beside a fabric swatch book in 3D.
- Design your thobe — collar, sleeve, pocket, buttons, fabric — and it travels with the booking
- A three-step booking that opens WhatsApp with the message ready
- Light by default, with a moon toggle for dark
- Arabic + English
- 3D
- Mobile first
-
Al-Reem Grilled Lamb
Charcoal-grilled lamb, Al Khobar
- The idea
- Live coals: the hero opens at night, then the charcoal catches. Embers and sparks rise off the real coals, warm light flickers on the lamb, and the headline glows and cools. On the phone it works like an app: a bottom bar and an order in steps.
- Orders arrive ready on the shop's WhatsApp
- Photo gallery and Google reviews
- Light and dark modes
- Arabic
- Canvas
- Mobile first
Away from client work: a gallery of portfolio designs, built to push what a personal site can be.
Want a site that could only be yours?
Send me your LinkedIn profile or your shop's Google Maps listing, and I will tell you what I would build.
Start a conversation