diff --git a/README.md b/README.md index 4596faa..73a47ce 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,67 @@ -# Roman Mazuryk — Portfolio & Proof-of-Work Site +# Roman Mazuryk - AI Workflow Consulting & Proof-of-Work Platform -> Technical Product Manager and Founder-Operator with 10+ years in MedTech and regulated B2B environments. This portfolio proves product leadership through documented case studies, an AI-augmented SDLC framework, and a disciplined build history. +> AI Systems Consultant for operations-heavy SMEs and regulated teams. This site presents practical AI workflow offers, public proof of work, MedTech/regulatory authority, and full-stack implementation evidence. -**Live:** [mazuryk.dev](https://mazuryk.dev) +**Live:** [mazuryk.dev](https://www.mazuryk.dev) --- -## What This Is +## What This Repository Is -A single-page proof-of-work portfolio that demonstrates: +This repository powers `mazuryk.dev`: a public consulting and proof-of-work platform built around one commercial thesis: -- **3 in-depth case studies** — problem → solution → stack → results -- **AI-Augmented SDLC framework** — how I use AI to accelerate product delivery without losing discipline -- **Career timeline** — MedTech operator (2012) → Technical PM / Founder-Operator (2025) -- **Skills taxonomy** — PM, systems, tech stack, soft skills, leverage patterns -- **Certifications** and contact +> Start with a workflow audit, then build the right AI-assisted pilot. + +The site supports two audiences: + +- **SME and regulated-operations clients** who need practical help finding, scoping, and implementing useful AI workflows. +- **AI/product employers and collaborators** who need evidence of product judgment, systems thinking, and hands-on implementation ability. + +--- + +## Positioning + +I help operations-heavy SMEs and regulated teams turn fragmented workflows into practical AI-assisted systems: audits, prototypes, internal tools, SOP systems, dashboards, and implementation roadmaps. + +The portfolio hierarchy is intentional: + +1. **AI consulting** - the primary commercial pillar. +2. **MedTech and regulated operations** - authority proof from real implementation-heavy environments. +3. **Full-stack product delivery** - implementation proof that the ideas can become working systems. + +--- + +## Productized Offers Represented + +| Offer | Purpose | Site entry point | +|-------|---------|------------------| +| AI Workflow Opportunity Audit | Identify the right AI use case before building | [AI Consulting](https://www.mazuryk.dev/ai) | +| Prototype Sprint | Turn the selected workflow into a tangible pilot | [AI Consulting](https://www.mazuryk.dev/ai) | +| Knowledge & SOP System | Structure scattered knowledge, procedures, onboarding, and guidance | [AI Workflow Library](https://www.mazuryk.dev/ai-workflow) | +| Dashboard & Internal Tool | Improve visibility, ownership, reporting, and workflow state | [Build Proof](https://www.mazuryk.dev/fullstack) | + +--- + +## What This Repository Proves + +- AI consulting positioning translated into a live public website. +- A clear offer system for SME workflow discovery, prototyping, and implementation. +- MedTech and regulated-operations background used as credibility, not as a limiting niche. +- Full-stack implementation proof through React, Vite, structured content, deployment, and documentation. +- AI-assisted delivery discipline through PRD, architecture notes, roadmap, decisions log, changelog, and Git workflow. + +--- + +## Main Routes + +| Route | Role | +|-------|------| +| [`/ai`](https://www.mazuryk.dev/ai) | Productized AI consulting offers and first CTA | +| [`/ai-workflow`](https://www.mazuryk.dev/ai-workflow) | Practical workflow examples and reusable AI system patterns | +| [`/proof-of-work`](https://www.mazuryk.dev/proof-of-work) | Regulated and MedTech domain proof | +| [`/fullstack`](https://www.mazuryk.dev/fullstack) | Implementation proof: prototypes, dashboards, internal tools, and build capability | +| [`/about`](https://www.mazuryk.dev/about) | Background, operating principles, and role fit | +| [`/contact`](https://www.mazuryk.dev/contact) | Workflow discussion and collaboration entry point | --- @@ -22,36 +69,25 @@ A single-page proof-of-work portfolio that demonstrates: | Layer | Choice | Why | |-------|--------|-----| -| Framework | React 19 + Vite 7 | Fast builds, modern React, no CRA bloat | -| Styling | Pure CSS + custom properties | Full control, no class noise, great browser support | -| State | React `useState` + localStorage | No shared cross-component state needed | -| Routing | Hash-based anchor links | Single scrollable page, no router bundle | -| Deploy | Vercel | Zero config, instant CDN, auto-deploy on push | +| Framework | React 19 + Vite 7 | Fast builds, modern React, simple deployment | +| Styling | CSS modules by concern + custom properties | Precise control over a portfolio/consulting UI | +| Icons | lucide-react | Consistent product-style iconography | +| Analytics | Vercel Analytics | Lightweight feedback loop | +| Deployment | Vercel | Automatic deploys, CDN hosting, preview URLs | +| Documentation | Markdown in `/docs` | Public evidence of product and engineering discipline | --- ## Getting Started -**Prerequisites:** Node.js ≥ 18 +**Prerequisites:** Node.js >= 18 ```bash -# Clone the repo git clone https://github.com/romahawk/portfolio-react.git cd portfolio-react - -# Install dependencies npm install - -# Start dev server (localhost:5173) npm run dev - -# Build for production npm run build - -# Preview production build locally -npm run preview - -# Lint npm run lint ``` @@ -59,24 +95,24 @@ npm run lint ## Project Structure -``` +```text src/ -├── components/ # All React components -│ ├── case-studies/ # 6 detailed case study components -│ └── ... # Section components (Hero, About, Skills, etc.) -├── data/ # Static content (projects, skills, timeline) -├── hooks/ # Custom React hooks -└── assets/css/ # 16 component-scoped CSS files + components/ React page and section components + components/case-studies/ + Detailed project and proof components + data/ Static content and workflow examples + hooks/ Metadata, language, and UI hooks + locales/ English and German copy + assets/css/ Component-scoped CSS docs/ -├── PRD.md # Product requirements and acceptance criteria -├── ARCHITECTURE.md # System design and key trade-offs -├── ROADMAP.md # 12-week outcome-based roadmap -└── DECISIONS_LOG.md # Architectural decision records (ADRs) + PRD.md Product requirements and target audiences + ARCHITECTURE.md System design and key trade-offs + ROADMAP.md Consulting-first site roadmap + DECISIONS_LOG.md Architectural and product decisions public/ -├── images/ # Profile photo and certificates -└── livesurgery/ # Standalone LiveSurgery demo page + images/ Profile, proof, and Open Graph assets ``` --- @@ -85,32 +121,28 @@ public/ | Doc | Purpose | |-----|---------| -| [PRD](docs/PRD.md) | Problem, target user, MVP scope, acceptance criteria | -| [Architecture](docs/ARCHITECTURE.md) | System design, components, data flow, trade-offs | -| [Roadmap](docs/ROADMAP.md) | 12-week plan with weekly outcomes and DoD | -| [Decisions Log](docs/DECISIONS_LOG.md) | ADRs explaining every major technical choice | -| [Changelog](CHANGELOG.md) | Visible history of all shipped improvements | +| [PRD](docs/PRD.md) | Why the site exists, who it serves, and what it must prove | +| [Architecture](docs/ARCHITECTURE.md) | Static site architecture, content structure, and trade-offs | +| [Roadmap](docs/ROADMAP.md) | Current consulting-first improvement plan | +| [Decisions Log](docs/DECISIONS_LOG.md) | Decision history and implementation rationale | +| [Changelog](CHANGELOG.md) | Visible history of shipped improvements | --- -## Contributing / Workflow +## Workflow -All changes follow Issue → PR → Deploy discipline. See [CONTRIBUTING.md](CONTRIBUTING.md) for branch naming, commit rules, and PR checklist. - ---- +All meaningful changes should follow: -## Deployment - -Auto-deploys to Vercel on push to `main`. No manual steps required. +```text +Issue or task -> branch -> focused change -> build/lint -> PR -> deploy +``` -Build command: `npm run build` -Output directory: `dist/` -Node version: 18+ +The repository is not only a codebase. It is part of the proof: it should show how I think, document, build, and iterate. --- -## Roadmap - -See [docs/ROADMAP.md](docs/ROADMAP.md) for the full 12-week plan. +## Next Improvements -**Current sprint (Week 1–2):** Production-grade scaffolding — docs, workflow templates, SEO fixes, OG image fix. +- Add README screenshots for the homepage, AI offer section, AI workflow library, and proof-of-work pages. +- Update GitHub repository topics around AI consulting, workflow automation, internal tools, MedTech, and regulated operations. +- Keep documentation aligned with the current commercial positioning as the offers evolve. diff --git a/docs/PRD.md b/docs/PRD.md index 393274b..6ca8db8 100644 --- a/docs/PRD.md +++ b/docs/PRD.md @@ -1,107 +1,167 @@ # Product Requirements Document (PRD) -## Roman Mazuryk — Portfolio & Proof-of-Work Site +## mazuryk.dev - AI Workflow Consulting & Proof-of-Work Platform -**Version:** 1.0 -**Last Updated:** 2026-02-26 +**Version:** 2.0 +**Last Updated:** 2026-08-04 **Status:** Active **Owner:** Roman Mazuryk --- -## Problem +## Product Thesis -Talented solo founders and career-transitioners are routinely filtered out of senior IC and PM roles because their online presence reads as "impressive background, unclear current capability." Recruiters and CTOs evaluating candidates need to see *how* someone thinks and ships — not just *what* they built. +Operations-heavy SMEs and regulated teams are interested in AI, but many do not know which workflow is worth automating first. They often have scattered documentation, manual handovers, spreadsheet-based tracking, slow intake processes, and unclear ownership across tools and people. -Roman Mazuryk has 10+ years of real operator and delivery experience in regulated MedTech and B2B environments, including system integrations, product launches, and platform architecture. That experience is not legible from a standard resume or LinkedIn profile. The gap is a credibility artifact that proves technical product leadership at depth. +`mazuryk.dev` exists to make Roman's current positioning legible: + +> AI Systems Consultant for operations-heavy SMEs and regulated industries. + +The site must show that Roman can identify a workflow problem, structure the opportunity, assess risk, define a useful pilot, and support implementation with product and full-stack delivery capability. --- -## Target User +## Target Users + +### Primary: SME and regulated-operations buyers + +Examples: + +- owner-managed SMEs +- operations leaders +- technical service companies +- MedTech, HealthTech, logistics, and B2B service teams +- founders or managers with manual workflows and unclear AI opportunities + +They need to answer: + +- What kind of workflow problem can Roman help with? +- Is the first step small, practical, and low-risk? +- Can he understand real operational constraints? +- Can this lead to a useful prototype or implementation? -**Primary:** Technical recruiter or CTO/VP of Product evaluating Roman for a remote-first Tech PM, Senior PM, or Founding PM role at a B2B SaaS or regulated-industry company. +### Secondary: AI/product employers and collaborators -**Secondary:** Fellow founders or collaborators assessing Roman as a potential co-founder, advisor, or technical partner. +Examples: -**Not targeted:** Clients, freelancers, or mass consumer audiences. +- startup and scaleup founders +- AI product teams +- product leaders in mid-market or corporate environments +- hiring managers for AI Product Manager, Technical Product Manager, AI Implementation, or Product Operations roles + +They need to answer: + +- Can Roman connect business workflows with AI system design? +- Does he have implementation credibility, not only strategy language? +- Does his MedTech and regulated-operations experience transfer to complex product environments? +- Is there public proof of how he thinks and ships? --- -## Core Loop +## Positioning Hierarchy + +1. **AI consulting is the primary commercial pillar.** + The site should lead with workflow audits, AI-assisted systems, prototypes, internal tools, SOP systems, and dashboards. -1. **Land** — Hero section delivers a 10-second pitch that establishes credentials and differentiation (MedTech operator → Technical PM) -2. **Signal** — AI-Augmented SDLC section shows systems thinking and methodology (not just a list of tools) -3. **Validate** — Case studies prove depth: problem definition → solution design → stack choices → measurable results -4. **Anchor** — Skills + Timeline sections establish progression arc and capability breadth -5. **Convert** — Contact section enables low-friction outreach (email copy, LinkedIn, location context) +2. **MedTech and regulated operations are the authority layer.** + They prove judgment in high-friction environments where documentation, handover, stakeholders, review points, and risk boundaries matter. + +3. **Full-stack delivery is the implementation proof.** + It shows that the consulting work can become concrete prototypes, dashboards, automations, and deployed systems. --- -## Killer Feature +## Core Offers -A live-deployed, discipline-documented portfolio that proves technical product leadership through case studies, an AI-augmented SDLC framework, and a traceable build history — not just a visually polished site, but evidence of how Roman thinks and ships. +| Offer | User Problem | Expected Output | +|-------|--------------|-----------------| +| AI Workflow Opportunity Audit | The team knows work is slow or fragmented, but does not know which AI use case is worth building | Workflow review, bottleneck map, opportunity matrix, feasibility/risk notes, recommended pilot, roadmap | +| Prototype Sprint | The team has selected an opportunity but needs a tangible pilot | Internal assistant, automation, workflow dashboard, decision-support prototype, or reviewable proof-of-concept | +| Knowledge & SOP System | Knowledge is scattered across documents, people, emails, and procedures | Structured SOPs, onboarding material, guidance flows, reusable documentation logic | +| Dashboard & Internal Tool | Work is tracked in spreadsheets, emails, or disconnected systems | Shared workflow visibility, status tracking, ownership, reporting, and operational state | --- -## MVP Scope - -### In scope: -- [ ] Hero section with clear positioning statement and CTA -- [ ] About section with professional narrative -- [ ] AI-Augmented SDLC framework visualization -- [ ] Career timeline (summary + full, toggling) -- [ ] Skills taxonomy (PM, systems, tech stack, soft, leverage) -- [ ] Project grid with category filters and case study modals (6 tech + 11 MedTech) -- [ ] Certifications section -- [ ] Contact section with email copy and social links -- [ ] Responsive design (mobile + desktop) -- [ ] Accessibility (WCAG AA: keyboard nav, screen reader, reduced motion) -- [ ] SEO metadata (title, description, Open Graph, Twitter Card) -- [ ] Live Vercel deployment with custom domain - -### Production-grade additions (this sprint): -- [ ] `sitemap.xml` and `robots.txt` in `/public/` -- [ ] `docs/` folder with PRD, Architecture, Roadmap, Decisions Log -- [ ] `CHANGELOG.md` tracking visible changes -- [ ] GitHub issue and PR templates -- [ ] Absolute OG image URL (critical for LinkedIn previews) +## Core Visitor Journey + +1. **Land** - Understand in 10 seconds that Roman helps SMEs and regulated teams with practical AI workflow systems. +2. **Select path** - Choose AI consulting, workflow examples, regulated proof, full-stack proof, about, or contact. +3. **Understand offer** - See the audit-first approach and the four productized offers. +4. **Validate trust** - Review MedTech/regulatory proof and implementation-heavy project examples. +5. **Inspect build capability** - See full-stack and AI-assisted delivery evidence. +6. **Convert** - Discuss one workflow, book an audit, or start a relevant role/collaboration conversation. + +--- + +## Success Criteria + +### Commercial clarity + +- Homepage and `/ai` clearly communicate the AI Workflow Opportunity Audit. +- CTAs consistently invite a workflow discussion, audit request, or prototype sprint conversation. +- MedTech proof supports the AI consulting offer instead of replacing it. +- Full-stack proof demonstrates implementation capability. + +### Career credibility + +- Hiring managers can understand Roman's fit for AI product, technical product, implementation, and product operations roles. +- The site shows systems thinking, not only visual portfolio polish. +- Repository documentation supports the public positioning. + +### Technical quality + +- Site builds and deploys reliably. +- Core routes have correct metadata and Open Graph previews. +- Mobile and desktop layouts remain clean. +- Documentation stays current with the live positioning. + +--- + +## In Scope + +- Multi-route public website for positioning, proof, and conversion. +- AI consulting offer page. +- AI workflow example library. +- Regulated and MedTech proof section. +- Full-stack implementation proof section. +- About/contact pages supporting both consultancy and AI-related employment tracks. +- English/German content where useful for Germany-based opportunities. +- Documentation that explains product intent, architecture, roadmap, and decisions. --- ## Non-Goals -- No CMS or backend content management (data stays in `/src/data/`) -- No user auth, database, or server-side logic -- No blog, commenting system, or newsletter -- No client acquisition funnel or pricing page -- No TypeScript migration (deferred to a future sprint) -- No design system / component library extraction +- No paid checkout or automated booking flow until offer validation justifies it. +- No full CMS until content update frequency becomes a real pain. +- No generic blog/content hub inside this repo unless it directly supports the consulting offer. +- No complex backend unless an interactive productized audit tool becomes a validated requirement. +- No broad SaaS build before consulting demand and repeated workflow problems are validated. --- -## Acceptance Criteria for MVP +## Acceptance Criteria | # | Criterion | How to Verify | |---|-----------|---------------| -| 1 | Site loads in < 2s on mobile 4G | Lighthouse Performance ≥ 90 | -| 2 | All 6 case study modals open and render correctly | Manual QA on Chrome + Firefox + Safari | -| 3 | Contact email copy button works on mobile | Manual QA on iOS Safari | -| 4 | No console errors in production build | `npm run build && npm run preview` | -| 5 | All nav links scroll to correct sections | Manual QA | -| 6 | OG image renders on LinkedIn link preview | Use LinkedIn Post Inspector | -| 7 | Site is keyboard-navigable end-to-end | Tab through all interactive elements | -| 8 | Passes ESLint with no errors | `npm run lint` exits 0 | -| 9 | `sitemap.xml` is accessible at `/sitemap.xml` | Visit in browser | -| 10 | README accurately describes setup and deploy | Follow README steps in fresh clone | +| 1 | Homepage communicates AI Systems Consultant positioning | Manual review in desktop and mobile | +| 2 | `/ai` explains the four offers and audit-first approach | Manual review | +| 3 | `/ai-workflow` shows practical SME and regulated workflow patterns | Manual review | +| 4 | `/proof-of-work` frames MedTech as authority proof | Manual review | +| 5 | `/fullstack` frames technical projects as implementation proof | Manual review | +| 6 | Contact CTAs support workflow discussion and audit/prototype interest | Manual review | +| 7 | Metadata and social previews match the AI consulting positioning | Inspect page source / social preview tools | +| 8 | Build succeeds | `npm run build` | +| 9 | Lint succeeds | `npm run lint` | +| 10 | README and docs match the live positioning | Manual docs review | --- ## Risks -| Risk | Likelihood | Impact | Mitigation | -|------|-----------|--------|------------| -| Case study content gets stale | High | Medium | Add "Last updated" dates to each case study component | -| OG image not rendering on LinkedIn (relative URL) | High | High | Use absolute URL in `index.html` meta tag | -| No analytics = no feedback loop | High | Medium | Add Plausible or Vercel Analytics in Week 3 | -| Mobile nav regression after style changes | Medium | Medium | Add visual regression test or manual QA checklist | -| Scope creep into blog/CMS features | Medium | High | Enforce non-goals list; route new ideas to backlog | -| Vercel cold start on free tier | Low | Low | Static site — no cold start risk | +| Risk | Impact | Mitigation | +|------|--------|------------| +| Site becomes too broad across AI, MedTech, full-stack, and roles | Diluted positioning | Keep AI as primary, MedTech as authority, full-stack as proof | +| MedTech proof dominates and excludes general SMEs | Lower consulting relevance | Use MedTech as credibility, not the headline identity | +| Offers remain abstract without public examples | Weak conversion | Publish SME workflow patterns and Medintegro-inspired case material | +| Documentation drifts from live site | GitHub proof weakens | Update README/PRD/Roadmap during each positioning shift | +| Building starts before offer validation | Wasted effort | Use audit-first approach and validate with real conversations | diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index da65421..b7c5a8b 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -1,167 +1,147 @@ # Roadmap -## Roman Mazuryk — Portfolio & Proof-of-Work Site +## mazuryk.dev - AI Consulting and Proof-of-Work Platform -**Version:** 1.0 -**Last Updated:** 2026-03-09 (progress updated) -**Horizon:** 12 weeks (3 months) +**Version:** 2.0 +**Last Updated:** 2026-08-04 +**Horizon:** Consulting-first validation, then scalable product discovery --- -## Guiding Principles +## North Star -1. **Ship visible improvements** — every week must produce a diff a recruiter can see -2. **Proof-of-work discipline** — every change must follow Issue → PR → Deploy -3. **Minimum viable everything** — prefer a shipped simple thing over a planned perfect thing -4. **Freeze the refactor itch** — no TypeScript migration, no Tailwind rewrite during active sprint +Build an AI consulting and implementation business generating EUR 10k-20k/month in reliable cash flow, then reinvest a defined portion into scalable software products. + +The website and this repository support that path by making the positioning, offers, proof, and implementation capability visible. --- -## Week 1–2: Stabilize + Production-Grade Scaffolding +## Strategic Principles + +1. **Services fund the business first.** + Prioritize audits, implementation projects, and retainers before major SaaS investment. -**Outcome:** The repo looks and behaves like a professionally maintained production project. Documentation exists. Workflow infrastructure is in place. Regressions are caught before they ship. +2. **Products emerge from repeated client problems.** + Use consulting work to identify recurring workflow problems, reusable components, and willingness to pay. -### Issues -- [x] `[CHORE]` Add `/docs/` folder with PRD, Architecture, Roadmap, Decisions Log -- [x] `[CHORE]` Add GitHub issue templates (feature + bug) and PR template -- [x] `[CHORE]` Add `CHANGELOG.md` and `CONTRIBUTING.md` -- [x] `[BUG]` Fix OG image URL — change from relative `/images/profile.jpg` to absolute `https://roman-mazuryk.vercel.app/images/profile.jpg` in `index.html` -- [x] `[CHORE]` Add `public/sitemap.xml` and `public/robots.txt` -- [x] `[CHORE]` Update `README.md` with setup steps, deploy link, stack, screenshots -- [x] `[CHORE]` Add `vercel.json` for explicit build configuration and security headers +3. **AI is the commercial lead.** + The site should make practical AI workflow consulting understandable before visitors inspect MedTech or full-stack proof. -### Definition of Done -- [x] `docs/` folder has all 4 files with substantive content -- [x] GitHub repo has issue + PR templates visible when creating new issues -- [x] `CHANGELOG.md` exists and has at least one entry -- [ ] OG image renders on LinkedIn Post Inspector — **needs manual verification** -- [ ] `sitemap.xml` is accessible at `https://www.mazuryk.dev/sitemap.xml` — **needs manual verification** -- [x] `npm run build` exits 0, `npm run lint` exits 0 -- [ ] README has a screenshot — **not yet added** +4. **MedTech is authority, not the whole niche.** + Regulated and implementation-heavy experience proves judgment for complex workflows. -### Demo Artifact Required -Screenshot of LinkedIn post preview showing OG image rendering correctly. +5. **Full-stack is implementation proof.** + Technical work should show that workflow strategy can become prototypes, dashboards, tools, and deployed systems. --- -## Week 3–4: Signal Feature — Analytics + Performance Hardening +## Current Phase + +**Positioning -> First-client validation** + +Immediate objective: -**Outcome:** You have a feedback loop. You know who visits, what they look at, and how long they stay. Site passes Lighthouse 90+ on all metrics. +> Make the AI Workflow Opportunity Audit credible enough to support real prospect conversations, while keeping the site useful for AI-related product and implementation roles. -### Issues -- [x] `[FEATURE]` Add Vercel Analytics (zero-config, privacy-respecting, free tier) -- [x] `[FEATURE]` Add Lighthouse CI to verify no regressions on build -- [x] `[BUG]` Audit and fix any Lighthouse score < 90 — Performance 38→99, others 96–100 -- [x] `[CHORE]` Add `` for profile image with `fetchpriority="high"` -- [ ] `[CHORE]` Verify all case study modals work on mobile (iOS Safari + Android Chrome) -- [x] `[FEATURE]` Add "Last updated" timestamp to each case study component (visible in footer of modal) +--- -### Definition of Done -- [x] Vercel Analytics dashboard shows real visitor data -- [x] Lighthouse score ≥ 90 — Performance 99, Accessibility 100, Best Practices 96, SEO 100 -- [ ] All 6 case study modals tested on mobile — no layout breaks -- [x] Profile image preloaded — no layout shift -- [x] Each case study footer shows "Last updated: [Month YYYY]" +## Roadmap Phases -### Demo Artifact Required -Loom or screenshot: Lighthouse report showing 4x 90+ scores. ✅ Confirmed 99/100/96/100. -Lighthouse CI: `.github/workflows/lighthouse.yml` runs on every PR to `main`. +| Phase | Goal | Exit Gate | +|-------|------|-----------| +| 1. Positioning | Clear audience, problem, offer, and proof hierarchy | Homepage, LinkedIn, GitHub, and `/ai` tell one coherent story | +| 2. First Clients | Validate audit-first consulting with real conversations | 2-3 serious discovery conversations or one paid/permissioned audit | +| 3. Repeatable Service | Turn the audit and prototype sprint into a repeatable offer | Same offer sold or seriously requested 3 times | +| 4. Retainers | Convert implementation support into recurring revenue | 2 recurring clients or ongoing support agreements | +| 5. EUR 10k/month Baseline | Establish stable consulting cash flow | EUR 10k/month maintained for 3 consecutive months | +| 6. Product Discovery | Identify recurring client workflow problems | Same problem observed across 5+ clients/prospects | +| 7. Paid Product Pilot | Build the smallest productized solution | 3+ prospects willing to pay or pilot | +| 8. Scalable Product | Grow beyond services | Product revenue or strong paid commitments justify reinvestment | +| 9. EUR 20k/month Combined | Combine consulting, retainers, and product income | Reliable blended revenue with clear growth path | --- -## Month 2 (Weeks 5–8): Capability Expansion +## Sprint 1 Website/GitHub Priorities -**Outcome:** Portfolio is feature-complete for senior PM job search. New case study added. Content is easier to update. +### P0 - Support the first consulting conversations -### Week 5–6: New Case Study + Content Refresh +- Keep `/ai` aligned around the four productized offers. +- Keep `/ai-workflow` general enough for SMEs, not only MedTech. +- Ensure `/proof-of-work` keeps MedTech as regulated proof. +- Use Medintegro-inspired material as public proof where permission and data boundaries are safe. +- Keep CT-T as private validation until there is data and permission to reference it. -**Outcome:** Add one new project or case study that is directly relevant to current job search focus (B2B SaaS / internal tools / regulated industry). +### P1 - Strengthen GitHub proof -- [ ] `[FEATURE]` Add case study: [new project — to be determined based on active work] -- [ ] `[CHORE]` Upload OG screenshots for remaining 5 projects (SmartShooter, Flowlogics, Alphorythm, Portfolio, Medintegro) and wire up `og:image` meta tags per case study -- [ ] `[CHORE]` Refresh Skills section with any new tools/frameworks from active work -- [ ] `[FEATURE]` Add "Open to Work" availability banner (dismissible, toggleable) -- [ ] `[CHORE]` Update Timeline with any 2025–2026 entries +- Rewrite README around AI consulting and proof-of-work positioning. +- Update PRD target users from recruiter-only to dual audience: SME clients and AI/product employers. +- Refresh this roadmap to show consulting-first priorities. +- Add screenshots to the README once final page views are selected. +- Update GitHub repo description and topics manually. -### Definition of Done -- [ ] New case study live in production -- [ ] Skills section reflects current stack -- [ ] Timeline is up-to-date through current month +### P2 - Build public activity loop -### Demo Artifact Required -Screenshot of new case study modal with all sections populated. +- Publish short build logs around the four offers. +- Tie each public artifact to one offer and one proof type. +- Use Medintegro as public proof until new client permission exists. --- -### Week 7–8: Data-Driven Case Studies (Decoupled Content) - -**Outcome:** Case study content extracted from JSX into data files, making it possible to update copy without touching component code. +## Public Proof Tracks -- [ ] `[REFACTOR]` Define `CaseStudy` data schema (title, problem, solution, stack, results, lastUpdated) -- [ ] `[REFACTOR]` Migrate 2–3 case studies to data-driven rendering -- [ ] `[CHORE]` Update `ARCHITECTURE.md` to document new data layer +| Track | Purpose | Example Assets | +|-------|---------|----------------| +| AI consultancy entrepreneurship | Show what SMEs can buy and how the work creates value | Audit examples, workflow maps, opportunity matrices, pilot plans | +| AI-related employment roles | Show product judgment, AI delivery thinking, and implementation discipline | Case studies, repo docs, build logs, architecture notes, prototypes | -> **Note:** This is a refactor sprint. No new UI changes. Branch: `refactor/case-study-data-layer`. +--- -### Definition of Done -- [ ] At least 2 case studies render from data files (not hardcoded JSX) -- [ ] Visual output is identical to before (no regression) -- [ ] Architecture doc updated +## Offer-Aligned Content Plan -### Demo Artifact Required -Side-by-side diff showing old JSX component vs new data file + renderer. +| Offer | Public Proof Needed | +|-------|---------------------| +| AI Workflow Opportunity Audit | Explain how to choose the right workflow before building | +| Prototype Sprint | Show how an audit recommendation becomes a tangible pilot | +| Knowledge & SOP System | Show how scattered documents/procedures become usable guidance | +| Dashboard & Internal Tool | Show how spreadsheet chaos becomes workflow visibility and ownership | --- -## Month 3 (Weeks 9–12): Production Hardening + TypeScript Migration +## Reinvestment Rule -**Outcome:** Repo is fully TypeScript, has E2E tests for the core loop, and is ready to be referenced in job applications as a production-grade example. +Before stable EUR 10k/month: -### Week 9–10: TypeScript Migration +- 80-90% of business capacity goes toward consulting, offers, proof, and prospect conversations. +- 10-20% goes toward reusable components and product discovery. +- Avoid major SaaS development costs. -- [ ] `[CHORE]` Add `tsconfig.json`, update Vite config for TypeScript -- [ ] `[REFACTOR]` Migrate `src/data/*.js` → `src/data/*.ts` with typed interfaces -- [ ] `[REFACTOR]` Migrate `src/hooks/*.js` → `src/hooks/*.ts` -- [ ] `[REFACTOR]` Migrate components in priority order: data-layer → hooks → leaf components → page components +After stable EUR 10k/month for 3 months: -### Definition of Done -- [ ] `npm run build` succeeds with zero TypeScript errors -- [ ] No `any` types in data layer or hooks -- [ ] All existing ESLint rules still pass +- Allocate a defined share of operating profit toward product development, sales assets, tools, contractors, and infrastructure. +- Build products only from repeated workflow evidence, not from isolated ideas. --- -### Week 11–12: E2E Tests + Final Polish +## Definition of Done for This Repository -- [ ] `[CHORE]` Add Playwright for E2E testing -- [ ] `[TEST]` Core loop test: land → open case study → close modal → click contact -- [ ] `[TEST]` Mobile nav test: open menu → click link → menu closes, section activates -- [ ] `[FEATURE]` Add print/PDF stylesheet for resume-style print view -- [ ] `[CHORE]` Record a Loom walkthrough for the README +The repository supports the business roadmap when: -### Definition of Done -- [ ] Playwright tests pass in CI -- [ ] Print view renders cleanly (optional but high-credibility) -- [ ] README has a Loom video link -- [ ] All CHANGELOG entries are current +- README communicates AI consulting first. +- PRD target users include SME clients and AI/product employers. +- Roadmap reflects consulting-first revenue before product investment. +- MedTech proof is framed as authority for regulated workflow judgment. +- Full-stack proof is framed as implementation capability. +- Build and lint pass before PRs are merged. --- -## Freeze List (What Won't Be Touched) - -These are explicitly out of scope for this 12-week roadmap: +## Deferred -| Item | Reason | -|------|--------| -| CMS integration (Contentful, Sanity) | Not needed until content updates become frequent pain | -| Blog / writing section | Separate product; don't conflate with portfolio | -| Dark/light mode toggle | Already dark-only; adding toggle is scope creep | -| React Router | Hash navigation works; no separate pages needed | -| Redux / Zustand | No shared state between sections | -| Tailwind CSS migration | 1,735 lines of clean CSS is working fine | -| Authentication | No user accounts needed | -| Backend / API | Static site is the right architecture | -| Multi-page routing | Single scrollable page is the UX model | -| Comment system | Not a blog | +- Automated booking/payment flow. +- CMS migration. +- Full SaaS/product build. +- Broad blog platform. +- Large framework migrations unrelated to current positioning. +- Publishing client-specific CT-T material before permission exists. --- @@ -169,5 +149,6 @@ These are explicitly out of scope for this 12-week roadmap: | Version | Date | Summary | |---------|------|---------| -| 1.0 | 2026-02-26 | Initial roadmap created via AI Production OS v1 audit | -| 1.1 | 2026-03-09 | Mark vercel.json, Lighthouse CI, and "Last updated" timestamps as complete; update canonical domain to www.mazuryk.dev | +| 1.0 | 2026-02-26 | Initial portfolio stabilization roadmap | +| 1.1 | 2026-03-09 | Production-grade scaffolding and canonical domain updates | +| 2.0 | 2026-08-04 | Reframed roadmap around AI consulting, first-client validation, and product discovery after cash flow | diff --git a/src/assets/css/market-pages.css b/src/assets/css/market-pages.css index 857c2d2..8fc97ec 100644 --- a/src/assets/css/market-pages.css +++ b/src/assets/css/market-pages.css @@ -1133,6 +1133,10 @@ padding: 14px; } +.medtech-hero-extra .workflow-map::after { + inset-inline: 34px; +} + .medtech-hero-extra .workflow-node { grid-template-columns: 1fr; gap: 8px; @@ -1151,9 +1155,13 @@ left: calc(100% + 2px); width: 10px; height: 1px; - background-image: linear-gradient(90deg, var(--accent-medtech) 45%, transparent 0); - background-size: 8px 1px; + background: + linear-gradient(90deg, color-mix(in srgb, var(--accent-medtech) 34%, transparent), transparent), + linear-gradient(90deg, var(--accent-medtech) 45%, transparent 0); + background-size: 100% 100%, 8px 1px; opacity: 0.75; + animation: medtech-hero-connector-flow 1.8s ease-in-out infinite; + animation-delay: calc(var(--workflow-step-index, 0) * 0.22s); } .medtech-hero-extra .workflow-node:nth-last-child(1)::after { @@ -1559,6 +1567,8 @@ } .fullstack-hero-map { + position: relative; + overflow: hidden; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; @@ -1575,6 +1585,36 @@ box-shadow: var(--shadow); } +.fullstack-hero-map::after { + content: ""; + position: absolute; + z-index: 0; + inset: 50% 34px auto; + height: 2px; + background: + linear-gradient( + 90deg, + transparent 0%, + var(--accent-ai-soft) 18%, + var(--accent-ai) 34%, + var(--accent-fullstack) 52%, + var(--brand-warm) 70%, + transparent 90% + ); + background-size: 230% 100%; + border-radius: 999px; + opacity: 0.66; + filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-fullstack) 45%, transparent)); + transform: translateY(-50%); + pointer-events: none; + animation: workflow-flow-rail 3.8s linear infinite; +} + +.fullstack-hero-map__step { + position: relative; + min-width: 0; +} + .fullstack-hero-map__node { --fullstack-flow-accent: var(--accent-fullstack); --fullstack-flow-soft: var(--accent-fullstack-soft); @@ -1588,6 +1628,8 @@ background: radial-gradient(180px 100px at 100% 0, var(--fullstack-flow-soft), transparent 68%), color-mix(in srgb, var(--panel) 90%, transparent); + animation: fullstack-node-flow 3.8s ease-in-out infinite; + animation-delay: calc(var(--fullstack-flow-index, 0) * 0.24s); } .fullstack-hero-map__step:nth-child(1) .fullstack-hero-map__node { @@ -1595,26 +1637,46 @@ --fullstack-flow-soft: var(--surface-cool); } +.fullstack-hero-map__step:nth-child(1) .fullstack-hero-map__connector { + --fullstack-flow-accent: var(--brand-2); +} + .fullstack-hero-map__step:nth-child(2) .fullstack-hero-map__node { --fullstack-flow-accent: var(--accent-ai); --fullstack-flow-soft: var(--accent-ai-soft); } +.fullstack-hero-map__step:nth-child(2) .fullstack-hero-map__connector { + --fullstack-flow-accent: var(--accent-ai); +} + .fullstack-hero-map__step:nth-child(3) .fullstack-hero-map__node { --fullstack-flow-accent: var(--accent-fullstack); --fullstack-flow-soft: var(--accent-fullstack-soft); } +.fullstack-hero-map__step:nth-child(3) .fullstack-hero-map__connector { + --fullstack-flow-accent: var(--accent-fullstack); +} + .fullstack-hero-map__step:nth-child(4) .fullstack-hero-map__node { --fullstack-flow-accent: var(--accent-medtech); --fullstack-flow-soft: var(--accent-medtech-soft); } +.fullstack-hero-map__step:nth-child(4) .fullstack-hero-map__connector { + --fullstack-flow-accent: var(--accent-medtech); +} + .fullstack-hero-map__step:nth-child(5) .fullstack-hero-map__node { --fullstack-flow-accent: var(--brand-warm); --fullstack-flow-soft: var(--surface-warm); } +.fullstack-hero-map__step:nth-child(5) .fullstack-hero-map__connector { + --fullstack-flow-accent: var(--brand-warm); +} + .fullstack-hero-map__step:nth-child(6) .fullstack-hero-map__node { --fullstack-flow-accent: var(--accent-fullstack-2); --fullstack-flow-soft: var(--surface-cool); @@ -1641,7 +1703,53 @@ } .fullstack-hero-map__connector { - display: none; + position: absolute; + z-index: 2; + top: 50%; + left: calc(100% + 2px); + display: block; + width: 10px; + height: 1px; + overflow: hidden; + background: + linear-gradient(90deg, color-mix(in srgb, var(--fullstack-flow-accent, var(--accent-fullstack)) 34%, transparent), transparent), + linear-gradient(90deg, var(--fullstack-flow-accent, var(--accent-fullstack)) 45%, transparent 0); + background-size: 100% 100%, 8px 1px; + opacity: 0.75; +} + +.fullstack-hero-map__connector::before { + content: ""; + position: absolute; + inset: -1px 100% -1px -60%; + background: linear-gradient(90deg, transparent, var(--fullstack-flow-accent, var(--accent-fullstack)), transparent); + filter: drop-shadow(0 0 7px var(--fullstack-flow-accent, var(--accent-fullstack))); + animation: workflow-connector-flow 1.8s ease-in-out infinite; + animation-delay: calc(var(--fullstack-flow-index, 0) * 0.22s); +} + +@keyframes medtech-hero-connector-flow { + 0%, 100% { + opacity: 0.38; + filter: drop-shadow(0 0 0 transparent); + } + 42%, 58% { + opacity: 1; + filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent-medtech) 62%, transparent)); + } +} + +@keyframes fullstack-node-flow { + 0%, 100% { + border-color: color-mix(in srgb, var(--fullstack-flow-accent) 30%, var(--system-border)); + box-shadow: none; + } + 38%, 52% { + border-color: color-mix(in srgb, var(--fullstack-flow-accent) 58%, var(--system-border)); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--fullstack-flow-accent) 14%, transparent), + 0 0 18px color-mix(in srgb, var(--fullstack-flow-accent) 16%, transparent); + } } .fullstack-stack-grid, @@ -2040,6 +2148,24 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } + .medtech-hero-extra .workflow-map::after { + inset: 22px auto 22px 50%; + width: 2px; + height: auto; + background: + linear-gradient( + 180deg, + transparent 0%, + var(--accent-medtech-soft) 22%, + var(--accent-medtech) 48%, + var(--accent-medtech-2) 62%, + transparent 86% + ); + background-size: 100% 220%; + transform: translateX(-50%); + animation-name: workflow-flow-rail-vertical; + } + .medtech-hero-extra .workflow-node::after { display: none; } @@ -2048,6 +2174,44 @@ .fullstack-workflow-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } + + .fullstack-hero-map::after { + inset: 22px auto 22px 50%; + width: 2px; + height: auto; + background: + linear-gradient( + 180deg, + transparent 0%, + var(--accent-ai-soft) 18%, + var(--accent-ai) 34%, + var(--accent-fullstack) 52%, + var(--brand-warm) 70%, + transparent 90% + ); + background-size: 100% 230%; + transform: translateX(-50%); + animation-name: workflow-flow-rail-vertical; + } + + .fullstack-hero-map__connector { + top: auto; + left: 50%; + bottom: -9px; + width: 1px; + height: 9px; + background: + linear-gradient(180deg, color-mix(in srgb, var(--fullstack-flow-accent, var(--accent-fullstack)) 34%, transparent), transparent), + linear-gradient(180deg, var(--fullstack-flow-accent, var(--accent-fullstack)) 45%, transparent 0); + background-size: 100% 100%, 1px 8px; + transform: translateX(-50%); + } + + .fullstack-hero-map__connector::before { + inset: -60% -1px 100% -1px; + background: linear-gradient(180deg, transparent, var(--fullstack-flow-accent, var(--accent-fullstack)), transparent); + animation-name: workflow-connector-flow-vertical; + } } @media (max-width: 640px) { @@ -2113,4 +2277,11 @@ animation: none; transform: none; } + + .medtech-hero-extra .workflow-node::after, + .fullstack-hero-map::after, + .fullstack-hero-map__node, + .fullstack-hero-map__connector::before { + animation: none; + } } diff --git a/src/assets/css/visual-system.css b/src/assets/css/visual-system.css index 9bc16d9..cc7e2b9 100644 --- a/src/assets/css/visual-system.css +++ b/src/assets/css/visual-system.css @@ -281,6 +281,30 @@ pointer-events: none; } +.workflow-map::after { + content: ""; + position: absolute; + z-index: 0; + inset: 50% 22px auto; + height: 2px; + background: + linear-gradient( + 90deg, + transparent 0%, + var(--system-accent-soft, var(--surface-glow)) 22%, + var(--system-accent, var(--brand)) 48%, + var(--system-accent-2, var(--brand-2)) 62%, + transparent 86% + ); + background-size: 220% 100%; + border-radius: 999px; + opacity: 0.62; + filter: drop-shadow(0 0 8px color-mix(in srgb, var(--system-accent, var(--brand)) 46%, transparent)); + transform: translateY(-50%); + pointer-events: none; + animation: workflow-flow-rail 3.8s linear infinite; +} + .workflow-node { position: relative; z-index: 1; @@ -293,6 +317,8 @@ border: 1px solid var(--system-border); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); + animation: workflow-node-flow 3.8s ease-in-out infinite; + animation-delay: calc(var(--workflow-step-index, 0) * 0.24s); } .workflow-node__index { @@ -326,11 +352,23 @@ z-index: 1; width: 54px; height: 1px; - background-image: linear-gradient(90deg, var(--system-accent, var(--brand)) 45%, transparent 0); - background-size: 9px 1px; + overflow: hidden; + background: + linear-gradient(90deg, color-mix(in srgb, var(--system-accent, var(--brand)) 28%, transparent), transparent), + linear-gradient(90deg, var(--system-accent, var(--brand)) 45%, transparent 0); + background-size: 100% 100%, 9px 1px; opacity: 0.75; } +.workflow-connector::before { + content: ""; + position: absolute; + inset: -1px 100% -1px -45%; + background: linear-gradient(90deg, transparent, var(--system-accent, var(--brand)), transparent); + filter: drop-shadow(0 0 7px var(--system-accent, var(--brand))); + animation: workflow-connector-flow 1.9s ease-in-out infinite; +} + .workflow-connector::after { content: ""; position: absolute; @@ -463,6 +501,30 @@ 50% { transform: scale(1.18); opacity: 1; } } +@keyframes workflow-flow-rail { + from { background-position: 120% 0; } + to { background-position: -120% 0; } +} + +@keyframes workflow-connector-flow { + 0% { transform: translateX(0); opacity: 0; } + 18%, 72% { opacity: 0.95; } + 100% { transform: translateX(230%); opacity: 0; } +} + +@keyframes workflow-node-flow { + 0%, 100% { + border-color: var(--system-border); + box-shadow: none; + } + 38%, 52% { + border-color: color-mix(in srgb, var(--system-accent, var(--brand)) 52%, var(--system-border)); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--system-accent, var(--brand)) 14%, transparent), + 0 0 18px color-mix(in srgb, var(--system-accent, var(--brand)) 16%, transparent); + } +} + @media (max-width: 900px) { .workflow-map, .cta-strip, @@ -495,8 +557,34 @@ width: 1px; height: 34px; justify-self: center; - background-image: linear-gradient(180deg, var(--system-accent, var(--brand)) 45%, transparent 0); - background-size: 1px 9px; + background: + linear-gradient(180deg, color-mix(in srgb, var(--system-accent, var(--brand)) 28%, transparent), transparent), + linear-gradient(180deg, var(--system-accent, var(--brand)) 45%, transparent 0); + background-size: 100% 100%, 1px 9px; + } + + .workflow-map::after { + inset: 22px auto 22px 50%; + width: 2px; + height: auto; + background: + linear-gradient( + 180deg, + transparent 0%, + var(--system-accent-soft, var(--surface-glow)) 22%, + var(--system-accent, var(--brand)) 48%, + var(--system-accent-2, var(--brand-2)) 62%, + transparent 86% + ); + background-size: 100% 220%; + transform: translateX(-50%); + animation-name: workflow-flow-rail-vertical; + } + + .workflow-connector::before { + inset: -45% -1px 100% -1px; + background: linear-gradient(180deg, transparent, var(--system-accent, var(--brand)), transparent); + animation-name: workflow-connector-flow-vertical; } .workflow-connector::after { @@ -510,6 +598,17 @@ } } +@keyframes workflow-flow-rail-vertical { + from { background-position: 0 120%; } + to { background-position: 0 -120%; } +} + +@keyframes workflow-connector-flow-vertical { + 0% { transform: translateY(0); opacity: 0; } + 18%, 72% { opacity: 0.95; } + 100% { transform: translateY(230%); opacity: 0; } +} + @media (max-width: 640px) { .route-card, .system-card, @@ -530,6 +629,9 @@ } @media (prefers-reduced-motion: reduce) { + .workflow-map::after, + .workflow-node, + .workflow-connector::before, .workflow-connector::after { animation: none; } diff --git a/src/components/MarketPages.jsx b/src/components/MarketPages.jsx index faab918..2eb2351 100644 --- a/src/components/MarketPages.jsx +++ b/src/components/MarketPages.jsx @@ -947,11 +947,11 @@ function FullStackHeroVisual({ items }) {
{localizedItems.map((item, index) => (
-
+
{String(index + 1).padStart(2, "0")} {item}
- {index < items.length - 1 ?
))}
diff --git a/src/components/system/SystemVisuals.jsx b/src/components/system/SystemVisuals.jsx index b215058..8bffb45 100644 --- a/src/components/system/SystemVisuals.jsx +++ b/src/components/system/SystemVisuals.jsx @@ -46,9 +46,9 @@ export function RouteCard({ title, text, cta, href, icon, accent = "ai" }) { ); } -export function WorkflowNode({ label, detail, index, accent = "ai" }) { +export function WorkflowNode({ label, detail, index, accent = "ai", style }) { return ( -
+
{index}
{label} @@ -75,6 +75,7 @@ export function WorkflowMap({ items, accent = "ai", title = "Workflow map" }) { detail={item.detail} index={String(index + 1).padStart(2, "0")} accent={itemAccent} + style={{ "--workflow-step-index": index }} /> {index < items.length - 1 ? : null}