2026-01-22 Web Development Design Performance

My Personal Website Redesign Journey

As a developer, a personal website is the best window to showcase your tech stack and aesthetics. Recently, I spent some time completely redesigning my personal website. In this article, I will share why I decided to redesign, my thoughts on technology choices, and some challenges and solutions encountered along the way.

Why Redesign?

My old website was built with Docsify. Docsify is an excellent documentation generator, lightweight and easy to use. However, as my customization needs increased, I found some limitations with Docsify:

  • Not SEO Friendly: By default, Docsify is a Single Page Application (SPA), rendering content via JavaScript, which isn't very friendly to search engine crawlers.
  • Loading Performance: Initial loading requires downloading and parsing JS to display content, resulting in suboptimal First Contentful Paint (FCP).
  • Layout Limitations: Docsify's theme customization capabilities are limited, making it hard to implement complex personalized layouts.

Technology Choice: Back to Basics

After considering modern Static Site Generators (SSG) like Next.js, Gatsby, and Hugo, I made a "retro" decision: Use native HTML, CSS, and JavaScript.

The reasons were simple:

  1. Extreme Performance: Nothing is faster than pure HTML. No hydration, no complex runtime.
  2. Complete Control: Every line of code is mine; I can precisely control the DOM structure and styles.
  3. Learning & Exploration: Moving away from framework abstractions to revisit the native capabilities of Web standards (like CSS Variables, Grid, ES Modules).

Redesign Highlights

1. Responsive Design & Dark Mode

I used CSS Variables to define theme colors. A simple JS toggle of the `data-theme` attribute on the `html` tag achieves instant dark mode switching without flickering.

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

2. Internationalization (i18n)

To support bilingual content (Chinese/English), I adopted a directory-based structure (`/` and `/en/`). This approach is most SEO-friendly, and combined with `hreflang` tags, allows search engines to accurately identify different language versions.

3. No Build Step

The current development workflow is incredibly simple. No `npm install`, no `npm run build`. Just modify the code, push to GitHub, and GitHub Pages automatically deploys. This "What You See Is What You Get" experience is refreshing.

Conclusion

This redesign helped me rediscover the pure joy of coding. Sometimes, less is more. In an era dominated by frameworks, returning to native Web development is not just a technical choice but a pursuit of simplicity and efficiency.

Back to Blog