How tricch/myportfolio works
This is a Next.js personal portfolio site. A visitor enters the home page and browses an introduction, skills/about grid, project highlights, process, and contact footer; project and section content is supplied by shared data. The page also contains commented-out client and experience sections, so they are represented as available components, not active steps in the current page. The graph focuses on documented component composition and data use; unsampled modules are included where the source index identifies their role, without guessing their internal behavior.
Main entry points: page.tsx Home page · utils.ts Class utilities · index.ts Portfolio data · Hero.tsx Hero intro
Components 24
Page entry
- Home page
app/page.tsx - App layout
app/layout.tsx
Portfolio sections
- Hero intro
components/Hero.tsx - About grid
components/Grid.tsx - Recent projects
components/RecentProjects.tsx - Work approach
components/Approach.tsx - Contact footer
components/Footer.tsx - Client showcase
components/Clients.tsx - Work experience
components/Experience.tsx
Visual components
- Action button
components/MagicButton.tsx - Bento cards
components/ui/BentoGrid.tsx - Canvas reveal
components/ui/CanvasRevealEffect.tsx - Floating navigation
components/ui/FloatingNavbar.tsx - Globe display
components/ui/GridGlobe.tsx - 3D globe
components/ui/Globe.tsx - Gradient background
components/ui/GradientBg.tsx - Moving cards
components/ui/InfiniteCards.tsx - Moving borders
components/ui/MovingBorders.tsx - Project pin
components/ui/Pin.tsx - Spotlight effect
components/ui/Spotlight.tsx - Generated text
components/ui/TextGenerateEffect.tsx
Portfolio content
- Portfolio data
data/index.ts - Class utilities
lib/utils.ts
Other components
- Visitor
Connections 38
- Visitor → Home page: opens
- Home page → App layout: renders within
- Home page → Floating navigation: renders
app/page.tsx - Home page → Hero intro: renders
app/page.tsx - Home page → About grid: renders
app/page.tsx - Home page → Recent projects: renders
app/page.tsx - Home page → Work approach: renders
app/page.tsx - Home page → Contact footer: renders
app/page.tsx - Home page → Client showcase: comments out
app/page.tsx - Home page → Work experience: comments out
app/page.tsx - Hero intro → Action button: renders
components/Hero.tsx - Hero intro → Spotlight effect: renders
components/Hero.tsx - Hero intro → Generated text: renders
components/Hero.tsx - About grid → Bento cards: renders
components/Grid.tsx - Recent projects → Project pin: renders
components/RecentProjects.tsx - Work approach → Canvas reveal: renders
components/Approach.tsx - Client showcase → Moving cards: renders
components/Clients.tsx - Work experience → Moving borders: renders
components/Experience.tsx - Contact footer → Action button: renders
components/Footer.tsx - Bento cards → Globe display: renders
components/ui/BentoGrid.tsx - Bento cards → Gradient background: renders
components/ui/BentoGrid.tsx - Bento cards → Action button: renders
components/ui/BentoGrid.tsx - Globe display → 3D globe: loads dynamically
components/ui/GridGlobe.tsx - Hero intro → Portfolio data: uses navigation
- About grid → Portfolio data: reads content
components/Grid.tsx - Recent projects → Portfolio data: reads projects
components/RecentProjects.tsx - Client showcase → Portfolio data: reads testimonials
components/Clients.tsx - Work experience → Portfolio data: reads experience
components/Experience.tsx - Contact footer → Portfolio data: reads content
components/Footer.tsx - Bento cards → Portfolio data: loads animation
components/ui/BentoGrid.tsx - Canvas reveal → Class utilities: uses classes
components/ui/CanvasRevealEffect.tsx - Floating navigation → Class utilities: uses classes
components/ui/FloatingNavbar.tsx - Gradient background → Class utilities: uses classes
components/ui/GradientBg.tsx - Moving cards → Class utilities: uses classes
components/ui/InfiniteCards.tsx - Moving borders → Class utilities: uses classes
components/ui/MovingBorders.tsx - Project pin → Class utilities: uses classes
components/ui/Pin.tsx - Spotlight effect → Class utilities: uses classes
components/ui/Spotlight.tsx - Generated text → Class utilities: uses classes
components/ui/TextGenerateEffect.tsx