START WITH WHAT’S REAL
✳Make room for the whole picture.
Design, research, piano, and photography each have their own space, so visitors can follow what interests them without losing the sense that it all belongs to one person.
01 / THE STARTA PERSONAL SPACE, NOT A LINK LIST
THE IDEA
One place for
the work and
the life around it.
I’m Noor, a designer and developer. I wanted the site to feel like a small portrait of me: what I make, what I explore, and what I enjoy away from work.
That meant bringing web and visual design, economics and statistics, piano, and photography into one experience. Each part needed room to be itself while still feeling like it belonged to the same person.
THE DESIGN INTENT
Bring my interests into one place while keeping each part clear, considered, and unmistakably mine.
HOW IT TOOK SHAPE
Four choices
made it personal.
The website grew by connecting its content, visual language, navigation, and small interactive details into one system.
BUILD A VISUAL LANGUAGE
↗Keep the structure clear and the details expressive.
Deep green-black surfaces, warm paper tones, wine-red highlights, and teal accents give the pages a shared visual rhythm. Oversized serif headings bring character; compact labels keep the interface precise.
MAKE SPACE TO EXPLORE
⌂Let every interest have a clear path.
The side navigation stays familiar as the pages change. Sections, cards, and small labels help people understand where they are and where a link will take them.
ADD MOVEMENT WITH PURPOSE
♫Let small details bring the site to life.
Hover states, motion, the piano-note visualizer, and photography give the experience energy while keeping the content easy to read.
A FUN FACT
Three languages, one little corner of the web.
I made this site speak the three languages I speak: English, Romanian, and Arabic.
Switch to Arabic and the layout reads right to left.ENGLISHROMÂNĂالعربية
THE DESIGN LANGUAGE
A system with a point of view.
Dark, warm, and vivid.
Ink and soft charcoal make a quiet base. Paper, wine, and teal add contrast and identity.
INK#101312PAPER#E9E0CFWINE#74263CTEAL#30C4A0
Character meets clarity.
Roboto Slab gives headings their editorial weight. Barlow Condensed keeps body copy direct; IBM Plex Mono adds crisp labels and navigation.
ROBOTO SLABBarlow CondensedIBM Plex Mono
One identity across pages.
Fine rules, offset color blocks, grain, geometric backdrops, and deliberate spacing make the system feel connected without flattening every page into the same layout.
THE SITE, PAGE BY PAGE
One home. A few different worlds.
Each page follows its own subject, while the shared navigation and design details tie the experience together.
01 / HOMEAbout NoorThe introduction, work, interests, and ways to get in touch.↗
02 / DESIGNDesign & digital workVisual identity, personal projects, and experiments.↗
03 / RESEARCHResearch & ideasProjects about economics, data, and people.↗
04 / PIANOPiano piecesMusic, practice, and a visual piano that follows along.↗
05 / PHOTOGRAPHYPhotographsSmall details, places, and moments worth keeping.↗
A SITE THAT KEEPS GROWING
The work has a place.
So does the person behind it.
This is my portfolio, my archive, and a place to keep making things. I hope something here gives you an idea of your own.