fiery-portfolio

As a user I want to experience the full Homepage with the interactive 3D Universe. Implement all sections from the existing Homepage (v2) JSX design: NavBar (sticky frosted-glass), HeroIntro (100vh animated typewriter hero with CTA buttons), Universe3D (Three.js/React-Three-Fiber solar system with clickable planet orbs representing skill clusters and projects), AboutSnapshot (avatar + bio + stat chips), SkillsConstellation (interactive SVG constellation map), FeaturedProjects (3-column card grid), ExperienceTimeline (alternating left-right timeline), ResumeDownload (banner CTA), ContactForm (two-column with floating labels), Footer. The 3D canvas must be fully transparent to expose the root starfield. Planets must scroll-link to respective page sections on click. Entry point from user flow: both Aditya and Guest users land here first.

As a user I want to browse all projects and read detailed case studies on the Projects page. Implement all sections from the existing Projects (v2) JSX design: NavBar (active 'Projects' link), ProjectsHero (100vh transparent hero with animated orbit SVG and stat counters), FilterBar (sticky category pills + tech tag multi-select + sort dropdown), ProjectsGrid (responsive masonry card grid with hover glow, featured badge, case study and live demo links, staggered scroll-entry animation), FeaturedCaseStudy (full-width two-column spotlight with parallax illustration), TechStackLegend (interactive tech badges with usage counts and hover highlight), GitHubActivity (contribution heatmap + stats), ProjectsCTA (banner with contact and resume CTAs), Footer. Navigated to from Homepage planet click or NavBar. Links out to Contact page.

As a user I want to explore Aditya's full technical skill set on the Skills page. Implement all sections from the existing Skills (v2) JSX design: NavBar (active 'Skills' link), SkillsHero (transparent hero with animated constellation SVG), SkillsConstellation (full interactive SVG/canvas constellation with category color-coding: orange=Frontend, blue=Backend, teal=DevOps, purple=Database), ProficiencyBreakdown (progress bars or radial gauges per skill), ToolsAndFrameworks (icon grid), LearningTimeline (chronological skill growth), SkillsCTA (resume download CTA), Footer. Navigated to from Homepage planet click or NavBar. Links to Resume page for CV download.

As a user I want to view and download Aditya's full resume on the Resume page. Implement all sections from the existing Resume (v2) JSX design: NavBar (active 'Resume' link), ResumeHero (compact ~300px hero with avatar + orbital ring + meta pills), ResumeDownloadBar (sticky action bar with PDF download shimmer CTA and LinkedIn ghost button), ProfessionalSummary (full-width card with orange vertical accent bar), WorkExperience (alternating timeline with pulsing nodes and gradient connecting line), EducationSection (two-card row with orbit-ring decoration), TechSkillsMatrix (four-group skill cards with category color-coded borders), CertificationsAwards (horizontally scrollable cards), ProjectsSnapshot (compact 3-card grid linking to /projects), Footer. Navigated to from Skills page and Homepage ResumeDownload banner. Provides PDF download functionality.

As a user I want to send a message to Aditya via the Contact page. Implement all sections from the existing Contact (v2) JSX design: NavBar (active 'Contact' link), ContactHero (transparent hero with satellite SVG animation), ContactInfo (left column with email, LinkedIn, GitHub, location/IST timezone, response time indicator), ContactForm (right column with Name, Email, Subject, Message fields — dark surface with orange focus-border glow, floating labels, inline validation, 'Launch Message' rocket-icon submit button with loading spinner and success checkmark animation), SocialConnect (social icon row with glow), ContactCTA (minimal footer CTA strip), Footer. Navigated to from Projects page case study CTAs, Homepage ContactForm section, and ResumeDownload banner.

As a user I want to submit the contact form and receive a confirmation. Build a FastAPI POST /api/contact endpoint that accepts name, email, subject, and message fields. Validate inputs server-side, store submission in MySQL/MariaDB contact_submissions table, send an email notification to Aditya's address (via SMTP or a transactional email service), and return a JSON success/error response. Handle rate limiting to prevent spam. The Frontend Contact page form depends on this API for its submit action and success/error state display.

As a user I want to download Aditya's resume as a PDF from the Resume page. Build a FastAPI GET /api/resume/download endpoint that serves the latest resume PDF file with the correct Content-Disposition header for download. Store the PDF in a static assets directory or object storage. Include an endpoint to allow Aditya to update the resume file via an authenticated PUT /api/resume/upload endpoint. Track download count in the database for analytics. The Frontend ResumeDownloadBar and ResumeDownload banner CTA buttons depend on this endpoint.

As a user I want to browse dynamically loaded project data on the Projects page. Build FastAPI endpoints: GET /api/projects (list with filter params for category and tech tags, sort options), GET /api/projects/{id} (single project detail with full case study content). Database model: projects table with fields for title, description, thumbnail_url, tech_stack (JSON), category, live_url, github_url, is_featured, sort_order, created_at. Seed with Aditya's real projects. The ProjectsGrid, FeaturedCaseStudy, and ProjectsSnapshot sections depend on this API.

As a user I want the portfolio to load within 3 seconds on standard broadband. Audit and optimize: lazy-load Three.js / React-Three-Fiber only on Homepage Universe3D section, implement code splitting per page route, compress and serve 3D model assets via Nginx gzip/brotli, add Intersection Observer–based animation triggers so off-screen animations don't run, reduce particle counts on the starfield for mobile viewports, set up image optimization (WebP, responsive srcSet) for project thumbnails and avatar, configure Nginx caching headers for static assets. Validate final Lighthouse scores: Performance ≥ 90, LCP < 3s.

As a user I want the portfolio to be reliably deployed and accessible via Nginx. Configure Nginx as the reverse proxy for the React frontend (serve built static files) and FastAPI backend (proxy /api/* routes). Set up SSL/TLS termination, gzip compression, HTTP/2, and security headers (CSP, HSTS, X-Frame-Options). Update docker-compose.yml to include the nginx service alongside frontend and backend containers. Validate the existing Kubernetes deployment charts work end-to-end with the final service configuration. Ensure environment variables for DB connection, email SMTP, and resume storage path are correctly passed via k8s secrets.