Software · Mar 9, 2026

Engineering Portfolio Website (Next.js)

Built a content-driven engineering portfolio website to present software, mechanical engineering, and research work in one structured, maintainable platform.

portfolio-websitenextjstypescripttailwindcssmdxapp-router
Engineering Portfolio Website (Next.js)

How This Started

I wanted one place to present my work across mechanical engineering, software, and research without forcing everything into a one-page resume format. Most portfolio templates were either too generic or too rigid, so I decided to build my own system around the way I actually document projects.

The goal was not just a nice homepage. I wanted a long-term platform where I could add new projects quickly, organize media cleanly, and keep writing technical breakdowns in a format that is easy to maintain.

Content Model

MDX + Frontmatter

Routing

Slug-driven project pages

Current State

Live and iterating

What it does

This site provides a structured portfolio system that:

  • organizes projects by category (Software, Mechanical Engineering, Research)
  • supports search/filtering and featured project highlighting
  • separates reusable page layout from project-specific content
  • keeps media assets and downloadable files grouped per project

The result is a portfolio that is easy to browse for visitors and easy to maintain as new work is completed.

How it is built

Architecture

The website uses Next.js App Router with server-rendered pages and static generation for project routes. Project pages are generated from MDX files in the content directory, so each project can include rich text, metrics, media sections, and custom components.

Content workflow

Each project has frontmatter metadata and body content. Frontmatter controls listing behavior, card rendering, hero image behavior, and optional top links (GitHub, demo, documents), while the MDX body holds the actual technical writeup.

Asset organization

Project assets are organized under public/projects/<slug>/ with dedicated images, videos, and downloads folders so media links stay predictable and easy to update.

Tools Used

Next.js (App Router)TypeScriptReactTailwind CSSMDXGray MatterFramer MotionLucide Icons