SunsolveMD Learn Platform
Contributions
- Sanity CMS configuration
- Shopify Oxygen hosting configuration
- Front-End Web Development using React, Typescript, TailwindCSS, Shopify Hydrogen, and groq
- Interaction Design with SVG and CSS Filters
Role
As Pearlfisher's creative technologist, my role was building a site based on the designs provided by our freelance UX/UI designer.
The first task was organizing the designs in Figma into data structures that could be easily viewed and edited by the client with Sanity CMS. This headless CMS enables a custom UI layout akin to Ghost for anyone without coding abilities to easily arrange, modify, and add new content to the website. The magic of Sanity is creating a custom CMS experience for the client specific to their kind of content.
Shopify Hydrogen, which is much like Next.js, is a Javascript meta-framework that allows for easy integration of React Typescript, Shopify data, and Sanity data all in one website. Built-in are several convenience hooks for routing, querying data via GraphQL and groq,
Hydrogen also operates with the Next.js style of server-side rendering, which affords better speeds for larger amounts of content.
On the creative side, I added several kinds of interactions for users to have a richer experience with the content. I used SVG and CSS filters, as they're native to the browser and don't require any external libraries. Server-side rendering proved difficult with GreenSock, which is a client-side only library. I implemented the interactive logo design laid out by my colleague using SVG and designed my own interactions that played with lighting and shadow.