Personal Website Update: Hover Panel

I was doing a refurbishment for my personal website right here. The idea came from Felix Wong.

In the hover panel, first thing first, there is the area for the menu. Below the menu, there is a search bar. Under the search bar, there is an area for widgets. In the end, there is the menu for switching languages.

The button itself is the picture used as the Site Icon for Twenty Twenty Theme. The width of the hover panel is 76% or 38.2 (the golden ratio) depending on the screen size. The opacity is 0.9, which is “semi-transparent”.

Felix proposed a good question that for some devices, the position of the notch might affect the visibility of the hover panel button.

To resolve this, I am thinking about the following solution:

First: I need to write some script to detect the position and shape of the notch. I hope that I can do it with JavaScript only.

Second, I need to check if the notch influences the visibility of the hover panel.

Lastly, if the notch doesn’t exist or it doesn’t matter at all, no action is required. Otherwise, I need to adjust the padding-top of the hover panel to prevent it from being overlapped.


Personal Website

So far, there have been four versions of my personal website.

HTML+CSS+JavaScript (Version 1)

At the very beginning, my personal website was HTML+CSS+JavaScript, with no backend, just frontend. Even though it could be hosted in GitHub pages, I still hosted it on a server.

Pan Chen’s Personal Website, version 1.


HTML+CSS+JavaScript+PHP+MySQL (Version 2)

I brought PHP and MySQL into my personal website, made it a dynamic web page such that the visitors could leave comments to me.

Also, I made a resume management system for this version, I could update my online resume without touching the HTML code.

It once won a 100% Lighthouse performance score.

I hosted this version on a Ubuntu server with the LAMP stack.

HTML+CSS+(Laravel) PHP+MySQL (Version 3)

Since May 6, 2020, I had been refactoring my personal website using Laravel, the PHP framework which follows the model–view–controller architectural pattern.

Pan Chen’s Personal Website, version 3.


WordPress (Version 4)

On December 6, 2020, I started the work to integrate my personal website into a WordPress site. To speed up, I moved to LNMP stack, and used the global CDN provided by Baidu.

This is the latest version.

Pan Chen’s Personal Website, version 4.


  • All four versions are multiple languages.
  • All four versions are mobile-friendly.
  • You may feel it is slow to visit the archived versions. This is because now they are hosted in my second server, which is in Germany and I don’t implement CDN on them (On December 16, 2020).
  • Both Version 2 and Version 3 are based on Version 1, while Version 4 is completely new and a different layout is applied for it.


Photo credit: Felix Wong / CC BY-SA 3.0