Personal Website Template

A reusable portfolio website template with data-driven projects and experiences that I actively use myself, built so anyone can clone it and update content with modular components.

Technology Stack

Next.jsReactTypeScriptTailwind CSSFramer Motion

Key Features

  • Projects and experiences driven by simple data files
  • Modular component blocks for project detail pages
  • Timeline-based experience layout with expandable details
  • Markdown-based writeups for long-form content
  • Responsive layout with reusable UI components

About This Template

Personal Website Template

Why

I wanted a personal website to display personal projects and give people a quick overview of what I've done and do. Alot of my projects, such as MyCraft, were hard to really show off without having the viewer acutally download the executable. With this personal website I can deploy the game in browser, allowing anyone access to try it out instantly.


What It Includes

  • Projects and experiences pages driven by simple data files
  • Modular component blocks (tech stack, features, media, markdown) with flexible props for layout, labels, and embeds
  • Timeline-style experience layout with expandable detail cards
  • Page transitions and card animations
  • Responsive layout with reusable UI components

How to Use

Clone the repo, update the projects and experiences data, and drop your assets into public. Add or reorder detail sections by composing modular components in the project data. The layout updates automatically.


What I Learned

I learned how to keep content and layout separate in a Next.js app and how a modular component system makes content updates fast and safe.