How lokesh-81/lokesh.portfolio works
This is an interactive personal portfolio with a public-facing discovery path and an authenticated Studio CMS for maintaining its content. The public app routes visitors through profile, work, credentials, skills, experience, testimonials and contact; inquiry submission is a distinct action. Studio authentication leads to dashboard and content-editing tabs, backed by portfolio state with local caching and Supabase persistence. The graph follows documented capabilities where files are unsampled; their internal wiring is not inferred beyond documented ownership.
Main entry points: App.tsx App Router · portfolio-context.tsx Portfolio State · StudioApp.tsx Studio Entry · StudioLayout.tsx Studio Layout
Components 28
Public Portfolio
- App Router
src/App.tsx - Portfolio Dock
components/portfolio/portfolio-dock.tsx - Profile & Hero
components/portfolio/hero.tsx - About
components/portfolio/about-section.tsx - Projects & Works
components/portfolio/projects-section.tsx - Skills & Stack
components/portfolio/skills-section.tsx - Credentials
components/portfolio/certifications-section.tsx - Experience
components/portfolio/experience-section.tsx - Testimonials
components/portfolio/testimonials-section.tsx - Contact Form
components/portfolio/contact-section.tsx
Portfolio Content
- Portfolio State
lib/portfolio-context.tsx - Project Data
lib/data/projects.ts - Experience Data
lib/data/experience.ts - Certification Data
lib/data/certifications.ts - Technology Data
lib/data/tech-stack.ts
Studio CMS
- Studio Entry
src/studio/StudioApp.tsx - Studio Login
src/studio/auth/StudioLogin.tsx - Studio Layout
src/studio/StudioLayout.tsx - Content Tabs
src/studio/tabs
Data Services
- Inquiry Handler
lib/inquiries.ts - Localization
src/i18n/index.tsx - Studio Auth
lib/studio-auth.ts - Supabase
lib/supabase.ts - Firebase
lib/firebase.ts - Local Cache
lib/supabase.ts - Media Storage
lib/supabase.ts
Other components
- Visitor
- Administrator
Connections 33
- Visitor → App Router: opens site
- App Router → Portfolio Dock: renders navigation
- App Router → Profile & Hero: renders section
- App Router → About: renders section
- App Router → Projects & Works: renders section
- App Router → Skills & Stack: renders section
- App Router → Credentials: renders section
- App Router → Experience: renders section
- App Router → Testimonials: renders section
- App Router → Contact Form: renders section
- Portfolio Dock → App Router: selects section
- App Router → Portfolio State: provides portfolio state
- App Router → Localization: provides translations
- Contact Form → Inquiry Handler: submits inquiry
- Portfolio State → Supabase: loads and persists
- Portfolio State → Local Cache: caches content
- Projects & Works → Project Data: reads projects
- Experience → Experience Data: reads timeline
- Credentials → Certification Data: reads credentials
- Skills & Stack → Technology Data: reads technologies
- App Router → Studio Entry: routes to studio
- Administrator → Studio Entry: opens studio
- Studio Entry → Studio Login: renders login
- Studio Login → Studio Auth: authenticates
- Studio Auth → Supabase: verifies session
- Studio Entry → Studio Layout: renders admin
- Studio Layout → Portfolio State: uses portfolio state
- Studio Layout → Content Tabs: dispatches tab
- Content Tabs → Portfolio State: edits portfolio data
- Content Tabs → Media Storage: uploads assets
- Studio Auth → Local Cache: stores session
- Inquiry Handler → Supabase: stores inquiry
- Portfolio State → Firebase: optional integration