Add comprehensive documentation: README, DEPLOYMENT, CHANGELOG, .env.example

.pi-lens/cache/jscpd.meta.json

@@ -1,3 +1,3 @@
 {
-  "timestamp": "2026-04-18T20:20:06.986Z"
+  "timestamp": "2026-04-18T20:33:42.828Z"
 }

.pi-lens/cache/knip.meta.json

@@ -1,3 +1,3 @@
 {
-  "timestamp": "2026-04-18T20:20:08.210Z"
+  "timestamp": "2026-04-18T20:33:44.083Z"
 }

.pi-lens/turn-state.json

@@ -2,5 +2,5 @@
   "files": {},
   "turnCycles": 0,
   "maxCycles": 3,
-  "lastUpdated": "2026-04-18T20:20:08.210Z"
+  "lastUpdated": "2026-04-18T20:33:44.083Z"
 }

CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+### Added
+- Nature-inspired color theme with emerald sage, parchment, and slate soft palettes
+- Fixed navigation with smooth scrolling to sections
+- Hero section with professional introduction and purpose statement
+- Philosophy section with theoretical orientation statement
+- Skills gallery showcasing presentations (NIT for SUD, ACA 2026 Preview)
+- Dynamic experience section with DOCX resume parsing
+- Credentials grid with downloadable PDFs and certifications
+- Headshot placeholder with nature-themed silhouette
+- Docker + Caddy deployment configuration
+
+### Changed
+- Upgraded to Tailwind CSS v4 with new `@import` syntax
+- Improved resume parsing with better role/org detection
+- Enhanced UI with loading skeletons and hover effects
+
+### Fixed
+- Vite host blocking for production domains
+- PostCSS configuration for Tailwind v4
+- DNS resolution and SSL certificate issues
+
+## [1.0.0] - 2026-04-18
+
+### Added
+- Initial portfolio site with React 19 + TypeScript + Tailwind CSS
+- Single-page application with 5 main sections
+- Responsive design for mobile and desktop
+- Document hosting for resume, certifications, and presentations
+
+[Unreleased]: https://git.dustin.coffee/hobokenchicken/peters-portfolio-site/compare/main...HEAD
+[1.0.0]: https://git.dustin.coffee/hobokenchicken/peters-portfolio-site/releases/tag/v1.0.0

DEPLOYMENT.md

