Update .gitignore to exclude sensitive files and local artifacts. Revise README for clarity and structure, removing outdated PRD references and adding a new PRD template. Delete old PRD file and resume PDF to prevent exposure of private information.

2026-04-22 15:43:50 -07:00
1 parent 8458694866
commit 5d38ebb0ef
@@ -14,3 +14,42 @@ pnpm-debug.log*
 .env
 .env.*
 !.env.example
 # Personal / private spec (public forks use PRD/PRDs/Bio Site PRD.template.md)
 PRD/PRDs/Bio\ Site\ PRD.md
 # Local editor / tooling
 .cursor/
 # Keys and secrets (never push these)
 *.pem
 *.key
 *.p12
 id_rsa
 id_rsa.pub
 *.tfstate
 *.tfstate.*
 .secrets/
 secrets/
 # Env helpers that often hold tokens
 .envrc
 .direnv/
 # OS / editor junk
 Thumbs.db
 *.swp
 *~
 # Test / coverage output
 coverage/
 .nyc_output/
 # Caches and local build artifacts
 .turbo/
 .cache/
 *.tsbuildinfo
 .vercel/
 # Real resume PDF (keep locally; do not publish to public GitHub)
 public/resume.pdf
@@ -1,118 +0,0 @@
 This **Product Requirements Document (PRD)** outlines a professional, visually dynamic portfolio site designed to showcase a high-level blend of technical leadership and hands-on engineering.
 * * *
 # PRD: Professional Portfolio & Technical Showcase
 ## 1\. Project Overview
 A centralized, modern web presence that serves as a professional hub. The site must balance the authority of a **Senior Solutions Architect** with the creative technicality of a **Full-Stack Developer**, all while maintaining an aesthetic rooted in the North County San Diego coastline.
 ## 2\. Visual Identity & Brand
 - **Color Palette:** "SoCal Seaside"
    - **Primary:** Deep Ocean Blues and Slate (for text and structural elements).
    - **Secondary:** Coastal Teals and Sky Blues (for accents and hover states).
    - **Highlights:** Warm Gold and Soft Sand (for CTAs, borders, or highlights—mimicking a sunset over the Pacific).
 - **Design Language:** Clean, minimalist, and high-contrast. Use glassmorphism (frosted glass) effects for cards to keep the feeling "light" and "airy."
 - **Dynamic Elements:** \* Subtle animated background (e.g., gentle CSS waves or a particle system representing "data flow").
    - Interactive "Skill Clouds" or a dynamic terminal-style window.
 ## 3\. Core Features & Functional Requirements
 ### 3.1. Hero Section
 - **Objective:** Immediate impact and role identification.
 - **Content:** Name, high-level title (Software Developer | Solutions Architect), and a punchy value proposition.
 - **Visual:** A professional headshot or a high-end stylized graphic, paired with a "Quick Links" bar (LinkedIn, GitHub, Email icons).
 ### 3.2. Technical Skill Matrix
 - **Objective:** Display a broad stack at a glance.
 - **Categories:** \* **Core Tech:** (e.g., Vue.js, Python, Node.js).
    - **Infrastructure:** (e.g., Proxmox, Docker, WireGuard).
    - **AI/LLM:** (e.g., Gemini API, Ollama, RAG development).
    - **Sales Engineering:** (e.g., Technical Demos, PRD creation, Solution Architecture).
 ### 3.3. Project & Demo Gallery (The "Home Lab" Showcase)
 - **Objective:** Prove technical depth through live examples.
 - **Structure:** Grid layout of "Project Cards."
 - **Specific Items:**
    - **LoreKeeper:** Story-writing assistant (Highlighting Vue/Python/AI).
    - **Home Assistant Dashboard:** Custom Vue 3 dashboard.
    - **Test Demo Sites:** Links to external subdomains or containers hosting specific proof-of-concepts.
 ### 3.4. Experience & Education (Digital Resume)
 - **Objective:** Provide the "paper" trail.
 - **Feature:** An interactive timeline or accordion-style list of roles (notably LambdaTest and previous senior SE positions).
 - **Download:** A prominent "Download PDF Resume" button.
 ### 3.5. Interests (The Human Element)
 - **Objective:** Culture fit and personality.
 - **Content:** Brief highlights of gardening (Meyer lemons), long-distance running, and passion for storytelling/One Piece.
 * * *
 ## 4\. Technical Stack Recommendations
 - **Frontend:** **Vue 3 (Vite)** for speed and familiarity.
 - **Styling:** **Tailwind CSS** (perfect for rapid implementation of the SoCal color profile).
 - **Animations:** **Framer Motion** (for Vue) or **GSAP** for high-end scroll interactions.
 - **Hosting:** Hosted on your home lab (via **Cloudflare Tunnel** or **WireGuard**) to demonstrate infrastructure skills, or **Vercel** for 99.9% uptime.
 ## 5\. Information Architecture (Site Map)
 1.  **Home (Single Page Scroll):**
    - Hero -> Skills -> Work/Projects -> Experience -> Interests -> Contact.
 2.  **Navigation:**
    - Sticky header with "Jump to" links.
    - Dark/Light mode toggle (styled as Sun/Moon).
 * * *
 ## 6\. Success Metrics
 - **Performance:** Lighthouse score of 90+ for Performance and SEO.
 - **Responsiveness:** Perfect rendering on mobile (for recruiters on the go) and ultrawide monitors (for engineers).
 - **Engagement:** Successful click-throughs to the GitHub and live Demo sites.
 Would you like to dive deeper into the specific Vue components for that dynamic Home Assistant dashboard link, or perhaps refine the wording for the professional "About" section?
