https://github.com/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.
https://github.com/w3bdesign/dfweb-v3
chromatic circleci cypress framer-motion jest nextjs playwright portfolio react sanity storybook tailwind typescript
Last synced: 3 months ago
JSON representation
🏡 DFWeb personal portfolio version 3 with Next.js, Sanity.io, Framer Motion, Storybook, Tailwind CSS, Cypress, Playwright and more. 98% test coverage.
- Host: GitHub
- URL: https://github.com/w3bdesign/dfweb-v3
- Owner: w3bdesign
- License: mit
- Archived: true
- Created: 2021-12-09T02:32:33.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-04T15:16:33.000Z (11 months ago)
- Last Synced: 2025-06-21T23:35:28.694Z (3 months ago)
- Topics: chromatic, circleci, cypress, framer-motion, jest, nextjs, playwright, portfolio, react, sanity, storybook, tailwind, typescript
- Language: TypeScript
- Homepage:
- Size: 47.4 MB
- Stars: 22
- Watchers: 2
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
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