How xenon110/my_portfolio works
This is a React-based personal portfolio website. The user-facing flow starts at the app entry, mounts a page orchestrator, and presents configured profile, career, project, research, skills, education, achievement, and contact content. Project cards open a detail modal; theme state is shared through context and persisted in browser local storage. Several important sections are visible in the page orchestrator and portfolio configuration, although their internal implementations were not sampled; edges are limited to relationships shown by those excerpts or the source index.
Main entry points: Main.js Page orchestrator · portfolio.js Portfolio configuration · StartupProject.js Featured projects · WorkExperience.js Work experience
Components 26
Page composition
- React app
src/App.js - Page orchestrator
src/containers/Main.js - Splash screen
src/containers/splashScreen/SplashScreen.js - Site header
src/components/header/Header.js - Contact footer
src/components/footer/Footer.js - Scroll control
src/containers/topbutton/Top.js
Profile and career
- Introduction
src/containers/greeting/Greeting.js - Work experience
src/containers/workExperience/WorkExperience.js - Philosophy
src/components/philosophy/Philosophy.js - Experience card
src/components/experienceCard/ExperienceCard.js
Projects and research
- Featured projects
src/containers/StartupProjects/StartupProject.js - Project details
src/components/projectModal/ProjectModal.js - Research
src/containers/research/Research.js
Skills and credentials
- Education
src/containers/education/Education.js - Skills
src/containers/skills/Skills.js - Technology stack
src/components/technologies/Technologies.js - Achievements
src/containers/achievement/Achievement.js - Portfolio statistics
src/components/statsBar/StatsBar.js - Education card
src/components/educationCard/EducationCard.js - Achievement card
src/components/achievementCard/AchievementCard.js
Shared presentation
- Portfolio configuration
src/portfolio.js - Theme context
src/contexts/StyleContext.js - Theme persistence
src/hooks/useLocalStorage.js - Loading animation
src/containers/loading/Loading.js - Lottie renderer
src/components/displayLottie/DisplayLottie.js
Other components
- Site visitor
Connections 38
- Site visitor → React app: opens
src/App.js - React app → Page orchestrator: renders
src/App.js - Page orchestrator → Site header: renders
src/containers/Main.js - Page orchestrator → Introduction: renders
src/containers/Main.js - Page orchestrator → Philosophy: renders
src/containers/Main.js - Page orchestrator → Work experience: renders
src/containers/Main.js - Page orchestrator → Featured projects: renders
src/containers/Main.js - Page orchestrator → Research: renders
src/containers/Main.js - Page orchestrator → Technology stack: renders
src/containers/Main.js - Page orchestrator → Skills: renders
src/containers/Main.js - Page orchestrator → Education: renders
src/containers/Main.js - Page orchestrator → Achievements: renders
src/containers/Main.js - Page orchestrator → Portfolio statistics: renders
src/containers/Main.js - Page orchestrator → Contact footer: renders
src/containers/Main.js - Page orchestrator → Scroll control: renders
src/containers/Main.js - Page orchestrator → Splash screen: conditionally renders
src/containers/Main.js - Page orchestrator → Theme persistence: persists theme
src/containers/Main.js - Page orchestrator → Theme context: provides theme
src/containers/Main.js - Featured projects → Project details: renders
src/containers/StartupProjects/StartupProject.js - Featured projects → Theme context: reads theme
src/containers/StartupProjects/StartupProject.js - Introduction → Portfolio configuration: reads content
src/containers/greeting/Greeting.js - Work experience → Portfolio configuration: reads content
src/containers/workExperience/WorkExperience.js - Work experience → Experience card: renders
src/containers/workExperience/WorkExperience.js - Featured projects → Portfolio configuration: reads projects
src/containers/StartupProjects/StartupProject.js - Research → Portfolio configuration: reads content
src/containers/research/Research.js - Education → Portfolio configuration: reads content
src/containers/education/Education.js - Education → Education card: renders
src/containers/education/Education.js - Skills → Portfolio configuration: reads content
src/containers/skills/Skills.js - Technology stack → Portfolio configuration: reads content
- Achievements → Portfolio configuration: reads content
src/containers/achievement/Achievement.js - Achievements → Achievement card: renders
src/containers/achievement/Achievement.js - Portfolio statistics → Portfolio configuration: reads content
src/components/statsBar/StatsBar.js - Splash screen → Lottie renderer: renders
src/containers/splashScreen/SplashScreen.js - Loading animation → Lottie renderer: renders
src/components/displayLottie/DisplayLottie.js - Site header → Portfolio configuration: reads content
src/components/header/Header.js - Philosophy → Portfolio configuration: reads content
src/components/philosophy/Philosophy.js - Philosophy → Theme context: reads theme
src/components/philosophy/Philosophy.js - Contact footer → Portfolio configuration: reads contact data
src/components/footer/Footer.js