Colton Lowry

I had not touched my personal website in over 4 years. It was outdated in content and tech stack. As a was deciding on what side projects I wanted to work on, it only seemed appropriate to address the site I'd be showcasing my work.

Overview

With every personal website I've ever hosted, I've looked at others to see what the engineers I admired were puting on the internet. I've followed some engineers for quite a while and they've had a huge impact on my thoughts around design and presentation. Previously my website was modled after Casidy Williams site.

Finding Inspiration

I've followed casidoo for quite some time and think she's extreamely talented. I miss the days when she was on the Stack Overflow podcast. I was a religous listener when she was regularly apart of the programming.

Anyway, the previous website I hosted for my personal website was an attempt to recreate her website on my own. I had 4 main sections:

"Short" - a short description about me
"Long" - a longer description about me
"Journey" - a linier display of the journey in my career
"Skills 🐍" - a breakdown of the skills I had

I will eventually host the old version to poke around here. For now, here is a screen recording of my old site:

This time around I looked for a new design that would be a bit more traditional and display my works in a logical way. I also wanted the site to be more interactive. That's when I found Tania Rascia's website. Once I found it, I attempted to recreate it here, for myself (still a work in progress). Little did I know that she made the site open-source... instead of going that route, I attempted to recreate it from scratch on my own as a justification to play with a new technology, Vite.

Open-source Spirit

Before I get into some of the details of how I recreated the site, I want to touch on "inspiration" and crediting other engineers for their work. The open-source spirit of developers is a cultural blessing. It's hard to name another industry where work is shared for free and enchoraged for others to itterate on.

Taking insipration from the work that's been done by others is a huge part of growing as an engineer, at least it has been for me. It's not required, but I think it's important to make clear the people and work done if you are attempting to recreate something. You'll find credits to other engineers throught my website.

I'd encourage others to be inspired, but challenge yourself by attempting to build something in a new framework, language or archetecture. That's exactly what this website it - an attempt to recreate Tania's personal website for myself, but do it from scratch and exploring new technologies so I come out of this exercise a more complete developer with a new tool in my toolbelt.

I will open-source this website once the codebase is in a respectable place :)

Architecture

With this project I wanted to learn about light-weight and content-first technologies for the modern web. I've been in React and React Native for 5+ years now and wanted to take a fresh look at what improvements have been made by the dev community to enhance clean and quick data display. That's when I learned about Vite.

Here's an expert from Vite's website. After I read up on it a bit I decided this was the framework I wanted to work with:

image source: vite's getting started documentation

Frontend

As I've talked about above, the main learning point was to use Vite. The site is written in Typescript and makes use of React, MUI, and MDX.

Key Dependencies

"dependencies": {
  "@emotion/react": "^11.13.3",
  "@emotion/styled": "^11.13.0",
  "@fontsource-variable/inter": "^5.2.6",
  "@fontsource/inter": "^5.1.0",
  "@mdx-js/react": "^3.1.1",
  "@mdx-js/rollup": "^3.1.1",
  "@mui/icons-material": "^6.1.3",
  "@mui/material": "^6.1.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.26.2"
},
"devDependencies": {
  "@types/node": "^24.3.0",
  "@types/react": "^18.3.5",
  "@types/react-dom": "^18.3.0",
  "@vitejs/plugin-react": "^4.3.2",
  "typescript": "^5.5.4",
  "vite": "^5.4.8"
}

Backend

At this point the backend does not exist 😓 but I have plans to spin up an API and database in the future. The purpose of adding that functionality is to play in a new backend framework, make editing and adding content easier, and maybe allowing comments from users (will require a content-moderation filter to be implimented & proper security).

For now everything is static on the frontend. If I want to add or edit content it requires a change to the codebase. I'd like to play with some CDN integrations in the future. I am using Netlify to host the site and GitHub for my code repo.

Conclusion

Working on this website will be a continuous journey. I enjoy the fact that I'll get to keep making improvements and adding content as time goes on. I'll add follow-up articles on improvements I make and link them here. For now, thanks for taking time to give this a quick read. I'll leave you with a few links to websites I think are pretty awesome to be inspired:

Website Redesign