FIGMAPersonal
PORTFOLIO DESIGN
FIGMA LinkA behind-the-scenes look at how this portfolio was designed from concept to final product. Red, black, and white — a portfolio built on the idea that a small palette is enough. Designed and prototyped entirely in Figma, then built with Claude Code.
Overview
The idea was to create something entirely my own, using my three favourite colours: red, black, and white. I wanted a clean, responsive site available in both English and my native language, Arabic, and I kept everything neat and simple on purpose. I've always believed you don't need an overwhelming variety of colours or a complex design for something to work.
Everything was first designed and prototyped in Figma. Once the design was in place, I prototyped the entire experience navigation, interactions, both layouts to validate the user flow and make sure it felt polished before development ever started.
What I Did
Built on variables, not one-off screens
My favourite part of Figma is variables, so I built the whole design system on them: a colours collection that every colour in the file is bound to, a numbers collection with reusable values that aren't limited to one scope, a typography collection that holds the English and Arabic font families and weights, a version collection that switches between desktop and responsive, a navigation collection that powers the nav prototype without building every state by hand, a form collection that drives the contact form, and a content collection with English and Arabic modes that holds every translated string.
Prototyped before a line of code existed
I prototyped the full experience in Figma before moving into development: the navigation, the inquiry dropdown, a contact form that flags empty required fields and confirms when a message is sent, and a 404 page, across both desktop and responsive layouts.
One set of components, two languages
Rather than building separate translated components, every component has a direction property: ltr for English and rtl for Arabic. Switching the content collection to Arabic changes the text, font, line height, and letter spacing on its own, and switching the direction mirrors the layout.
Designed by me, built with Claude Code
My original plan was to publish this with Framer, but I changed my mind and built it with Claude Code instead. I learned some coding basics at university, so I wasn't starting from zero.
Outcome
I'm happy with how it turned out. I made it simply because I wanted a portfolio of my own, and that's exactly what it is.
Three colours, two languages, one portfolio.
LET'S MAKE SOMETHING GREAT.
Have a project in mind? I'd love to hear about it. Drop me a message or reach out directly.
SEND A MESSAGE
I'll get back to you shortly