@@ -0,0 +1,311 @@
+# Deployment Guide
+
+Complete setup for deploying the portfolio site with Docker, Caddy, and Oracle Cloud VPS.
+
+## Architecture
+
+```
+┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
+│   Cloudflare    │────▶│   Oracle VPS    │────▶│   Vite Dev      │
+│   (DNS + Proxy) │     │   (Caddy)       │     │   Server        │
+│                 │     │   Port 80/443   │────▶│   Port 5173     │
+└─────────────────┘     └─────────────────┘     └─────────────────┘
+                               │
+                               ▼
+                        ┌─────────────────┐
+                        │   Docker        │
+                        │   (Caddy)       │
+                        └─────────────────┘
+```
+
+## Prerequisites
+
+- Oracle Cloud VPS (or similar)
+- Domain name (Cloudflare recommended)
+- Docker + Docker Compose installed
+- Git access to repository
+
+## Server Setup
+
+### 1. Provision VPS
+
+**Oracle Cloud Free Tier:**
+1. Create instance (Ubuntu 22.04/24.04 ARM or AMD)
+2. Add ingress rules for ports 22, 80, 443
+3. Note the public IP
+
+**Open Ports in Oracle Console:**
+1. Networking → Virtual Cloud Networks
+2. Click your VCN → Subnets
+3. Security Lists → Default Security List
+4. Add Ingress Rules:
+   - TCP 80 from 0.0.0.0/0
+   - TCP 443 from 0.0.0.0/0
+   - TCP 22 from your IP (SSH)
+
+### 2. Install Dependencies
+
+```bash
+# Update system
+sudo apt update && sudo apt upgrade -y
+
+# Install Docker
+curl -fsSL https://get.docker.com | sh
+sudo usermod -aG docker $USER
+newgrp docker
+
+# Install Node.js 22
+curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
+sudo apt install -y nodejs
+
+# Verify
+node -v  # Should be 20.19+ or 22.12+
+npm -v
+docker --version
+```
+
+### 3. Clone Repository
+
+```bash
+sudo mkdir -p /opt/peters-portfolio-site
+sudo chown $USER:$USER /opt/peters-portfolio-site
+cd /opt/peters-portfolio-site
+git clone https://git.dustin.coffee/hobokenchicken/peters-portfolio-site.git .
+```
+
+### 4. Configure Caddy
+
+Create directory structure:
+```bash
+mkdir -p docker_configs/caddy/conf
+mkdir -p docker_configs/caddy/site
+mkdir -p docker_configs/caddy/caddy_data
+mkdir -p docker_configs/caddy/caddy_config
+mkdir -p docker_configs/caddy/logs
+```
+
+Create `docker_configs/caddy/conf/Caddyfile`:
+
+```caddy
+pwlmyers.org {
+    reverse_proxy 172.20.1.232:5173
+    
+    log {
+        output file /var/log/caddy/access.log
+        format json
+    }
+    
+    # Optional: Add headers
+    header {
+        X-Content-Type-Options nosniff
+        X-Frame-Options DENY
+        X-XSS-Protection "1; mode=block"
+    }
+}
+```
+
+**Note:** Adjust `172.20.1.232` to match your Vite server's IP (check with `ip addr show`)
+
+### 5. Docker Compose for Caddy
+
+Create `compose.caddy.yaml`:
+
+```yaml
+services:
+  caddy:
+    image: caddy:latest
+    restart: unless-stopped
+    ports:
+      - "80:80"
+      - "443:443"
+      - "443:443/udp"
+    volumes:
+      - ./docker_configs/caddy/conf:/etc/caddy
+      - ./docker_configs/caddy/site:/srv
+      - ./docker_configs/caddy/caddy_data:/data
+      - ./docker_configs/caddy/caddy_config:/config
+      - ./docker_configs/caddy/logs:/var/log/caddy
+    networks:
+      - caddy_network
+
+networks:
+  caddy_network:
+    driver: bridge
+```
+
+### 6. DNS Configuration (Cloudflare)
+
+1. Log into Cloudflare dashboard
+2. Select your domain
+3. **DNS** tab → Add records:
+   - Type: `A`
+   - Name: `@` (root) or `www`
+   - Content: `150.136.209.11` (your VPS IP)
+   - Proxy status: 🟠 Orange cloud (proxied) or ⚪ Gray cloud (DNS only)
+   - TTL: Auto
+
+4. **SSL/TLS** tab:
+   - Mode: **Full (strict)** or **Full**
+   - Always Use HTTPS: On
+
+### 7. Deploy Application
+
+```bash
+cd /opt/peters-portfolio-site
+
+# Copy docs to public
+cp -r docs/* public/docs/
+
+# Install dependencies
+npm install
+
+# Start Vite dev server (background)
+nohup npm run dev > vite.log 2>&1 &
+
+# Start Caddy
+docker compose -f compose.caddy.yaml up -d
+```
+
+### 8. Verify Deployment
+
+```bash
+# Check Caddy is running
+docker ps | grep caddy
+
+# Check Vite is running
+ps aux | grep vite
+curl http://172.20.1.232:5173/
+
+# Test from VPS
+curl -H "Host: pwlmyers.org" http://localhost/
+
+# Test HTTPS (after DNS propagates)
+curl -v https://pwlmyers.org/
+```
+
+## Updates
+
+### Pull and Update
+
+```bash
+cd /opt/peters-portfolio-site
+
+# Pull latest changes
+git pull
+
+# Reinstall if package.json changed
+npm install
+
+# Copy any new docs
+cp -r docs/* public/docs/
+
+# Restart Vite
+pkill -f vite || true
+nohup npm run dev > vite.log 2>&1 &
+
+# Restart Caddy if config changed
+docker compose -f compose.caddy.yaml restart
+```
+
+### View Logs
+
+```bash
+# Vite logs
+tail -f vite.log
+
+# Caddy logs
+docker logs -f ubuntu-caddy-1
+tail -f docker_configs/caddy/logs/access.log
+```
+
+## Troubleshooting
+
+### SSL Certificate Issues
+
+If Caddy fails to get Let's Encrypt certificate:
+
+```bash
+# Check Cloudflare proxy status
+dig pwlmyers.org +short
+# Should return your VPS IP, not Cloudflare IPs
+
+# If using Cloudflare proxy (orange cloud):
+# - Use Cloudflare Origin Certificate
+# - Or switch to DNS only (gray cloud) for Let's Encrypt
+```
+
+### Port Already in Use
+
+```bash
+# Find what's using port 80/443
+sudo netstat -tlnp | grep -E ':(80|443)'
+
+# Stop conflicting service
+sudo systemctl stop nginx apache2
+```
+
+### Vite Not Accessible
+
+```bash
+# Check Vite is listening on all interfaces
+netstat -tlnp | grep 5173
+
+# Should show 0.0.0.0:5173, not 127.0.0.1:5173
+
+# Check allowedHosts in vite.config.ts
+cat vite.config.ts
+```
+
+### Docker Network Issues
+
+```bash
+# Check Caddy can reach Vite
+docker exec ubuntu-caddy-1 wget -qO- http://172.20.1.232:5173/
+
+# If using Docker network instead of host IP:
+docker network ls
+docker network inspect caddy_caddy_network
+```
+
+## Alternative: Systemd Service
+
+Instead of `nohup`, create a systemd service for Vite:
+
+```bash
+sudo tee /etc/systemd/system/peters-portfolio.service > /dev/null <<'EOF'
+[Unit]
+Description=Peter's Portfolio Vite Dev Server
+After=network.target
+
+[Service]
+Type=simple
+User=ubuntu
+WorkingDirectory=/opt/peters-portfolio-site
+ExecStart=/usr/bin/npm run dev
+Restart=always
+RestartSec=10
+Environment=NODE_ENV=development
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+sudo systemctl daemon-reload
+sudo systemctl enable peters-portfolio
+sudo systemctl start peters-portfolio
+sudo systemctl status peters-portfolio
+```
+
+## Security Notes
+
+- Keep `node_modules` updated: `npm audit fix`
+- Use Cloudflare proxy for DDoS protection
+- Consider fail2ban for SSH brute force protection
+- Regular backups of `docs/` directory
+
+## Support
+
+For issues with:
+- **Application code:** Check README.md troubleshooting section
+- **Server/Docker:** Check logs with commands above
+- **DNS/SSL:** Verify Cloudflare settings and Oracle firewall rules

