How lyesprojet/portfolio works
This is a personal portfolio site with two presentation modes: an interactive command-line view and a conventional GUI. The principal workflow is browser entry into App, mode selection, then exploration of identity, projects, experience, skills, and contact information; the terminal accepts commands and displays results, while the GUI offers corresponding sections. The sampled code confirms mode switching, terminal command dispatch, project and experience data use, and first-visit persistence. Other component wiring is inferred from names and remains unlinked where source was not sampled.
Main entry points: App.jsx App mode controller · Terminal.jsx Terminal view · main.jsx React entry · useLocalStorage.js First-visit hook
Components 29
App and mode switching
- React entry
src/main.jsx - App mode controller
src/App.jsx - First-visit hook
src/hooks/useLocalStorage.js - Viewport hook
src/hooks/useIsMobile.js - Loading screen
src/components/shared/LoadingScreen.jsx - Matrix transition
src/components/shared/MatrixTransition.jsx - Typewriter hook
src/hooks/useTypewriter.js
Terminal portfolio
- Terminal view
src/components/terminal/Terminal.jsx - Command configuration
src/data/commands.config.js - Terminal input
src/components/terminal/TerminalInput.jsx - Terminal output
src/components/terminal/TerminalOutput.jsx - Identity card
src/components/terminal/IdentityCard.jsx - Experience timeline
src/components/terminal/ExperienceTimeline.jsx - Project list
src/components/terminal/ProjectsList.jsx - Skills block
src/components/terminal/SkillsBlock.jsx - Contact block
src/components/terminal/ContactBlock.jsx
GUI portfolio
- GUI application
src/components/gui/GuiApp.jsx - Hero section
src/components/gui/Hero.jsx - Top navigation
src/components/gui/TopNav.jsx - Experience section
src/components/gui/ParcoursSection.jsx - Projects section
src/components/gui/ProjectsSection.jsx - Contact section
src/components/gui/ContactSection.jsx
Portfolio content
- Experience data
src/data/experiences.js - Project data
src/data/projects.js - Skills data
src/data/skills.js - Contact data
src/data/contact.js
Other components
- Visitor
- Browser
- Browser local storage
Connections 17
- Visitor → Browser: uses
- Browser → React entry: loads
- React entry → App mode controller: renders
- App mode controller → First-visit hook: checks visit
- First-visit hook → Browser local storage: reads and writes
- App mode controller → Browser local storage: reads and writes mode
- App mode controller → Viewport hook: checks viewport
- App mode controller → Loading screen: shows
- App mode controller → Terminal view: renders terminal mode
- App mode controller → GUI application: renders GUI mode
- App mode controller → Matrix transition: switches modes
- Terminal view → Terminal input: renders
- Terminal view → Terminal output: renders
- Terminal view → Command configuration: dispatches commands
- Terminal view → Typewriter hook: animates welcome
- Experience section → Experience data: reads
- Projects section → Project data: reads