How natthapong-t/natthapongthaboran works
This repository is a personal portfolio website. Visitors land on a profile and can browse work history, technical skills, and featured projects; listing pages filter experiences or projects, and detail pages present an individual record. Navigation and calls to action lead visitors toward contact or hiring. Portfolio content is held in a TypeScript data module, with experience duration calculated by a small utility. The graph reflects sampled imports and calls; some section components are represented from the tree, but their internal behavior was not inspected.
Main entry points: page.tsx Home Route · portfolio-data.ts Portfolio Records · Navbar.tsx Navigation · Footer.tsx Footer
Components 17
Portfolio Site
- Home Route
app/page.tsx - Root Layout
app/layout.tsx - Navigation
components/Navbar.tsx - Profile Hero
components/HeroSection.tsx - Skills Section
components/StackSection.tsx - Contact Section
components/ContactSection.tsx - Footer
components/Footer.tsx
Work Browsing
- Work Preview
components/ExperienceSection.tsx - Project Preview
components/ProjectsSection.tsx - Experience List
app/experiences/page.tsx - Experience Detail
app/experiences/[slug]/page.tsx - Project List
app/projects/page.tsx - Project Detail
app/projects/[slug]/page.tsx
Portfolio Content
- Portfolio Records
data/portfolio-data.ts - Duration Calculator
lib/duration.ts
Other components
- Visitor
- Fastwork
Connections 30
- Visitor → Home Route: opens
- Visitor → Experience List: browses
- Visitor → Project List: browses
- Root Layout → Home Route: wraps
- Home Route → Navigation: renders
- Home Route → Profile Hero: renders
- Home Route → Work Preview: renders
- Home Route → Skills Section: renders
- Home Route → Project Preview: renders
- Home Route → Contact Section: renders
- Home Route → Footer: renders
- Work Preview → Portfolio Records: reads
- Project Preview → Portfolio Records: reads
- Navigation → Portfolio Records: reads
- Experience List → Portfolio Records: reads
- Experience List → Navigation: renders
- Experience List → Footer: renders
- Experience Detail → Portfolio Records: looks up
- Experience Detail → Duration Calculator: calculates duration
- Experience Detail → Navigation: renders
- Experience Detail → Footer: renders
- Project List → Portfolio Records: reads
- Project List → Navigation: renders
- Project List → Footer: renders
- Project Detail → Portfolio Records: looks up
- Project Detail → Navigation: renders
- Project Detail → Footer: renders
- Profile Hero → Portfolio Records: reads
- Profile Hero → Fastwork: links to
- Navigation → Fastwork: links to