README.md

@@ -1,28 +1,209 @@
-# Leadership Counseling Portfolio (Peter-William L. Myers)
+# Leadership Counseling Portfolio
 
-Nature-informed, serene React + Tailwind single-page portfolio.
+A nature-informed, serene digital portfolio for Peter-William L. Myers, a licensed professional counselor and certified nature-informed therapist.
 
-## Local dev
+**Live Site:** https://pwlmyers.org
+
+## Overview
+
+This React + TypeScript + Tailwind CSS application showcases:
+- Professional introduction and headshot
+- Theoretical orientation and counseling philosophy
+- Skills demonstration (presentation gallery)
+- Dynamic resume experience extraction
+- Credentials, certifications, and publications
+
+## Tech Stack
+
+- **Frontend:** React 19, TypeScript, Tailwind CSS 4
+- **Build Tool:** Vite 8
+- **Resume Parsing:** Mammoth (DOCX → text extraction)
+- **Icons:** Lucide React
+- **Reverse Proxy:** Caddy (Docker)
+- **Hosting:** Oracle Cloud VPS
+
+## Quick Start
+
+### Prerequisites
+
+- Node.js 20.19+ or 22.12+
+- npm 10+
+
+### Development
 
 ```bash
+# Clone repository
+git clone https://git.dustin.coffee/hobokenchicken/peters-portfolio-site.git
+cd peters-portfolio-site
+
+# Install dependencies
 npm install
+
+# Start development server
 npm run dev
 ```
 
-## Build
+The dev server runs at `http://localhost:5173/` by default.
+
+### Build for Production
 
 ```bash
 npm run build
 ```
 
-## Hosting / docs
+Output goes to `dist/` directory.
 
-- Static assets live in `docs/` (source)
+## Project Structure
-- Site serves them from `public/docs/` (copied into place for hosting)
 
