This is the website for writer Richard Catty.
Client side the application has been built with Nextjs and TypeScript. When the user first lands on the home page they are welcomed with a paragraph being typed out using React Typist.
The hamburger menu opens the side navigation, which appears from the right. The side nav and the hamburger menu are both animated with simple CSS transitions.
The social media icons on the home page take the user to their respective profiles, though the email icon opens a modal containing the contact email address. This is inserted into the DOM outwith the React application using a portal.
Each of the pages have their JSON content generated at build time using getStaticProps as the content changes infrequently. A web hook is being used to trigger a rebuild whenever changes are made in the CMS.
The CMS has been built with Sanity.io and has a GraphQL API. Client side data fetching is being done with Apollo Client.
On each page the user can hover over items.
When they hover, a card appears giving the user a preview. Clicking on Read More takes the user to the link.
Most of the links are web links navigating the user to a particular organisation or online article, though occasionally they are PDF articles which will load in the browser.
The majority of the styling has been done using Styled Components, though the hovering card which appears on each page and the home page icons are using Grommet UI.
