portifolio-evandrodevbr/docs/superpowers/plans/2026-07-10-portfolio-growth.md

Portfolio Growth Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Make the portfolio fast, indexable, regionally relevant, and limited to live project demos.

Architecture: Project metadata remains static and is read on the server. A VPS cron runs a small Node script that writes an atomic health snapshot; server rendering filters featured projects by final HTTP 200 HTML results. Interactive motion is isolated from semantic server-rendered content, and SEO is represented by Next metadata plus visible resume/case content and matching schema.org.

Tech Stack: Next.js 16 App Router, React 19, TypeScript, Jest, Node.js fetch, cron.

---

Task 1: Project-health domain

Files:

• Create: lib/project-health.ts

• Create: lib/project-health.test.ts

• Create: scripts/check-projects.mjs

• Create: data/project-health.json

• Write a failing test: only current, final-200 HTML project IDs are accepted.

• Run npm test -- lib/project-health.test.ts --runInBand; expect failure because the module is absent.

• Implement pure snapshot parsing/filtering and seed a safe empty snapshot.

• Run the focused test; expect pass.

• Implement the cron script with bounded concurrent GET checks, 10-second timeout, HTML content-type test, atomic JSON rename and nonzero exit only for configuration failures.

Task 2: Render data on the server

Files:

• Create: lib/portfolio-data.ts

• Modify: app/components/Projects.tsx

• Modify: app/components/Experience.tsx

• Modify: app/components/Skills.tsx

• Modify: app/components/cinematic/CinematicHome.tsx

• Write failing tests for project filtering and server data adapters.

• Move static portfolio JSON parsing into a typed server module.

• Pass filtered projects, experiences and skills as props; retain client animation only within components.

• Run focused tests and build.

Task 3: Indexable professional content and regional SEO

Files:

• Modify: app/layout.tsx

• Modify: app/page.tsx

• Modify: lib/site-content.ts

• Modify: app/robots.ts

• Modify: app/sitemap.ts

• Create: app/curriculo/page.tsx

• Create: app/cases/[slug]/page.tsx

• Add profile/curriculum and case-study routes with visible text, internal links and static params.

• Add regional titles/descriptions and ProfilePage/Person schema that matches visible text.

• Add only canonical generated by Next, remove stale static metadata files that conflict with generated routes.

• Test static generation and inspect route output.

Task 4: Measured front-end fixes

Files:

• Modify: app/layout.tsx

• Modify: app/components/Hero.tsx

• Modify: app/components/cinematic/HeroScene.tsx

• Modify: app/components/cinematic/CinematicHome.tsx

• Modify: app/globals.css

• Modify: app/icon.svg

• Write or update tests for semantics where behavior changes.

• Remove hydration blocker; reserve hero layout to stop CLS.

• Defer the 3D canvas until browser idle and omit it with reduced motion or narrow/coarse pointers.

• Replace gradient text/glass defaults, repair contrast, list structure and accessible labels.

• Run Lighthouse again and compare baseline.

Task 5: Operations and verification

Files:

• Create: docs/project-health-cron.md

• Modify: relevant failing component tests only when the implementation intentionally changed their contractual UI.

• Document the exact cron command and expected snapshot behavior.

• Run npm test -- --runInBand, npm run lint, and npm run build.

• Run the health script against actual project URLs and confirm rendered project IDs match final 200 responses.

• Run a fresh Lighthouse audit and report measured deltas.