My Portfolio

Project Overview

In creating developedbychris.com, I decided to use this project as an additional opportunity to challenge myself. In my prior experience studying React, I had read about the popularity of Gatsby but hadn't worked with it. I thought this would be a good opportunity to try it out!

I began by creating a couple of prototypes using Webflow with my focus on making a site that was simple and highlighted my skills and work. I then moved on to reading through documentation to become familiar with Gatsby. The documentation was very helpful, and I was able to get the core of my site up and running in a short amount of time. While the initial setup was straight-forward, I had not used GraphQL previously and had to do some additional reading to get the functionality I desired—namely in accessing information from the Github API, which provided a couple of roadblocks. However, after a couple rounds of debugging I was happy to have everything working properly. Because of the relative ease I had on this project, I plan on using Gatsby again on a more complex program to see if it's a tool I will use moving forward.

With the initial setup being complete, I decided to find a second area where I could try something new. I knew I wanted to add some animations to my site, so I searched for some popular tools and came across GreenSock Animation Platform (GSAP). The fact that this was JavaScript-based animation intrigued me, and as I looked through their documentation, I began finding multiple ideas I wanted to try out. I was especially intrigued by the ScrollTrigger plugin which allows you to, as the name would indicate, trigger animations based on a user scrolling. You can see this in action with the underlining in the "About" section and the pinning of the page in the "Development Principles" section.

While design is not necessarily my forte, I'm happy with the way the portfolio turned out and feel accomplished in having a project where I was able to successfully incorporate two new tools. I hope you enjoy it!

Technologies

  • gatsby
  • react
  • gsap
  • styled-components

View the Code