How afnanlabs/afnan-workspace works
Afnan Workspace is a portfolio presented as a VS Code-like workspace. Visitors choose a terminal command interface or a standard editor; the terminal can launch project content and arcade games, while the editor offers file browsing, search, settings, and commands. Both views draw on shared portfolio content. The arcade tracks local high scores, and the app also provides résumé downloads, theme/audio preferences, analytics, and offline PWA support. Relationships reflect the excerpts and README; unsampled feature wiring is not inferred.
Main entry points: StandardView.tsx Standard view · App.tsx App shell · Header.tsx Workspace header · TerminalView.tsx Terminal view
Components 25
Workspace shell
- App shell
src/App.tsx - Workspace header
src/components/Header.tsx
Portfolio experiences
- Terminal view
src/components/terminal/TerminalView.tsx
Standard editor
- Standard view
src/components/standard/StandardView.tsx - Explorer and editor
src/components/standard/EditorComponents.tsx - Command palette
src/components/standard/CommandPalette.tsx - Workspace search
src/components/standard/SearchPanel.tsx - Menubar
src/components/standard/Menubar.tsx - Settings panel
src/components/standard/SettingsPanel.tsx - Status bar
src/components/standard/StatusBar.tsx
Arcade
- Arcade window
src/components/terminal/ArcadeWindow.tsx - Arcade lobby
src/components/terminal/ArcadeLobby.tsx - Arcade games
src/components/terminal - Touch controls
src/components/terminal/ArcadeControls.tsx - High-score store
src/lib/arcade.ts
Shared services
- Portfolio content
src/data/content.ts - Command definitions
src/lib/commands.ts - Résumé download
src/lib/resume.ts - Sound preferences and audio
src/hooks/use-audio.ts - Theme provider
src/components/theme-provider.tsx - Privacy-aware analytics
src/lib/analytics.ts - Offline service worker
public/sw.js
Other components
- Visitor
- Browser local storage
- Analytics endpoint
Connections 31
- Visitor → App shell: opens workspace
README.md - App shell → Workspace header: renders
src/App.tsx - App shell → Terminal view: renders terminal
src/App.tsx - App shell → Standard view: renders editor
src/App.tsx - App shell → Arcade window: renders overlay
src/App.tsx - Terminal view → Portfolio content: reads portfolio data
src/components/terminal/TerminalView.tsx - Terminal view → Command definitions: dispatches commands
src/components/terminal/TerminalView.tsx - Terminal view → Résumé download: downloads résumé
src/components/terminal/TerminalView.tsx - Standard view → Portfolio content: reads file data
src/components/standard/StandardView.tsx - Standard view → Explorer and editor: renders editor
src/components/standard/StandardView.tsx - Standard view → Command palette: opens palette
src/components/standard/StandardView.tsx - Standard view → Workspace search: opens search
src/components/standard/StandardView.tsx - Standard view → Menubar: renders menubar
src/components/standard/StandardView.tsx - Standard view → Settings panel: opens settings
src/components/standard/StandardView.tsx - Standard view → Status bar: renders status
src/components/standard/StandardView.tsx - Workspace search → Portfolio content: searches files
src/components/standard/SearchPanel.tsx - Arcade window → Arcade lobby: renders lobby
src/components/terminal/ArcadeWindow.tsx - Arcade window → Arcade games: loads selected game
src/components/terminal/ArcadeWindow.tsx - Arcade games → Touch controls: uses controls
src/components/terminal/PacmanGame.tsx - Arcade games → High-score store: reads and submits scores
src/components/terminal/PacmanGame.tsx - Arcade lobby → High-score store: shows leaderboards
README.md - High-score store → Browser local storage: persists scores
src/lib/arcade.ts - Workspace header → Sound preferences and audio: uses sound settings
src/components/Header.tsx - Settings panel → Sound preferences and audio: toggles sound
src/components/standard/SettingsPanel.tsx - Sound preferences and audio → Browser local storage: persists preference
src/hooks/use-audio.ts - Workspace header → Résumé download: offers résumé
src/components/Header.tsx - Workspace header → Theme provider: uses theme
src/components/Header.tsx - Settings panel → Theme provider: changes theme
src/components/standard/SettingsPanel.tsx - App shell → Privacy-aware analytics: tracks usage
src/App.tsx - Privacy-aware analytics → Analytics endpoint: sends events
README.md - Visitor → Offline service worker: offline app support
README.md