How rayyankhan18/portfolio-website works
This is a personal portfolio site presenting Rayyan Khan’s engineering profile, skills, career history, and selected projects. A visitor opens the home page, which composes the main portfolio sections; the root layout wraps page content in smooth scrolling. The tree also contains audio, cursor, science, timeline, and testimonial components, but sampled source does not establish how those are connected or whether they appear on the home page. Their nodes are shown as available product components without inferred wiring.
Main entry points: page.tsx Home page · Experience.tsx Career history · BackgroundMusic.tsx Background music · layout.tsx Root layout
Components 18
Site Shell
- Root layout
src/app/layout.tsx - Home page
src/app/page.tsx
Portfolio Content
- Hero section
src/components/Hero.tsx - Skills ticker
src/components/Marquee.tsx - Skills list
src/components/Skills.tsx - Career history
src/components/Experience.tsx - Project showcase
src/components/Projects.tsx - Portfolio footer
src/components/Footer.tsx - Science section
src/components/Science.tsx - Timeline section
- Testimonials
src/components/Testimonials.tsx
Interactive Elements
- Smooth scrolling
src/components/SmoothScroll.tsx - Background music
src/components/BackgroundMusic.tsx - Career button
src/components/ui/creepy-button.tsx - Audio player
src/components/AudioPlayer.tsx - Music track
public/sergepavkinmusic-reflected-light-147979.mp3 - Magnetic cursor
src/components/MagneticCursor.tsx
Other components
- Site visitor
Connections 11
- Site visitor → Home page: opens
- Root layout → Smooth scrolling: wraps content
- Home page → Hero section: renders
- Home page → Skills ticker: renders
- Home page → Skills list: renders
- Home page → Career history: renders
- Home page → Project showcase: renders
- Home page → Portfolio footer: renders
- Home page → Background music: renders
- Career history → Career button: renders
- Background music → Music track: plays