divine-portfolio

As a guest I want to be able to browse and view detailed project case studies on the Portfolio page. Implement a filterable grid of project cards (Surface: #EAE7DC, border-radius 16px) with project thumbnails, tech stack chips, and short descriptions. Clicking a card opens a modal with full project details, gallery images, and linked testimonials. Glowing coral border on hover, bounce-in animation on scroll entry. Navigation: accessible from Home FeaturedProjects and NavBar. Links back to Home and forward to Services. No existing JSX design — design to be created as part of this task.

As a guest I want to be able to view all services offered by Harsh on a dedicated Services page. Implement the full Services page based on the existing JSX design (v2) including: NavBar (Services active link), ServicesHero with coral gradient wash, ServicesOverview stats strip, ServiceCards 3-column grid with coral icons and hover glow, ProcessTimeline horizontal/vertical, PricingTeaser with INR pricing tiers, TechStack marquee, Testimonials carousel, FAQAccordion, ServicesCTA coral gradient band, and Footer. Navigation: accessible from Home ServicesOverview and NavBar. Links forward to Contact page.

As a guest I want to be able to view the Home page that showcases Harsh's work, services, and a call-to-action. Implement the full Home page based on the existing JSX design (v2) including: NavBar (sticky frosted-glass, coral dot logo, hamburger mobile menu), Hero section with animated gradient, TrustBar with scrolling logos, FeaturedProjects carousel with bounce animations and modal, ServicesOverview 3-column grid, HowItWorks stepper, TestimonialsCarousel, AboutSnapshot two-column layout, LeadMagnet coral CTA band, ContactForm with real-time validation, and Footer. Follows the page-level soft gradient background (#EAE7DC to #F5F5F5). Links to Portfolio, Services, Testimonials, Contact, and Dashboard pages.

As a user (Harsh Soni) I want to be able to manage my portfolio, projects, services, testimonials, and view contact inquiries from a Dashboard page. Implement the full Dashboard page based on the existing JSX design (v2) including: summary cards (total projects, services, testimonials count, new inquiries), side navigation with links to Portfolio management, Services management, Testimonials management, and Contact Inquiries. Coral accent theme consistent with the public site. Accessible after login only.

As a guest I want to be able to submit a project inquiry through the Contact page. Implement the full Contact page based on the existing JSX design (v2) including: NavBar (Contact active link), coral eyebrow 'Get In Touch', contact details (email, LinkedIn, India/IST) with coral icons, inquiry form with Name, Email, Budget Range (INR dropdown), Project Description textarea, and 'Send Message' coral pill CTA with ripple effect. Real-time validation: green checkmarks for valid fields, shake animation for errors, confetti burst on success. Honeypot spam field included. Navigation: accessible from NavBar and multiple page CTAs.

As a guest I want to be able to read client testimonials and reviews on a dedicated Testimonials page. Implement the full Testimonials page based on the existing JSX design (v2) including: NavBar (Testimonials active link), TestimonialsHero with coral star row, AggregateRating stats strip on warm beige, FeaturedTestimonials 2-column card grid with coral left-border accent, TestimonialsCarousel interactive auto-advancing carousel with modal on card click, VideoOrQuoteHighlight full-width pull-quote, ClientLogosStrip marquee, CallToAction band, and Footer. Navigation: accessible from Home TestimonialsCarousel and NavBar. Links forward to Contact.

As a user I want to be able to use a backend API for managing portfolio projects. Implement FastAPI endpoints: GET /projects (list all, filterable by tag/tech), GET /projects/{id} (single project detail with media), POST /projects (create), PUT /projects/{id} (update), DELETE /projects/{id} (delete). MySQL schema for projects table with fields: id, title, description, thumbnail_url, media_urls (JSON), tech_stack (JSON), is_featured, created_at. Secured write endpoints require auth.

As a user I want to be able to use a backend API for managing services listings. Implement FastAPI endpoints: GET /services (list all), GET /services/{id}, POST /services (create), PUT /services/{id} (update), DELETE /services/{id}. MySQL schema for services table: id, title, description, icon, price_inr, is_active, sort_order, created_at. Secured write endpoints require auth. Supports the Services page and Dashboard services management.

As a user I want to be able to use a backend API for managing client testimonials. Implement FastAPI endpoints: GET /testimonials (list all, filterable by rating), GET /testimonials/{id}, POST /testimonials (create), PUT /testimonials/{id}, DELETE /testimonials/{id}. MySQL schema: id, client_name, client_role, client_company, avatar_url, testimonial_text, star_rating, is_featured, created_at. Secured write endpoints require auth.

As a guest I want to be able to use a backend API to submit a project inquiry securely. Implement FastAPI endpoint: POST /contact/inquiry with fields name, email, budget_range_inr, project_description, honeypot (spam check). Store submissions in MySQL inquiries table. GET /contact/inquiries (auth-protected) for dashboard view. Implement spam prevention: honeypot validation, rate limiting per IP. Send email notification to Harsh on new submission. Localize timestamps to IST.

As a user (Harsh Soni) I want to be able to manage portfolio content live from the Dashboard using backend APIs. Wire up Dashboard page to all management APIs: add/edit/delete projects with media upload, update services, manage testimonials (approve/delete), and view contact inquiries with IST timestamps. Implement optimistic UI updates and toast notifications for CRUD actions.

As a user I want to be able to see live data from the backend on all public pages. Wire up all frontend pages (Home, Portfolio, Services, Testimonials, Contact) to consume the FastAPI REST endpoints. Replace static/mock data with API calls using fetch or axios. Implement loading states with skeleton screens, error boundaries, and empty states. Ensure IST timezone display and INR currency formatting throughout.

As a user I want to be able to use an AI assistant on the dashboard to get intelligent suggestions and responses. Integrate GPT via Litellm routing into the dashboard AI assistant page. Implement a chat interface for Harsh to ask questions about his portfolio analytics, get content suggestions for project descriptions, and generate service copy. FastAPI endpoint: POST /ai/chat with message history context. Use Litellm for model routing and fallback.

As a guest I want to be able to use the portfolio website with accessibility tools and experience fast load times. Audit and fix all pages against WCAG 2.1: proper ARIA labels, keyboard navigation, color contrast ratios (coral on white meets AA). Optimize performance: lazy loading for images, code splitting per route, image compression, ensure all pages load within 2 seconds. Run Lighthouse audit and resolve critical issues.