Preye's Portfolio
Project Description
UX designer portfolio website built with Nextjs, ChakraUI, Framer Motion and Graphcms. This is a side gig I got while working as a freelancer. It's a UIUX/Graphic Designer personal portfolio that showcases their works, from web app designs to branding designs
Stack:
Next.jsGraphcmsLibraries:
Next.jsGraphcmsChakra UIGraphql-requestFramer MotionCode:
RepositoryLive:
LiveDesign Process
Manually implementing changes on your website can labor-intensive and time-consuming, so I opted to use GraphCMS (a content management software) to handle everything. With GraphCMS blog starter template I was able to seamlessly manage content on my website. Combined with Chakra UI (a component library that gives you the building blocks you need to build your React applications) and Apollo client(a comprehensive state management library that enables you to fetch, cache, and modify application data, all while automatically updating your UI), building and managing a website could never be smoother. Other libraries such as PrismJs for syntax highlighting, framer motion for animation, react-multi-carousels for carousels amongst others were also used.
Challenges
One major challenge I faced was not having a complete customization of data returned from the cms. The Graphcms Rich Text Renderer is still a work in progress and so i had to find a way to solve some problems like the reading time and styling code blocks. Another challenge was working with Apollo Client as it was my first time using it.
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.