How samarth-arote/samartha-infosec works
This is a React-based interactive cybersecurity portfolio. A visitor explores the profile and its career, skills, certifications, projects/CTF, and contact sections; they can also launch a command terminal or open/download a PDF resume. App owns modal state and passes launch callbacks to navigation, hero, footer, and terminal components. Shared portfolio content and synthesized audio support the UI. The README documents 3D visuals, certification tilt cards, and responsive presentation; their internal wiring is not fully shown in the sampled source.
Main entry points: App.jsx App State · sound.js Sound Synthesizer · TerminalConsole.jsx CLI Terminal · portfolioData.js Portfolio Data
Components 19
Page Composition
- App State
src/App.jsx - Navigation
src/components/Navbar.jsx - 3D Hero
src/components/Hero3D.jsx - 3D Background
src/components/BackgroundParticles3D.jsx - Footer
src/components/Footer.jsx
Portfolio Content
- About
src/components/About.jsx - Certifications
src/components/Certifications.jsx - Experience & Research
src/components/Experience.jsx - Skills Arsenal
src/components/SkillsArsenal.jsx - Projects & CTF
src/components/ProjectsAndCTF.jsx - Contact
src/components/Contact.jsx
Interactive Features
- CLI Terminal
src/components/TerminalConsole.jsx - Resume Viewer
src/components/ResumeModal.jsx
Shared Resources
- Resume PDF
public/assets/A-Samartha_Cybersecurity_2026.pdf - Portfolio Data
src/utils/portfolioData.js - Sound Synthesizer
src/utils/sound.js - Mute Preference
Other components
- Visitor
- Web Audio API
Connections 29
- Visitor → App State: opens portfolio
- App State → Navigation: renders
- App State → 3D Hero: renders
- App State → 3D Background: renders
- App State → About: renders
- App State → Certifications: renders
- App State → Experience & Research: renders
- App State → Skills Arsenal: renders
- App State → Projects & CTF: renders
- App State → Contact: renders
- App State → Footer: renders
- App State → CLI Terminal: controls visibility
- App State → Resume Viewer: controls visibility
- Navigation → App State: launches modal
- 3D Hero → App State: launches modal
- Footer → App State: launches modal
- CLI Terminal → App State: opens resume
- CLI Terminal → Portfolio Data: reads profile
- Resume Viewer → Resume PDF: previews or downloads
- About → Portfolio Data: reads profile
- Experience & Research → Portfolio Data: reads experience and research
- Contact → Portfolio Data: reads contact details
- Navigation → Sound Synthesizer: plays UI sounds
- 3D Hero → Sound Synthesizer: plays UI sounds
- Contact → Sound Synthesizer: plays confirmation sound
- Experience & Research → Sound Synthesizer: plays UI sounds
- CLI Terminal → Sound Synthesizer: plays UI sounds
- Sound Synthesizer → Mute Preference: reads and writes mute setting
- Sound Synthesizer → Web Audio API: synthesizes effects