Enhancing web-dev skills by building personal websites

Building a personal website is a great way to learn new technical knowledge, which also helps to get good jobs. Below is the history of this website, what I’ve learned when building it, and how this know-how helps me throughout my career.

v3.6

In 2025, when working at BioTuring, I touched it up with many new stuff:

• Copy-writing refresh: Changed tagline to something that actually fits my vibe: "part-time software builder, full-time dreamer" - complete with flashy sparkle text effects
• Cleaner design: Better spacing, refined typography with Oracle and JetBrains Mono fonts that actually look crisp.
• Content upgrade: Brought more personal stuff to homepage instead of just "portfolio" work - showcasing my pet products and recent blog posts.
• Tech stack refresh: Migrated to bun for better package management, upgraded Next.js to v15, TailwindCSS to v4.
• New About page: "9 shades of Tuan" - built Tinder-style photo swiping because the static About page was boring; turns out interactive portraits are surprisingly engaging.
  Added simpler biography and a better "now" section.
• Enhanced password protection: Extended to both posts and projects for better content control
• Scroll snap navigation: Added smooth scrolling behaviors that make browsing feel more intentional
• Custom tracking system: Built a simple analytics solution using Notion API - now I can view all user interactions, page views, and engagement data directly in Notion instead of wrestling with Google Analytics dashboards.
• AI-powered comment suggestions: Experimented with helping visitors articulate thoughts better; discovered AI actually improves conversation quality.
• Tons of polished micro-interactions, better mobile responsiveness, and those subtle improvements that you don't notice until you compare versions.

v3.3

In the Sep 2023, I touched up the website again.

• Change the align of header to center.
• Add role filter for projects.
• Add works at BAEMIN (as a post - hope I will have time to write a case study).
• Migrate state management from Redux to Zustand for more lightweight code.
• Add Password-protected post feature 🔒
• Simplify comment form, move it out from the dialog.
• Add Comment suggestion feature.
• Optimize Skeleton visual design.

v2.0

When working at Aperia, I had designed and built the v2 version of my website (in 2020). In that process, I learned:

• Basic concept of ReactJS, its life cycle and hooks, …
• Styled-components
• GastbyJS and MDX
• How to deploy to Netlify and Vercel

This know-how helped me a lot when working on Pixel Design System and Aperia ESG at Aperia.

v1.0

This was the first official version of my portfolio website, which I created in 2019. Although having two works, it helped me to have offers for jobs at Samsung and Aperia. I think it was because it is clean and organized with some cool impressive stuff (like animation) from a design student.

When working on it, I know:

• How to deploy websites on Firebase.
• Use modern javascript instead of jQuery, which I’ve gotten used to before.
• Animations using Javascript.
• Mustache template engine.

Post script

I still have many fun ideas to implement on my website. Hope I can have time to complete them to have a chance to learn more things 🥹