Fourth version of my personal portfolio website with Next.js, Framer Motion, Sanity.io and Typescript.
- Clean, modern, responsive and Matrix-inspired design
- The application is 100% typescript
- Matrix canvas rain effect on front page
- Custom 404 page with Matrix rain effect
- Next.js 14 with Typescript and App router
- Sanity headless cms for all of the content, projects and navigation links
- Ladle for component documentation
- Animations with Framer Motion
- React testing library for unit testing
- Cypress for E2E testing
- Contact form with Email.js
- Polymorphic components
- Automatic sitemap generation (see /api/siteMapGenerator.ts)
- Google rich results for each individual page
- 100% / 100% / 100% / 100% score in Google Lighthouse
- React Hook Form with Typescript and Zod for efficient form handling and validation
- Reusable GenericForm component for easy form creation and management
- Error handling with react-error-boundary for improved user experience and easier debugging
- Fully responsive design tested on all devices
- React Icons for project icons
- Tailwind CSS for styling
- Animated reusable input fields
- WCAG accessibility tested
- Accessibility testing with Cypress Axe
- Builds will fail if any a11y errors are found
- Continuous Integration with CircleCI
- CircleCI will warn before deploy if tests fail (setup for React testing library)
- Github action workflow for Cypress
- Code quality analysis with Codacy, Sonarcloud and Codeclimate
- E2E testing with Cypress integrated with Github actions
- E2E testing with Playwright integrated with Github actions
- Unit testing with Jest and React Testing Library integrated with CircleCI
- Test coverage setup with Codecov
- 99% test coverage with Jest and React testing library