Portfolio
A portfolio focused on user experience that reflects my approach to building
A personal site built with Next.js and Tailwind CSS, with full support for both Arabic and English. The interface started as wireframes in Figma focused on UX and clear navigation flow, then developed and improved incrementally with Claude Code. Designed to be more than just a CV — a digital experience that shows the thinking process before showcasing work.
Problem
How do I build a portfolio that truly reflects my style?
I was looking for a way to build a portfolio that truly reflects my design and development style, and delivers a clear, comfortable user experience. The goal was to create a site that doesn't just showcase work, but expresses the thinking behind building products — while ensuring a natural reading experience for Arabic content without compromising overall quality.
Solution
With design that starts from user experience
The site was designed with user experience first, ensuring clear navigation and smooth interaction from the very first moment. The interface was built so Arabic is naturally supported within the experience — not added as an afterthought — maintaining design coherence and reading direction. I chose a dark visual identity reflecting a modern technical aesthetic, with attention to visual hierarchy and subtle details in spacing and readability. A flexible content system was also designed to make managing and updating projects and case studies easy and ongoing.
Impact
Process
Define & Research
I reviewed portfolios from notable designers and developers. I noticed the strongest sites answer one question clearly: why me specifically? I defined my message: a designer who builds complete products, not just interfaces.
Design & Visual Identity
I chose a dark color system with purple as the accent color, suggesting both technology and creativity. I designed each section as an independent unit with RTL focus from day one, not as an afterthought.
Development & Build
After completing the initial design in Figma, development moved to Next.js with TypeScript. Claude Code was used to build and develop the interface and implement a large portion of the logic, while guiding the implementation process and improving UX during construction.
Launch & Improve
In the improvement phase, I relied on my UX expertise and understanding of interaction flow, along with studying DevOps concepts for performance and stability. The site was analyzed for speed, structure, and user experience, with AI tools used for continuous improvement of decisions and details.
Key Decisions
Challenge
Should I use a ready template to save time?
Decision
Rejected templates and built from scratch
Why?
The portfolio itself is the strongest proof of my capabilities — a ready template contradicts the site's entire message. The extra time was an investment, not a cost.
Challenge
Support both languages from the start or later?
Decision
Bilingual support from day one
Why?
Adding a language later means rebuilding every component. Building it from the start added a week to development but gave full flexibility afterwards.
Challenge
External CMS or static TypeScript files for content?
Decision
TypeScript files in lib/data.ts
Why?
A CMS adds complexity and cost for a personal site. TypeScript gives full type safety and content updates take no more than two minutes.
Stack & Tools
Next.jsCore Framework
TypeScriptType Safety
Tailwind CSSDesign & Styling
Claude CodeDev Assistant
Results
“Every project I work on is a reflection of how I think, not just an interface.”
— Bilal Meziani ✦
Like this project?
I'd be happy to explain any design or technical decision in detail.