Old Portfolio Website

January 19, 2020


I built this late 2019-early 2020 as a way to really reacquaint myself with HTML and CSS and dig deep into the fundamentals. I believe that fundamentals are always worth revisiting to reinforce knowledge and solidify understanding.

It was an adventure and I learned a good amount of HTML5 and CSS3 tricks and features along the way.


Features and tricks I found handy include:

  • Semantic Elements

    • HTML elements with names such as Article, Nav, Section and Footer really help with the readability of the markup.

      <section id="main">
      <h1>Hi! I'm <span>Michael Nguyen</span>.</h1>
      <p>Full-stack web developer.</p>
      <a href="#about"><button></button></a>
      <nav id="nav">
        <li><a href="#about">About</a></li>

  • CSS Variables

    • Setting some basic theme colors then invoking them in the styling allows easy swap of theme and colors!

      :root {
      --main-text-color: #545849;
      --darker-text-color: #2c2b1c;
      --lighter-color: #fcfeed;
      --lighter-color-rgba: rgba(252, 254, 237, 0.97);
      --xlight-color: #fefbf1;
      --red-accent-color: #6a4d47;
      --body-font: "Amiko", sans-serif;
      --heading-font: "Belgrano", serif;
      body, html {
      background-color: var(--lighter-color);

  • Styling the scrollbar

    • I didn’t even consider the possibility until I saw a different looking scroll bar on another website. A quick search shows the possibility on W3C Schools

      ::-webkit-scrollbar-track {
      background: var(--lighter-color);
      ::-webkit-scrollbar-thumb {
      background: var(--main-text-color);
      border-radius: 1px;