yuvaraj-6867/portfolio

Purpose and Runtime

This is a single-page personal QA-engineering portfolio. It runs as a React 19 + TypeScript client application, built and served by Vite. Styling uses Tailwind CSS v4 alongside application CSS; Framer Motion supports animated presentation. The primary browser entry is index.html, which loads src/main.tsx; React mounts the root application in src/App.tsx.

Application Composition

src/App.tsx is the page orchestrator: it assembles the portfolio sections and site-wide interaction layers. src/index.css and src/App.css provide global and application-level visual rules. The app is primarily static, section-based content rather than a routed or backend-driven system.

Portfolio Content Pipeline

The main content flow is top-to-bottom within the root page:

• Hero/introduction: src/components/Home.tsx

• Biography and metrics: src/components/About.tsx

• Employment timeline: src/components/Experience.tsx

• Project showcase and skills: src/components/ProjectsSection.tsx, src/components/SkillsSection.tsx

• Contact endpoint: src/components/Contact.tsx

These components own the portfolio’s displayed data and presentation; changes to resume, projects, experience, or skills are expected to occur at this component layer.

Navigation and Accessibility Boundary

In-page navigation is provided by src/components/Navbar.tsx, with supporting orientation and recovery controls in src/components/SectionIndicator.tsx, src/components/ScrollToTop.tsx, and src/components/SkipToContent.tsx. Keyboard interaction is centralized through src/hooks/useKeyboardNav.ts, separating document-navigation behavior from individual content sections.

Presentation and Motion Systems

Animation and scroll-responsive behavior are shared through src/components/animations.ts and hooks such as src/hooks/useScrollAnimation.ts and src/hooks/useTilt.ts. Global visual feedback is layered independently from content via src/components/SplashScreen.tsx, src/components/ScrollProgress.tsx, and src/components/CursorTrail.tsx. This isolates decorative motion from portfolio content but makes browser/client rendering a material runtime dependency.

User Actions and External Services

The contact workflow in src/components/Contact.tsx integrates EmailJS, making EmailJS the main external service boundary for outbound messages. Additional client actions include sharing, printing/downloading resume content, and social links through src/components/ShareButton.tsx, src/components/PrintResume.tsx, and src/components/SocialSidebar.tsx. The downloadable resume is a static public asset at public/yuvaraj.pdf.

Build and Static Assets

Vite configuration is defined by vite.config.ts; package scripts and runtime dependencies are in package.json. Deployment produces static browser assets, including media imported from src/assets/video.mp4 and public files served directly from public/. No server application, database, API layer, or repository-local infrastructure is represented in the tree.