In this project, I wanted to create a simple, flexible, one-page site that will be used in the real world by my client. It is my first time exploring Sanity.io in order to manage my content and update data outside the localhost, and without distrubing the front end styling.
I've also shown use of functional components, SCSS and Flex, and animations with Framer motion. The site also has mobile devices in mind, and recomendations for optimizations are welcome! Check out my profile on github to contact me.
Check out the deployed production of this site on Netlify
This project was started with Create React App.
The backend is powered by Sanity.io
@sanity/client
framer-motion
react-icons
sass
react-vertical-timeline-component
react-slick
slick-carousel
One insight is that my main browser is a fork of Firefox, and I made fixes to the app much in advance in order to work well on Chrome. So, there's a possibility of lingering issues between browsers.
-
Sanity image gallery schema, code from Jan Hoogeveen.
-
Tilt Card Framer motion animation. Animation is optimized for browser performance. Element has drag animation for mobile use.
-
React vertical timeline used in work experience section.
-
Gallery uses React Slick for a responsive carousel component. Took a lot of fiddling around to see if it looked good on smaller displays.
-
Site icon from icon-icons.com
rxc
edf
exd
rfaceIt's important to stay up to date with any changes to Sanity.io, they might find it necessary to make breaking changes.
-
How to handle versioning in the API - API versioning
-
Looking for the latest changes? Changelog
cd frontend_react
npm startThen open http://localhost:3000/ to see the app.
I'm not offering a license or anything. My backend data and changes to it can only be modified by myself.
um
Copyright (C) 2024 Tiare Mendez