M4RKYU.SYSEdition 2027
Skip to content
LOCEN/Ontario · CA/▸colophonStandbyOK/--:--:--EST
M4M4RK_YUportfolio
  • BuildBuild
    BuildOverview
    • WorkSelected case studies and write-ups
    • GamesPlayable prototypes and game-dev logs
  • GalleryGallery
    GalleryOverview
    • PhotosPhoto collections and visual experiments
    • ShopPrints, posters, and one-off objects
  • WritingWriting
    WritingOverview
    • BlogLong-form devlogs and field notes
    • NotesShort observations, links, snippets
  • ResourcesResources
    ResourcesOverview
    • Tools38 in-browser developer utilities
    • LinksDaily-use dev and design bookmarks
  • AboutAbout
  • ContactContact
中文
COLOPHON
2-Colour · Riso Proof

site notes

About this site

The stack, systems, and craft decisions behind this Next.js portfolio.

01

Application core

Next.js App Router, React, and TypeScript shape the public routes, admin surfaces, and server-rendered content.

Next.js 16React 19TypeScript
02

Interface layer

Tailwind tokens, Radix primitives, and restrained motion carry the glass HUD and archive/pixel visual language.

Tailwind 4RadixMotion
03

Content and data

Zod-validated content falls back cleanly while Supabase powers accounts, saves, comments, and admin edits.

SupabaseZodnext-intl
04

Commerce and email

Stripe handles checkout paths, Resend handles transactional mail, and Vercel keeps previews close to production.

StripeResendVercel
05

Quality gates

ESLint, TypeScript, Playwright, and Storybook cover the pieces that need to keep behaving as the site grows.

ESLintPlaywrightStorybook
06

Delivery surface

ISR pages, route metadata, sitemap generation, and OG image handlers keep the archive crawlable and shareable.

ISROG imagesSitemap

public trail

Want the ship log?

The changelog mirrors the repository history in a visitor-readable form, without exposing private project notes.

Read changelog
M4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYUM4RKYU
Crafted since 2024
ZhenXiao Mark YuZhenXiao Mark Yu
get in touch

Saw something here?Tell me about it.

It's a portfolio, not a service · but I read every note — drop a line if anything here resonated, or just to say hi.

Start a conversation
open channel

say hi anytime · 2026

--:--:--ESTOntario, Canada
  • Email
  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat

Newsletter

Get the occasional dispatch

Notes and logs from m4rkyu.com — short, dated, no noise. Unsubscribe anytime.

Work

Production builds, games, and visual archives.

  • Projects
  • Games
  • Archive
  • Logs

Resources

Daily-use tools and a personal link library.

  • Search
  • Latest
  • Tools
  • Links
  • Notes
  • Topics
  • Shop
RSSJSON feed

Studio

Background, contact, and channels for collaboration.

  • About
  • Contact
  • Changelog
  • Colophon
  • Resumepending

Socials

Find me on the usual feeds.

  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
  • Email
© 2026 ZhenXiao Mark Yumarkyu0615@gmail.com
  • Email
  • GitHub
  • dev.to
  • LinkedIn
  • Twitter / X
  • Instagram
  • Facebook
  • YouTube
  • CodePen
  • Spotify
  • Snapchat
PrivacyTermsBuilt with Next.js 16 · React 19 · Tailwind 4