How joydeepsasnal-dot/portfolio works
This is an interactive software-engineering portfolio: visitors browse the engineer’s profile and work, explore three live project demos, inspect language and project documentation, and prepare a contact email. The app entry composes the page; Selected Works dispatches demo selection and documentation requests, while App owns modal state and navigation. The demos include a task dependency visualizer, a grid simulation, and a Web Audio player. The excerpts show task-graph calculation and contact validation; other demo internals and some section-to-data relationships are only partially sampled, so those links are omitted where not evidenced.
Main entry points: App.tsx Page and modal · SelectedWorksSection.tsx Selected works · ContactSection.tsx Contact form · TechnicalDocsModal.tsx Technical docs
Components 21
Portfolio presentation
- React mount
src/main.tsx - Page and modal
src/App.tsx - Navigation
src/components/Navbar.tsx - Hero
src/components/HeroSection.tsx - Philosophy
src/components/IntroPhilosophySection.tsx - Engineering approach
src/components/HowItWorksSection.tsx - Selected works
src/components/SelectedWorksSection.tsx - Language matrix
src/components/LanguagesMatrixSection.tsx - Testimonials
src/components/TestimonialsSection.tsx - Contact form
src/components/ContactSection.tsx - Footer
src/components/Footer.tsx - Technical docs
src/components/TechnicalDocsModal.tsx
Project experiences
- Wild simulation
src/components/EchoesOfTheWildDemo.tsx - Music player
src/components/SafarMusicDemo.tsx - Task manager
src/components/TaskManagerDemo.tsx
Portfolio content
- Portfolio data
src/data/portfolioData.ts - Domain types
src/types/index.ts
Interactive logic
- Shared algorithms
src/utils/engine.ts
Other components
- Visitor
- Browser audio
- Default mail app
Connections 25
- Visitor → React mount: opens app
src/main.tsx - React mount → Page and modal: renders
src/main.tsx - Page and modal → Navigation: renders
src/App.tsx - Page and modal → Hero: renders
src/App.tsx - Page and modal → Philosophy: renders
src/App.tsx - Page and modal → Engineering approach: renders
src/App.tsx - Page and modal → Selected works: renders
src/App.tsx - Page and modal → Language matrix: renders
src/App.tsx - Page and modal → Testimonials: renders
src/App.tsx - Page and modal → Contact form: renders
src/App.tsx - Page and modal → Footer: renders
src/App.tsx - Page and modal → Technical docs: renders
src/App.tsx - Selected works → Wild simulation: renders selected
src/components/SelectedWorksSection.tsx - Selected works → Music player: renders selected
src/components/SelectedWorksSection.tsx - Selected works → Task manager: renders selected
src/components/SelectedWorksSection.tsx - Task manager → Shared algorithms: resolves dependencies
src/components/TaskManagerDemo.tsx - Contact form → Shared algorithms: validates form
src/components/ContactSection.tsx - Selected works → Portfolio data: loads projects
src/components/SelectedWorksSection.tsx - Technical docs → Portfolio data: loads project docs
src/components/TechnicalDocsModal.tsx - Language matrix → Portfolio data: loads language content
src/components/LanguagesMatrixSection.tsx - Page and modal → Technical docs: opens by project
src/App.tsx - Contact form → Default mail app: prepares draft
src/components/ContactSection.tsx - Music player → Browser audio: uses audio context
- Shared algorithms → Domain types: uses form types
src/utils/engine.ts - Contact form → Domain types: uses form type
src/components/ContactSection.tsx