Freelance project done for a notary business in Washington.
Introduction
For this freelance project, I had to create a website for a small notary business in Washington state. The project called for a three-page site to show potential customers what is being offered, who is running the business, and how to reach out for services. After speaking with the client I decided to use some very cost-effective tech that would keep her business site free to run and maintain.
What was used
Due to budget constraints, I decided to use NetlifyCMS, Netlify, and Gatsby. This is a highly cost-effective combination of tech that leads to no overhead cost for CMS and hosting. For UI and UX I used styled-components and Framer Motion. I have found that these libraries synergize very well together and lead to a site that feels more alive and interactive to the user.
Gatsby
Gatbsy has been my go-to for client sites, because of its diverse collection of plugins that are available. While coding out most of these features wouldn't be the most difficult having everything prebuilt comes in handy when working within a budget. Gatbsy also integrates very well with any git and markdown based CMS which made querying for content painless.
NetlifyCMS and Netlify
I have used NetlifyCMS before in a previous portfolio and found that using a git based CMS has great advantages. For this project specifically, I found this choice was likely not right for the client. While NetlifyCMS's interface isn't difficult to use for the developer making the site the client found it difficult to use and we ran into several issues when it came to ease of use. As I'm sure you can imagine based on name alone, NetlifyCMS and Netlify are greatly synergistic and easy to set up for developers. I chose Netlify for my hosting platform because they have a very generous free tier that my client could take advantage of. Netlify also has built-in continuous integration with Gatsby which makes pushing updates to the site seamless.
Styled-Components
Styled-components has been a great boost to my productivity when developing UI heavy sites. Not having to worry about CSS/SCSS imports has made creating consistent styles much easier. The primary reason I chose to use this library is due to the SCSS style of writing CSS. Creating components that have nested styles makes working with markdown files much easier as you can write all of your substyles in your component and set the inner HTML to be your content.
Framer Motion
Being able to use Framer Motion for animations made working with styled-components much easier. The biggest roadblock for me using styled-components was the difficult use of animations. Creating a styled motion component made it easy to create aesthetically appealing elements with smooth spring animations to grab the user's attention.
Conclusion
While all of the libraries used in their project were synergistic and led to a great developer experience, I found that the customer experience definitely lacked. Having to walk through every aspect of how the CMS works were frustrating for both of us at times and if I had the opportunity today I would have taken a different approach. Using a CMS such as DatoCMS or WordPress would have been much more of a benefit for both of us. I really enjoy the styled-components and Framer Motion workflow. There is certainly downsides when it comes to the speed at which you can develop with these libraries in comparison to a CSS framework like Tailwind CSS, but I still find this to be my go-to when animations are crucial to the brand.
I hope you enjoyed the breakdown for HC Notary and I encourage you to check out the site to see how I have grown as a developer. If you have anything you would like to add send me a message through my contact button or email me at ethan@eolsen.dev. Thank you for reading and keep on coding!