codingmastr/tarun-s-portfolio

1. Project type and boundary

- This is a single-page React portfolio site with no backend, no database, and no external API layer.

- The architecture is mostly presentation-focused: one app shell composes a set of content sections for navigation, profile/storytelling, skills, work, and contact.

2. Application entry path

- The runtime starts at src/main.jsx, which mounts the React app into the HTML root from index.html.

- src/App.jsx is the top-level composition layer that assembles the page into named sections.

3. Page composition

- The main UI is split into reusable section components under src/components/:

- Navbar

- About

- Skills

- Experience

- Education

- Work

- Contact

- Footer

- This strongly suggests a vertical one-page layout where the navbar links likely jump to anchored sections on the same page.

4. Shared content/data layer

- src/constants.js is the central place for structured portfolio content.

- This file likely feeds repeated or list-based UI such as skills, experience items, education entries, and project cards, keeping the components mostly presentational.

- The presence of a constants module indicates a content-driven design rather than hardcoded markup in each section.

5. Asset management

- Static visual assets live under src/assets/ in themed subfolders:

- company_logo

- education_logo

- tech_logo

- work_logo

- These assets are imported directly into components and used to visually brand sections like experience, education, and projects.

6. Layout and visual effects

- src/components/BlurBlob.jsx is a separate visual embellishment component, likely responsible for background glow/blob effects.

- This implies the UI combines standard content sections with a small number of reusable decorative primitives for the animated portfolio look.

7. Styling architecture

- Styling is split across:

- Tailwind CSS via tailwind.config.js

- PostCSS via postcss.config.js

- Global CSS in src/index.css

- App-level overrides in src/App.css

- The site is built around utility-first styling with a small amount of custom CSS for global behavior and section-specific refinements.

8. Build and runtime tooling

- The project uses Vite (vite.config.js) as the development server and production bundler.

- React is the UI runtime, and ESLint (eslint.config.js) is present for code quality.

- package-lock.json indicates a standard npm-based dependency workflow.

9. Navigation and interaction model

- The Navbar is the main cross-section control surface for the page.

- The README mentions smooth scroll and animation effects, so the interaction model is likely driven by CSS/Tailwind transitions and scrolling behavior, not by complex client-side routing.

- This is a static interaction model: users move through sections rather than navigate between pages.

10. Content sections and their role

- About introduces the person.

- Skills presents capabilities and technologies.

- Experience and Education provide timeline-style credentials.

- Work showcases projects or portfolio pieces.

- Contact exposes a way to reach the owner.

- Footer closes the page with attribution or links.

- These are discrete domain sections, each with a clear responsibility and minimal coupling.

11. Deployment shape

- The README states deployment on Vercel, so the app is intended to be served as a static frontend build.

- There is no indication of server-rendered infrastructure or runtime services beyond static hosting.

12. Repository artifact note

- dist.zip suggests a packaged build artifact is included in the repository or distribution bundle.

- For architecture diagrams, it can be treated as an output artifact of the Vite build rather than a source subsystem.

13. High-level data flow

- Static content and assets flow into section components.

- Section components are assembled by App.

- main.jsx mounts the app into the DOM.

- The result is a client-rendered, static portfolio page optimized for presentation and navigation.

14. What to draw in an architecture diagram

- A single frontend box containing:

- React app shell

- section components

- shared constants/content

- static assets

- styling/tooling layer

- External boundary only includes:

- browser/DOM

- static hosting on Vercel

- optional links to YouTube/live demo mentioned in README