diff --git a/.pi-lens/cache/jscpd.meta.json b/.pi-lens/cache/jscpd.meta.json index ff5efe4..e271098 100644 --- a/.pi-lens/cache/jscpd.meta.json +++ b/.pi-lens/cache/jscpd.meta.json @@ -1,3 +1,3 @@ { - "timestamp": "2026-04-18T20:20:06.986Z" + "timestamp": "2026-04-18T20:33:42.828Z" } \ No newline at end of file diff --git a/.pi-lens/cache/knip.meta.json b/.pi-lens/cache/knip.meta.json index 565e223..38fbc79 100644 --- a/.pi-lens/cache/knip.meta.json +++ b/.pi-lens/cache/knip.meta.json @@ -1,3 +1,3 @@ { - "timestamp": "2026-04-18T20:20:08.210Z" + "timestamp": "2026-04-18T20:33:44.083Z" } \ No newline at end of file diff --git a/.pi-lens/turn-state.json b/.pi-lens/turn-state.json index bb20303..6953fb0 100644 --- a/.pi-lens/turn-state.json +++ b/.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" } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..4136f8e --- /dev/null +++ b/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 diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..5476588 --- /dev/null +++ b/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 diff --git a/README.md b/README.md index 6a6b39c..fcd38a0 100644 --- a/README.md +++ b/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) -- Site serves them from `public/docs/` (copied into place for hosting) +## Project Structure -## Sections -- Introduction -- Philosophy -- Skills gallery (presentations) -- Experience (best-effort extraction from resume DOCX) -- Credentials & publications +``` +peters-portfolio-site/ +├── docs/ # Source documents (PDFs, DOCX, PPTX) +│ ├── Peter's Resume.docx +│ ├── ActiveMDLCPC.pdf +│ ├── 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.