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.

Link: Pan Chen’s Website (first version)
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.

Link: Pan Chen’s Website (third version)
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.

Notes
- 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.
Credits

Leave a Reply