Finally rebuilding my personal site
Tags: showdev, vue, webdev, vite
Published: 2022-04-12 19:06:11

---
title: Finally rebuilding my personal site
published: true
date: 2022-04-12 18:56:56 UTC
tags: 
canonical_url: https://blog.micahlindley.com/finally-rebuilding-my-personal-site
---

For the last six years or so, my personal site ([micahlindley.com](https://micahlindley.com)) has been built with pure HTML, CSS, and JavaScript with no compilation or build steps. It's super nice just to push a commit and have it live on GitHub Pages in a matter of seconds. However, after spending a lot of time learning Vue 3 this last year I decided to finally rebuild the site. There are some major changes between versions 1 and 2, so I'll go over them and why I made the decisions.

| Original Site | New Site |
|---------------|----------|
| ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649787412652/r6s3zjfOB.png) | ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1649786775729/jRB-0vWl9.png) |

## Design

My original site was very minimal and the layout was cookie-cutter for a portfolio site. It worked well and was responsive on multiple devices, but it didn't speak much to my identity as a graphic designer. I realized that I needed to make a stronger impression with my site. I started by using my accent color significantly more and even splitting the homepage in half with one side being white and the other being red. I was able to retain my minimal style while also bringing more character to the site. The most noticeable design change, however, is the cursor. On non-touch devices (see the [`pointer` media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer), the default cursor is hidden and replaced by a circle that uses the difference blend mode, creating some super neat effects.

## Animation

There were some minor touches of motion on my original site - notably a large preloader that zoomed and disappeared after the page loaded. However, the new site is filled with several touches of motion that give it an almost organic feel. A circle of text rotates around my logo on the homepage. When links are hovered, the cursor is enlarged. Navigation transitions between pages are smooth. There's a fine line between too much animation and not enough, but I hope I've reached the happy medium.

## Pages and performance

Version 1 used a single-page layout that's very common among developer portfolios. However, I was struggling to fit more content on the site while retaining fast load times. I gave in and switched to lazy-loaded routes that [Vue Router](https://router.vuejs.org) supports. I was originally concerned about the weight that some frameworks and bundlers can cause, but Vite's intelligent bundling enables my site to load so fast that I _don't even use a preloader anymore!_

## Automatic builds

The main feature of the old site that I didn't want to give up was the ease of pushing and having the site automatically deployed. For some of my projects, I use dedicated hosting tools like [Vercel](https://vercel.com) or [Netlify](https://www.netlify.com), but I wanted to keep my site hosted on GitHub Pages so that other projects already on GitHub could continue to be on the micahlindley.com domain. Thankfully, GitHub Actions provided a great option for me to build the site with Vite in the cloud and host it automagically with Pages. I wrote [my own Action](https://github.com/micahlt/micahlt.github.io/blob/master/.github/workflows/build-site.yml) to deploy the site and it's worked wonderfully so far.

## The results

My analytics show that user retention (aka session length) on the v2 site has gone up by **12%** , and the number of visits per month has not been affected. I'm very impressed with how fast it runs, and working with Vite has been a joy - I don't think I'll ever start a project with Webpack again! Vue 3 is a rapidly maturing ecosystem that I'm glad to be a part of. If you have any feedback, feel free to let me know! And of course, the site is open-source: https://github.com/micahlt/micahlt.github.io