Portfolio Website

This is my portfolio website.

🚀 Quick Start

Prerequisites

• Node.js (v18.0.0 or higher)
• pnpm (recommended package manager)
• Git

Environment Setup

1. Clone the repository

git clone https://github.com/jhenbertgit/next-portfolio.git
cd next-portfolio

2. Install dependencies

pnpm install

Note: This project uses pnpm as the package manager. If you don't have pnpm installed, run npm install -g pnpm

3. Set up environment variables

cp .env.example .env.local

Edit .env.local with your configuration values.

4. Start development server

pnpm dev

The application will be available at http://localhost:3000

🛠 Development Guide

Project Structure

├── public/              # Static files
├── src/
│   ├── app/             # Next.js 13+ App Router
│   │   ├── api/         # API routes
│   │   ├── globals.css  # Global styles
│   │   ├── layout.tsx   # Layout component
│   │   ├── page.tsx     # Page component
│   ├── components/      # Shared components
│   ├── lib/             # Utility functions

Key Technologies

• Next.js 13+
• TypeScript
• Tailwind CSS

Coding Standards

• Use TypeScript for type safety
• Follow ESLint configuration
• Use Prettier for code formatting
• Follow component naming convention: PascalCase.tsx

Common Commands

# Development
pnpm dev            # Start development server

# Testing - Unit Tests
pnpm test              # Run unit tests
pnpm test:watch        # Run unit tests in watch mode
pnpm test:coverage     # Run unit tests with coverage

# Testing - E2E Tests
pnpm test:e2e          # Run E2E tests (headless)
pnpm test:e2e:ui       # Run E2E tests with UI (recommended)
pnpm test:e2e:headed   # Run E2E tests in headed mode
pnpm test:e2e:debug    # Debug E2E tests
pnpm test:e2e:report   # View E2E test report

# Linting
pnpm lint          # Run ESLint
pnpm format        # Run Prettier

# Building
pnpm build         # Create production build
pnpm start         # Start production server

Git Workflow

1. Create feature branch from main

git checkout -b feature/your-feature-name

2. Make your changes and commit using conventional commits

git commit -m "feat: add new feature"
git commit -m "fix: resolve bug issue"

3. Push changes and create Pull Request

git push origin feature/your-feature-name

🔧 Configuration

Environment Variables

Required environment variables:

RESEND_API_KEY=
NEXT_PUBLIC_FROM_EMAIL=
NEXT_PUBLIC_TO_EMAIL=

API Integration

• API documentation available at resend

🧪 Testing

This project includes comprehensive testing coverage with both unit and end-to-end tests.

Unit Tests (Jest + React Testing Library)

• 227+ test cases across 18 test files
• Complete coverage of components, hooks, utilities, and API routes
• Run with: pnpm test

E2E Tests (Playwright)

• 120+ test cases across 7 specification files
• Multi-browser testing (Chromium, Firefox, WebKit)
• Mobile responsiveness testing (iPhone, Pixel, Samsung)
• Accessibility compliance (WCAG 2.1 AA)
• Run with: pnpm test:e2e:ui

First-Time Setup for E2E Tests

# Install Playwright browsers (one-time setup)
pnpm exec playwright install

Quick Testing Guide

# Unit tests
pnpm test                    # Run all unit tests
pnpm test:watch             # Watch mode
pnpm test:coverage          # With coverage report

# E2E tests
pnpm test:e2e:ui            # UI mode (recommended for development)
pnpm test:e2e               # Headless mode (CI/CD)
pnpm test:e2e:debug         # Debug specific tests
pnpm test:e2e:report        # View HTML report

Test Coverage

Type	Files	Tests	Coverage
Unit Tests	18	227+	Components, Hooks, Utils, API
E2E Tests	7	120+	Navigation, Forms, Mobile, A11y

Testing Documentation

For detailed testing information, see:

• Testing Quick Start Guide - Quick setup and common commands
• E2E Test Report - Comprehensive E2E test coverage
• E2E Testing Summary - Executive summary
• E2E Documentation - Detailed E2E testing guide

🐛 Troubleshooting

Common issues and solutions:

1. Port 3000 already in use

# On Unix/Mac
kill -9 $(lsof -t -i:3000)

# Or run on different port
pnpm dev --port 3001

2. Node modules issues

rm -rf node_modules
rm pnpm-lock.yaml
pnpm install

3. E2E tests: Browser not installed

pnpm exec playwright install

4. E2E tests: Tests timing out

Increase timeout in playwright.config.ts:

use: {
  timeout: 30000, // 30 seconds per test
}

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.