kishorejegan/portfolio

Purpose and Runtime

This is a Vite-based React + TypeScript personal portfolio site. It renders a single-page presentation of the owner’s introduction, skills/achievements, projects, portfolio work, and contact information. Static resume and animation assets are served from public/, including public/Kishore_J_Resume.pdf.

Primary browser bootstrap: src/main.tsx mounts src/App.tsx. Vite configuration is at vite.config.ts.

Application Composition

src/App.tsx is the top-level composition boundary. It assembles the site’s persistent visual layers and section-level content into one scrolling experience:

• Navigation: src/components/HeaderNavigation.tsx

• Intro/hero content: src/components/GreetingTextBlock.tsx, src/components/PhotoFrame.tsx

• Content sections: src/components/AboutMeSection.tsx, src/components/AchievementsSection.tsx, src/components/ProjectsSection.tsx, src/components/PortfolioShowcase.tsx, src/components/ContactSection.tsx

• Additional themed section: src/components/DiveSection.tsx

Presentation and Navigation Flow

The primary user flow is in-page navigation: the header directs users to content sections rendered by the root application. Each section owns its specific presentation and content, while shared page-level styling is centralized in src/index.css.

src/types.ts provides shared TypeScript contracts for cross-component content or UI state, reducing coupling between otherwise independently rendered portfolio sections.

Visual Experience Layers

src/components/BackgroundCanvas.tsx is a distinct ambient/background rendering layer, likely isolated from semantic portfolio content because it has different rendering and performance concerns. It is composed alongside conventional React section components rather than representing a separate service or application boundary.

Visual inspection/detail interaction is encapsulated by src/components/GlassInspectorModal.tsx. This component forms the main transient overlay boundary: portfolio or image-oriented content can trigger modal inspection without embedding overlay state and presentation into every section.

Portfolio Content Boundaries

Project-oriented content is separated into two major views:

• src/components/ProjectsSection.tsx presents project entries.

• src/components/PortfolioShowcase.tsx presents showcase/visual portfolio material.

Supporting presentational components such as src/components/PhotoFrame.tsx provide reusable framed media rendering, while src/components/GlassInspectorModal.tsx supports expanded inspection. This separation permits media interaction to evolve independently of project narrative content.

Duplicate UI Tree

The repository contains a second, near-parallel component tree under Web_UI/src/, including Web_UI/src/App.tsx and Web_UI/src/main.tsx. The root src/ tree is the likely active Vite application source because it is paired with root package.json, vite.config.ts, and root TypeScript configurations. Treat Web_UI/src/ as a duplicate, alternate, or legacy UI copy unless build scripts establish otherwise.

Infrastructure and External Dependencies

The application is client-rendered and uses Node/npm for dependency installation and Vite for development/build output (package.json, package-lock.json, vite.config.ts). No backend, database, API integration, authentication provider, or cloud infrastructure is represented in the supplied tree. Public assets are delivered directly by the frontend runtime from public/.