Back to projects
2026
TypeScriptNext.jsTailwindMotion

Personal Portfolio

A meticulously crafted, dark-themed developer portfolio built with Next.js 16 and Tailwind CSS v4. Features a custom ASCII art hero section, smooth Framer Motion animations, and a Markdown-powered static blog engine for case studies.

Personal Portfolio Preview

Overview

A personal portfolio website acting as both a digital resume and an interactive canvas. The site utilizes a dark monochrome aesthetic built entirely from scratch, specifically tailored for maximum readability, subtle elegance, and a zero-latency feel across sections and case studies.

Design Philosophy

The aesthetic vision draws heavily from terminal-inspired brutalism while blending modern web refinements. The monochrome palette #030303 base paired with #FAFAFA text creates a meticulously engineered contrast curve. Typography combines the sharp utilitarian structure of Geist Sans for standard body text with the elegance of Playfair Display for high-accent keyword highlighting. The highlight of the hero section features a fully responsive, CSS opacity-gradient braille typography mimicking a black hole density cloud.

Technical Architecture

Built purely for speed and clean abstraction:

  • Framework Core: Next.js 16 and React 19 utilizing App Router.
  • Styling: Complete utility-first approach with the newly released Tailwind CSS v4 without any bloated UI component libraries.
  • Animations: Silky interaction layers, staggered mount effects, and scroll-triggers powered by Framer Motion.
  • Content Integration: Completely detached Markdown content architecture powered by react-markdown and remark-gfm, statically generated via generateStaticParams for instant sub-page routing.