How I Designed and Built My Personal Portfolio with Next.js and ShadCN UI

Why This Project Exists

A developer portfolio should do more than list technologies.

It should show what the developer builds, how they think, what problems they enjoy solving, and how much care they put into presenting their work.

I wanted my portfolio to feel like a real product rather than an online résumé.

That goal became Magati.dev.

The Problem

My projects covered several different areas:

• Web applications
• Mobile applications
• Business websites
• Automation tools
• AI experiments
• Full-stack platforms

Presenting all of them in one place without creating a cluttered interface was difficult.

The website also needed to serve different visitors. Recruiters may want a quick overview of my skills. Potential clients may care more about services and completed work. Other developers may be interested in technical articles.

The portfolio needed to support all three groups while maintaining one clear identity.

My Approach

I built the portfolio with Next.js and organized it around projects, blog posts, personal information, and contact options.

The homepage provides a short introduction and highlights selected work. The projects page presents each application with an image, summary, technology list, and live-demo link.

Dedicated project pages provide more context without overcrowding the main grid.

The blog uses structured post data with dynamic routes. Each article focuses on the reason behind a project, the technical approach, the challenges, and the lessons learned.

ShadCN UI and Tailwind CSS provided the visual foundation, while Framer Motion added restrained transitions and interaction feedback.

I also created a responsive floating header with active route indicators, theme switching, mobile navigation, service links, and contact actions.

Interesting Challenges

Dynamic routing changed between versions of Next.js.

In newer App Router versions, route parameters may be promises. Accessing params.slug directly caused warnings and required either awaiting the parameters in server components or using the appropriate navigation hooks in client components.

Image consistency was another challenge. Screenshots from different applications had different sizes, colors, and visual density. Creating matching promotional project images helped the portfolio feel more cohesive.

The fixed header also required careful spacing so it did not cover page content on smaller screens.

Finally, I needed to decide how much source code to expose. I chose to prioritize live demos and project explanations while keeping private or commercial repositories unavailable.

The Tech Stack

Magati.dev uses:

• Next.js
• React
• TypeScript
• Tailwind CSS
• ShadCN UI
• Framer Motion
• Lucide React
• Dynamic routes
• Dark and light themes
• Vercel
• AI workflow
• Google Gemini

AI experiments are documented as project history rather than exposed as active portfolio tools.

Lessons Learned

Presentation changes how people understand a project.

A technically strong application can appear unfinished when screenshots, descriptions, and navigation are inconsistent.

I also learned that a portfolio should not include everything. Selecting and explaining the strongest work is more effective than showing a long list with little context.

Writing about each project forced me to think beyond features. It helped me explain why the application exists and what I learned while building it.

Final Thoughts

Magati.dev is both a portfolio and an ongoing development project.

As my skills improve, the website evolves with new applications, articles, design refinements, and experiments.

The most important outcome is not the site itself. It is the habit of documenting my work, reflecting on technical decisions, and presenting projects with intention.

A portfolio should not only show where a developer has been. It should also suggest what they are capable of building next.