@@ -0,0 +1,85 @@
 # PRD template: professional portfolio (single-page site)
 Use this as a starting spec when you fork or reuse this repo. Replace bracketed placeholders with your own product decisions; keep a filled copy **out of public git** if it names employers, clients, or anything you would not put on GitHub.
 ---
 ## 1. Project overview
 A single-page portfolio that acts as your professional hub on the web. It should reflect how you want to be seen (e.g. engineer, architect, lead) and stay fast and readable on phones and desktops.
 **Audience:** recruiters, peers, and future collaborators.
 **Tone:** [e.g. confident, approachable, minimal hype]
 ---
 ## 2. Visual identity
 - **Palette:** [name or description — primary / secondary / accent colors]
 - **Layout:** [e.g. clean grid, lots of whitespace, one strong hero]
 - **Motion:** [e.g. subtle scroll reveals only; or richer animation where it helps]
 - **Optional motifs:** [e.g. geography, hobby, industry — only if they support the brand]
 ---
 ## 3. Core sections (information architecture)
 Single scroll (or minimal routes), roughly in this order:
 1. **Hero** — Name, title line, short value proposition, photo or graphic, links (email, LinkedIn, GitHub, etc.).
 2. **Skills** — Grouped by category (languages, infra, product, etc.) at a glance.
 3. **Projects** — Cards with title, stack, link to repo or live demo.
 4. **Experience** — Roles and impact; optional PDF resume download.
 5. **Interests** — Short humanizing blurbs (optional but recommended).
 6. **Contact / footer** — How to reach you and any legal/footer links.
 **Navigation:** [e.g. sticky header with anchor links; optional theme toggle]
 ---
 ## 4. Functional requirements
 - **Performance:** Target strong Lighthouse scores on mobile (define numbers if you care, e.g. 90+).
 - **Accessibility:** Sensible heading order, contrast, focus states, alt text on meaningful images.
 - **SEO / sharing:** Unique title, meta description, Open Graph / Twitter cards for link previews.
 - **Hosting:** [static host / Docker on home lab / both] — note base path if not served at domain root (`/`).
 ---
 ## 5. Technical stack (suggested defaults for this repo)
 - **Framework:** Vue 3 + Vite
 - **Styling:** Tailwind CSS
 - **Animation:** GSAP (or lighter CSS-only if you prefer)
 Adjust in the template only if you plan to change the stack in code.
 ---
 ## 6. Content sources (this codebase)
 | Area | Typical file(s) |
 |------|-----------------|
 | Name, links, tagline | `src/content/site.ts` |
 | Skills | `src/content/skills.ts` |
 | Projects | `src/content/projects.ts` |
 | Experience | `src/content/experience.ts` |
 | Headshot / assets | `public/` |
 | Resume PDF | `public/resume.pdf` (if you ship one) |
 | SEO / social tags | `index.html` |
 ---
 ## 7. Success criteria
 - [ ] Reads well on a phone in under a minute.
 - [ ] All primary outbound links work.
 - [ ] Build passes (`npm run build`) and deploy path is documented.
 - [ ] [Add your own: e.g. “No unverifiable claims” or “Matches resume PDF”]
 ---
 ## 8. Out of scope (optional)
 List what you are **not** building in v1 (blog, CMS, login area, etc.) so scope stays honest.
