How dluisvaldivia/dvportfolio works
This is a bilingual personal portfolio site with project, profile, contact, blog, and accessibility-checker experiences, plus a browser-backed admin workflow for managing blog posts. The main visitor flow is routed through the app shell to portfolio pages or blog listings and posts; admin users log in, pass a protected route, and edit or manage posts. The README is brief, so the map relies mainly on the sampled route declarations and source references; unsampled features such as Rates are shown without speculative connections.
Main entry points: App.tsx Router and shell · blogController.ts Blog data and storage · Home.tsx Portfolio home · authController.ts Authentication
Components 30
App shell
- Router and shell
src/App.tsx - React bootstrap
src/main.tsx - Navigation
src/view/components/Navbar.tsx - Not found page
src/view/pages/NotFound.tsx - Back to top
src/view/components/backToTop.tsx
Portfolio experience
- Portfolio home
src/view/pages/Home.tsx - Project cards
src/view/components/cardList.tsx - Project card
src/view/components/card.tsx - Project data
src/models/cardsData.ts - Animated hero
src/components/data-grid-hero.tsx - Rates page
src/view/pages/Rates.tsx - Accessibility checker
src/view/pages/AccessibilityChecker.tsx
Blog publishing
- Blog listing
src/view/pages/Blog.tsx - Blog post view
src/view/pages/BlogPost.tsx - Blog data and storage
src/controllers/blogController.ts - Seed posts
src/models/blogData.ts
Administration
- Admin login
src/view/pages/admin/AdminLogin.tsx - Authentication
src/controllers/authController.ts - Route guard
src/view/components/PrivateRoute.tsx - Post dashboard
src/view/pages/admin/AdminDashboard.tsx - Post editor
src/view/pages/admin/PostEditor.tsx - Rich editor
src/view/components/admin/RichEditor.tsx - Editor toolbar
src/view/components/admin/Toolbar.tsx
Shared services
- Browser storage
- Translations
src/i18n.ts - Theme controller
src/controllers/themeController.ts - Page title hook
src/hooks/usePageTitle.ts
Other components
- Visitor
- Accessibility API
- EmailJS service
Connections 34
- Visitor → Router and shell: opens
src/App.tsx - React bootstrap → Router and shell: renders
src/main.tsx - React bootstrap → Translations: loads
src/main.tsx - Router and shell → Navigation: renders
src/App.tsx - Router and shell → Portfolio home: routes to
src/App.tsx - Router and shell → Blog listing: routes to
src/App.tsx - Router and shell → Blog post view: routes to
src/App.tsx - Router and shell → Accessibility checker: routes to
src/App.tsx - Router and shell → Admin login: routes to
src/App.tsx - Router and shell → Route guard: guards routes
src/App.tsx - Router and shell → Post dashboard: routes to
src/App.tsx - Router and shell → Post editor: routes to
src/App.tsx - Router and shell → Not found page: routes to
src/App.tsx - Router and shell → Back to top: renders
src/App.tsx - Router and shell → Theme controller: sets theme
src/App.tsx - Portfolio home → Project cards: renders
src/view/pages/Home.tsx - Portfolio home → Animated hero: renders
src/view/pages/Home.tsx - Project cards → Project card: renders
src/view/components/cardList.tsx - Project cards → Project data: reads
src/view/components/cardList.tsx - Portfolio home → EmailJS service: sends contact
src/view/pages/Home.tsx - Accessibility checker → Accessibility API: fetches report
src/view/pages/AccessibilityChecker.tsx - Blog listing → Blog data and storage: loads posts
src/view/pages/Blog.tsx - Blog post view → Blog data and storage: loads post
src/view/pages/BlogPost.tsx - Blog data and storage → Seed posts: merges seeds
src/controllers/blogController.ts - Blog data and storage → Browser storage: reads and writes
src/controllers/blogController.ts - Admin login → Authentication: checks credentials
src/view/pages/admin/AdminLogin.tsx - Route guard → Authentication: checks session
src/view/components/PrivateRoute.tsx - Authentication → Browser storage: stores session
src/controllers/authController.ts - Post dashboard → Authentication: logs out
src/view/pages/admin/AdminDashboard.tsx - Post dashboard → Blog data and storage: manages posts
src/view/pages/admin/AdminDashboard.tsx - Post editor → Blog data and storage: saves post
src/view/pages/admin/PostEditor.tsx - Post editor → Rich editor: renders
src/view/pages/admin/PostEditor.tsx - Rich editor → Editor toolbar: uses
src/view/components/admin/RichEditor.tsx - Theme controller → Browser storage: reads and writes
src/controllers/themeController.ts