Homepage Change Log 01: Why the First Screen Is Not a Landing Page

While rebuilding the homepage, I kept returning to one rule: huzejun.com is not a product website. It does not need to sell every section as a feature. It should feel like a personal archive first, then let visitors find the blog, photography, calligraphy, and about pages.

That is why the first screen avoids long introductions and oversized feature cards. It keeps only a few pieces: a welcome line, the calligraphy bird, a short name card, social links, and a scroll cue.

The Order of the First Screen

The current first screen is organized into four parts:

1. A floating header for navigation.
2. A welcome line that names huzejun.com.
3. The calligraphy bird, the strongest personal visual mark on the site.
4. A name card and social links, so the visitor knows who is behind the archive.

The bird is not decoration. It is my own work, and it gives the site a more specific identity than any generic hero section could. The welcome line and the name card need to give it enough space.

Why Keep a Name Card

I tried a lighter homepage with only the welcome line and the image. It looked clean, but the person behind the site disappeared. A visitor had to open the about page before understanding whose space this was.

The name card now says only the minimum:

Zejun Hu / 胡泽君
M.S. in Electrical Engineering, with a quiet fondness for calligraphy and photography.

This is not meant to replace the about page. It only adds enough identity to the first screen, so the rest of the site feels connected to one person.

Why There Are Only a Few Actions

The first screen has three actions: GitHub, Email, and Recently played. GitHub and Email are external contact points. Recently played is an internal jump to the music section. Because they behave differently, they look different:

• GitHub and Email are small icon buttons.
• Recently played is a light text button that scrolls to the music section.

This keeps the first screen from becoming a button grid. If a visitor is browsing casually, the arrow at the bottom invites them to continue. If they already know where to go, the header still gives direct access to the main sections.

The Code Boundary

The Hero component stays focused on display. It receives translated strings from the page instead of reading messages directly:

<Hero
  welcome={tHome("welcome")}
  name={tHome("nameCard.name")}
  intro={tHome("nameCard.intro")}
  musicLabel={tHome("actions.music")}
  githubLabel={tHome("actions.github")}
  emailLabel={tHome("actions.email")}
  scrollLabel={tHome("actions.scrollDown")}
/>

This keeps the page responsible for data and translation, while the component stays responsible for layout.

The calligraphy bird still uses two images:

<Image className="dark:hidden" src="/images/hzjwebsitefront_light.png" alt="" />
<Image className="hidden dark:block" src="/images/hzjwebsitefront_dark.png" alt="" />

That choice is practical. A single image that changes src during a theme switch can briefly show the wrong bitmap or background. Rendering both images up front and letting CSS decide which one is visible makes the transition stable.

Takeaway

The first screen is not trying to say everything. It only needs to answer three questions quickly:

• Where am I?
• Whose space is this?
• Is there more worth reading below?

For a personal site, adding more sections is easy. Knowing what not to say is the harder part.