How bachvo/azure-portfolio-react works
This is a React portfolio site presenting Bach Vo’s profile, skills, work experience, projects, contact links, and project media. A visitor loads the app; the app fetches its portfolio model, renders the home sections, and routes work or project selections to detail pages with galleries. The sampled code shows the API request and component handoffs; the API implementation and several component files were not sampled, so their internal behavior and some wiring are represented only where supported by the tree or excerpts.
Main entry points: App.tsx App · card-detail.tsx Card details · home.tsx Home page · nav.tsx Navigation
Components 16
App and routing
- App
src/App.tsx
Portfolio content
- Home page
src/components/home.tsx - Navigation
src/components/nav.tsx - Card collections
src/components/card-collection.tsx - Footer
src/components/footer.tsx - Portfolio model
src/data/model.tsx - Markup utility
src/utils/create-markup.tsx - Resume PDF
public/resources/resume/bachvo.resume.pdf
Details and media
- Card details
src/components/card-detail.tsx - Media gallery
src/components/gallery.tsx - Portfolio assets
public/gallery - Anchor utilities
src/utils/hash-link-url.tsx - Media utilities
src/utils/is-media-video.tsx
External integrations
- Portfolio API
- Google Analytics
Other components
- Visitor
Connections 20
- Visitor → App: opens
- App → Portfolio API: fetches model
- Portfolio API → App: returns model
- App → Home page: renders route
- App → Card details: routes detail
- App → Navigation: renders
- App → Footer: renders
- App → Google Analytics: reports errors
- Home page → Card collections: renders collections
- Home page → Markup utility: formats descriptions
- Home page → Google Analytics: tracks pageview
- Navigation → Anchor utilities: builds anchors
- Navigation → Resume PDF: links resume
- Navigation → Google Analytics: tracks outbound
- Card details → Media gallery: renders gallery
- Card details → Anchor utilities: builds anchors
- Card details → Media utilities: checks media
- Card details → Google Analytics: tracks pageview
- Media gallery → Portfolio assets: loads images
- Media gallery → Google Analytics: tracks interactions