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: 4 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
• Created: 2021-12-09T02:32:33.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-13T14:26:27.000Z (10 months ago)
• Last Synced: 2024-04-14T01:51:04.177Z (10 months ago)
• Topics: chromatic, circleci, cypress, framer-motion, jest, nextjs, playwright, portfolio, react, sanity, storybook, tailwind, typescript
• Language: TypeScript
• Homepage: https://www.dfweb.no
• Size: 46.3 MB
• Stars: 19
• Watchers: 3
• Forks: 6
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/129bf1165c3a455fadb43ddf5f67e1bd)](https://www.codacy.com/gh/w3bdesign/dfweb-v3/dashboard)

[![codecov](https://codecov.io/gh/w3bdesign/dfweb-v3/branch/master/graph/badge.svg?token=VML3KNGO0N)](https://codecov.io/gh/w3bdesign/dfweb-v3)

[![Maintainability](https://api.codeclimate.com/v1/badges/33332dce96e1dedcf0b7/maintainability)](https://codeclimate.com/github/w3bdesign/dfweb-v3/maintainability)

[![CodeFactor](https://www.codefactor.io/repository/github/w3bdesign/dfweb-v3/badge)](https://www.codefactor.io/repository/github/w3bdesign/dfweb-v3)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=w3bdesign_dfweb-v3&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=w3bdesign_dfweb-v3)

# Dfweb.no Portfolio Version 3

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

## Live URL: 

> ## 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