Welcome to Heather's Blog
011 | NEXT.JS website: Finishing up and Animating

011 | NEXT.JS website: Finishing up and Animating

Welcome black. I am finishing up my personal/career development sprint and after 5-6 weeks and 23 1/2 hours here are my tasks for this week:

  1. Redesign the blog
  2. Animation and Hover throughout the site
  3. Send to my actual Domain
  4. Check links within blogs referencing other posts
  5. Next Week, of line I will get more feedback and maybe make some more tweaks

I removed the shop because that isn’t a must-have, it runs on squarespace and does cost me money, but it looks great. I also had a little feedback from, my spouse and made 40 minutes of small changes like an additional call to action button on my business section.

Redesign the Blog

Really here, I just went back to the basics. I stripped all of my styles and then based them off of the main website. Then I found a simple CSS gradient here and applied it to my grid. I styled the grid of posts to be mobile responsive with flex and redid the padding, margin, and fonts.

Now unfortunately, that removed my blog post styling as well, so It took me some extra time to restyle that, but also allowed me to catch inconsistencies between my base website code hierarchy and the slugs code.

This took 1 hour and 30 minutes, and here are the results.

Animation Throughout the Site

Whew. Before writing this section, I worked on just importing the animate.css library. That was really easy and I loved seeing my “practice” bounce animation immediately. Then I complicated the matter by deciding this fact: I want the animations to happen on visibility based on scroll. With Chat GPT and DIJS to walk me through this idea, we decided to use a WOW function which looked like it had a ton of documentation. Honesty check: here is where I checked out. After I got frustrated and walked away it took my genius-kid-coder-spouse an hour to non-cleanly add this integration and function. But now it works, and we are all fed and rested. After the 1 1/2 hours last night, here is to a fresh start.

The one thing I loved about my Square Space website, was the smooth, gentle, underrated animations on scroll. Just enough to make you browse and say “Wow, that’s kinda nice.” So today that is my goal. The funniest thing I realized is that I "love on" everyone else’s site, but my previous site was NOT EVEN animated. So, does that make this digital business self-care?

Before I delve in too much, I am going to give myself a 30-minute time block to find inspiration. I will start on dribbble.com. I found this example and this one from Dribbble and then after googling some more, I did not really find inspiration. This may be a fun blog post or mini-project for another day.

After this research time, I spent 30 minutes animating most of my headings to gently swipe up after they come into view. I also added a delay on the main top (above the fold area) so that the headings and text would cascade in. Then I had to pause and do 30 more minutes of bug fixing for desktops larger than mine. Above 2000px wide, these are the kinds of things I was seeing:

Then after 50 minutes of more animation time, I have animated EVERY SINGLE page of my site. I hope it makes it feel “juicy” as I hear it should be called. According to this article “adding juice” is the right term 😂.

Send to my Actual Domain

We connected our Godaddy domain with Vercel using nameservers and it only took 20 minutes with help. I did have my Husband walk me through this just to make it easier. But, if you want to follow along and need a little more help, this article is where I would start.

Check Links within Blogs Referencing Other Posts

This took 15 minutes. I just went into each Google Document and if I referenced blog Number X, then I reference https://heathervanderdys.com/blog/X.

Wrap Up

I also disconnected my Square Space run website, leaving just the shop up and running, and I linked the GoDaddy Business page [10 MIN] to the new custom-built home page.  I also spent 20 minutes fixing some bugs and another 25 minutes on SEO and performance. I ran a Lighthouse score of 61% - 91% - 91% - 100%. After that little bit of time, my final scores were: 75% - 100% - 95% - 100%. 31 hours! Wow, that is a lot of work and was totally worth it.

Top three things I learned:

  1. I learned that I like and do not love coding. I can do this as a hobby, but much prefer to stick with the UI/UX, design and product/project design.
  2. Animate.css is a joy to work with for easy animations
  3. I should charge more for our projects, or at least track the time better. There is no way I would have looked at a three-page, simple, static site, and expected it to take 30+ hours of work.