Site Revamp with Chakra and Gatsby

1 minute to read

04.09.2020

Gatsby
Chakra UI

Introducing my new personal site built using Chakra UI and Gatsby!

Background

The last personal website I created was done in a mad rush right before applying for jobs. It was my senior year of college and I wanted to get something out the door. I have since outgrown what that site can offer.

Motivation

I am interested in writing more frequently and therefore I need more of a publication tool. Since I already use React at work, and have been spending a lot of time learning Chakra UI, Gatsby seemed like the natural fit for the task.

I wanted a custom looking site without the hassle of building out everything from scratch. Nobody likes detailing out a Button component with all the various states for every project. Chakra provides wonderful defaults and a powerful customization API thanks to its internal use of styled-system.

My Experience

Overall the experience has been wonderful. Gatsby and Chakra work together wonderfully. One gripe I have with many component libraries is that they force you to modify the theme a lot in order to get reasonable looking results. I don't want my site to scream Bootstrap! or MaterialUI! at every incoming visitor.

I was able to take the stock Chakra UI theme and I only had to change the fonts and breakpoints. Neat!

Another tool I really enjoyed using was react-icons. This made it easy to pick and choose from a bunch of different icon sets. I made heavy use of it alongside the Chakra Icon and IconButton components.

Example of react-icons and chakra-ui

import { FiStar } from "react-icons/fi"

...
<Icon as={FiStar} color="yellow.500" />
<IconButton icon={FiStar} variant='ghost' variantColor='yellow' />

What's next?

This is not the end of this project. There are still some pretty large holes to fill in:

  • Add a More Posts link to the homepage. (Right now there's only room for 4 posts total, yikes!)
  • Allow filtering by tag. Right now clicking on them does nothing.
  • Perform any SEO at all
  • Look into implementing some better "social cards". The little preview images/metadata that appears when you link to your site from twitter/facebook etc.
  • Next/previous buttons on each post
  • Search (???)

Let me know on twitter if you're interested in learning more about Chakra UI. I'd be happy to put together some more information on how I've been successful with the tool.

Other Articles You May Enjoy

Reusability in React through Composition

How to build truly reusable react components. Learn to refactor existing problematic code into this simple pattern.

Read more3 min. read

Hello!

About me
I'm Adrian Aleixandre, an engineer and designer in Fargo, ND. Right now I'm building web apps at Bushel.

My vision
I am passionate about building UX-research backed products in autonomous cross-functional teams.

Interests
My favorite technical tools are React, Elm, and Elixir. I love me a steaming latte or a milk stout.

Contact
Drop me a line at adrian.aleixandre@gmail.com or on Twitter @_aaleixandre

Adrian Aleixandre • 2020

Made with in Fargo, ND