webdev-site/README.md

# d@n tech - Modern Web Portfolio (2026 Edition)

A modern, coffee-themed web development portfolio showcasing professional web development services. Built with vanilla JavaScript, CSS, and HTML using Vite for development, Bootstrap 5 foundation, and a responsive design system with light/dark mode support.

## 🌟 Features

- **Modern Coffee Theme**: Elegant color palette with CSS custom properties (--color-coffee, --color-cream, --color-gold, --color-teal)
- **Responsive Design**: Mobile-first approach with Bootstrap 5 grid system and container queries
- **Dark/Light Mode**: Automatic theme switching based on system preferences with manual toggle
- **Interactive Elements**:
  - Particle background canvas animation
  - Typewriter effect for hero section
  - Animated skill bars that trigger on scroll
  - Testimonial carousel with expandable content
  - Scroll progress indicator
- **Performance Optimized**:
  - Vite-based build with code splitting and minification
  - WebP image formats with responsive variants
  - Bootstrap loaded from CDN with fallback
- **Cross-Browser Compatible**: Fully tested on Firefox, WebKit (Safari), and Chromium
- **Accessibility**: Semantic HTML5, ARIA attributes, proper heading hierarchy
- **Multi-Page Support**: Includes Terms of Service and Privacy Policy pages

## 🛠️ Tech Stack

- **Frontend**: Vanilla JavaScript (ES6+), CSS3, HTML5
- **Build Tool**: Vite 7.3.1
- **CSS Framework**: Bootstrap 5.3.3
- **Fonts**: Inter (body), Playfair Display (headings)
- **Development**: npm scripts, Playwright for cross-browser testing
- **CI/CD**: GitHub Actions with Lighthouse audits

## 📁 Project Structure

```
webdev/
├── index.html              # Main portfolio page
├── tos.html               # Terms of Service
├── privacy.html           # Privacy Policy
├── main.js                # All JavaScript functionality
├── styles.css             # Complete CSS with coffee theme
├── vite.config.js         # Vite multi-page configuration
├── package.json           # Dependencies and scripts
├── assets/                # Static assets (images, fonts)
├── public/                # Public files served as-is
├── dist/                  # Production build (generated)
├── cross_browser_test.py  # Playwright cross-browser tests
├── .github/workflows/ci.yml # CI/CD pipeline
└── AGENTS.md              # Developer guide for AI agents
```

## 🚀 Getting Started

### Prerequisites

- Node.js 18+ and npm
- Modern web browser

### Installation

1. **Clone the repository**
   ```bash
   git clone https://git.dustin.coffee/hobokenchicken/webdev-site.git
   cd webdev-site
   ```

2. **Install dependencies**
   ```bash
   npm install
   ```

3. **Start development server**
   ```bash
   npm run dev
   ```
   Open [http://localhost:5173](http://localhost:5173) in your browser.

## 📦 Development Commands

| Command | Description |
|---------|-------------|
| `npm run dev` | Start Vite development server (localhost:5173) |
| `npm run build` | Build for production (outputs to `/dist`) |
| `npm run preview` | Preview production build (localhost:4173) |
| `npm test` | *Placeholder for future test suite* |

## 🧪 Testing

### Cross-Browser Testing
Run comprehensive browser compatibility tests using Playwright:

```bash
# Install Playwright (Python)
pip install playwright
playwright install firefox webkit

# Build and preview the site
npm run build && npm run preview &

# Run cross-browser tests
python cross_browser_test.py
pkill -f "vite preview"
```

### Lighthouse Audit
Generate performance, accessibility, and SEO reports:

```bash
npm run build && npm run preview &
npx lighthouse http://localhost:4173 --output json --output html --output-path=./lighthouse-report
```

### CI/CD Pipeline
The project includes GitHub Actions workflow (`.github/workflows/ci.yml`) that runs on every push/PR:

1. `npm ci` - Clean install
2. `npm run build` - Production build verification
3. Lighthouse analysis via `lighthouse-checker/action`

## 🎨 Design System

The portfolio follows a consistent design language:

- **Color Palette**: Coffee-themed semantic variables (`--color-coffee-*`, `--color-cream`, `--color-gold`, `--color-teal`)
- **Typography**: `--font-sans` (Inter) for body, `--font-display` (Playfair Display) for headings
- **Spacing**: Consistent padding/margin scales using CSS custom properties
- **Shadows**: `--shadow-soft` and `--shadow-glass` variables
- **Transitions**: Cubic-bezier easing for natural motion
- **Reduced Motion**: Respects `prefers-reduced-motion` media query

## 📝 Code Style

### JavaScript
- ES6+ modules with `type="module"` in HTML
- `const` over `let`; avoid `var`
- Arrow functions for callbacks; named functions for top-level declarations
- CamelCase for variables/functions; PascalCase for classes
- Early returns and element existence checks before DOM manipulation
- Section headers: `// ===== SECTION NAME =====`

### CSS
- CSS Custom Properties defined in `:root` with semantic names
- CSS Nesting with `&` for nested selectors (modern browsers)
- Mobile-first media queries with `min-width`
- Support for `prefers-color-scheme: dark` with variable overrides
- Kebab-case for class names
- Modern features: container queries, view transitions, CSS grid, flexbox

### HTML
- Semantic HTML5 elements (`<header>`, `<main>`, `<section>`)
- ARIA attributes where needed; proper heading hierarchy
- Bootstrap classes alongside custom styles
- `data-*` attributes for JavaScript hooks (e.g., `data-text`, `data-score`)
- Lazy loading for images; defer non-critical scripts

## 🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

Please ensure your code follows the existing style conventions and includes appropriate tests.

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 📬 Contact

- **Portfolio**: [dev.dustin.coffee](https://dev.dustin.coffee/)
- **Email**: [Contact via portfolio](https://dev.dustin.coffee/#contact)
- **GitHub**: [@hobokenchicken](https://github.com/hobokenchicken)

---

*Built with ☕ by Dustin Newkirk | Last updated: February 2026*