Business Site
Introduction
My current business website is a helpful way for me to demonstrate my development skills without infringing on company NDAs or other vulnerable company information. I can openly share my techniques, technologies, and code, offering a detailed look at the work I have completed.
My business site has taken many forms over the years and used a variety of technologies. Currently, the site is:
- Built on tools like Typescript, ESLint, Prettier, and lint-staged
- Written in ReactJS
- Following the Gatsby framework for page generation and data fetching (GraphQL)
- Using Gatsby Functions for backend actions
- Connected to Sanity.io as a content management system (CMS)
Design
I do not have a design background. However, I enjoy writing code and building, which is not to say I am opposed to designing, but I liken it to using Typescript.
When designing in Figma, I thought, why am I not writing code? I could be designing and coding at the same time. I like to compare this line of thinking to Typescript because frontend developers are sometimes adverse to Typescript thinking it will slow them down—in a way, it does. However, that time pays off in the long run in fewer bugs, faster development, and a better product.
Similarly, having a finished design in hand saves time because I'm not tweaking components, colors, layouts, spacing, etc., while developing. Arguably, I'm still spending the same time designing and creating, but that changes if someone else is doing the designing.
99Designs and Figma
To enhance the look of my site, I hired a developer on 99Designs and gave him some guidelines on what I wanted.
He quickly developed the first version. But then, we had many back and forths where I asked for changes, and he graciously made them.
Unfortunately, once completed, I could not take his designs directly into Figma, but after converting them to a compatible file, I could.
Once in Figma, I was ready to start developing!
Development
Having the colors, layout, and spacing figured out is incredibly helpful before developing.
Furthermore, I used the React component design library, Material-UI (MUI), to speed up the process and make the site more consistent. I created a theme with MUI that could apply styles across standard components. These styles followed the guidelines set by the design document.
After completing the design portions, I could focus on the functional aspects of paginating the blog and hooking up the forms to Gatsby Functions.
Gatsby Functions
Gatsby is a good fit for the website for two reasons:
- Page speed
- Functions
My site only requires a few backend functions for:
- contacting
- subscribing
Each function uses an email service provider, making their development even more straightforward.
On Github, I shared a gist showing the code for the subscribe function. However, the code was when I hosted the site on Netlify, not Gatsby Cloud, so there have been a few changes.
Next, I created a contact form that I use in multiple places on the site. The following gist shows the backend Gatsby Function, the React contact form, and the custom useReducer hook created to bundle form state.
Performance
After completing the site and deploying, I wanted to check my Lighthouse scores.
Surprisingly, I had some serious performance issues on my index page. For example, my background and images needed a few tweaks. Similarly, I had some minor accessibility concerns that I overlooked in development.
After adjusting my layout background and using MUI's default exports instead of named exports, I had the scores for the index page knocking on the door of perfection.
The other page I looked at was one of the individual article pages in the blog. My blog is important to me, and I think it's cool that people can find my articles and read them. Some essential scoring aspects on Google (SEO, performance, accessibility) are in the Lighthouse test.
The individual blog pages were in much better shape than the index page, only needing a minor accessibility tweak. After deploying that change, the scores came back satisfactory.
Conclusion
My site is in a better place. It looks better and performs better. Although, the most crucial test to judge a project by, in my opinion, is whether I am proud of the work that I did.
I have good instincts when working on a project that informs me whether I'm doing the job the right way. As for my business site, I felt I took the necessary steps to build something I could show off.
