personal-projects/personal-portfolio
Template
1
1
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Create Contact page with form UI and contact info #40

New Issue
Closed
opened 2026-01-15 19:38:26 +00:00 by lmiranda · 1 comment
lmiranda commented 2026-01-15 19:38:26 +00:00
Owner
Copy Link

Description

Create a Contact page (portfolio_app/pages/contact.py) with a contact form UI (disabled in Phase 1) and displayed contact information. Backend form submission will be implemented in a future phase.

Page Structure

From blueprint "7. CONTACT PAGE":

  1. Intro Text - Open to opportunities statement + Bandit Labs mention
  2. Contact Form (UI only, disabled):
    • Name field
    • Email field
    • Subject dropdown (Job Opportunity / Consulting Inquiry / Other)
    • Message textarea
    • Submit button (disabled with tooltip)
  3. Direct Contact Section:
  4. Location Info - Toronto, ON + work eligibility

Acceptance Criteria

  • Page registered at /contact using Dash Pages
  • Contact form UI rendered with all fields
  • Submit button disabled with "Coming Soon" tooltip or message
  • Form fields are interactive but submission is blocked
  • Direct contact info displayed clearly (email, phone, social links)
  • Location and work eligibility shown
  • External links (LinkedIn, GitHub) open in new tab
  • Mobile responsive layout (form stacks on mobile)
  • Theme-aware styling

Technical Notes

  • Register page: dash.register_page(__name__, path="/contact", name="Contact")
  • Use dmc.TextInput, dmc.Select, dmc.Textarea for form fields
  • Subject dropdown options: ["Job Opportunity", "Consulting Inquiry", "Other"]
  • Disable submit: dmc.Button("Submit", disabled=True)
  • Add info alert: dmc.Alert("Form submission coming soon...", color="blue")
  • Use dmc.Anchor with target="_blank" for external links

Phase 2 Notes

Backend implementation will require:

  • Email service integration (SendGrid, AWS SES, or similar)
  • Form validation callback
  • Success/error feedback
  • Rate limiting consideration

Content Source

Full content in docs/changes/Portfolio-Changes.txt section "7. CONTACT PAGE"

Dependencies

  • Depends on: #40 (Extend sidebar navigation)

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

## Description Create a Contact page (`portfolio_app/pages/contact.py`) with a contact form UI (disabled in Phase 1) and displayed contact information. Backend form submission will be implemented in a future phase. ## Page Structure From blueprint "7. CONTACT PAGE": 1. **Intro Text** - Open to opportunities statement + Bandit Labs mention 2. **Contact Form** (UI only, disabled): - Name field - Email field - Subject dropdown (Job Opportunity / Consulting Inquiry / Other) - Message textarea - Submit button (disabled with tooltip) 3. **Direct Contact Section**: - Email: leobrmi@hotmail.com - Phone: (416) 859-7936 - LinkedIn link - GitHub link 4. **Location Info** - Toronto, ON + work eligibility ## Acceptance Criteria - [ ] Page registered at `/contact` using Dash Pages - [ ] Contact form UI rendered with all fields - [ ] Submit button disabled with "Coming Soon" tooltip or message - [ ] Form fields are interactive but submission is blocked - [ ] Direct contact info displayed clearly (email, phone, social links) - [ ] Location and work eligibility shown - [ ] External links (LinkedIn, GitHub) open in new tab - [ ] Mobile responsive layout (form stacks on mobile) - [ ] Theme-aware styling ## Technical Notes - Register page: `dash.register_page(__name__, path="/contact", name="Contact")` - Use `dmc.TextInput`, `dmc.Select`, `dmc.Textarea` for form fields - Subject dropdown options: `["Job Opportunity", "Consulting Inquiry", "Other"]` - Disable submit: `dmc.Button("Submit", disabled=True)` - Add info alert: `dmc.Alert("Form submission coming soon...", color="blue")` - Use `dmc.Anchor` with `target="_blank"` for external links ## Phase 2 Notes Backend implementation will require: - Email service integration (SendGrid, AWS SES, or similar) - Form validation callback - Success/error feedback - Rate limiting consideration ## Content Source Full content in `docs/changes/Portfolio-Changes.txt` section "7. CONTACT PAGE" ## Dependencies - Depends on: #40 (Extend sidebar navigation) --- **Labels:** Type/Feature, Priority/Medium, Complexity/Medium, Efforts/M, Component/Frontend, Sprint/8
lmiranda commented 2026-01-15 20:06:39 +00:00
Author
Owner
Copy Link

✅ Completed

Created portfolio_app/pages/contact.py with:

  • Intro Section: Job search + consulting text
  • Contact Form: All fields present but disabled with "Coming Soon" alert
  • Direct Contact: Email, phone, LinkedIn, GitHub with icons
  • Location Section: Toronto + work eligibility

Form UI is complete and ready for backend integration in future phase.

Syntax and lint checks pass.

✅ **Completed** Created `portfolio_app/pages/contact.py` with: - **Intro Section**: Job search + consulting text - **Contact Form**: All fields present but disabled with "Coming Soon" alert - **Direct Contact**: Email, phone, LinkedIn, GitHub with icons - **Location Section**: Toronto + work eligibility Form UI is complete and ready for backend integration in future phase. 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:28 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Complexity/Complex
High uncertainty or many dependencies
 Complexity/Medium
Some unknowns or dependencies
 Complexity/Simple
Straightforward, well-understood
 Effort/L
3-5 days
 Effort/M
1-2 days
 Effort/S
2-4 hours
 Effort/XL
> 1 week
 Effort/XS
< 2 hours
 Priority/Critical
Immediate attention required
 Priority/High
Important, needs attention soon
 Priority/Low
Nice to have, can wait
 Priority/Medium
Normal priority
 Type/Bug
Something isn't working
 Type/Chore
Maintenance tasks
 Type/Documentation
Documentation improvements
 Type/Feature
New feature or request
 Type/Refactor
Code refactoring without changing behavior
 Type/Test
Testing related
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project Launch: Host, Bio and Toronto House Market Analysis
Assignees
Clear assignees
lmiranda
No Assignees lmiranda
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: personal-projects/personal-portfolio#40
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?