peters-portfolio-site/README.md

# Leadership Counseling Portfolio

A nature-informed, serene digital portfolio for Peter-William L. Myers, a licensed professional counselor and certified nature-informed therapist.

**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
```

The dev server runs at `http://localhost:5173/` by default.

### Build for Production

```bash
npm run build
```

Output goes to `dist/` directory.

## Project Structure

```
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.