@@ -1,110 +1,69 @@
-# Bio portfolio (static)
+# Bio site
-Single-page portfolio aligned with [PRD/PRDs/Bio Site PRD.md](PRD/PRDs/Bio%20Site%20PRD.md): Vue 3, Vite, Tailwind, GSAP scroll reveals, static `dist/` output for free static hosts.
+This repo is my personal portfolio: one long scrolling page with a hero, skills, projects, experience, and a bit of “who I am” at the bottom. I wanted something fast, static, and easy to tweak without a CMS—just TypeScript content files and Vue components.
-## Prerequisites
+If you landed here to fork it for yourself, the **product spec** lives in [`PRD/PRDs/Bio Site PRD.template.md`](PRD/PRDs/Bio%20Site%20PRD.template.md). Copy that file, fill it in locally, and keep anything too specific for public GitHub out of the tracked tree (see `.gitignore`).
- Node.js 20+ (22 recommended for CI)
+## What’s inside
-## Local development
+- **Vue 3 + Vite** for the UI
 - **Tailwind** for layout and color
 - **GSAP** for scroll-triggered section reveals (loaded on demand so the first paint stays light)
 - **Shipped as static HTML/JS/CSS** in `dist/`—fine for Netlify-style hosts, GitHub Pages, or a tiny **nginx** container (see `Dockerfile`)
 ## Run it locally
 You’ll want Node 20+ (22 matches CI/Docker).
 ```bash
 npm install
 npm run dev
 ```
-Open the URL Vite prints (usually `http://localhost:5173`).
+Vite will print a URL—usually `http://localhost:5173`.
-## Production build
+## Build for production
 ```bash
 npm run build
 npm run preview
 ```
-Artifacts are written to `dist/`. Deploy that folder to **Cloudflare Pages**, **Netlify**, **Vercel**, or **GitHub Pages**.
+Output is in `dist/`.
-## Docker (static site in a container)
+## Docker (optional)
-The app is still a **static** build; the container only runs **nginx** to serve `dist/`. No Node at runtime.
+The container only serves prebuilt files with nginx; there is no Node process at runtime.
 ### Build and run
 ```bash
 docker build -t bio-site .
 docker run --rm -p 8080:80 bio-site
 ```
-Open `http://localhost:8080`.
+Or with Compose (defaults to host port **8080**):
 ### Compose (handy defaults)
 ```bash
 docker compose up -d --build
 ```
-By default this maps **host `8080` → container `80`**. Override the host port:
+If the site is **not** at the root URL (e.g. GitHub Pages project pages), set a base path at build time—see `VITE_BASE` in `docker-compose.yml` and the GitHub Pages note below.
-```bash
+## GitHub Pages (project site)
 HOST_PORT=3000 docker compose up -d --build
 ```
