hollow-portfolio

As a user, I want to view the full Home landing page so that I get an immediate professional impression of Shivanand's portfolio. Implement all sections using the existing JSX design (v2): NavBar, Hero (avatar, headline, CTAs, social icons), AboutSnapshot (bio card + stat chips), WorkExperience (vertical timeline with glassmorphism cards), Projects (card grid with filter pills), TechSkills (categorized chip grid), Education (horizontal cards), Testimonials (carousel), ContactCTA (form + direct links), Footer. Use IntersectionObserver animations for scroll-triggered reveals. Page receives traffic from all user flows as the entry point.

As a user, I want my contact form submission to be delivered to Shivanand's email so that my message is not lost. Implement a FastAPI endpoint (POST /api/contact) that accepts name, email, and message fields, validates input, and sends an email notification via SMTP or a third-party service (e.g., SendGrid). Return appropriate success/error responses. The frontend Contact page depends on this API.

As a user, I want to read Shivanand's full bio on a dedicated About page so that I can understand his background, values, and professional journey in depth. Implement the About page based on the existing JSX design (v2): extended biography, professional values, personal interests, and a timeline of career milestones. Apply glassmorphism card layout consistent with the design system. This page is linked from the Home landing and flows into the Education page per the General Visitor user flow.

As a user, I want to explore Shivanand's full work experience on a dedicated Experience page so that I can evaluate his roles and contributions in detail. Implement the Experience page based on the existing JSX design (v2): ExperienceHero, ExperienceTimeline (vertical timeline with alternating left/right glassmorphism cards), RoleDetailCards (contribution bullets), TechUsedPerRole chips, AchievementsStrip, SkillsBridge, and Footer. IntersectionObserver scroll animations throughout. This page is navigated to from Home per the Recruiter user flow and flows into the Skills and Contact pages.

As a user, I want to see Shivanand's full technical skills list on a dedicated Skills page so that I can evaluate his technology proficiency at a glance. Implement the Skills page based on the existing JSX design (v2): categorized glassmorphism sub-cards (Languages, Frameworks & Libraries, Tools & Platforms), icon+label chips with hover scale effects and #007BFF border on hover, and optional proficiency ring indicators. This page is navigated to from Home and Experience, flowing to Projects or Contact per the Recruiter and Collaborator flows.

As a user, I want to view Shivanand's education history on a dedicated Education page so that I can understand his academic background and qualifications. Implement the Education page based on the existing JSX design (v1): horizontal glassmorphism cards (stacked on mobile) showing institution name, degree/field, year range, CGPA badge, and institution logo. Cards animate from the sides on scroll. Includes AchievementsAndHonors section. This page flows from About per the General Visitor user flow.

As a user, I want to browse Shivanand's projects on a dedicated Projects page so that I can assess his practical skills and access source code links. Implement the Projects page based on the existing JSX design (v2): responsive card grid (3-col desktop, 2-col tablet, 1-col mobile), filter pills (All, Web, Tools, etc.), project thumbnails, descriptions, tech stack tags, and GitHub/Live Demo icon buttons with ripple effects. Cards animate in staggered on scroll and lift on hover with a #007BFF glow. This page is linked from Home and flows into Contact per the Collaborator and Recruiter user flows.

As a user, I want to contact Shivanand through a dedicated Contact page so that I can reach out for job opportunities, collaborations, or general inquiries. Implement the Contact page based on the existing JSX design (v2): centered glassmorphism panel (max-width 720px), contact form (Name, Email, Message) with floating label animations and #007BFF focus glow, 'Send Message' button with ripple effect, and direct contact links row (Email, LinkedIn, GitHub) with hover color pop. Integrates with the FastAPI contact form backend. This page is the final destination in all user flows (Recruiter, Collaborator).

As a user, I want to find Shivanand's portfolio easily via search engines and use it with accessibility tools so that the site is discoverable and inclusive. Add proper HTML meta tags (title, description, og:image, og:title), structured data (JSON-LD for Person schema), alt attributes for all images, ARIA labels for interactive elements, keyboard navigation support, and ensure WCAG 2.1 AA compliance across all pages. Optimize Lighthouse scores for performance, accessibility, and SEO.

As a visitor, I want to access Shivanand's portfolio via a public URL so that I can browse it without any setup. Configure deployment pipeline to Vercel or Netlify with environment variables for the contact form API, set up custom domain if available, enable HTTPS, configure build settings for the React app, and verify all pages and routes work correctly in production.