Nathan Cheng

Designed and built nathancheng.work in Next.js. The original setup split content across Sanity CMS and media across Cloudinary; in 2026 I consolidated everything into a single codebase. Content now lives as MDX files in the repo, with media in a single Cloudflare R2 bucket, so content edits ship in the same PRs as code.

Filtered views by medium and category are shareable via URL state, with direction-aware morphing transitions between them. Motion details across the site include a shader-driven hero, scroll-driven card stacking inspired by iOS notification physics, and layout-animated selection indicators with spring physics.

Some things built into the site:

• Three switchable homepage views — Visuals, Projects, and Roles — on one continuous surface, with the active view and filter persisting in the URL
• Collection-based filtering with deep-linkable URLs
• A full-screen lightbox for any image or video
• Custom MDX components for article bodies (inline media, captioned bins, edge-bleeding carousels)
• Dominant-color image placeholders and automatic video posters
• Visual effects: water-shader hero, spotlight cursor, magnetic hover, progressive blur
• All written content is plain markdown — articles, CV entries, project cards like this one — following Obsidian conventions: frontmatter for metadata, wikilinks for cross-references
• Markdown twins of every page (/projects.md, /about.md, /llms.txt, …) so AI models can read the portfolio without rendering the SPA
• Conventions and decision logs for AI-agent collaboration on the codebase itself

A range of design work across our product, website, and supporting systems.

My initial sales and support role gave visibility into where users were experiencing confusion. That shaped what I built next: walkthrough videos and tutorials, new product and support pages, and a reimagining of our flagship product. The redesign proposes replacing its menu-driven interface with a guided workflow built from interface primitives, grounded in Microsoft’s WinUI guidelines.

I also shaped the design on a website refresh, working with an external agency on the wireframes and content restructuring. After their handoff I kept iterating on the visual side, polishing colors, diagrams, and layouts.

Most recently, the role has grown to include some of the underlying systems engineering myself.

Collaborated with early-stage startups to make their pitch decks more digestible and compelling, clarifying narratives and helping founders distinguish their companies from competitors.

Various posters and collateral for social events

Identity work for a neighborhood chess club, inspired by the jagged rhythm of South Philly’s mosaic tiles. The mark resolves into a board and a knight built from the initials, and opens up animation possibilities that represent calculated, mathematical thinking (a la the animations of @beesandbombs on Twitter).

Family business providing supplies to Philadelphia schools that aren't otherwise obtainable through standard processes. The owner wanted a simple website with just essential info, contact details, and featured items. To make it admin-friendly, I used Airtable instead of a complex CMS, allowing her to easily update content through a familiar spreadsheet format.

A prototype for a drawing tool allowing users to "paint" with color-filtered selections of a pre-defined image. The original image remains hidden to encourage an improvisational approach to painting and remixing. Featured on the front page of CV in December 2021.

How might shaders and 3D layering allow users to reimagine the original images in more expressive ways? What opportunities are there to intersect this kind of image remixing with video frames and motion blending?

An iOS game prototype that turns sleep science into a playable 3D world for kids. I pitched the concept and was elected to lead a team of four to build it in a double-credit software development intensive at Wesleyan, run by the founder of Bethesda Softworks.

The game maps the brain's sleep stages to an adventure (keeping neurons firing, clearing toxins, repairing systems, and synthesizing memory), so kids learn the science by playing. I led production and set the art direction, designed level structure, cleaned and UV-mapped meshes, and built motion graphics for the teaser and keynote.

We took the concept from pitch to alpha, user-tested it with kids at a local elementary school, and delivered the final pitch to industry judges from AFI, Harmonix, Warner Bros. Games, and Demiurge Studios. They awarded us first place for "most original concept and execution" and "highest quality business presentation."

Interface & motion design for a bespoke web gallery that brings visitors into the sparse, "zen" feeling of coffee table photography books & museum exhibits, along with the humanistic touch of Duane Michals' work & outlook.

Mockups, visual language, and UI design for a founder's exploratory phase emphasizing luxury aesthetics and high-end materials. The hexagonal motifs represent a gift box, gemstone, and message bubble, while contrasting the typical dainty, ornate designs often seen in jewelry marketing.

I'm curious how the platform could have carved out a more distinctive niche beyond visual differentiation.

Big Sur changed Mac app icon styles in 2020 (rounded squircles to match iOS and iPadOS). I wanted a cohesive look in my dock without waiting for developers to update their apps, so I redesigned the outliers in the new style and shared them on macosicons.com, where they’ve been downloaded over 3,000 times.

Wesleyan’s film studies program is centered on theory and form analysis, but for my thesis I opted to make a short film (one of 21 made that year). I wrote, directed, and edited an 11-minute production with a 16-person crew across 40 hours of shooting and a $2,800 crowdfunded budget.

I took cues from Krisha and Punch-Drunk Love, letting energetic camerawork and sound design carry much of the opening without dialogue.

A jury of 5 film professors (including AFI board emeritus Jeanine Basinger) and 3 anonymous Hollywood professionals awarded my film with honors and the Frank Capra Prize “for creating a senior film that is fully cinematic and uses the tools of filmmaking at the highest level,” and for “exemplifying Capra’s skill in telling a human story that contains both humor and pathos.”

Student films for "Sight & Sound" led by Steve Collinsy; ~1 week per film. Tools—16mm Bolex film camera, Steinbeck flatbed film editor

Short studies in projection mapping, fractals, and layered motion—mostly explorations of depth and timing.

Experimentations with umbrella forms.