How yogananth-r/yogananthr-portfolio works
This is a React portfolio site presenting a cloud engineer’s profile, skills, career journey, projects, and contact options. A visitor opens the root page; src/App.tsx shows a timed loader before rendering the portfolio sections, or a not-found view for other paths. Sections read shared profile, skill, and project data where shown, and links provide resume downloads and external contact or project destinations. The README documents the portfolio’s AWS, GCP, automation, and DevOps focus; unsampled section internals are represented only by their tree paths.
Main entry points: App.tsx Route and Layout · Hero.tsx Profile Intro · Contact.tsx Contact Options · portfolio.ts Portfolio Data
Components 18
App Flow
- React Entry
src/main.tsx - Route and Layout
src/App.tsx - Loading Screen
src/components/Loader.tsx - Not Found
src/components/NotFound.tsx
Profile Content
- Section Navigation
src/components/Navbar.tsx - Profile Intro
src/components/Hero.tsx - About Profile
src/components/About.tsx - Skills Display
src/components/Skills.tsx - Career Journey
src/components/Journey.tsx - Project Showcase
src/components/Projects.tsx - Page Footer
src/components/Footer.tsx - Portfolio Data
src/data/portfolio.ts
Visitor Links
- Contact Options
src/components/Contact.tsx - Resume PDF
public/Yogananth_R_Resume_Cloud_Engineer.pdf
Other components
- Visitor
- GitHub
- Email Recipient
Connections 26
- Visitor → React Entry: opens site
- React Entry → Route and Layout: renders
- Route and Layout → Loading Screen: shows first
- Loading Screen → Route and Layout: completes loading
- Route and Layout → Not Found: routes non-root
- Route and Layout → Section Navigation: renders
- Route and Layout → Profile Intro: renders
- Route and Layout → About Profile: renders
- Route and Layout → Skills Display: renders
- Route and Layout → Career Journey: renders
- Route and Layout → Project Showcase: renders
- Route and Layout → Contact Options: renders
- Route and Layout → Page Footer: renders
- Profile Intro → Portfolio Data: reads profile
- Skills Display → Portfolio Data: reads skills
- Project Showcase → Portfolio Data: reads projects
- Contact Options → Portfolio Data: reads contact details
- Profile Intro → Resume PDF: links resume
- Contact Options → Resume PDF: links resume
- Profile Intro → GitHub: links profile
- Profile Intro → LinkedIn: links profile
- Profile Intro → Email Recipient: opens email
- Contact Options → GitHub: links profile
- Contact Options → LinkedIn: links profile
- Contact Options → Email Recipient: opens email
- Project Showcase → GitHub: links repositories