ColbyOS: a Custom Portfolio Website

Role: Designer & Developer|Year: 2026

Writeup

Using Cursor IDE, I built this site with Next.js, TypeScript, Tailwind CSS, and Framer Motion, a modern stack chosen for fast performance, clean structure, and subtle motion. The goal was a portfolio that could grow with my work. I use this website to display engineering projects, skills progressions, and career story.

Site Architecture

Built as a fast, static engineering portfolio with reusable project templates.

Framework: Next.js App Router with statically generated project pages
Language: TypeScript with typed project schemas, shared component props, and strict mode
Styling: Tailwind CSS v4 with custom color, typography, and surface tokens
Motion: Framer Motion with prefers-reduced-motion support
Content Model: Project content stored as typed data and rendered through reusable templates
Routing: One-page homepage plus dynamic /projects/[slug] case-study routes
Deployment: Vercel with GitHub-connected preview deployments
Accessibility: Keyboard-friendly navigation, semantic sections, reduced-motion support

Stack

Next.jsTypeScriptTailwind CSSFramer MotionVercel

Previous Case FileHackathons