w3bdesign / dfweb-v3

🏡 DFWeb personal portfolio version 3 with Next.js, Sanity.io, Framer Motion, Storybook, Tailwind CSS, Cypress, Playwright and more. 98% test coverage.

MIT License

20 stars 6 forks source link

chromatic circleci cypress framer-motion jest nextjs playwright portfolio react sanity storybook tailwind typescript

readme

IMPORTANT

This project has been replaced by the newer and actively maintained https://github.com/w3bdesign/dfweb-v4

Dfweb.no Portfolio Version 3

Third version of my portfolio website with Next.js, Sanity.io and Typescript.

Frontend

Backend

Google Lighthouse

Features

General

Next.js 14 with Typescript
Sanity.io for fetching project information and frontpage text
Storybook for component documentation
Chromatic for visual testing of Storybook components
Animations with Framer Motion
React testing library for unit testing
Cypress for E2E testing
Filter project display
Contact form with Email.js
Display CV with React-PDF
Polymorphic components
Automatic sitemap generation (see /api/siteMapGenerator.ts)
Google rich results for each individual page
100% score in Google Lighthouse

Design

Fully responsive design tested on all devices
React Icons for project icons
Tailwind CSS for styling
Google fonts with Lato (optimized with @next/font for Next.js)
Animated reusable input fields

Accessibility

WCAG accessibility tested
Accessibility testing with Cypress Axe
Accessibility testing with Axe in Storybook for each component

Devops / Code quality

Continuous Integration with CircleCI
CircleCI will warn before deploy if tests fail (setup for React testing library, Cypress and Chromatic)
Code quality analysis with Codacy, Sonarcloud, LGTM and Codeclimate
E2E testing with Cypress integrated with CircleCI
E2E testing with Playwright integrated with Github actions
Unit testing with Jest and React Testing Library integrated with CircleCI
Test coverage setup with Codecov
98% test coverage with Jest and React testing library

TODO

React Hook Form