-### `VITE_BASE` inside Docker
+If the live URL looks like `https://username.github.io/repo-name/`, set repo variable **`VITE_BASE`** to `/repo-name/` (Actions → Variables), enable Pages from Actions, and use [`.github/workflows/pages.yml`](.github/workflows/pages.yml). For a user site at the repo root, leave `VITE_BASE` unset.
- For **http://your-server/`** (site at root): use the default **`/`** (do not set `VITE_BASE`, or set `VITE_BASE=/`).
+## Make it yours
 - For **GitHub Pages–style subpaths** behind a path-based reverse proxy only: build with e.g. `docker build --build-arg VITE_BASE=/bio/ -t bio-site .` or set `VITE_BASE` in `docker-compose.yml` / `.env` next to compose.
 Mismatching `VITE_BASE` and where nginx actually serves the app is the most common reason assets return 404.
 ### Hosting on your LAN (Linux server)
 1. **Install Docker** on the server (Docker Engine + Compose plugin, or Docker Desktop on a workstation acting as a host).
 2. **Copy the project** (or clone the repo) onto the machine and run `docker compose up -d --build` from the repo root.
 3. **Find the server’s LAN IP**, e.g. `ip -br a` or `hostname -I`.
 4. From another device on the **same network**, open `http://<LAN-IP>:8080` (or whatever `HOST_PORT` you chose).
 5. **Firewall**: allow the host port, e.g. with UFW: `sudo ufw allow 8080/tcp comment 'bio static'` then `sudo ufw reload` (adjust port to match `HOST_PORT`).
 6. **Optional**: put **Caddy**, **Traefik**, or **nginx** on the host in front of the container for HTTPS, auth, or a single entrypoint on 443 while the container stays on an internal port.
 The container listens on **all interfaces** inside the host’s Docker publish rules; binding to LAN-only is usually done with host firewall rules or by placing a reverse proxy on the edge.
 ## Customize content
 | What | Where |
-|------|--------|
+|------|-------|
 | Name, links, email, tagline | `src/content/site.ts` |
 | Skills | `src/content/skills.ts` |
 | Projects | `src/content/projects.ts` |
 | Roles | `src/content/experience.ts` |
-| Headshot | Replace `public/avatar.svg` with your image (WebP/AVIF or optimized JPG/PNG under `public/` — update `HeroSection.vue` if you change the filename). |
+| Avatar | Replace or point `public/` assets from `HeroSection.vue` |
-| Resume PDF | Add `public/resume.pdf` (the Experience section links to it). |
+| Resume link | Add `public/resume.pdf` on your machine before build/deploy; it is **gitignored** so a public clone does not ship your PDF (the download link still works in your own builds) |
-| SEO / social | Update `<title>`, `<meta name="description">`, Open Graph/Twitter tags, and `og:url` in `index.html` to match your real domain. |
+| SEO / social | `index.html` (`title`, description, Open Graph, `og:url`) |
 ## GitHub Pages (project site)
 If the site is served from `https://username.github.io/repo-name/`, Vite needs a **base path**:
 1. In the repo, add a variable **`VITE_BASE`** (Settings → Secrets and variables → Actions → Variables) with value `/repo-name/` (leading slash, trailing slash optional).
 2. Enable GitHub Pages from **GitHub Actions** using the included workflow (Settings → Pages → Build and deployment → Source: GitHub Actions).
 3. The workflow [`.github/workflows/pages.yml`](.github/workflows/pages.yml) runs `npm install`, `npm run build` with `VITE_BASE`, and publishes `dist`.
 For a **user** site (`username.github.io` with the site at the root of that repo), leave `VITE_BASE` unset so the site uses `/`.
 ## Environment variable (local)
 Create `.env.production` (or `.env`) if you want to test a non-root base locally:
 ```bash
 VITE_BASE=/repo-name/
 ```
 Then `npm run build` and `npm run preview`.
 ## Lighthouse / performance notes
 - Hero image uses `fetchpriority="high"` and explicit `width` / `height`.
 - GSAP + ScrollTrigger load **on demand** per section via dynamic `import()` to keep the initial JS smaller.
 - Google Fonts load from `index.html`; self-hosting fonts is an optional future optimization.
 ## License
-Private / personal use — adjust as you like.
+Private / personal use—change the license if you fork for something public.