yashuroy08/yashwanth-portfolio

Purpose and Runtime

This is a Vite-served React single-page developer portfolio. It presents profile, skills, projects, blog content, contact, and interactive “Nothing OS” themed experiences. The browser is the primary runtime; deployment targets Vercel via vercel.json. Static assets, including 3D avatar models and résumé, are served from public/.

Entry points: index.html loads src/main.jsx, which mounts the application rooted at src/App.jsx.

Application Composition

src/App.jsx is the top-level composition and routing/control boundary for the portfolio experience. It coordinates global styling from src/App.css and assembles page sections, layout controls, effects, and feature overlays.

The app is client-rendered rather than backed by a repository-local API. Portfolio claims about Java/Spring/MongoDB/MySQL describe showcased skills, not services implemented in this codebase.

Page and Content Sections

The primary information architecture is implemented as independently rendered portfolio sections:

• Landing and availability presentation: src/components/sections/Hero.jsx

• Technical skills and project catalog/filter experience: src/components/sections/Skills.jsx, src/components/sections/Projects.jsx

• Contact and education content: src/components/sections/Contact.jsx, src/components/sections/Education.jsx

• Blog listing/detail and missing-route view: src/components/sections/Blogs.jsx, src/components/sections/BlogPost.jsx, src/components/sections/NotFound.jsx

Control flows are primarily in-browser user interactions: scroll navigation, content filtering, section linking, and potentially client-side route selection.

Global Layout, Navigation, and Theme

Shared page framing is separated from content sections:

• Navigation/header: src/components/layout/Header.jsx

• Footer and scroll affordances: src/components/layout/Footer.jsx, src/components/layout/BackToTop.jsx, src/components/layout/ScrollProgress.jsx

• Theme state/provider boundary: src/context/ThemeContext.jsx

ThemeContext is the global visual-state mechanism used by theme-aware UI. Base styles are centralized in src/index.css; component-level styling is in src/App.css and selected UI CSS files.

Immersive Rendering and Interaction Layer

Visual effects are client-side components, isolated from portfolio content:

• Canvas/animated atmosphere: src/components/effects/AnimatedBackground.jsx

• Cursor and splash interactions: src/components/effects/CursorBubble.jsx, src/components/effects/SplashCursor.jsx

• Scroll behavior and sound interaction: src/components/effects/SmoothScroll.jsx, src/components/effects/SoundEffects.jsx

Reusable presentation primitives—reveal animations, magnetic interactions, horizontal/scroll panels, text effects, and cards—live under src/components/ui/. They form the shared interaction layer consumed by sections rather than a data or service layer.

Feature Overlays and External Boundaries

Optional high-interaction features are encapsulated independently:

• Terminal simulation: src/components/features/FloatingTerminal.jsx, src/components/features/TerminalFeature.jsx

• Loader and media player: src/components/features/Loader.jsx, src/components/features/MusicPlayer.jsx

• Chat and GitHub-facing widgets: src/components/features/ChatAssistant.jsx, src/components/features/GithubStats.jsx

• Résumé redirect: src/components/features/ResumeRedirect.jsx

The contact flow is the significant external-service boundary. README-defined Vite environment variables (VITE_SERVICE_ID, VITE_TEMPLATE_ID, VITE_PUBLIC_KEY) configure EmailJS credentials client-side. GitHub statistics may similarly depend on a remote GitHub endpoint, though no backend implementation exists in the tree.

Static Delivery and Infrastructure

Vite configuration is in vite.config.js; production static hosting behavior is defined by vercel.json. Public SEO and downloadable assets are direct static resources: public/robots.txt, public/sitemap.xml, public/resume.pdf. Avatar rendering consumes GLB assets at public/avatar-model-1.glb and public/avatar-model-2.glb through src/components/Avatar.jsx.