A neo-brutalist personal portfolio built with vanilla HTML, CSS, and JavaScript. No frameworks, no build tools, no dependencies - just raw code with bold design choices.
This is a personal fun project, not a production template. The code prioritizes creativity and experimentation over best practices. It's a playground for trying out ideas, animations, and interactions - not a reference architecture.
Neo-brutalism (also called neo-brutalist web design) is a UI style inspired by brutalist architecture - raw, bold, and unapologetically loud. It rejects the polished, rounded, drop-shadowed sameness of modern web design and replaces it with:
- Thick black borders - every element has a hard, visible edge
- Flat, offset box shadows - no soft gradients or blurs, just solid color blocks shifted by a few pixels (
box-shadow: 8px 8px 0 #000) - High-contrast color palettes - bright yellows, pinks, cyans, and greens on white/dark backgrounds
- Visible structure - the "bones" of the layout are intentionally exposed, not hidden behind smooth transitions
- Playful imperfection - torn paper edges, tape stickers, hand-drawn vibes mixed with geometric precision
This site leans into a hand-crafted, scrapbook-like take on neo-brutalism: paper tear dividers, a falling SVG terminal icon, highlight markers that animate on scroll, and a treasure map hidden behind a book-flip animation.
The palette uses CSS custom properties for light/dark theming:
| Color | Variable | Usage |
|---|---|---|
| Yellow | --yellow |
Primary accent, CTAs, loader |
| Cyan | --cyan |
Code elements, highlights |
| Pink | --pink |
Secondary accent, highlights |
| Green | --green |
Success states, highlights |
| Black | --border |
Borders, shadows, text |
- Space Grotesk - headings and body text (geometric sans-serif that fits the brutalist aesthetic)
- Space Mono - code snippets and terminal elements
- Caveat - handwritten annotations (the "human touch" element)
Paper Tear Effect - Sections are separated by SVG-drawn torn paper edges that close on scroll with a parallax effect, finished by a tape sticker that "seals" the tear back together.
Book Flip Timeline - The journey section starts as a closed treasure map that flips open like a book page to reveal the career timeline underneath.
Scroll-Driven Highlights - Text highlights animate in from left/right as you scroll, mimicking a highlighter pen being drawn across the page.
Interactive Map - Leaflet.js with Stamen watercolor tiles, styled with a grid overlay and pirate illustration. Clicking timeline entries flies to the corresponding map marker.
Matrix Typing Effect - The hero greeting scrambles through random characters before resolving to the final text.
Falling Decorative Icons - SVG icons around the hero photo drop with gravity when you start scrolling.
Visit /terminal.html for an interactive terminal-style resume.
Features:
- Type
helpto see available commands - Multiple color themes (Default, Dracula, Solarized, Nord)
- Split terminal panes (horizontal/vertical)
- Built-in Snake game (via p5.js)
- Command history with arrow keys
.
├── index.html # Main portfolio (neo-brutalist)
├── neo-styles.css # Styles for index.html
├── terminal.html # Terminal-style resume
├── styles.css # Styles for terminal.html
├── script.js # Terminal logic & commands
├── favicon.svg # Site favicon
├── image/ # Assets (avatar, icons, pirate)
├── CNAME # Custom domain config
├── robots.txt # Search engine directives
├── sitemap.xml # Sitemap for SEO
└── LICENSE # MIT License
- HTML/CSS/JS - no frameworks, no build step
- Leaflet.js - interactive journey map
- p5.js - Snake game in terminal mode
- Font Awesome - icons
- Google Fonts - Space Grotesk, Space Mono, Caveat, Fira Code
# Any static server works
npx serve .
# or
python3 -m http.server 8000