Chris Haulmark Website - Technical Documentation

This website is built on Next.js 14 using TypeScript as the primary programming language. The application leverages the modern App Router architecture and incorporates several cutting-edge technologies for optimal performance and user experience.

The core foundation uses TailwindCSS for styling, with custom configurations for colors, typography, and responsive breakpoints. Framer Motion handles all animations throughout the site, creating smooth, engaging user interactions.

For backend functionality, the system uses Upstash Redis for rate limiting and data caching, while NodeMailer manages email communications through Gmail's SMTP services. The contact form implementation includes comprehensive validation, sanitization, and rate limiting to ensure security and prevent abuse.

Development environment setup uses Docker with a specific dev configuration that enables hot reloading and volume mounting for efficient development workflow. The production deployment uses a separate optimized Docker configuration focused on performance and security.

The application structure follows Next.js 14 conventions with the app directory containing all routes and API endpoints. Components are organized by feature area (biography, home, layout, shared) with clear separation of concerns. The middleware handles security headers and Content Security Policy implementation.

To get started with development, developers need Node.js 20 or higher and pnpm as the package manager. The development server can be launched using Docker Compose with the dev configuration file. For production deployment, the standard Dockerfile builds an optimized container ready for deployment.

Environment configuration requires setting up email credentials for NodeMailer (Gmail), Upstash Redis connection details, and various SMTP settings. These are managed through environment files with different configurations for development and production environments.

The system includes comprehensive security measures including input validation, rate limiting, XSS protection, and proper CORS policies. Performance optimization is handled through Next.js's built-in features including image optimization, code splitting, and efficient client-side navigation.

This documentation provides a clear overview of the technical implementation and deployment processes for maintaining and extending the website's functionality.