I am Hanni Liu, a Content Creation and Design student and practitioner based in Melbourne. My work moves across branding and graphic design, information design, illustrated animation, sound and independent games.
I enjoy starting with an uncertain idea, researching it, sketching, building a visual language, then using testing and feedback to make it clearer. Rather than limiting myself to one medium, I want each concept to find the form that suits it best—whether that is a poster, a twenty-second animation or a level that can actually be played.
My process usually starts with observation and research before moving into moodboards, sketches, style frames and prototypes. Once a project looks convincing, I keep testing whether the information is clear, the rhythm feels right and the interaction genuinely works through feedback from classmates, tutors or players.
This website follows the same approach. It is not a frozen PDF, but an online studio where work can be reorganised, replaced and allowed to grow.
Ideation, copywriting, structure, and the bulk of design and implementation.
Ran on the machine: generated the static site, fetched and migrated WordPress content, deployed to Cloudflare, verified each step.
Proportions are subjective and overlap (roughly by workload,
| Tech | Role | Detail |
|---|---|---|
| Cloudflare Workers | Static Assets | Hosts the whole site's HTML/CSS/images; static requests are free. |
| Cloudflare R2 | hn-media | Stores videos and large media, served through the Worker with Range support. |
| Cloudflare DNS / HTTPS | 521019.xyz | DNS and automatic HTTPS. |
| Python | build.py | Static site generator: reads markdown and media, outputs multi-page HTML. Read-only on sources. |
| Wrangler | publish.sh | One command: build → sync R2 → deploy Workers. |
| Aspect | Choice | Why |
|---|---|---|
| 底色 | Paper off-white #f3f0e7 | Lets the work be the hero; a printed, tactile feel. |
| 主色 | Heavy ink #111 | High contrast, thick borders, hard shadows — poster-like order. |
| 强调色 | Orange / Yellow / Sky / Pink | Saturated accents common in digital media and illustration. |
| 排版 | Oversized sans-serif headings | Type as image; tight tracking, experimental layout. |