regal-skills

Audit and align all shared/reusable components (buttons, cards, nav, footer, badges, inputs) to the finalized color palette and theme tokens from T01. Ensure consistent hover states, focus rings, and disabled states using Accent #0077B6 and Muted #B0BEC5. Produce a shared component library (Button, Card, Tag, Avatar, InputField, SectionHeader) that all page tasks will consume.

As a Visitor, I want to use the backend API for contact form submission: POST /api/contact/submit (validate payload, verify reCAPTCHA server-side, persist to MySQL contact_submissions table, send email via SMTP). GET /api/contact/submissions (admin only, paginated). PATCH /api/contact/submissions/{id}/read (mark read). Include input sanitization and IP rate limiting.

As an Admin, I want to use the backend API for Projects management: POST /api/projects (create with image upload), GET /api/projects (paginated, filterable), GET /api/projects/{id} (detail), PATCH /api/projects/{id} (update), DELETE /api/projects/{id} (soft delete). Admin write endpoints protected by JWT auth middleware.

As an Admin, I want to use the backend API for Experience management: POST /api/experience (create entry), GET /api/experience (ordered list by date), GET /api/experience/{id}, PATCH /api/experience/{id}, DELETE /api/experience/{id}. Admin write endpoints protected by JWT. Schema: id, company, role, description, start_date, end_date, is_current, location, highlights (JSON array).

As an Admin, I want to use the backend API for Skills management: POST /api/skills (create with certificate file upload), GET /api/skills (grouped by category), GET /api/skills/{id}, PATCH /api/skills/{id} (update proficiency/metadata), DELETE /api/skills/{id}, POST /api/skills/{id}/certificate (upload certificate PDF/image). Admin write endpoints protected by JWT.

As a Visitor, I want to use the backend API to view live GitHub repository stats: GET /api/github/repo/{owner}/{repo} returning stars, forks, open issues, last commit date, and language breakdown. Cache responses (TTL 30 min) to avoid rate limiting. GET /api/github/repos lists configured showcase repositories. Admin can update showcase repo list via PATCH /api/admin/github/repos. Used by Project Detail page (T06).

As a Visitor, I want to use the frontend to experience the Landing Page (v2 design) as the dynamic timeline entry point. Include scroll-triggered animations: avatar movement along a vertical timeline, card pop-in effects for milestone cards, and a hero section with animated headline. Wire up navigation to About, Projects, Experience, and Contact. Sections: Hero, Timeline Teaser, Skills Snapshot, Featured Projects, CTA. Use theme tokens from T01/T02.

As a Visitor, I want to use the frontend to view the About Page (v1 design) showing Yashwanth Booram's personal narrative, profile photo, short bio, education history, and core values/interests. Include animated section reveals on scroll. Consume shared Card and Avatar components from T02. Ensure responsive layout for mobile, tablet, and desktop breakpoints.

As a Visitor, I want to use the frontend to browse Projects (v1 design) via a filterable/searchable grid of project cards showing title, tech stack tags, thumbnail, and GitHub link. Implement filter by category/tech. Each card navigates to the Project Detail view. Consume shared Card and Tag components. Data fetched from Projects API (T14) once available; use mock data initially.

As a Visitor, I want to use the frontend to explore the Experience Page (v2 design) as a vertical interactive timeline with milestone cards for each role/position. Include scroll-triggered animations (slide-in from alternating sides), expandable milestone detail panels, and date range badges. Visitor flow shows read-only timeline. Data sourced from Experience API (T15); use mock data initially.

As a Visitor, I want to use the frontend to view the Skills Page (v1 design) with categorized skill cards, proficiency indicators, certificate thumbnails/links, and a visual skills matrix. Include hover effects revealing detail tooltips. Support certificate preview modal. Data sourced from Skills API (T16); use mock data initially.

As a Visitor, I want to use the frontend to send a message via the Contact Page (v1 design) with Name, Email, Subject, Message fields with inline validation. Integrate Google reCAPTCHA v2 widget. Show success/error toast feedback on submission. Include social links panel alongside the form. Wire form submission to Contact API (T13). Use shared InputField and Button components from T02.

As an Admin, I want to use the frontend to authenticate via the Login Page (v3 design): centered card with email/password fields, show/hide password toggle, form validation with error states, and a loading spinner on submit. On successful auth, redirect to Dashboard. Style with Accent #0077B6 for the submit button and Surface #FFFFFF card background per theme tokens.

As a Visitor, I want to use the backend API to have my contact form verified via reCAPTCHA: implement server-side reCAPTCHA v2 token verification service in FastAPI as a reusable CaptchaService. Calls Google's siteverify API, validates response, raises HTTPException on failure. Injected as dependency into POST /api/contact/submit (T13). Store secret key in environment variables.

As a Visitor, I want to use the frontend to view a Project Detail page showing full description, screenshots/media, tech stack, live demo link, and an embedded GitHub repository stats panel (stars, forks, last commit). Include back-to-projects navigation. Integrates GitHub showcase component (T18). Data sourced from Projects API (T14).

As an Admin, I want to use the frontend Dashboard Page (v1 design) to see summary stat cards (total projects, messages, skills, experience entries), recent contact submissions table, quick-action buttons (Add Project, Add Experience, Upload Skills), and a navigation sidebar linking to all admin management sections. Use mock data initially; protected route requiring auth.

As an Admin, I want to use the frontend to manage all content via CRUD interfaces: Projects (Add/Edit/Delete forms with image upload), Experience (Add/Edit forms with date pickers and rich text), Skills (upload certificates, proficiency sliders, category management), and Contact (view submissions list with read/unread status). All forms use shared components. Protected routes. Wire to APIs T13–T16.

As a User, I want to use the frontend with live data from all backend APIs. Replace mock/static data across all pages (Landing, About, Projects, Experience, Skills, Contact, Dashboard, Admin Management) with live API calls using Axios or React Query. Implement a centralized API client with base URL config, JWT auth header injection for admin routes, and global error boundary handling.