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

   git clone https://git.dustin.coffee/hobokenchicken/webdev-site.git
   cd webdev-site
   

2. Install dependencies

   npm install
   

3. Start development server

   npm run dev
   

   Open 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:

# 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:

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 file for details.

📬 Contact

• Portfolio: dev.dustin.coffee
• Email: Contact via portfolio
• GitHub: @hobokenchicken

---

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