This log records the development journey of my personal website, from its inception to its current state.

Phase 1: Foundation (February 9, 2026)

The project began as a static site built with Astro and Tailwind CSS. I focused on establishing a clean, fast, and modern foundation.

  • Core Structure: Created the BaseLayout, Header, and Footer components to maintain consistency across pages.
  • Content Management: Set up Astro Content Collections to manage blog posts efficiently.
  • Typography & Theme: Implemented custom fonts and a dark mode toggle to ensure a comfortable reading experience in any lighting.
  • Responsiveness: Refined the mobile experience, fixing hover interactions on the Contact page.
  • About Page: Added interactive carousel sections to showcase personal interests like K-pop, movies, and food.

Phase 2: Interactivity & Polish (February 10-11, 2026)

I shifted focus to enhancing user interaction and visual appeal, drawing inspiration from Apple’s design philosophy.

  • Comment System: Integrated a backend-powered comment system using Supabase. This evolved to support threaded replies and a custom UI.
  • Notifications: Replaced standard browser alerts with elegant “Toast” notifications for a seamless user experience.
  • Animations: Added subtle entrance animations to the Blog index and About page to make navigation feel fluid.
  • Layout Adjustments: Centered navigation elements and optimized hero images for better visual balance on all devices.
  • Contact Page: Enhanced the WeChat contact method by replacing text with a hover-triggered QR code image.

Phase 3: Performance & Optimization (February 12, 2026)

The latest updates prioritize performance and image quality, ensuring the site is both fast and beautiful.

  • Search Redesign: Overhauled the blog search bar with a blurred glass effect and minimalist icons.
  • Image Optimization: Addressed page load lag by migrating heavy assets to src/assets.
  • High-DPI Support: Implemented Astro’s <Image /> component with widths, sizes, and quality attributes. This ensures images look crisp on Retina displays (up to 2400px width) while maintaining optimal file sizes.
  • Vanta.js Experiment: Explored adding a dynamic background effect but decided to keep the design clean for now.

This log will continue to update as the project grows.