Skip to content
Cx330xu
ZH EN

Personal Tech Hub

Bilingual personal tech brand site with Pagefind search, Giscus comments, dark mode & RSS — auto-fetches GitHub Stars at build time

Active
AstroTypeScriptWeb
GitHub Live Demo

Situation

Needed a modern personal tech brand site that could showcase open-source projects, in-depth articles, and quick notes — all with bilingual support. The previous Hugo setup lacked TypeScript type safety and component-driven iteration.

Task

Build a performant, bilingual, modern personal tech site with:

  • Project showcase, blog, and notes sections
  • Chinese/English routes with content linking
  • Static search, dark mode, RSS, and GitHub activity display
  • Automated CI/CD deployment to GitHub Pages

Action

  • Framework: Migrated from Hugo to Astro 6.x, using Content Collections for bilingual content management and Tailwind CSS 4.x for theming
  • Content Architecture: translationKey linking zh↔en pairs; four content collections (blog/projects/notes/pages)
  • Integrations: Pagefind for static search, Giscus for comments, GitHub REST/GraphQL API for star counts and contribution graph
  • CI/CD: GitHub Actions builds the site, generates OG images, indexes Pagefind, and deploys to GitHub Pages
  • Key decisions:
    • Astro over Hugo → TypeScript + component model for faster UI iteration
    • CSS variable theming → zero-JS dark mode, WCAG AA compliant contrast

Result

  • ✅ Bilingual site live with Lighthouse 95+ performance score, 71 pages indexed
  • ✅ RSS, full-text search, dark mode, GitHub activity chart all functional
  • ✅ Build time <30s (including OG image generation), FCP <1s
  • 🔜 Roadmap: Plausible analytics, resume download, email newsletter

Technical Documentation

Technical Challenges Why this project? What unique problem does it solve?

Detailed technical challenges documentation for this project is being written. This is placeholder content demonstrating the component's interaction pattern.

When populated, this section will showcase:

  • Specific technical challenges and solutions
  • Key architectural decisions and their rationale
  • System data flow and core design patterns

This structured documentation directly addresses technical interviewer evaluation dimensions.

Solution Comparison & Decisions Trade-offs and rationale behind key technical choices

Detailed solution comparison & decisions documentation for this project is being written. This is placeholder content demonstrating the component's interaction pattern.

When populated, this section will showcase:

  • Specific technical challenges and solutions
  • Key architectural decisions and their rationale
  • System data flow and core design patterns

This structured documentation directly addresses technical interviewer evaluation dimensions.

Architecture Design System architecture, data flow, and core design patterns

Detailed architecture design documentation for this project is being written. This is placeholder content demonstrating the component's interaction pattern.

When populated, this section will showcase:

  • Specific technical challenges and solutions
  • Key architectural decisions and their rationale
  • System data flow and core design patterns

This structured documentation directly addresses technical interviewer evaluation dimensions.

💡 Tip: Click each panel to expand. This uses native HTML5 <details> elements — no JavaScript needed, keyboard-accessible.

Comments