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

# 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

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)

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:

# 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 for detailed server setup instructions.

Quick Deploy (Docker + Caddy)

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

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

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:

server: {
  allowedHosts: ['pwlmyers.org', 'your-domain.com'],
}

Environment Variables

No environment variables required for basic operation.

For development with different ports:

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.