How anu66-tech/anushree_portfolio works
Purpose and runtime
This is a Vite-built React single-page personal portfolio/CV site. It presents professional profile content, career history, projects, skills, credentials, contact details, and a downloadable PDF resume. The production static bundle is represented in dist/index.html and dist/assets; the resume is served from public/ANUSHREE_CV.pdf.
Application entry and composition
The browser entry point is src/main.jsx, which mounts the React application. src/App.jsx is the page-level composition boundary: it assembles the portfolio sections into a single scroll-oriented experience and is the primary place to alter section ordering or global layout.
Content model
src/data/siteData.js is the central content boundary. It likely supplies profile, experience, education, skills, project, certification, and contact data consumed by presentation components. Updating portfolio facts should preferentially happen here rather than inside section JSX.
Navigation and page flow
src/components/Navbar.jsx provides navigation across the one-page sections, while src/components/Hero.jsx establishes the landing/intro state. The expected control flow is navigation action → anchor/section targeting → scroll through independently rendered content sections. src/components/Footer.jsx closes the page and provides the shared end-of-page boundary.
Career and qualifications sections
Professional background is represented by dedicated display components:
• src/components/CareerJourney.jsx
• src/components/Experience.jsx
• src/components/Education.jsx
This separation supports distinct visual treatments for timeline narrative, work experience, and academic history while keeping App.jsx responsible for orchestration.
Work, skills, and credentials
Portfolio evidence is divided into focused modules:
• src/components/FeaturedProject.jsx
• src/components/Projects.jsx
• src/components/Skills.jsx
• src/components/Certification.jsx
Featured work is architecturally separate from the broader projects collection, allowing a primary case study or highlighted project without changing the general project-list rendering path.
Contact, resume, and interaction layer
src/components/Contact.jsx owns the user-contact surface. src/components/Resume.jsx is the UI boundary for access to the resume artifact at public/ANUSHREE_CV.pdf. src/components/CustomCursor.jsx adds client-side pointer interaction and should remain isolated from content/data concerns because it depends on browser pointer behavior.
Styling and build boundary
Global styling is rooted at src/index.css; Tailwind integration is configured through tailwind.config.js and postcss.config.js. Vite configuration is in vite.config.js, with index.html serving as the development/build HTML shell. The app has no indicated backend, database, authentication layer, or external service integration; deployment is static hosting of the Vite output and public assets.
Main entry points: App.jsx App composition · siteData.js Site data · main.jsx React entry · Hero.jsx Hero
Components 22
Browser SPA
Single-page React portfolio runtime.
- React entry
src/main.jsx - App composition · Controls global layout and section ordering.
src/App.jsx - Navbar
src/components/Navbar.jsx - Footer
src/components/Footer.jsx - Custom Cursor · Isolated browser pointer behavior.
src/components/CustomCursor.jsx
Portfolio Sections
Independently rendered scroll targets.
- Hero
src/components/Hero.jsx - Career Journey
src/components/CareerJourney.jsx - Experience
src/components/Experience.jsx - Education
src/components/Education.jsx - Projects
src/components/Projects.jsx - Featured Project
src/components/FeaturedProject.jsx - Skills
src/components/Skills.jsx - Certification
src/components/Certification.jsx - Contact
src/components/Contact.jsx - Resume UI
src/components/Resume.jsx
Content & Assets
Portfolio facts and downloadable resume.
Build & Delivery
Vite static build and styling boundary.
- HTML shell
index.html - Vite build
vite.config.js - Tailwind processing · Tailwind and PostCSS transform application styles.
tailwind.config.js - Static bundle · Static hosting output including assets.
dist/index.html - Global styles
src/index.css
Connections 28
- HTML shell → React entry: loads
- React entry → App composition: mounts
- React entry → Global styles: imports
- App composition → Navbar: renders
- App composition → Hero: renders
- App composition → Career Journey: renders
- App composition → Experience: renders
- App composition → Education: renders
- App composition → Projects: renders
- App composition → Featured Project: renders
- App composition → Skills: renders
- App composition → Certification: renders
- App composition → Contact: renders
- App composition → Resume UI: renders
- App composition → Footer: renders
- App composition → Custom Cursor: enables
- Navbar → Hero: anchors to sections
- Site data → Hero: supplies profile
- Site data → Experience: supplies experience
- Site data → Education: supplies education
- Site data → Projects: supplies projects
- Site data → Skills: supplies skills
- Site data → Certification: supplies credentials
- Site data → Contact: supplies contact details
- Resume UI → CV PDF: links to
- Vite build → Static bundle: builds
- Tailwind processing → Global styles: processes
- Vite build → HTML shell: uses