Blog Project
Every designer has a portfolio. Not every designer builds theirs from scratch, designs it themselves, deploys it, and then instruments it with a private analytics dashboard — all for $0/month.
I had been thinking about this for over a year. This month I found the time, and what started as a personal project turned into one of the most valuable learning experiences of my career — not just as a deliverable, but as a proof of workflow.
The real motivation was testing a new design-to-code pipeline: Figma + AI + Figma MCP Server. This combination is currently one of the most in-demand workflows in startups, and for freelancers, mastering it is a genuine competitive advantage. My portfolio became the testing ground.
Most portfolio websites are either:
My requirements were different:
The design process started in Figma, but with a new layer: the Figma MCP Server connected directly to my AI-assisted development environment. This meant the gap between design and code was compressed significantly — design tokens, component structures, and layout specs flowed directly into the development context without manual translation.
This is not just a personal preference — it is the direction the industry is moving. Startups are hiring designers who can operate in this hybrid space. Freelancers who master this workflow can deliver faster and charge more. Building my portfolio this way was both a learning exercise and a live demonstration of the skill itself.
The portfolio is built on Next.js deployed on Vercel's free tier. Content — projects, case studies, shots — is managed through an open-source CMS dashboard, meaning I can add, edit, or remove projects without touching a single line of code.
Every piece of content renders dynamically from the dashboard. The site stays fast, the maintenance cost stays at zero, and the workflow stays simple.
Stack breakdown:
This is the part most portfolios skip entirely.
I built a private analytics dashboard that tracks:
This data does two things: it tells me which projects are resonating with visitors, and it demonstrates product thinking — I didn't just build a pretty website, I built one I can learn from.
SEO was treated as a core feature, not an afterthought. The implementation includes:
The goal: when a recruiter or client searches for a UX/UI designer in Tunisia, or clicks a shared link on LinkedIn, the portfolio presents itself correctly and completely.
This project pushed me into territory I hadn't fully explored before:
The Figma MCP workflow alone made this project worth doing. It changed how I think about the handoff between design and development — and gave me a workflow I now bring to every client project.
Fully deployed, production-grade portfolio at $0/month
Dynamic content management — no code changes needed to update projects
Private analytics dashboard tracking visitor behavior and engagement
Complete SEO implementation from metadata to sitemap
Live proof of the Figma → AI → Code pipeline
A portfolio that is itself a case study