Portfolio Website
Project Description
Okay, this may seem a little redundant, but i just had to add it to the list. This is my second portfolio website, except this time, it was built with Nextjs. This was a tough one and I enjoyed every single process. I learned quite a lot on this one, from hooks to react libraries, animations and CMS. Took me a while to complete, but yeah it was worth getting to grips with it. Thanks to ChakraUI and Framer Motion, I was able to style and animate elements painlessly and seamlessly. The data is managed by one of the best available headless cms, Sanity.
Stack:
NextJsEmailJsChakra UIFramer MotionSanityLibraries:
Chakra UIFramer MotionReact Vertical Timeline ComponentReact Animated CursorNProgressGrocCode:
RepositoryLive:
LiveDesign Process
I heard about ChakraUi and thought to give it a shot. With Chakra, everything seemed possible. It is a component library that gives you the building blocks to build react applications, giving you easily customizable and predefined comonents to match your needs. Animations and interactions were added with Framer Motion. I used a couple of other packages to ease and speed things up. This project was built with NextJs
Challenges
It was my first time working with Chakra and so it took me a while to wrap my head around it. I also faced some challenges with framer motion, it wasn't easy animating. This project took longer than expected but in the end it was all fun.
Future Improvements
I took a litle dive into 3d animations with libraries like ThreeJs, VantaJs and Spline3d because i wanted a really cool background animations and interactivity, but it all seemed difficult. I surely do hope i'll get to add one of them in the nearest future. I'll likely add some parallax effects to the pages as well.