Skip to content

🏑 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.

License

Notifications You must be signed in to change notification settings

w3bdesign/dfweb-v4

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

cypress Codacy Badge codecov Maintainability Quality Gate Status

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

https://www.dfweb.no/

Frontend (Next.js)

Frontend Image


Backend (Sanity headless CMS)

Backend Image

Google Lighthouse

image

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

About

🏑 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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published