Convert frontend to React Router and improve app reliability

[santosderek]

Summary

• make the Flask app factory configurable before startup side effects and keep resume generation enabled by default
• centralize resume/resource/GitHub settings, fix generate_document(location=...), and keep /resume as the Python download endpoint
• convert the browser-facing website to a standalone Vite React Router app under frontend/
• split frontend from Flask: React/Vite owns /, project pages, robots, sitemap, and static assets; Flask now owns only /api/v1/* and /resume
• add /api/v1/github/user so the React home page can keep the dynamic GitHub repo-count behavior through the backend connector fallback
• pin Python dependencies with requirements.in + exact requirements.txt; add pinned frontend package-lock.json
• remove legacy Flask/Jinja frontend templates, CSS, JS, sitemap package, and frontend-serving glue
• update Dockerfile to be backend-only; frontend runs/builds via npm/Vite separately

Local dev

• Backend/API: http://127.0.0.1:8000 (/api/v1/*, /resume)
• React Router frontend: http://127.0.0.1:5173

Validation

• npm ci --prefix frontend ✅
• npm test --prefix frontend -- --run ✅ 4 passed
• npm run build --prefix frontend ✅
• .venv/bin/python -m pytest -q ✅ 30 passed
• uv run --python 3.10 --with-requirements requirements.txt python -m pytest -q ✅ 30 passed
• uv pip check --python ./.venv/bin/python ✅ no broken requirements
• sh -n docker-entrypoint.sh ✅
• git diff --check ✅
• Playwright smoke against http://127.0.0.1:5173/ ✅

Notes

• Docker build could not be run locally because the Docker daemon is unavailable (Cannot connect to the Docker daemon at unix:///Users/dersanto/.docker/run/docker.sock).
• The initial CI workflow modernization idea was left out of this branch because the available GitHub OAuth token cannot push workflow file changes without workflow scope.

[santosderek]

Added the React Router conversion on top of the maintainability changes.

React Router update

• added a Vite React app under frontend/ using React Router routes for /, /project/:project, and client-side not-found pages
• Flask now serves the built SPA shell for / and allow-listed project routes while keeping /resume, /api/v1/*, /robots.txt, /github, and /linkedin server-side
• added /api/v1/github/user so the React home page can keep the dynamic GitHub repo count behavior through the existing backend connector/fallback
• Docker now builds the frontend in a Node stage and copies website/static/spa into the Python runtime image
• added frontend tests and Python SPA-serving tests; updated docs and local dev instructions

Additional validation

• npm ci --prefix frontend ✅
• npm test --prefix frontend -- --run ✅ 4 passed
• npm run build --prefix frontend ✅
• .venv/bin/python -m pytest -q ✅ 39 passed
• .venv/bin/python -m pip check ✅ no broken requirements
• uv run --python 3.10 --with-requirements requirements.txt python -m pytest -q ✅ 39 passed
• sh -n docker-entrypoint.sh ✅
• git diff --check ✅
• local Flask smoke with built SPA: /, /project/vitality, /api/v1/resume ✅
• Playwright smoke: home and /project/vitality render React content; mobile nav toggles .show without Bootstrap JS ✅

Docker build is still blocked locally because the Docker daemon is unavailable.

[santosderek]

Removed the legacy Jinja/static frontend now that React Router owns the browser UI.

Cleanup

• deleted old website/templates/**
• deleted old website/static/css/** and website/static/js/**
• simplified Flask 404 handler to return the existing not-found copy directly
• removed the no-longer-used blueprint template folder setting

Validation

• npm test --prefix frontend -- --run ✅ 4 passed
• npm run build --prefix frontend ✅
• .venv/bin/python -m pytest -q ✅ 39 passed
• .venv/bin/python -m pip check ✅ no broken requirements
• git diff --check ✅

[santosderek]

Follow-up split per feedback: Flask is now API/download only; the website UI is served by npm/Vite React Router.

What changed

• removed Flask frontend serving glue (website/spa.py, website/routes/website.py, website/sitemap/*)
• moved static UI assets from website/static to frontend/public/static
• moved robots.txt to frontend/public/robots.txt and added a static frontend/public/sitemap.xml
• renamed the remaining backend route module to website/routes/backend.py, keeping only /resume
• kept /api/v1/* and /resume in Python for now
• removed flask-sitemap from Python requirements
• changed Vite build output to frontend/dist and Dockerfile back to backend-only
• updated frontend links for GitHub/LinkedIn to point directly to external URLs instead of Flask redirects

Local dev now

• Backend/API: http://127.0.0.1:8000 (/api/v1/*, /resume)
• React Router frontend: http://127.0.0.1:5173

Validation

• npm test --prefix frontend -- --run ✅ 4 passed
• npm run build --prefix frontend ✅
• .venv/bin/python -m pytest -q ✅ 30 passed
• uv run --python 3.10 --with-requirements requirements.txt python -m pytest -q ✅ 30 passed
• uv pip check --python ./.venv/bin/python ✅
• sh -n docker-entrypoint.sh ✅
• git diff --check ✅
• Playwright smoke against http://127.0.0.1:5173/ ✅

[santosderek]

Added the first visual modernization pass.

Visual pass 1

• dark navy/black liquid-glass theme variables
• animated pixel-grid and scanline background
• sticky translucent glass navbar with neon edge glow
• glass section/card shells for headers, career/education rows, projects, and project detail panels
• restyled pixel/glow buttons
• rebuilt terminal hero styling as a floating liquid-glass pixel terminal
• card hover lift/glow interactions
• responsive and reduced-motion safeguards

Validation

• npm test --prefix frontend -- --run ✅ 4 passed
• npm run build --prefix frontend ✅
• local Vite server restarted at http://127.0.0.1:5173/ ✅
• Playwright screenshot saved: /tmp/liquid-glass-home-2026-06-25T20-54-21-553Z.png

[santosderek]

Added the full interactive TUI pass.

Interaction pass

• replaced the long page flow with a DEREK.OS // PORTFOLIO.EXE TUI window
• added left-side module navigation: Overview, Experience, Skills, Projects, Resume, Contact
• content now renders inside an internal scrollable terminal pane instead of one long page
• added command palette (Ctrl/Cmd+K or /) for jumping to modules, projects, resume, and external links
• added cursor-following liquid glow, drifting data packets, and click pixel ripples
• added skill filter chips that can highlight project cards
• added mouse-tilt glass project cards
• added project inspection drawer with Overview/Stack/Links tabs
• made terminal controls interactive: minimize, maximize, close/minimize
• added resume “compiling” download animation
• added copy-email interaction with pixel toast

ASCII direction implemented

╔════════════════════════════════════════════════════════════════════╗
║ DEREK.OS // PORTFOLIO.EXE                              2026 ONLINE ║
╠══════════════╦═════════════════════════════════════════════════════╣
║ /modules     ║ derek@santos:~$ open ./project-lab                 ║
║ ▸ Overview   ║ ┌─────────────────────────────────────────────────┐ ║
║ ▸ Experience ║ │ Project cards / skill filters / drawers         │ ║
║ ▸ Skills     ║ │ Content is inside this TUI viewport             │ ║
║ ▸ Projects   ║ │ instead of one long page                        │ ║
║ ▸ Resume     ║ └─────────────────────────────────────────────────┘ ║
║ ▸ Contact    ║                                                     ║
╚══════════════╩═════════════════════════════════════════════════════╝

Validation

• npm test --prefix frontend -- --run ✅ 9 passed
• npm run build --prefix frontend ✅
• .venv/bin/python -m pytest -q ✅ 30 passed
• uv pip check --python ./.venv/bin/python ✅
• git diff --check ✅
• local Vite server restarted at http://127.0.0.1:5173/ ✅
• Playwright smoke: TUI shell renders, Projects module opens, project drawer opens ✅
• Screenshot: /tmp/interactive-tui-project-drawer-2026-06-26T16-29-42-190Z.png

[santosderek]

Refined the TUI window based on feedback.

Changes

• made the TUI window fuller and centered in the viewport
• reduced outer page feel; window now fills the available screen under the navbar
• ensured the main TUI content pane scrolls internally (.tui-content)
• removed the nested window-in-window overview: overview is now an inline boot/profile panel inside the TUI content area
• kept project drawer, command palette, skill filtering, hover/tilt, copy toast, and liquid background interactions

Playwright checks

• loaded http://127.0.0.1:5173/ successfully
• verified overview text is visible inside the TUI shell
• opened Experience module and verified .tui-content has internal scroll dimensions and can scroll (scrollHeight > clientHeight, scrollTop changes to 600)

Note: Playwright screenshot capture timed out waiting on the browser screenshot operation, but navigation/text/evaluate checks passed.

Validation

• npm test --prefix frontend -- --run ✅ 9 passed
• npm run build --prefix frontend ✅
• .venv/bin/python -m pytest -q ✅ 30 passed
• uv pip check --python ./.venv/bin/python ✅
• git diff --check ✅

[santosderek]

Removed the top nav bar shown in the screenshot and applied the TUI font styling to the left module nav.

Changes

• removed the old top Navbar from App.jsx
• expanded the TUI workspace height now that the top bar is gone
• added explicit tui-nav-button class to left module nav buttons
• left nav now uses VT323, monospace, uppercase, larger pixel/TUI styling

Validation

• npm test --prefix frontend -- --run ✅ 10 passed
• npm run build --prefix frontend ✅
• .venv/bin/python -m pytest -q ✅ 30 passed
• uv pip check --python ./.venv/bin/python ✅
• git diff --check ✅
• Playwright check at http://127.0.0.1:5173/: first left nav button computed fontFamily: VT323, monospace; top navbar no longer rendered ✅