The new patebryant.com

Over the long weekend of May 27th to May 29th, I decided to rebuild patebryant.com. Previously it had not been much, just a simple netlify template that I had updated the design a little and put in my own new links.

I didn't actually start working on the site until Sunday afternoon, and wanted to set the goal of finishing it by Monday night. I just hated the old version of my site and wanted to get a new one up as soon as possible.

Old patebryant.com

This was the home page of the old site, not very impressive. It has a link to a Projects page and paypate.com. The projects page displayed a similar style list of projects I has previously worked on. paypate.com is a site that actually uses the same template as the old patebryant.com, but with links to my Venmo and Cashapp.

I will probably create a separate post about paypate.com in the future.

Building the new site

I started by using the tailwindcss Spotlight template as a base. I thought the design was great to begin with, already having a dark and light mode.

This was my order of operations for building the site:

  1. Remove all pages and components I didn't want (Sunday)
  2. Fill in work experience and projects (Sunday)
  3. Fill in Uses and About pages (Monday)
  4. Add some custom animations (Monday)
  5. Start the Articles page (Monday)
  6. Deployment (Monday)

Steps 1 - 3 were pretty easy, I just had to fill in the content, only making some minor changes to the template. Step 4 was pretty quick as well, the main animation I added made the images on the home page rotate the opposite direction when you hover over them.

All I had to do was add transition-all to the <Image /> element to make the animation smooth while toggling the rotate-3 and -rotate-3 classes on hover.

className={clsx(
  'aspect-square rounded-2xl bg-zinc-100 object-cover transition-all dark:bg-zinc-800',
  hovered ? '-rotate-3' : 'rotate-3'
)}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}

Now completing step 5 is as simple as finishing this article and the Articles page. Then on to Deployment where I will most likely be using Vercel to host the site.

I will probably create a separate post about the deployment process in the future.

The new site

New patebryant.com