Astrofy: The Evolution from a Resume Template to a Digital Garden

Project Origin & Vision

This project was initially built on the Astrofy template, but through subsequent iterations, it has transcended the scope of a simple “resume” or “personal portfolio.” We envision it as a “Digital Garden” — a laboratory that not only showcases achievements but also documents thoughts, documents knowledge, and experiments with cutting-edge Web technologies.

Core Architecture & Tech Stack

1. Modern Frontend Foundation

• Astro 4+: Leverages its superb Component Islands architecture and zero-JS-by-default strategy to guarantee ultra-fast loading speeds.
• TailwindCSS & DaisyUI v4: Utilizes semantic Color Tokens to support one-click switching across multiple themes (such as lofi, nord, retro, etc.).
• Two-Tier Color & Theme Isolation System: Implements a physically decoupled two-tier color management system between standard blog pages and dynamic visualization pages (like explorations and explore pages). Blog pages opt-out of Monet overrides to safeguard the purity of classic built-in themes (e.g. the retro lofi black-and-white minimalist theme); explorations pages force Monet dynamic theme overrides using a dedicated forceTheme="monet" layout prop or custom utility class mappings.
• Android Monet Dynamic Theme Engine: Integrates a custom, decoupled dynamic color engine (android-theme.js). It reads system dynamic accent colors or URL-passed parameters (e.g. monet-primary), converts them to HSL/OKLCH color tokens, and dynamically binds them to DaisyUI semantic CSS variables (--p, --s, --b1, etc.) at runtime, achieving Material You personalized aesthetics.
• Purely Functional Tailwind Mappings & Color Pairing: Integrates 'explore-accent' and 'explore-accent-content' double-variable color pairing in Tailwind configs. When dynamic re-coloring is active (wallpaper color dynamic shifts), it guarantees that background-text contrast always complies with WCAG accessibility guidelines.
• Anti-CLS Typography: Overrides fallback font descriptors (size-adjust, ascent-override) under fonts.css for local system Arial and YaHei, eliminating layout shifts and jumping upon loading and swapping (Font Swap) custom web typefaces.
• Modular Styles on Demand: Restructures the style ecosystem into 6 modular sheets. Shimmer skeleton loaders (skeleton.css) and handwriting pads (whiteboard.css) are decoupled and loaded dynamically in component frontmatter, keeping main blog pages 100% free of style pollution and bloated CSS bundles.
• Base-Content Color Token Optimization: Systematically refactored UI components to use base-content color tokens, ensuring optimal legibility across high-contrast, dark, light, and Monet themes.
• Neo-Brutalist Design: Explores a neo-brutalist style on specific pages (like the Neighbors page and AI tools), using thick borders, high contrast, and dynamic shadows to enhance visual impact.

2. Decoupled Content and Code

To prevent the codebase from becoming bloated with content files, we adopted a Physical Nesting + Cloud Dynamic Assembly architecture:

• Obsidian-driven: Content is stored in a separate Git repository, natively compatible with Obsidian management, supporting double links, tags, and complex YAML metadata.
• CI/CD Automation: Dynamically pulls the latest content repository during Cloudflare builds, achieving true parallel workflow between “content creation” and “code maintenance.”

3. Globalization & Smart Edge

• Native i18n: Deeply integrates Astro’s internationalized routing to support seamless switching between English and Chinese, while automatically handling SEO (hreflang) tags.
• Cloudflare Edge Functions:
  • Physical-level Interception: Detects geographic location via edge middleware to implement content filtering or smart redirection for specific regions.
  • Security Hardening: Automatically injects security response headers such as HSTS and CSP at the edge to ensure site robustness.

Highlight Modules

• Qwen MT Translator: A powerful, high-performance translator component built with React. It leverages the DashScope API (Alibaba Cloud AI) compatible-mode endpoint, supporting translation-focused models like Qwen MT Plus and Qwen MT Flash. It offers a Neo-Brutalist design, multi-region low-latency endpoints, stream-mode output, advanced generation parameters (temperature, top_p, seed), and advanced translation controls (domain prompting, term intervention, and translation memory).
• AI Playground: A universal, multi-protocol AI chat debugger and playground component. It supports multiple leading LLM API structures (OpenAI compatible, Google Gemini, and Anthropic Claude) in a unified React dashboard, enabling real-time streaming output, local configuration caching, custom JSON model parameters, system prompt tuning, and mobile responsive adaptation.
• Global Tools Architecture & RetroDesktop Layout: Implements a unified ToolsLayout with mobile-first navigation dropdowns and a nostalgically premium RetroDesktop UI container, ensuring tool localization, responsiveness, and consistent branding.
• Full-Text Search: Integrates Pagefind to deliver a low-latency, site-wide search experience with elegant background blur aesthetics.
• Interactive Comments: Integrated with Artalk, with deeply customized styles to match DaisyUI themes, featuring timeout circuit-breaker protection.
• Today in History: A custom dynamic component that requests different API sources based on the current language, fully compatible with Astro’s View Transitions.
• Gallery & Neighbors: Replaces traditional “services” and “projects” lists with more artistic and social showcases for photography and friendly links.

Maintenance Principles

We adhere to the separation of data and view. All non-body data (such as resume experiences, skills) are extracted into TypeScript objects under src/data/. If you are interested in the implementation details of this project, you can refer to PROJECT_MANUAL.md in the root directory.

“The best time to plant a tree was ten years ago. The second best time is now.”