What This Is
ryanking.cloud is a personal site with two purposes: a portfolio of things I've built, and a reference hub for study guides and technical notes I want accessible from anywhere. Rather than keeping notes scattered across local files, everything lives here — versioned, searchable, and available on any device.
Stack
Built on Next.js 15 using the App Router with full TypeScript throughout. React 19 on the frontend. No external UI component libraries — all styling is hand-written CSS using custom properties, which keeps the bundle small and the design fully under control.
- Framework: Next.js 15, App Router, React 19
- Language: TypeScript
- Styling: Custom CSS — zero UI library dependencies
- Fonts: IBM Plex Sans (body) + IBM Plex Mono (labels, code, metadata)
- Hosting: DigitalOcean App Platform — auto-deploys on every push to main
- Source: Private GitHub repository
Design
The palette is built around a deep navy base with an orange primary accent, pulling from the visual language of developer tooling and terminal UIs.
- Background: #0a0e14 — near-black navy
- Surface: #111820 — card and panel background
- Primary accent: #ff9900 — orange, used for highlights, borders, and active states
- Secondary accent: #00c8ff — blue, used in badges and code
- Tertiary accent: #39d353 — green, used sparingly for status indicators
- Body text: #d4dde8 — soft off-white for comfortable long reads
A very subtle orange grid pattern sits behind the content at 3% opacity, adding depth without pulling attention. Cards use a 2px left accent border — a detail borrowed from modern developer dashboards — that transitions from a muted grey to the orange accent on hover.
Content Model
Projects are defined as TypeScript objects in a central data file. Adding a new project means appending an entry with a title, date, description, tags, and HTML content — no database, no CMS.
Notes come in two forms. Standard notes are plain HTML files stored in the repository and rendered
inside the site layout with automatic table-of-contents generation from headings. Standalone notes —
like full interactive study guides with their own JavaScript — are served directly as static files
from the public/ directory, preserving their original look and behavior exactly.
Navigation Features
- Tag filtering on project and note listing pages
- Auto-generated table of contents on detail pages, with active section tracking via IntersectionObserver
- Sticky sidebar navigation with active state indicators
- Back-to-top button that appears on scroll
- Fully responsive — sidebar collapses to a top bar on mobile