My Personal Websites: Recap 2024

webtailwindreactnextjs

My first (real) site - V1 2021

In the fall of 2020 after completing my master's degree I decided to give the student life a break and set a new goal of entering industry as a software developer. A growth area for me at this time was web development: I had a basic understanding of HTML, Javascript, and styling libraries like bootstrap from toy projects but lacked a thorough understanding of how it all blended together. During this time I deep dived into various backend and frontend frameworks, learning Django and React, amongst others.

Coincidentally most job openings around me were for web developers, and of course what better way is there to learn web development and track your progress than host your own website showcasing your skills? At the time these were the goals I had setting up my site while I searched for the first full-time position:

  • A page sharing basic details about my self like experience and skills.
  • A way to showcase personal projects and a link to put on my resume.
  • A mobile-friendly layout.
  • A blog to track my web development learning journey.

See it for yourself here v1.kyleclarkson.ca.

Reflections - It did the trick

I think this site accomplished my main goal of having a place to showcase a bit about me for those who may have been interested in hiring me. I remember learning a lot testing the UI - just when I thought I had the layout working it would break on a smaller screen.

At the time I was building several toy projects using the Django web framework. I really enjoyed how Django's object-relational mapper allows developers to interact with relational databases and saw it as a way to implement a blog. However this was really overkill for a small, personal website. A combination that I'm not much of a writer and hosting fees for a Django app and SQL database made me drop the blog component of the site shortly after launch. 😅

Something more minimalist - V2 2023

From former Amazon engineers a common piece of advice I'd hear was "have side projects to keep you sharp". I've since realized they were likely referring to the churn of developing new features at a large company like Amazon. While we aim to deliver for our customers quickly, new or improved features almost always have a dependency on systems owned by other teams who are prioritizing their own efforts. In short, I found myself writing less code than I expected and more time designing and getting alignment with other stakeholders.

To keep my skills sharp one project I took on was revamping my website. At the same time, I wanted to become a better React developer and understand tools in the frontend ecosystem better. After deep diving into the status of frontend development I found NextJS - a React framework with built in routing, middleware and various UI optimizations like font and images, amongst other benefits.

For updating my site I began with a proof-of-concept to see how I liked using NextJS and how I could deploy it. These were some of the goals for this version:

  • Developed using NextJS and Tailwind CSS for styling.
  • Support both light and dark mode themes.
  • CI/CD and easy deployment of the site via commits to the site's GitHub repo.

You can find version two at v2.kyleclarkson.ca.

Reflections - Nice for a proof-of-concept

I began this project using NextJS 13 a few months after it was release and deployed the site using AWS Amplify. There was a bit of a learning curve to both, but overall I enjoyed the development and deployment experience of both.

I also enjoyed the minimalist layout of the site but have since moved away from it as I believe it is a bit limiting to built upon.

Finally a blog! - V3 2024

In version one of my site I attempted storing blog content within a relational database. I wanted to discuss web development - showcasing both code and web components. I also have a passion for math and wanted to quickly render content using LaTeX - a type set for scientific articles. However, I found it difficult to render and format content like this via a relational database and was the main reason I decided to axe a blog.

Since then I've discovered MDX - an extension of the markdown syntax that supports using JSX components within markdown files. Using extensions like the remark-math plugin, MDX can also render LaTeX. Best of all, it is fairly easy to integrate MDX with a NextJS + TaillwindCSS application which pairs the ease of editing of markdown with the styling of Tailwind.

In this current version of my site I've integrated MDX for creating blog content. I've maintained the use of the light/dark theme toggle, but also returned to the hero section on the site's main page similar to version one.

What's next

For the next while I plan to continue with this version of my website. I intend to keep the blog active with posts as well as experiment with React components and embed them using MDX. For new features I have beta.kyleclarkson.ca which is linked to the beta branch of the repo. Hope to see you around!