Portfolio Website - Next.js & Fumadocs
A personal portfolio and documentation website built with Next.js, Tailwind CSS, and Fumadocs, showcasing projects, skills, and technical expertise.
Overview
This is the project docs site for my work. The brand home is chintey.com. I keep the longer write-ups here so each project can have its own page, search, and sidebar instead of a short card on a single landing page. The site is built with Fumadocs on Next.js.
Design Decisions
The portfolio uses a documentation-first approach because I wanted each project to have its own dedicated page with enough space to explain the technical details, challenges, and decisions behind it. A typical portfolio site with thumbnail cards and short blurbs does not give enough room to communicate the depth of each project. By using Fumadocs, I get built-in full-text search, a sidebar navigation tree, breadcrumbs, and MDX support out of the box, which means I can focus on writing content rather than building infrastructure. The visual design uses Tailwind CSS and ShadCN components to maintain a clean, consistent look while keeping the codebase maintainable. Motion is used sparingly for page transitions and interactive elements to add polish without hurting performance.
Fumadocs Features Used
Fumadocs provides several features that make this site effective as both a portfolio and a documentation hub. The MDX content layer allows me to write project pages in Markdown with embedded React components like the GitHub info cards and step-by-step guides seen throughout the site. The automatic sidebar generation reads the file structure and builds navigation without manual configuration. Built-in search powered by Flexsearch lets visitors quickly find specific projects or topics. The framework also handles SEO metadata, Open Graph images, and sitemap generation, which are important for discoverability. Fumadocs supports light and dark mode themes with ShadCN integration, giving visitors a comfortable reading experience regardless of their preference.
Key Features
- Responsive design that adapts to phones, tablets, and desktop screens
- Interactive project showcase with dedicated pages for each project
- Built-in full-text search for finding projects and content quickly
- MDX support for mixing Markdown content with interactive React components
- Automatic sidebar navigation generated from the file structure
- Light and dark mode support with consistent theming
Tech Stack
- Next.js
- Tailwind CSS
- ShadCN
- Motion
- Fumadocs
Links
chinteyley/ctey-docs