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.8

After the playful v3.7, I focused on making the site feel more polished, coherent, and comfortable to read:

• Proper dark mode: Rebuilt the color system with OKLCH semantic tokens, added a smooth theme toggle, and tuned SVGs, Notion content, code blocks, cards, badges, and surfaces so both themes feel intentional.
• Smarter content rendering: Improved the Notion renderer with better media handling, heading support, callouts, protected blocks, embeds, and a more reliable Cloudinary-backed asset flow for images and SVGs.
• Comment and reaction polish: Redesigned the comment form, added pagination, better email validation, clearer error states, and smoother reaction effects.
• Sound effects: Added tiny interaction sounds to links, galleries, and other surfaces so the site feels a little more tactile and playful.
• Interface polish: Refined project cards, mobile navigation, spacing, and responsive details across the site.

This version taught me that dark mode is not only about colors. It is about contrast, assets, content, browser quirks, and many tiny decisions that make the whole site feel coherent.

v3.7

In February 2026, I got a bit obsessed with making the website feel more interactive and more like "mine":

• Vinyl music player: Turned the Spotify widget into a vinyl-style player with smoother record motion, interactive controls, and YouTube Music playback through a small Python server plus Vercel backup functions.
• Binary-grid footer: Built a persistent animated footer with canvas rendering, glitch effects, fluid background text, and better performance/responsive handling across pages.
• Interaction polish: Improved hover previews, comment suggestions, buttons, project cards, frame styling, and small layout/state bugs that made the site feel more stable.

This version made the site feel less like a portfolio template and more like a small digital room with its own mood.

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 🥹