Sanity-React-Portfolio is a portfolio tutorial by Javascript Mastery. It is made using sanity and react.
Sanity React Portfolio is a highly responsive and visually engaging portfolio that features a dynamic hero section with captivating animations created with Framer Motion. In addition, it leverages React-Type-Animation to provide an additional layer of functionality. The portfolio's sections are thoughtfully designed and wrapped with a customized higher-order component to ensure a visually appealing experience with seamless transitions. The featured project section includes intuitive button filters that enable users to easily sort and browse projects by specific categories. Lastly, the fully functioning contact section accepts user messages and stores them in the Sanity CMS, ensuring a streamlined and user-friendly experience.
To give my portfolio a unique and personalized touch, I decided to customize the logo using a text logo designed with a color gradient. This not only made the logo stand out but also gave it a modern and sleek look that aligns with my personal brand.
In addition, I revamped the header section by replacing it with a React type animation that adds a dynamic element to the page. This transition is not only visually appealing but also helps to capture the attention of the viewer and keep them engaged.
To simplify the user experience, I decided to remove the React tooltip and replaced it with a static display of my mini CV. This provides a clear and easily accessible way of showcasing my qualifications and achievements without requiring the user to perform any additional clicks or interactions. As an added accessibility, I also added a download CV button that downloads a PDF file of my current CV.
I also utilized Vite, a build tool that offers fast and efficient development, and updated the Sanity CMS to Sanity Studio v3.
Please don't forget to leave a ⭐🙏🏻!
Separately on the client and server directory, you can run:
Installs the required package dependencies
Runs the client in the development mode.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.