Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/w3bdesign/dfweb-v4
🏡 DFWeb personal portfolio version 4 with Next.js (App router), Sanity.io, React Hook Form, Motion, Ladle, Tailwind CSS, Cypress, Playwright and more. 100% test coverage. 100% typescript.
https://github.com/w3bdesign/dfweb-v4
circleci cypress jest ladle matrix motion nextjs portfolio react sanity tailwindcss typescript
Last synced: 7 days ago
JSON representation
🏡 DFWeb personal portfolio version 4 with Next.js (App router), Sanity.io, React Hook Form, Motion, Ladle, Tailwind CSS, Cypress, Playwright and more. 100% test coverage. 100% typescript.
- Host: GitHub
- URL: https://github.com/w3bdesign/dfweb-v4
- Owner: w3bdesign
- License: mit
- Created: 2024-05-25T23:23:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-10T02:11:49.000Z (12 days ago)
- Last Synced: 2024-12-10T03:19:06.546Z (12 days ago)
- Topics: circleci, cypress, jest, ladle, matrix, motion, nextjs, portfolio, react, sanity, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://www.dfweb.no
- Size: 10.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/w3bdesign/dfweb-v4/actions/workflows/cypress.yml)
[](https://app.codacy.com/gh/w3bdesign/dfweb-v4/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
[](https://codecov.io/gh/w3bdesign/dfweb-v4)
[](https://codeclimate.com/github/w3bdesign/dfweb-v4/maintainability)
[](https://sonarcloud.io/summary/new_code?id=w3bdesign_dfweb-v4)
# Dfweb.no Portfolio Version 4
Fourth version of my personal portfolio website with Next.js, Motion, Sanity.io and Typescript.
## Table of Contents
- [Live URL](#live-url)
- [Frontend](#frontend)
- [Backend](#backend)
- [Google Lighthouse](#google-lighthouse)
- [Features](#features)
- [General](#general)
- [Design](#design)
- [Accessibility](#accessibility)
- [Devops and Code quality](#devops-and-code-quality)
## Live URL
## Frontend (Next.js)
* * *
## Backend (Sanity headless CMS)
* * *
## Google Lighthouse
## Features
### General
- 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 15 with Typescript and App router
- Sanity headless cms for all of the content, projects and navigation links
- Ladle for component documentation
- Animations with Motion
- React testing library for unit testing
- Cypress for E2E testing
- Playwright for cross-browser 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
### Design
- Fully responsive design tested on all devices
- React Icons for project icons
- Tailwind CSS for styling
- Animated reusable input fields
- Matrix-inspired animated cursor with dynamic trailing effect with fading Matrix characters
### Accessibility
- WCAG accessibility tested
- Accessibility testing with Cypress Axe
- Builds will fail if any a11y errors are found
### Devops and Code quality
- 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 for cross-browser compatibility, integrated with Github actions
- Unit testing with Jest and React Testing Library integrated with CircleCI
- Test coverage setup with Codecov
- 100% test coverage with Jest and React testing library
- AI-powered commit message generation following Conventional Commits with gitmojis