nathanbrachotte.devDesign & Website DevelopmentAims at introducing myself and giving a glance at what I do. It uses Gatsby, Contentful, and Styled Component, slowly migrating to TailwindCSS.
Tools:
šŸ’…
project header

Context:

The goal was to give me a platform to share the things I do, the projects I've worked on, the blog posts or videos I appear in, or the endorsements I've received from my peers during my career.

I've designed the website and my logo to play with the pink/blue duality, with different shades of each.Ā 

Challenge:

My goal was to keep the website clean and tidy while also interactive. That's why most elements move or reach to mouse hover to reach this "touch and feel" sensation.

It also needed to be fully responsive and handle many different data structures.

My top priorities were:

  • Design a recognizable logo that stands out.

  • Build a website that stands out by its colorful scheme while remaining easily browsable.

  • Good SEO and instant loading times.Ā 

Ā 

Solution:

I found a template website usingĀ Gatsby, linked by Contentful CMS, to host the data. Contentful allows me to update assets and content on the fly. I'm hosting the website on Netlify and using Webhooks; therefore, it is automatically built and deployed on each change from the Github repo or CMS.

I've built the website usingĀ Styled ComponentsĀ andĀ Rebass, which provides a set of primitive components from which you can iterate. I was happy to try Styled Components as it is pretty popular in the industry. I found it to be powerful yet very lengthy when you want to write a fully responsive and complex website. It makes the number of components you write proliferate. Therefore, I've started migrating toĀ TailwindCSS. It is a total blast to use, super-efficient in how much CSS is sent to the browser and helps keep the code much more colocated.Ā 

Ā 

Feature Highlights:

  • My own brand, my own color scheme šŸ˜.

  • Animations for a "lively" feeling.

  • I can update assets and texts and trigger a new version on the fly.

  • It gives a good overview of all the things I do.Ā