More than a static resume.
The site presents identity, projects, writing, education, and technical direction as one coherent system. It is intentionally static-first: fast to load, easy to audit, and small in public attack surface.
behind this site
System Design.
tzheng.dev is designed as a personal engineering website: a cyber-inspired portfolio, technical writing system, and long-term project documentation space. The goal is to be readable for recruiters, useful for engineers, and maintainable over time.
Cyber, premium, minimal.
Dark interface, glass surfaces, restrained motion, terminal-inspired details, and strong information hierarchy without turning the site into a noisy demo.
frontend system
Interface Architecture.
The frontend is built around reusable visual patterns: cards, chips, metadata rows, responsive grids, article layouts, project case-study layouts, and quiet security signals.
Responsive layout
The homepage, article index, project index, and detail pages adapt from desktop portfolio layouts to compact mobile reading views.
Visual hierarchy
Large editorial headings are reserved for primary sections, while cards use tighter headings and metadata for fast scanning.
Reading experience
Article pages support metadata, tags, categories, table of contents, code-friendly typography, previous/next navigation, and SEO meta.
Extensible pages
The site can add new pages without copying large blocks of HTML. Layout, global navigation, and core styling live in shared Astro files.
content architecture
Structured Content.
Articles and projects are no longer intended to live as long-term hard-coded HTML arrays. They are being moved into Astro content collections backed by Markdown/MDX files.
MDX technical writing system.
Each article is stored as an independent MDX file under src/content/articles/. Frontmatter controls title, slug, date, updated date, excerpt, tags, category, featured state, status, and reading time.
The article index reads the collection automatically, generates cards, exposes archive statistics, and creates detail pages by slug.
Curated case studies.
Projects live under src/content/projects/ with status, type, featured state, priority, stack, GitHub link, demo link, excerpt, and body content.
The site shows selected engineering work, not a raw GitHub repository list.
publishing workflow
Git-Based Publishing.
Content and code updates are version-controlled. Changes can be reviewed, rolled back, and tracked before deployment.
Static output
Astro builds the site into static files in dist/, suitable for GitHub Pages or Cloudflare Pages.
Content files
New writing can be added as MDX without editing the homepage directly. Future CMS integration can write to the same Git-backed content files.
Admin direction
The local admin tool can stay as a drafting interface, but the source of truth is the content collection. A Git-based CMS is a planned option, not required for the public site.
Deployment path
The repository can be deployed by a static build workflow. Cloudflare Pages can use npm run build and publish dist/.
security posture
Static-First Security.
The public website avoids unnecessary moving parts. That is a deliberate security and maintenance decision.
No fake public admin
The site does not pretend that a front-end password is a secure publishing backend. Real publishing should use GitHub, Cloudflare, or a proper Git-based CMS workflow.
No unnecessary database
There is no database attack surface for content that can be safely versioned as files.
No ad pixels
The site is designed without intentional advertising trackers or invasive analytics.
Cloudflare-ready
The domain is routed through Cloudflare nameservers, supporting HTTPS delivery, DNS protection, caching, and basic edge abuse filtering.
roadmap
Next Iterations.
The architecture is designed to grow without turning the public site into a heavy application.
MDX migration
Completed for core articles and projects; planned next step is richer article components and longer project case studies.
RSS + sitemap
RSS and sitemap support are part of the Astro build direction for discoverability and indexing.
Open Graph previews
Planned richer social preview images for articles, project case studies, and the homepage.
Optional Git CMS
Future migration can connect a Git-based CMS such as Decap CMS while keeping files as the source of truth.
Search and filtering
Planned improvements include better client-side filtering, tag archives, and keyboard-friendly article navigation.
Performance budget
Future changes should preserve fast static delivery, careful image sizing, and a restrained animation budget.