Sabrina Andres Art Advisory
Sabrina Andres Art Advisory is a website I designed and developed for my wife’s Art Advisory Business. The site functions as a portfolio and blog to showcase Sabrina’s background, services, past work, and artist interviews. The site provides Sabrina with the ability to create blog posts and projects pages dynamically with Contentful, a headless CMS platform.
Individually Designed and Developed
- Gatsby
- Contentful
- Netlify
- Instagram Graph API
- Mailchimp API
Project Purpose and Goals
Sabrina had recently started her own art advisory business and needed a professional website that would allow her to share her work, highlight artists, share posts from her instagram, and make blog posts.
The goal of the project was to give Sabrina a completely custom site that represented her business well, and provided clients with information about her background and her art placements, all while being performant, intuitive and CMS editable.
Tech Stack: What and Why?
I chose to develop this project with Gatsby as it provides lightning fast static builds that harness the ease of programming of React. I used Emotion Css to scope my CSS to each individual component, along with a small amount of global CSS.
For the Backend I decided go with Contentful as a Headless CMS as it has great compatibility with Gatsby. There is a plugin that allows you to access Contentful data with GraphQL queries. I deployed the site to Netlify because it too offers great ease of use with this stack and allows for continuous integration, with rebuilds and redeploys when Sabrina makes a new posts on Instagram, updates content on her CMS, or when I push new code to GitHub.
The site was also built with the following libraries, features and APIs: Loadable Components, Sass, Recaptcha, Progressive Web App, Instagram Graph API, Mail Chimp API.
Challenges and Resolutions
Every project has its challenges, one I faced was figuring out a way to get the custom animation to show only on the first visit. The animation is a nice presentation add on, and allows the whole home page and other resources to be loaded in the background on the first visit. The site uses caching for subsequent loads, so having the animation run is really only useful once.
I solved the issue by using cookies and React Context to globalize the visited state and prevent the animation from loading everytime the home page was loaded, even when new sessions were started.
Key Takeaways
This project was my first time working with this tech stack and it proved difficult at times but I learned a ton of useful things. It was the first project where I used React Hooks, Styled Components, GraphQL, Headless CMS and multiple web hooks for deployment. Getting more comfortable with all of the different Hooks available in React was my biggest lesson, and it is a great alternative to using class based components in certain use cases.
Let's Work Together
Whether you have a question, would like to work together, or just want to connect, feel free to reach out.
alex@aandres.dev