My Third Personal Website Visual Upgrade: Making the Work Easier to ReadMy Third Personal Website Visual Upgrade: Making the Work Easier to Read

The third visual upgrade of my personal website is now live. This round sharpened how the site presents my work: the hierarchy within a case study, the space around a section, the behavior of a link, and the consistency between English and Chinese pages.

The main lesson: visual presentation is part of how I explain my work. A portfolio can contain useful evidence and still make someone work too hard to find it. My aim was to give that evidence a clearer path to the reader, without treating a new design as proof of better business results.

Why I came back to the visual layer

I work in marketing, so I spend time thinking about what an audience needs to understand and what might stop them from taking the next step. My own website deserves the same attention.

On a personal site, I cannot stand beside every case study and explain where to look. The page has to do some of that work. A short heading introduces the point. Spacing shows which details belong together. A recognizable link offers a route to more evidence.

During this upgrade, small inconsistencies kept coming up. Some links gained an underline without the intended text-color change. On another page, the text disappeared during hover. A section sat too close to the content above it and too far from the section below. The Chinese version of an interactive component still revealed English details when expanded.

These were useful reminders of how much of a website sits between the main headings. The copy could be correct while its presentation was still unfinished.

The workflow: a reference, a Preview, and specific corrections

I used a staged workflow rather than treating the first working implementation as the finished design.

1. Set the design reference. A frozen demo provided the visual reference, with explicit exceptions where I had chosen a different treatment. That gave the review a concrete basis instead of a moving target.
2. Implement both languages. English and Chinese needed to work within the same visual system. The review also had to include expanded content and interactive states, not just the text visible when a page first loads.
3. Review the Preview. I looked through the pages and collected screenshots with specific descriptions of what was wrong. “This is too close to the section above” is a much more useful correction than “the spacing feels off.”
4. Group and repair the issues. Repeated problems became shared checks. When more than one link had the wrong hover treatment, the task became a site-wide check of that behavior rather than a patch to one screenshot.
5. Separate code checks from visual review. Build and code checks supported the release, but they could not tell me whether the hierarchy felt right or whether an animation communicated the intended sequence.
6. Release the reviewed version. The visual upgrade moved from Preview to the live site. That is a release milestone; it is not evidence that every performance, interaction, or accessibility question has been closed.

The screenshots were most useful when paired with a description of the expected behavior. They showed the location of a problem. They did not always show the whole problem.

Three details that changed how I reviewed the site

A link needs a complete interaction

For the text links I was reviewing, the intended hover treatment combined an underline with a text-color change. An underline on its own was an incomplete implementation. Text becoming unreadable was a more serious failure, even if the underline animation technically ran.

This changed the question I asked during review. Instead of checking whether an effect existed, I checked what the reader would actually see: could they still read the label, recognize the interaction, and return to the normal state?

The same distinction matters for keyboard use. Removing an unwanted mouse-click outline should not become a blanket decision to remove visible keyboard focus. Those are different situations and need separate attention.

A bilingual page includes its hidden states

The Tools & Workflows page has a galaxy-style component with expandable satellite details. Some details on the Chinese page remained in English.

That is easy to miss when reviewing only the initial page state. It also makes a useful bilingual review rule: open the things that can be opened. The language check needs to follow the interaction, including expanded labels and descriptions.

Matching the two versions does not mean forcing Chinese into English sentence shapes. It means giving both readers the same information and a coherent experience in their own language.

Motion has a sequence, not just an appearance

The Career page’s vertical light effect was meant to move downward through the numbered stages. The case-study process components had their own sequential emphasis. In the galaxy component, satellites were meant to stay in fixed positions relative to their planets, rotate themselves, expand on interaction, and return afterward.

A still image could look convincing while missing those behaviors. I needed to describe what happened first, what followed, and what returned to its starting state.

I also wanted spacing to support the reading order. A numbered strip too close to a preceding paragraph can look attached to the wrong part of the page. Adding space everywhere would not solve that. The correction needed to address the relationship between those particular elements.

What visual presentation means for my portfolio

For me, the visual layer has a practical job: help someone understand what I did, how I approached it, and where they can look more closely.

That makes hierarchy and consistency editorial decisions as well as design decisions. A section title gives a reader a way into a long case study. A restrained background treatment can connect a numbered step to its explanation. Consistent links reduce the need to guess which elements lead somewhere.

There is also a limit to what I can conclude from this release. I have not established that the redesign improved conversion, search rankings, or recruiting outcomes. A live deployment does not answer those questions. They require their own observations and measurements.

What I can describe is the work: a clearer design reference, bilingual implementation, detailed Preview feedback, targeted repairs, and a released visual update. That is enough for a useful account of this stage without adding results I do not have.

What I will carry into the next update

I will write down interaction behavior earlier, check both languages beyond their initial page state, and keep visual review separate from engineering checks. I will also keep the review focused on the reader’s path through the work, rather than judging every component as an isolated decoration.

The third upgrade is live. The next task is to use the site, observe it, and keep adding work worth presenting.

You can explore the current version at huiyangxie.ca.