Personal Website

Description

A portfolio website that presents my passions, paints a picture of my personality, and parades the products of my programming powers.

Technologies Used and Rationale

  • NextJS
    • Out-of-the-box static site generation (SSG)
    • I wanted to try out React
  • TailwindCSS
    • More lightweight than MUI
    • Straightforward to use and easy to customize

Old version

  • Angular
    • Baked-in Typescript and dependency injection system
    • Powerful component and templating API
  • Material UI (MUI)
    • Ready-to-use basic components
    • Mature design and theming system

What I Learned

  • Basics of web development
    • HTML
      • The importance of semantics and structure for SEO and accessibility
    • JavaScript
      • DOM API
      • The standard built-ins
    • CSS
      • Flexbox and grid
      • Using custom properties (CSS variables)
  • Introduction to development tools like Typescript, bundlers (Webpack), CSS frameworks (Sass, TailwindCSS, Emotion), and some popular libraries (RxJS)
  • Some insight on the different ways to architect a client-side web app, along with their respective approaches to code composition and organization
  • Better understanding of web browsers and using its dev tools

Extra Notes

Initially this was an Angular project, it had a steep learning curve, but it had introduced me to the web development ecosystem. I switched to NextJS because I liked the experience of using React more.

I was using NextJS with MUI, but I learned that using their system to extend/customize existing react components results in duplicated css. From what I can understand, this is to make the component own its styles, and for the user to be free from having to deal with bugs related to css injection order. I didn't think I needed those features because this is a relatively small project, so I switched to Tailwind.