cat ~/.alanliang.dev/README.md

me

— 2 min read
Share
cat ~/.alanliang.dev/README.md

Introduction:

Most portfolio sites are static snapshots of a developer's resume and either complete dogshit AI gradient slop or bland - ie plaintext. I wanted mine to ride the line between having my own special touches, adhering to sound design principles, and conveying information cleanly. I wanted a site that I would enjoy coming back to and update every once in a while

The Design:

The visual identity of portfolio-site is built on a bit of user agency. Instead of forcing a single aesthetic, I give a couple themes that I personally enjoy to select from including:

1. Multi-Theme Engine

Using CSS variables and a custom data-theme attribute, the site shifts between:

  • Dark/Light: Standard w purple accent (my fav mac accent color).
  • Solarized: Personally my favorite old school theme.
  • macOS: I tried closely to emulate Apple's liquid glass, but failed. still looks nice
  • ??? Mode: All the stupid, vain, ridiculous ideas that I wanted to add to the regular site I added here, i <3 soyjack.

2. Vim-Like Navigation

I LOVE VIM, even though mouse-scrolling isn't really a chore, I used the default global keyboard listener that enables:

  • j/k: smooth scrolling (20% increments).
  • gg/G: jump to top/bottom.
  • /: real-time text search across the DOM.
  • h/l: section-based navigation.
  • Mechanical Keyboard "Thocks": Optional audio feedback (t key) I was inspired by from a mac app

The Tech Stack:

Under the hood, I went with a pretty straightforward serverless architecture as I wanted to use cloudflare pages and be a little stingy fuck:

1. Frontend: React, TypeScript, and Tailwind

  • React 19: concurrent rendering.
  • TypeScript: type safety across theme states and project data, i enjoy the pain.
  • Tailwind CSS: styling layer.

2. Serverless Backend: Cloudflare Workers + KV

The site integrates live data without the overhead of a traditional server, I previously used bluehost but migrated over:

  • Spotify "Now Playing": A Cloudflare Worker polls the Spotify API, refreshes OAuth tokens, and caches the current track in Cloudflare KV. This ensures the widget stays fast and avoids the free 50/day API rate limits. This was kind of a pain in the ass to set up

3. 3D Visualization: R3F & Three.js

To showcase hardware projects like the ALPR Vehicle Recognition System, I just used @react-three/fiber (R3F). Visitors can interact with a 1:1 model of the edge device I scanned.

Performance & Real-Time Monitoring

I wanted a cool way to display site performance and optimize it. realtime web vitals display:

  • TTFB (Time to First Byte)
  • LCP (Largest Contentful Paint)
  • CLS (Cumulative Layout Shift)
  • and more

These metrics are captured using web-vitals and updated in real-time as the user interacts with the page, ensuring transparency in performance.

Easter Eggs & Secret Modes

Software should have personality. I'll admit I used AI to add a bunch of hidden interactions I didn't want to spend time adding:

  • Konami Code (↑↑↓↓←→←→BA): Unlocks the secret "??? Mode" and triggers a "Matrix Rain" effect.
  • Explosion Code (↑→↓↓↓): A retro reference that triggers a full-screen explosion animation.
  • Zen Mode (z): Minimalist view that hides everything but the core content for deep reading.

Conclude:

This site is a sort of living portfolio for me, I want it to display my artistic tastes, be it they are somewhat weird and unique.

Read more