Blog Taoyuan

“Where code meets emotion — a pure HTML & CSS blog preserving the magical memories of Taoyuan.” This is why I create the blog in Taoyuan game to show my journey and make my own digital diary.

Comment

Inspiration

This project was inspired by Taoyuan, a peaceful farming and social simulation game that brings warmth, friendship, and creativity to life. I wanted to preserve my favorite gaming memories and emotions through web design — transforming them into an interactive digital diary built purely with HTML and CSS.

What it does

Blog Taoyuan is a personal digital memory book that showcases my journey through the Taoyuan game. It combines elegant layouts, CSS-only animations, and a soft, dreamlike aesthetic to tell stories through visuals — featuring a banner slideshow, video gallery, flip-book memories, and a timeline of milestones.

How I built it

I designed and coded everything manually using HTML and CSS, focusing on soft pastel colors, smooth transitions, and dreamlike visuals. Each section (banner, intro, video gallery, timeline, and memory book) was crafted to feel like turning pages in a digital memory book.

Challenges I ran into

The biggest challenge was creating complex interactions purely with CSS — for example, the 3D flip-book cards and manual carousel. Achieving responsiveness across all devices while keeping animations smooth also required patience and testing.

Accomplishments that I'm proud of

I’m proud that the entire site runs with no JavaScript at all, yet still feels dynamic and interactive. Every animation, effect, and layout transition is achieved only with CSS. The project also captures the emotion and beauty of the game world in a technically impressive and artistically meaningful way.

What I learned

Through this project, I learned how powerful CSS alone can be when combined with creativity. I explored advanced CSS animations, responsive layouts, and interactive effects such as flip books, scroll curtains, and custom music players — all without a single line of JavaScript.

What's next for Blog Taoyuan

I plan to expand this project with a new chapter-based storytelling system, allowing players to submit their own Taoyuan memories. I also hope to turn it into a community showcase celebrating creativity, friendship, and nostalgia through web design.

Built With

Share this project:

Updates