Create Projects overview page with status cards #38

Closed
opened 2026-01-15 19:37:39 +00:00 by lmiranda · 1 comment
Owner

Description

Create a Projects overview page (portfolio_app/pages/projects.py) that serves as the hub for all portfolio projects. Shows project cards with status badges and links to live dashboards/repositories.

Page Structure

From blueprint "3. PROJECTS PAGE":

  1. Intro Text - Brief explanation of project categories
  2. Project Cards (4 total):
    • Toronto Housing Market Dashboard (Live) - links to /toronto
    • US Retail Energy Price Predictor (Coming Soon)
    • DataFlow Platform (Deferred - Phase 3)
    • AI-Assisted Automation / Bandit Labs (Active)

Each card includes:

  • Type badge (Personal/Professional/Consulting)
  • Status badge (Live/Coming Soon/Deferred/Active)
  • Problem statement
  • What was built (bullet points)
  • Tech stack
  • What was learned
  • Action buttons (View Dashboard, View Repository, etc.)

Acceptance Criteria

  • Page registered at /projects using Dash Pages
  • All 4 project cards implemented with full content
  • Status badges color-coded (Live=green, Coming Soon=blue, Deferred=gray, Active=teal)
  • Type badges displayed (Personal, Professional, Consulting)
  • Toronto Housing card links to /toronto dashboard
  • External links open in new tab (repositories)
  • Mobile responsive card layout (stack on mobile, grid on desktop)
  • Theme-aware styling

Technical Notes

  • Register page: dash.register_page(__name__, path="/projects", name="Projects")
  • Use dmc.Card with sections for each project
  • Status badges: dmc.Badge with appropriate colors
  • Consider dmc.Spoiler for long "What I Built" sections
  • Action buttons can be dmc.Button with variant="outline"

Content Source

Full content in docs/changes/Portfolio-Changes.txt section "3. PROJECTS PAGE"

Dependencies

  • Depends on: #40 (Extend sidebar navigation)

Labels: Type/Feature, Priority/High, Complexity/Medium, Efforts/L, Component/Frontend, Sprint/8

## Description Create a Projects overview page (`portfolio_app/pages/projects.py`) that serves as the hub for all portfolio projects. Shows project cards with status badges and links to live dashboards/repositories. ## Page Structure From blueprint "3. PROJECTS PAGE": 1. **Intro Text** - Brief explanation of project categories 2. **Project Cards** (4 total): - Toronto Housing Market Dashboard (Live) - links to /toronto - US Retail Energy Price Predictor (Coming Soon) - DataFlow Platform (Deferred - Phase 3) - AI-Assisted Automation / Bandit Labs (Active) Each card includes: - Type badge (Personal/Professional/Consulting) - Status badge (Live/Coming Soon/Deferred/Active) - Problem statement - What was built (bullet points) - Tech stack - What was learned - Action buttons (View Dashboard, View Repository, etc.) ## Acceptance Criteria - [ ] Page registered at `/projects` using Dash Pages - [ ] All 4 project cards implemented with full content - [ ] Status badges color-coded (Live=green, Coming Soon=blue, Deferred=gray, Active=teal) - [ ] Type badges displayed (Personal, Professional, Consulting) - [ ] Toronto Housing card links to `/toronto` dashboard - [ ] External links open in new tab (repositories) - [ ] Mobile responsive card layout (stack on mobile, grid on desktop) - [ ] Theme-aware styling ## Technical Notes - Register page: `dash.register_page(__name__, path="/projects", name="Projects")` - Use `dmc.Card` with sections for each project - Status badges: `dmc.Badge` with appropriate colors - Consider `dmc.Spoiler` for long "What I Built" sections - Action buttons can be `dmc.Button` with `variant="outline"` ## Content Source Full content in `docs/changes/Portfolio-Changes.txt` section "3. PROJECTS PAGE" ## Dependencies - Depends on: #40 (Extend sidebar navigation) --- **Labels:** Type/Feature, Priority/High, Complexity/Medium, Efforts/L, Component/Frontend, Sprint/8
Author
Owner

Completed

Created portfolio_app/pages/projects.py with 4 project cards:

  1. Toronto Housing Dashboard - Live, with dashboard/repo links
  2. US Retail Energy Predictor - Coming Soon badge
  3. DataFlow Platform - Case Study Pending, with impact metrics
  4. Bandit Labs - Active, links to /lab

Each card includes: problem, what I built, tech stack, what I learned, and action buttons.

Syntax and lint checks pass.

✅ **Completed** Created `portfolio_app/pages/projects.py` with 4 project cards: 1. **Toronto Housing Dashboard** - Live, with dashboard/repo links 2. **US Retail Energy Predictor** - Coming Soon badge 3. **DataFlow Platform** - Case Study Pending, with impact metrics 4. **Bandit Labs** - Active, links to /lab Each card includes: problem, what I built, tech stack, what I learned, and action buttons. Syntax and lint checks pass.
lmiranda added this to the Launch: Host, Bio and Toronto House Market Analysis project 2026-01-16 14:51:54 +00:00
lmiranda self-assigned this 2026-01-16 14:51:59 +00:00
lmiranda moved this to Done in Launch: Host, Bio and Toronto House Market Analysis on 2026-01-16 14:52:25 +00:00
Sign in to join this conversation.