Built at OpenAI Codex - Fast Hacks in Tokyo

Career Canvas

# Career Canvas **A canvas-first portfolio builder that turns connected career experiences into an evidence-backed portfolio.** ## The problem Traditional resumes and portfolios force nonlinear careers into chronological lists. Projects, roles, certifications, achievements, and skills lose the relationships that explain how one experience led to another—and what evidence actually supports a claimed capability. ## The idea Career Canvas treats a career as a graph. People build their story spatially on an infinite canvas, using connected cards for companies, experiences, projects, certifications, skills, achievements, and goals. The same graph then becomes the source of truth for a structured portfolio. > A resume is a list, but a career is a graph. ## How it works 1. **Create cards freely.** Double-click the canvas to add any career card where it makes sense. 2. **Connect experiences.** Draw directed relationships between the work, learning, outcomes, and capabilities that belong together. 3. **Derive new cards.** Drag a connection into open space, choose a card type, and create a related card with the relationship already attached. 4. **Build evidence-backed skills.** Connect multiple projects, experiences, or credentials to one Skill; its supporting-source count updates from the graph. 5. **Generate a structured portfolio.** Switch to Portfolio to see the current graph organized into readable sections, with each Skill showing its connected supporting evidence—or clearly showing that evidence is still needed. Optional intelligence features extend the same graph without changing the core workflow: - **Shisa AI skill suggestions:** analyze an Experience or Project and review 3–5 suggested Skill cards before adding them to the canvas. - **Neo4j graph analysis:** sync the current cards and connections on demand, then identify the most connected career node and Skill hub. Both integrations run through server-side routes so credentials are never included in the browser bundle. ## Why this is different - **Nonlinear by design:** it represents relationships across a career instead of flattening them into one timeline. - **Skills backed by evidence:** capabilities are connected to the work that demonstrates them, not listed as unsupported keywords. - **Spatial editing:** people can think, arrange, and discover their story through direct manipulation of relationships. - **Thinking interface to presentation interface:** the canvas supports exploration; Portfolio turns that thinking into a clear narrative. - **One source of truth:** cards and connections in the graph drive the portfolio directly. ## Demo The canonical demo starts with a populated career graph: 1. Add a Project called **Hackathon 2026**. 2. Drag its connection handle into open space and create a Skill called **Rapid Prototyping**. 3. Connect the existing **AI Automation** project to the same Skill. 4. Confirm that **Rapid Prototyping** shows **2 supporting sources**. 5. Open Portfolio and see both **Hackathon 2026** and **AI Automation** listed as evidence for that Skill. The result is a visible relationship: **Hackathon 2026 → Rapid Prototyping ← AI Automation**. ## Technology - React 19 and TypeScript - Vite 8 - React Flow via `@xyflow/react` - Browser `localStorage` for versioned graph and viewport persistence - Node.js server routes for optional intelligence features - Shisa AI for career-evidence skill suggestions - Neo4j for on-demand graph synchronization and connectivity analysis - Lucide React icons and plain CSS - OpenAI Codex as a development and verification tool; the product does not use the OpenAI API ## Running locally Prerequisite: Node.js `^20.19.0` or `>=22.12.0`. ```bash npm ci npm run dev ``` Open the local URL printed by Vite. This is the canonical, browser-local Canvas and requires no backend or external credentials. The concurrently developed optional intelligence integrations are preserved as an explicit lab surface. To run them, copy `.env.example` to `.env.local`, provide the corresponding server-side credentials, then use: ```bash npm run dev:labs ``` Open `/canvas?labs=1` only when intentionally testing those integrations. To verify and run the production build: ```bash npm run build npm run preview ``` ## Current scope Career Canvas is a desktop-first prototype focused on graph authoring and graph-derived portfolio presentation. The working graph is saved in the current browser profile; Shisa AI suggestions and Neo4j analysis are optional, credential-dependent actions. Accounts, cross-device sync, collaboration, public sharing, export, and mobile optimization are outside this submission's scope. ## Future direction Future work could add role-tailored portfolio generation, richer graph recommendations, and deeper longitudinal career intelligence. These are future directions, not features claimed in this prototype.