Add comprehensive documentation: README, DEPLOYMENT, CHANGELOG, .env.example
This commit is contained in:
Vendored
+1
-1
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"timestamp": "2026-04-18T20:20:06.986Z"
|
||||
"timestamp": "2026-04-18T20:33:42.828Z"
|
||||
}
|
||||
Vendored
+1
-1
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"timestamp": "2026-04-18T20:20:08.210Z"
|
||||
"timestamp": "2026-04-18T20:33:44.083Z"
|
||||
}
|
||||
@@ -2,5 +2,5 @@
|
||||
"files": {},
|
||||
"turnCycles": 0,
|
||||
"maxCycles": 3,
|
||||
"lastUpdated": "2026-04-18T20:20:08.210Z"
|
||||
"lastUpdated": "2026-04-18T20:33:44.083Z"
|
||||
}
|
||||
@@ -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
|
||||
+311
@@ -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
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user