How xclusivkhodes/portfolio works
This is a personal portfolio website: visitors explore the creator’s work, skills, background, and writing, with an interactive animated landing page and a contact path for sending messages. A separate real-time layer supports chat, online users, cursors, and shared menu-triggered effects. The graph preserves those documented capabilities and the email flow evidenced in source. Several pages and the Socket.IO context were not sampled, so their internal wiring is represented only where the tree or excerpts support it.
Main entry points: page.tsx Landing page · route.ts Email API · socketio.tsx Socket context · layout.tsx Application shell
Components 29
Portfolio experience
- Landing page
src/app/page.tsx - 3D skill keyboard
src/components/animated-background.tsx - Keyboard behavior
src/components/animated-background-config.ts - Skills section
src/components/sections/skills.tsx - Projects section
src/components/sections/projects.tsx - Experience section
src/components/sections/experience.tsx - Space particles
src/components/Particles.tsx
Portfolio content
- Projects page
src/app/projects/page.tsx - Project catalog
src/data/projects.tsx - About page
src/app/about/page.tsx - Blog index
src/app/blogs/page.tsx - Blog article
src/app/blogs/[slug]/page.tsx - MDX content
src/lib/mdx.ts
Live interactions
- Socket context
src/contexts/socketio.tsx - Chat and users
src/components/realtime/online-users.tsx - Remote cursors
src/components/realtime/remote-cursors.tsx - Radial menu effects
src/components/radial-menu/index.tsx
Contact delivery
- Contact page
src/app/contact/page.tsx - Contact form
src/components/ContactForm.tsx - Email API
src/app/api/send/route.ts - Email template
src/components/email-template.tsx
Shared presentation
- Site configuration
src/data/config.ts - Application shell
src/app/layout.tsx - Shared providers
src/components/providers.tsx - Navigation header
src/components/header/header.tsx - Site footer
src/components/footer/footer.tsx
Other components
- Visitor
- Socket.IO service
- Resend email
Connections 27
- Visitor → Landing page: opens
- Visitor → Projects page: opens
- Visitor → About page: opens
- Visitor → Blog index: opens
- Visitor → Contact page: opens
- Landing page → 3D skill keyboard: renders
- Landing page → Skills section: renders
- Landing page → Projects section: renders
- Landing page → Experience section: renders
- Landing page → Space particles: renders
- 3D skill keyboard → Keyboard behavior: reads behavior
- Projects page → Project catalog: renders projects
- Projects section → Project catalog: renders projects
- Blog index → Blog article: links articles
- Blog article → MDX content: loads content
- Application shell → Shared providers: wraps routes
- Application shell → Navigation header: renders
- Application shell → Site footer: renders
- Contact page → Contact form: renders
- Contact form → Email API: submits message
- Email API → Site configuration: reads recipient
- Email API → Email template: builds email
- Email API → Resend email: sends email
- Chat and users → Socket context: uses context
- Remote cursors → Socket context: uses context
- Radial menu effects → Socket context: uses context
- Socket context → Socket.IO service: connects