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
• Frontend
• Backend
• Google Lighthouse
• Features
  • General
  • Design
  • Accessibility
  • Devops and Code quality
  • Testing Standards

Live URL

https://www.dfweb.no/

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
  • Server Components implementation for improved performance
  • Streaming with Suspense boundaries
  • Automatic static optimization with revalidation
  • Server-side data fetching with proper error handling
• React 19
• 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
• Automated Lighthouse CI testing integrated with GitHub Actions
• 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
• Automated performance monitoring with Lighthouse CI
  • Performance, accessibility, best practices, and SEO checks on every PR
  • Configurable thresholds for quality metrics
  • Both desktop and performance-focused testing

Testing Standards

• Enforced AAA (Arrange-Act-Assert) pattern in all test files
  • Each test must include the following comments:

    // Arrange - Set up test data and conditions
    // Act - Perform the action being tested
    // Assert - Verify the results

  • This pattern ensures:
    • Clear test structure and readability
    • Consistent test organization across the codebase
    • Easy identification of test setup, execution, and verification
    • Simplified test maintenance and debugging
  • Automated validation through custom ESLint rules
  • Tests will fail if AAA pattern is not followed