kekanath/about_me

Purpose and delivery model

This repository is a static personal portfolio single-page application. It presents profile, projects, media, blog, skills, and contact content without a backend or server-side API. The HTML shell is index.html; the React application is bundled by Vite and deployed as static files, intended for GitHub Pages.

Runtime entry and composition

src/main.jsx is the browser entry point that mounts the React tree. src/App.jsx is the page composer: it assembles the persistent navigation and ordered portfolio sections into one scrolling experience. src/styles/global.css establishes global/Tailwind styling behavior.

• src/main.jsx

• src/App.jsx

• src/styles/global.css

Navigation and theme boundary

The navigation component provides section navigation and owns the user-facing dark/light theme control described by the repository documentation. Theme behavior depends on browser capabilities (system preference) and persists manual preference in localStorage; this is the main browser-state boundary rather than application data persistence.

• src/components/Navbar.jsx

• src/App.jsx

• src/styles/global.css

Portfolio content stages

The central page flow is a sequence of independently rendered display sections: introductory identity, biography, project showcase, gallery, blog, skills, and contact details. These are presentation components with content embedded/configured in the frontend, not fetched from a CMS or API.

• src/components/Hero.jsx

• src/components/About.jsx

• src/components/Projects.jsx

Additional content endpoints continue the same scroll-based flow:

• src/components/Gallery.jsx

• src/components/Blog.jsx

• src/components/Skills.jsx

• src/components/Contact.jsx

Media and interaction layer

Assets are centralized under the source tree, with src/assets/assetsConfig.js serving as the likely asset-reference/configuration boundary for image or media consumers. Gallery/media interaction is isolated in a popup component, keeping overlay behavior separate from page-section rendering. The footer closes the global layout and likely hosts external/social destinations.

• src/assets/assetsConfig.js

• src/components/Gallery.jsx

• src/components/VideoPopup.jsx

• src/components/Footer.jsx

Build, styling, and deployment infrastructure

The material runtime is React 18 in the browser; Vite 5 handles development, production bundling, and preview. Tailwind CSS/PostCSS provide the styling pipeline, with project-specific design tokens/configuration in Tailwind. Vite’s base-path configuration is important for GitHub Pages asset resolution under the repository subpath.

• package.json

• vite.config.js

• tailwind.config.js

• postcss.config.js

Production output is a dist/ static site. Deployment targets GitHub Pages, either through the package deployment script/gh-pages flow or manual branch publication. GitHub Actions automation is present for static-site workflow support.

• .github/workflows/static.yml

• DEPLOYMENT.md

• package.json