Portfolio Site built with Vite, React, TailwindCSS, and GraphQL

This is a build for my daughter's portfolio website.

Base Requirements

• Use React library
• Use Vite build tool
• Use TailwindCSS to optimize CSS for production
• Ensure it is responsive using REM as scaling unit
• Release all images in optimal formats such as webp
• Employ Contentful and GraphQL for headless CMS capabilities
• Introduce Redux

UX Requirements

• Include typographic animations based on route
• Build interactive filter mechanism for viewing specific artwork categories

Experience Target

• Visitor will see horizontal title animated fade-in if landing page is Home.
• If visitor navigates from Home to other pages, visitor will see title animate fade-out.
• Visitor will click on Portfolio nav link and the Gallery component will render
• Visitor will create filters on an inline form. On change, the Gallery will re-organize to show matches to that filter.
• Visitor will click on a work and the image will scale up in a modal to reveal additional information about the work

Todos

• Ensure modal overlay stays fixed where scroll affects only active modal and not page content.
• Fix responsiveness of modal on mobile screens