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.
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:
- Remove all pages and components I didn't want (Sunday)
- Fill in work experience and projects (Sunday)
- Fill in Uses and About pages (Monday)
- Add some custom animations (Monday)
- Start the Articles page (Monday)
- 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.