Website Nostalgia

There are days filled with thoughts of nostalgia.

Thoughts of childhood filled with playing kick the can, eating soft serve ice cream at the local 50’s style diner or running a pine tree over with the golf cart (that is a LONG story to tell… ask me about it in person).

Well this doesn’t relate to childhood but a website.

Soon after graduating from a coding bootcamp, I wanted to be courageous and build a website all on my own. After perusing Pinterest, free stock images and listening to classic rock… I came up with the idea with an author’s website promoting their book. At the time I must have been jamming to a lot of Janis Joplin because (as you can see) her famous song inspired my faux author’s book.

I can recall the original build process was quite fun and challenging. I didn’t have any guidelines to follow and help from others that knew the specific project. For the most part...I just had me, myself and I. Plus, I wanted to implement new tech like Sass and other open-source tools. Side note: just seeing something named Sass got me hooked... it is indeed awesome and sassy!

The overall end product I was pleased with. Was it perfect? Uh...nope. Did it function smoothly? Well, for the most part. Did I learn something? OH HECK YES! The fact that my code shipped was a big feat!

After a few high-fives from my husband and my dog, I called that project a day.

Fast-forward to today… website nostalgia.

Lately, I’ve been utilizing and loving JAM stack (aka: JavaScript, APIs, and Markup).

I wanted to continue on my “jamming” out learning and give Bobby McGee a face-lift. In addition, I wanted to begin to learn e-commerce development. The tech tools I decided: Gatsby.js, React, GraphQL, Emotion and Stripe for e-commerce.

For the website design, I wanted to continue my motif of minimalism. The older website loaded slow because it was very image heavy (stock and background images). Though text in the sections in the older version were clean, the areas surrounding the text looked quite busy. Lastly, the menu button was too small for mobile and the animations for the menu weren’t fluid. This site needs a design makeover!

To speed up page load, Gatsby.js came to the rescue! Most especially, Gatsby-Image! Gatsby-Image combines their image processing capabilities and image loading techniques to optimize images on your website. In layman's terms... your images will load with a nice blurred-in effect in the fastest way possible without disrupting the overall user experience. Not only gatsby-image helps with image loading but also image responsiveness. Making your images responsive is crucial in the development and design world. Thanks to gatsby-image, I was able to still incorporate many stock-images without over-bloating my website!

To add an element of fun, I added a Google Maps API to the website. It displays a map of the route Janis and Bobby traveled from LA to the Florida Keys. I created a map container component and added markers of their route to the map by running a loop of coordinates through the state. Now users can visually see their adventure!

Another fun but simple aspect to the website is animation. I added subtle animation on scroll to text throughout the website. Thanks to Sal.js, I can easily add these animations to my components. A sprinkle of animation here… and some there… animation everywhere!

I kept the overall layout styling to a minimum for sake of functionality. There is some layering of text and images especially for tablet, laptop and desktop. In addition, for dimensional effect I added a box-shadow on every image. Nothing too crazy but still aesthetically pleasing for the user.

Elements of interaction and accessibility improved with my re-design. I try to go beyond the typical elements you include for accessibility (like an alt tag to an image) and always strive for improvement. Some things I added are:

• The mobile navigation menu now fills more of the viewport for the user to see and easily interact with
• I added the text “Menu” adjacent to the hamburger menu icon
• When hovering over the social icons, a tool-tip appears with the name of the social media platform.
• For navigation and scrolling:
• • On laptops and larger devices
  • • When the user is on a page, the page title will be underlined that resides in the main navigation bar
  • On all devices
  • • There is a navigation menu in the footer
  • A “back to top” button appears on the Home page for users to quickly and easily go back to content towards the top of the page

E-commerce is huge nowadays and I wanted to dive into learning the development side of it. After researching different e-commerce platforms, I decided on Stripe. Stripe already seemed easy right out of the box to add to a website. In this instance, I only needed to add a button that would redirect to a Stripe checkout page. In order to make this happen, I needed to:

1. Register for a Stripe account
2. Load Stripe.js by installing it’s plugin in your project
3. Get a Stripe test key (in this case, use the publishable key for testing purposes)
4. Create a product and SKU (aka Me & Bobby McGee book)

5. Create a checkout component that loads Stripe and redirects to the checkout

   a. With a “success” and “cancel” URL

   b. Returning your styled button that on-click redirects to the checkout

6. Import the checkout button component to any page my heart desired

Voilá! You have e-commerce!

A moment of website nostalgia brought a wondrous journey of redesign and redevelopment. I traveled down familiar tech languages paths and also ventured out on unfamiliar paths too. The newer product definitely is an improvement, but is it perfect? Probably not. However, the lessons I’ve learned during this project are the most valuable and will shape me into a better developer and designer.

Hmmmm… I wonder what to reflect on next 🤔

Thanks for reading my friends! Pursue joy, hope and curiosity! ❤️

*To see the old website: click here!

*To see the NEW and IMPROVED website: click here!