urban-portfolio

Ensure full color and typography alignment across all components. Apply bold typography styles, consistent use of accent color #A259FF for highlights, muted color #6C6C80 for secondary text, and surface color #2C2C3A for cards and containers. Set up global font families and sizes to match the reference design mockups.

Implement the Home page based on the v1 design mockup. Include a fixed navigation bar with smooth scrolling and hover effects, the designer's introduction with a typewriter animation effect, subtle geometric background patterns that fade in/out on scroll, and a dynamic grid layout hero section. Ensure the section is fully responsive for desktop and mobile.

Implement the About Me page based on the v1 design mockup. Display the designer's background, skills list with visual indicators, and fun facts section. Ensure the layout is clean and consistent with the dark theme. Wire up data from the backend skills API endpoint once available.

Implement the Projects page based on the v1 design mockup. Display animated project cards that expand slightly on hover with a glowing accent border (#A259FF). Each card should show the project title, description, tech stack, and links to live demo or repository. Fetch project data from the backend projects API once available.

Implement the Contacts page based on the v1 design mockup. Include a contact form with fields for name, email, and message, social media links, and submission feedback. Integrate with the backend contact form submission API. Ensure form validation and success/error states are handled gracefully.

Implement FastAPI backend endpoints for projects management: GET /projects (list all), GET /projects/{id} (single project), POST /projects (create), PUT /projects/{id} (update), DELETE /projects/{id} (delete). Each project should have fields: id, title, description, tech_stack, live_url, repo_url, thumbnail_url, is_featured, created_at. Store data in MySQL.

Implement FastAPI backend endpoints for About Me data: GET /about (fetch designer bio, fun facts), GET /skills (list all skills), PUT /about (update bio - admin), POST /skills (add skill - admin), DELETE /skills/{id} (remove skill - admin). Skills should have fields: id, name, category, proficiency_level. Store in MySQL.

Implement FastAPI backend endpoint for contact form submissions: POST /contact (accept name, email, message and store in MySQL). Include input validation, rate limiting to prevent spam, and an optional email notification trigger to the portfolio owner upon new submission. Return appropriate success/error responses.

Connect the Projects page frontend to the backend projects CRUD API. Implement data fetching with loading and error states, display projects dynamically from the API response, and ensure the admin flow for adding and editing projects is wired up. Use React state management or a data-fetching library for API calls.

Connect the About Me page frontend to the backend skills and about API. Fetch and render bio, skills, and fun facts dynamically. Handle loading and error states gracefully. Ensure the admin can update skills and bio through the integrated interface.

Connect the Contacts page frontend form to the backend contact submission API. Handle form submission, display success confirmation or error messages based on API response, clear form on success, and ensure proper client-side validation before submission.

Ensure all admin-facing backend API endpoints (project CRUD mutations, about/skills updates) are protected against unauthorized access. Implement API key or token-based authorization middleware in FastAPI for POST, PUT, and DELETE routes. Validate and sanitize all incoming request payloads to prevent injection attacks.

Audit and optimize the full portfolio for performance. Ensure the website loads within 2 seconds on standard broadband. Implement lazy loading for images, optimize bundle size, and verify full responsiveness across desktop, tablet, and mobile breakpoints. Test on all modern browsers (Chrome, Firefox, Safari, Edge) and fix any compatibility issues.