AI Automation Showcase
Building a dual-domain digital presence with Autonomous Agents: A technical retrospective on strategy, implementation, and debugging.
The Vision: The Autonomous Engineer
This project wasn't just about building a website; it was a stress test for human-agent collaboration. The goal was to act as an Architect and Creative Director, delegating the entire execution—coding, infrastructure, design, and troubleshooting—to an autonomous AI agent via the Gemini CLI.
Strategic Branding & Privacy
The first task was a Privacy Audit. I provided a raw resume, and the agent was instructed to anonymize it for public consumption while maintaining professional weight.
The Pivot: We initially aimed for "Technical Lead," but shifted to "AI-Augmented Senior Engineer." This grounded the brand in execution rather than just management, making the cross-border contract value proposition much stronger.
Visual Vibe Coding & Toolstack
The project uses a cutting-edge technical stack designed for speed, SEO, and developer experience.
Astro 5
Selected for its zero-JS by default approach and lightning-fast static generation, ensuring an instant, professional feel across global networks.
Tailwind 4
Leveraging the latest styling engine for a lean, highly customizable design system without the overhead of traditional CSS frameworks.
Technical Grid
A fixed dot-grid pattern with calibrated density (48px spacing) to evoke a "blueprint" feeling.
Mesh Aurora
Dual-layer animated radial gradients using multiply blend modes for a shifting, organic glow.
Glassmorphism
High-blur backdrops (80px) and ultra-thin borders (30% opacity) for a sleek, modern UI.
The Debugging Chronicles
The Subdomain "Style Vacuum"
The Problem: The creative subdomain (zhou.chiye.de) was rendering without styles, even though assets existed on the server.
The Diagnosis: The agent used curl -I to inspect headers and discovered that Cloudflare was caching a 404 response for the CSS file, but returning it as a 200 HTML page (Cache Poisoning).
// 1. Adjusted 'filter: blur' from 100px to 101px
// 2. This triggered a new Astro build hash: Layout.DteP87TQ.css
// 3. Updated Nginx with 'alias' instead of 'root' for /_astro/
The GitHub 403 Permission Loop
The Problem: Creating the repository via API succeeded, but pushing the local codebase failed with "Write access not granted."
The Diagnosis: We identified that Fine-grained Personal Access Tokens (PATs) require explicit "Contents: Read & Write" scopes, and because the repo didn't exist when the token was created, it wasn't in the "Selected Repositories" list.
// User updated PAT permissions to 'All Repositories'
// Agent re-verified scope via API and executed 'git push -u origin main'
Autonomous Infra & System Architecture
The infrastructure is designed for high-performance global accessibility, managing an IPv6-only Ubuntu VPS behind a Cloudflare Proxy.
System Topology
Full SSL Encryption
Agent generated self-signed certs on VPS to enable Cloudflare "Full" SSL mode over port 443.
Rsync Deployment Pipeline
Automated synchronization using SSH ProxyCommands to tunnel through local proxies to the global VPS.
Directing Intent: Human-in-the-Loop
The secret to successful AI automation isn't "hands-off" development—it's high-bandwidth direction. I provided granular feedback that shaped the technical outcome:
"Lower the dot density a bit, then move 'Creative' under the 2026 line, centered."
Result: Agent recalibrated CSS grid variables from 32px to 48px and refactored the Astro flexbox layout for centered symmetry.
"Review site wording... anything we can rephrase to make it more genuine and grounded?"
Result: Agent performed a cross-referencing check against the raw resume and identifies a timeline discrepancy, suggesting a pivot from "15+ years architecture" to "15 years industry / 10+ years engineering."
The Final State
A fully private, high-performance, dual-domain architecture. This is more than a portfolio; it's a testament to the speed and precision of Agentic Software Engineering.