Dfweb.no Portfolio Version 4

Fourth version of my personal portfolio website with Next.js, Framer Motion, Sanity.io and Typescript.

Live URL: https://www.dfweb.no

Frontend

Backend

Google Lighthouse

Features

General

• Clean, modern, responsive and Matrix-inspired design
• Matrix canvas rain effect on front page
• Next.js 14 with Typescript and App router
• Sanity.io for fetching project information and frontpage text
• Ladle for component documentation
• Animations with Framer Motion
• React testing library for unit testing
• Cypress for E2E testing
• Contact form with Email.js
• 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
• Animated reusable input fields

Accessibility

• WCAG accessibility tested
• Accessibility testing with Cypress Axe

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
• 97% test coverage with Jest and React testing library