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.