How mohd-azim/portfolio works
This is a React portfolio site presenting an engineer’s profile, skills, career, projects, system-design demonstrations, articles, and contact options. A visitor loads the app and browses its composed sections; the hero also runs an interactive terminal, while the chatbot responds from local data and the contact form posts to an external endpoint. Source evidence establishes the app’s composition and several data dependencies; unsampled components are included as capabilities, but their internal behavior and connections are not inferred.
Main entry points: App.jsx Page composition · portfolio.js Portfolio content · Contact.jsx Contact form · main.jsx React entry
Components 22
App composition
- React entry
src/main.jsx - Page composition
src/App.jsx
Profile sections
- Navigation
src/components/Navbar.jsx - Hero profile
src/components/Hero.jsx - About section
src/components/About.jsx - Skills section
src/components/Skills.jsx - Experience section
src/components/Experience.jsx - Projects section
src/components/Projects.jsx - Education section
src/components/Education.jsx - Contact form
src/components/Contact.jsx - Footer
src/components/Footer.jsx
Interactive features
- Interactive terminal
src/components/InteractiveTerminal.jsx - System design demos
src/components/SystemDesign.jsx - Portfolio chatbot
src/components/Chatbot.jsx - Custom cursor
src/components/CustomCursor.jsx - Particle background
src/components/ParticleBackground.jsx
Content and data
- Article carousel
src/components/Blog.jsx - Portfolio content
src/data/portfolio.js - Article index
src/data/blog.json - Chatbot responses
src/data/chatbot-data.json
Other components
- Visitor
- Contact endpoint
Connections 29
- Visitor → React entry: opens site
src/main.jsx - React entry → Page composition: renders app
src/main.jsx - Page composition → Navigation: renders
src/App.jsx - Page composition → Hero profile: renders
src/App.jsx - Page composition → About section: renders
src/App.jsx - Page composition → Skills section: renders
src/App.jsx - Page composition → Experience section: renders
src/App.jsx - Page composition → Projects section: renders
src/App.jsx - Page composition → Education section: renders
src/App.jsx - Page composition → Contact form: renders
src/App.jsx - Page composition → Footer: renders
src/App.jsx - Page composition → Interactive terminal: renders
src/App.jsx - Page composition → System design demos: renders
src/App.jsx - Page composition → Portfolio chatbot: renders
src/App.jsx - Page composition → Custom cursor: renders
src/App.jsx - Page composition → Particle background: renders
src/App.jsx - Page composition → Article carousel: renders
src/App.jsx - Hero profile → Interactive terminal: renders
src/components/Hero.jsx - About section → Portfolio content: reads profile
src/components/About.jsx - Navigation → Portfolio content: reads profile
src/components/Navbar.jsx - Skills section → Portfolio content: reads profile
src/components/Skills.jsx - Experience section → Portfolio content: reads profile
src/components/Experience.jsx - Projects section → Portfolio content: reads projects
src/components/Projects.jsx - Education section → Portfolio content: reads profile
src/components/Education.jsx - Footer → Portfolio content: reads profile
src/components/Footer.jsx - Contact form → Portfolio content: reads contact details
src/components/Contact.jsx - Article carousel → Article index: reads articles
src/components/Blog.jsx - Portfolio chatbot → Chatbot responses: reads responses
src/components/Chatbot.jsx - Contact form → Contact endpoint: posts message
src/components/Contact.jsx