Human direction
I defined the design goals, page structure, interaction requirements, and supplied all the research content and media.
Behind the scenes
How this website was made
This website was built through an iterative human–AI collaboration — because apparently even a personal academic homepage now needs a small production pipeline.
This website was built through an iterative human–AI collaboration. We started with a simple GitHub Pages skeleton, then developed each page independently by progressively adding content, refining the layout, and improving the information hierarchy. Once the static version was complete, we shifted our focus to user experience, reviewing each page to identify opportunities for improvement before introducing subtle interactions and animations one feature at a time. Throughout the process, I defined the overall design goals, page structure, and interaction requirements, supplied all research content and media, GPT-5.5 analyzed the requirements and produced detailed implementation guides based on established frontend design patterns, and Claude Code implemented the corresponding HTML, CSS, and JavaScript. Each iteration followed the same loop: design → implementation → visual inspection → refinement, gradually evolving the website from a minimal academic homepage into a polished, interactive personal website.
GPT-5.5 planning
GPT-5.5 analyzed the requirements, weighed design trade-offs, and wrote step-by-step implementation guides based on established frontend patterns.
Claude Code implementation
Claude Code translated the approved guides into HTML, CSS, and JavaScript, then committed the changes to the GitHub Pages repository.
Human review
After each update, I inspected the live website, noted what felt right or wrong, and refined the next request.
The loop, every time
Design
Implementation
Visual inspection
Refinement
Home, Publications, and Academic Service were designed through human-guided iteration. This Fun Fact page was designed with more freedom by AI.