Back to Projects

Next.js Portofolio Website

Developer-focused portfolio starter built with Next.js, TypeScript, TailwindCSS, and optimized for SEO.

Team Size: 1
Role: Full-Stack Developer
Duration: 2025-04–2025-06
View on GitHub

Tech Stack

reactjs iconReact
typescript iconTypeScript
tailwindcss iconTailwindCSS
nextjs iconNext.JS
vercel-dark iconVercel
github-dark iconGitHub

Project Gallery

Next.js Portofolio Website 1
Next.js Portofolio Website 2
Next.js Portofolio Website 3
Next.js Portofolio Website 4
Next.js Portofolio Website 5

Introduction

This project is a developer-focused portfolio starter built with Next.js, TypeScript, and TailwindCSS. It is designed to be easily customizable and optimized for SEO, making it an ideal choice for developers looking to showcase their work and skills online.

Key Features

  • Main dashboard (Home page), with /work, /projects, and /blog links
  • MDX support for blog posts, projects, and work items
  • Syntax highlighting for code blocks in MDX files
  • Light/dark mode toggle
  • Responsive design for mobile and desktop
  • SEO-friendly structure and metadata
  • SSR support for pagination, sorting, and filtering of blog posts, projects, and work items
  • Similar blog posts recommendations
  • Blog post categories pages

Challenges and Solutions

  • Content Management: Implemented MDX support to allow easy addition of blog posts, projects, and work items.
  • SEO Optimization: Structured metadata and optimized page layouts to improve search engine rankings.
  • Responsive Design: Used TailwindCSS to create a responsive design that works well on both mobile and desktop devices.

Outcome

The project successfully provides a solid foundation for developers to build their personal portfolios. It is open-sourced on GitHub, allowing others to use it as a starting point for their own websites or as a reference for building custom themes. In fact, this very website you are browsing right now is built using this project! Check it out on GitHub.