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.
This commit is contained in:
matt committed
1 parent
8458694866
commit
5d38ebb0ef
5 files changed
+151
-186
No files matched your search
@@ -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.
|
||||
Reference in new issue
Block a user