How fatimaklye/fatima-sierra-portfolio works
This is a personal portfolio site: visitors explore the developer’s story, work, skills, experience and credentials, then can make contact or submit a recommendation. The main flow starts at the home page and branches into editorial pages and project case studies; contact and recommendation APIs handle submissions, while a GitHub API route supports activity content. Other product-facing features include an interactive music player and a word game. Edges reflect shown imports and calls; unsampled component internals and external API providers are not inferred.
Main entry points: HeroSection.tsx Home sections · app/page.tsx Home page · skills/page.tsx Skills page · contact/page.tsx Contact page
Components 30
Portfolio pages
- Home page
app/page.tsx - Home sections
components/home/HeroSection.tsx - About story
components/home/about/AboutStory.tsx - Experience
app/experience/page.tsx - Credentials
app/certifications/page.tsx
Work and skills
- Projects index
app/projects/page.tsx - Project chapters
components/projects/ProjectChapters.tsx - Project case study
app/projects/[slug]/page.tsx - Project details
data/projectDetailsData.ts - Skills page
app/skills/page.tsx - Skills data
components/skills/skillsData.ts
Visitor engagement
- Contact page
app/contact/page.tsx - Contact panel
components/contact/ContactPanel.tsx - Contact form
components/contact/ContactForm.tsx - Contact endpoint
app/api/contact/route.ts - Recommendations
components/home/Recommendations.tsx - Recommendation form
components/home/RecommendationForm.tsx - Recommendation endpoint
app/api/recommendations/route.ts - GitHub activity
components/home/GithubActivity.tsx - GitHub endpoint
app/api/github/route.ts - Music player
components/music/Jukebox.tsx - Music playback
lib/music.ts - Music library
lib/musicLibrary.ts - Word game
components/wordbreak/WordBreakGame.tsx - Word lists
components/wordbreak/words.ts
Shared runtime
- Editorial motion
components/motion/EditorialMotion.tsx - Site metadata
lib/site.ts
Other components
- Visitor
- Contact visitor
- GitHub service
Connections 31
- Visitor → Home page: opens
app/page.tsx - Home page → Home sections: renders
app/page.tsx - Home sections → About story: renders
components/home/HeroSection.tsx - Home sections → Recommendations: renders
components/home/HeroSection.tsx - Home sections → GitHub activity: renders
components/home/HeroSection.tsx - Visitor → Experience: opens
app/experience/page.tsx - Visitor → Credentials: opens
app/certifications/page.tsx - Visitor → Projects index: opens
app/projects/page.tsx - Projects index → Project chapters: renders
app/projects/page.tsx - Visitor → Project case study: opens
app/projects/[slug]/page.tsx - Project case study → Project details: reads
app/projects/[slug]/page.tsx - Visitor → Skills page: opens
app/skills/page.tsx - Skills page → Skills data: reads
app/skills/page.tsx - Skills data → Project details: reads
components/skills/skillsData.ts - Visitor → Contact page: opens
app/contact/page.tsx - Contact page → Contact panel: renders
app/contact/page.tsx - Contact panel → Contact form: renders
components/contact/ContactPanel.tsx - Contact form → Contact endpoint: submits
- Visitor → Recommendation form: submits
- Recommendation form → Recommendation endpoint: submits
- GitHub activity → GitHub endpoint: loads
- GitHub endpoint → GitHub service: requests
- Visitor → Music player: uses
components/music/Jukebox.tsx - Music player → Music playback: delegates to
components/music/Jukebox.tsx - Music playback → Music library: reads
lib/music.ts - Visitor → Word game: plays
- Word game → Word lists: reads
- Experience → Editorial motion: wraps
app/experience/page.tsx - Skills page → Editorial motion: wraps
app/skills/page.tsx - Home page → Site metadata: sets metadata
app/page.tsx - Contact page → Site metadata: sets metadata
app/contact/page.tsx