-## Sections
+```
-- Introduction
+peters-portfolio-site/
-- Philosophy
+├── docs/                          # Source documents (PDFs, DOCX, PPTX)
-- Skills gallery (presentations)
+│   ├── Peter's Resume.docx
-- Experience (best-effort extraction from resume DOCX)
+│   ├── ActiveMDLCPC.pdf
-- Credentials & publications
+│   ├── NIT for SUD.pptx
+│   └── ...
+├── public/                        # Static assets
+│   └── docs/                      # Copied from docs/ for hosting
+├── src/
+│   ├── components/                # Reusable components
+│   │   └── NavBar.tsx
+│   ├── sections/                  # Page sections
+│   │   ├── Introduction.tsx
+│   │   ├── Philosophy.tsx
+│   │   ├── SkillsGallery.tsx
+│   │   ├── Experience.tsx
+│   │   └── Credentials.tsx
+│   ├── theme/                     # Theme configuration
+│   │   ├── nature.ts              # Nature-inspired color tokens
+│   │   ├── theme.ts
+│   │   └── tokens.css
+│   ├── utils/                     # Utilities
+│   │   └── parseResume.ts         # DOCX resume parser
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── styles.css
+├── index.html
+├── vite.config.ts
+├── tailwind.config.js
+├── postcss.config.js
+└── package.json
+```
+
+## Configuration
+
+### Vite (`vite.config.ts`)
+
+```typescript
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    strictPort: true,
+    host: true,                    # Required for LAN access
+    allowedHosts: ['pwlmyers.org'], # Add your domain here
+  },
+})
+```
+
+### Tailwind Theme (`src/theme/nature.ts`)
+
+Nature-inspired color palette:
+- **Emerald Sage:** Primary greens (`#1f9a64` to `#073a27`)
+- **Parchment:** Warm backgrounds (`#f6efd7` to `#3d321d`)
+- **Slate Soft:** Text and UI (`#f6f7fb` to `#1f2a3a`)
+
+## Document Management
+
+Source documents live in `docs/` and are copied to `public/docs/` for hosting:
+
+```bash
+# Copy docs for deployment
+cp -r docs/* public/docs/
+```
+
+**Included Documents:**
+- `Peter's Resume.docx` - Parsed dynamically for Experience section
+- `ActiveMDLCPC.pdf` - License certificate
+- `PC014692 (1).pdf` - License document
+- `NIT for SUD.pptx` - Nature-Informed Therapy presentation
+- `Presentation1.pptx`, `Presentation2.pptx` - Skills demonstrations
+- `Preview - Call for Proposals - 2026 ACA Annual Conference & Expo.pdf` - Conference proposal
+
+## Deployment
+
+See [DEPLOYMENT.md](DEPLOYMENT.md) for detailed server setup instructions.
+
+### Quick Deploy (Docker + Caddy)
+
+```bash
+# On VPS
+cd /opt/peters-portfolio-site
+git pull
+npm install
+npm run build
+
+# Start/restart Caddy
+docker compose -f compose.caddy.yaml up -d
+```
+
+## Troubleshooting
+
+### DNS Resolution Issues
+
+If `pwlmyers.org` fails to resolve locally:
+
+```bash
+# Flush DNS cache
+sudo systemd-resolve --flush-caches
+sudo systemctl restart NetworkManager
+
+# Or add to /etc/hosts temporarily
+echo "150.136.209.11 pwlmyers.org" | sudo tee -a /etc/hosts
+```
+
+### Build Errors
+
+**"Cannot find native binding" (rolldown):**
+```bash
+rm -rf node_modules package-lock.json
+npm install
+```
+
+**Tailwind CSS not generating:**
+- Ensure using Tailwind v4 syntax: `@import "tailwindcss";`
+- Check `postcss.config.js` uses `@tailwindcss/postcss`
+
+### Vite Host Blocking
+
+If you see "Blocked request. This host is not allowed":
+
+Add domain to `vite.config.ts`:
+```typescript
+server: {
+  allowedHosts: ['pwlmyers.org', 'your-domain.com'],
+}
+```
+
+## Environment Variables
+
+No environment variables required for basic operation.
+
+For development with different ports:
+```bash
+PORT=3000 npm run dev
+```
+
+## Browser Support
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## License
+
+ISC
+
+## Credits
+
+Built for Peter-William L. Myers, Licensed Professional Counselor and Certified Nature-Informed Therapist.