Back to achievements
Personal projectNext.jsReactGSAPTypeScriptTailwind CSSMDX

Building a professional portfolio

Building a complete portfolio with Next.js, GSAP, bilingual i18n, GDPR compliance, analytics, and technical blog.

01

Presentation

This portfolio is a personal project aimed at showcasing my technical range and mastery of a modern framework. Rather than using an existing template, I chose to build it entirely from scratch with Next.js to demonstrate my full-stack web development skills — from frontend to deployment.

02

Objectives, context and stakes

The main objective was to have a complete professional portfolio and to increase my skills through this project. The portfolio had to go well beyond a simple static page by integrating many features: Google Analytics, email sending, reCAPTCHA, GSAP animations, MDX blog, bilingual internationalization (French/English), GDPR compliance with cookie banner.

03

The steps — what I did

Iterative development with Next.js as framework, Tailwind CSS for styling, GSAP for animations, shadcn/ui as design system, MDX for blog articles, Resend for email sending, and Vercel for deployment. Setup of a complete test suite (Vitest + Playwright) and CI/CD pipeline with GitHub Actions.

04

The actors — interactions

Entirely personal project. All technical decisions, design, and content are mine.

05

The results

The portfolio is live at orhanmadiassani.com with a custom domain, good SEO, smooth animations, a technical blog with 3 published articles, and full GDPR compliance. It's a major learning experience of building a project that goes beyond a simple page.

06

After the project

The portfolio continues to evolve with the addition of new sections (skills, achievements, about) and new articles. It serves as a professional showcase and technical experimentation ground.

07

My critical review

One of the major takeaways is the importance of anticipating features upfront to start with a correct implementation. For example, the site is translated in two languages and needed to start with a dynamic locale-based structure in Next.js. Initially, I had started as if the portfolio would only be in French, which required restructuring later.