# Codebase Concerns

**Analysis Date:** 2026-04-07

## Tech Debt

**Missing 404 Page Implementation:**
- Issue: 404 catch-all route currently redirects to HomePage instead of a dedicated 404 page
- Files: `src/router/index.ts` (line 51: TODO comment)
- Impact: Users encountering invalid routes see the homepage instead of a proper error page, creating confusion and poor UX. SEO also treats all invalid URLs as the homepage.
- Fix approach: Create a new `NotFoundPage.vue` component in `src/views/` with proper 404 messaging, then update the route in `src/router/index.ts` to point to this component.

**Hardcoded GA Tracking ID:**
- Issue: Google Analytics tracking ID `G-CDVVNFY6MV` is hardcoded in multiple places
- Files: `index.html` (line 9), `src/router/index.ts` (line 109)
- Impact: Cannot change analytics without code updates. Difficult to manage different GA IDs for development vs production environments.
- Fix approach: Move tracking ID to environment variables (`.env`), access via `import.meta.env.VITE_GA_ID`.

**Hardcoded Site URL and Analytics:**
- Issue: URLs and site identifiers hardcoded throughout the codebase
- Files: `src/composables/useSeo.ts` (lines 103, 113, 143, 149), `src/config/site.ts` (line 69), `src/router/index.ts` (line 109)
- Impact: Difficult to deploy to different environments (staging vs production). Requires code changes for different domains.
- Fix approach: Move to environment configuration. Create environment-based config: `VITE_SITE_URL`, `VITE_SITE_DOMAIN`, etc.

**External Image Asset Dependency on Placeholder Service:**
- Issue: Missing images fallback to external placeholder.com service without reliability guarantee
- Files: `src/composables/useAssets.ts` (lines 18, 42)
- Impact: If placeholder.com goes down or is rate-limited, missing images break visually. External dependency increases load time.
- Fix approach: Use local SVG or base64-encoded placeholder image instead of external URL.

## Known Bugs

**Scroll Position Duplication:**
- Symptoms: Multiple scroll handlers (in router and App.vue) could cause double-scrolling or jank
- Files: `src/App.vue` (lines 14-18), `src/router/index.ts` (lines 62-82, 118-125)
- Trigger: Navigation between routes
- Workaround: Currently works, but behavior is fragile due to redundancy

**FormationPage Billing Toggle State Issue:**
- Symptoms: Billing toggle (monthly/annual) uses `isAnnual` state but HTML shows `billingType` variable
- Files: `src/views/FormationPage.vue` (lines 12-20, 41)
- Trigger: When switching between monthly and annual billing
- Workaround: Component probably has missing reactive computed for `billingType`

## Security Considerations

**v-html Usage in FAQ Component:**
- Risk: XSS vulnerability if FAQ answers contain user-generated content or external data
- Files: `src/components/ServiceFAQ.vue` (line 22: `<p v-html="faq.answer"></p>`)
- Current mitigation: FAQ content is hardcoded in component props (trusted source), but pattern is risky if content source changes
- Recommendations: Replace with v-text or plain text content. If HTML is needed, use a sanitization library like `DOMPurify`.

**Personal Information Exposed in Configuration:**
- Risk: Email, phone number, and social profile IDs hardcoded in public config
- Files: `src/config/site.ts` (lines 71-100), `index.html` (lines 88, 239-240)
- Current mitigation: This is intentional (portfolio/contact site), but increases spam/scraping risk
- Recommendations: Consider using form submission instead of direct email/phone links on sensitive pages. Monitor contact form for abuse.

**Hardcoded Analytics and AdSense IDs:**
- Risk: Analytics and AdSense IDs in HTML source reveal account information
- Files: `index.html` (lines 9, 19)
- Current mitigation: None - IDs are public by design (Google Analytics is meant to be public)
- Recommendations: Ensure AdSense account is properly secured with password/2FA. Monitor for unauthorized modifications.

**Discord User ID Exposed:**
- Risk: Discord user ID `370940770225618954` is hardcoded and publicly visible
- Files: `src/config/site.ts` (line 92)
- Current mitigation: Discord doesn't allow impersonation via ID alone, but enables targeted attacks
- Recommendations: Keep Discord contact via link only, without exposing raw user ID. Use Discord username instead.

## Performance Bottlenecks

**Eager Image Loading with import.meta.glob:**
- Problem: All images under `src/assets/images/**` are eagerly loaded into memory at startup
- Files: `src/composables/useAssets.ts` (line 6: `eager: true`)
- Cause: `eager: true` loads all matching modules immediately instead of lazy-loading on-demand
- Improvement path: Change to lazy loading and implement on-demand imports, or at minimum separate critical images from lazy ones.

**External Script Dependencies Block Rendering:**
- Problem: Google Analytics, Google AdSense, and Umami scripts are loaded synchronously
- Files: `index.html` (lines 9, 19, 239-240)
- Cause: Multiple external scripts without proper `async` loading strategy
- Improvement path: Ensure all external scripts use `async` or `defer` attributes. Currently Umami and GTM use `defer` (good), but ensure they don't block critical rendering path.

**No Lazy Loading on Images:**
- Problem: No lazy-loading attributes on images, causing initial page load to fetch all images
- Files: Multiple components (`src/components/layout/AppFooter.vue` line 35, `src/components/layout/AppHeader.vue` line 33)
- Cause: `loading="eager"` and `loading="lazy"` not used strategically
- Improvement path: Set `loading="lazy"` on all below-fold images. Keep only above-fold images with `loading="eager"`.

## Fragile Areas

**GalleryModal Event Listener Management:**
- Files: `src/components/GalleryModal.vue` (lines 44-50)
- Why fragile: Global document keydown listener added/removed on mount/unmount. If component unmounts unexpectedly, listener could remain attached or fail to attach.
- Safe modification: Add try-catch around removeEventListener. Consider using a ref-based approach or delegated events.
- Test coverage: No test coverage visible for keyboard navigation. Recommend adding unit tests for keyboard shortcuts.

**Image URL Resolution Fallback Chain:**
- Files: `src/composables/useAssets.ts` (lines 13-44)
- Why fragile: Multiple fallback layers (module lookup → URL construction → placeholder) make debugging hard. If one fallback path fails, error is silently logged.
- Safe modification: Add explicit logging for each fallback step. Document expected path formats clearly.
- Test coverage: Recommend unit tests for edge cases (empty path, missing extensions, malformed paths).

**SEO Composable DOM Manipulation:**
- Files: `src/composables/useSeo.ts` (lines 35-70)
- Why fragile: Directly manipulates DOM with `document.querySelector`, `createElement`, `appendChild`. No error handling if DOM structure changes.
- Safe modification: Use Vue's ref system or a dedicated SEO library (e.g., `@unhead/vue`). Add error boundaries.
- Test coverage: No test coverage for SSR compatibility or DOM cleanup on route changes.

**Route-based SEO Title Dependency:**
- Files: `src/composables/useSeo.ts` (lines 75-76)
- Why fragile: Relies on route being available in useRoute() hook. If used in wrong context (non-routed component), will fail silently.
- Safe modification: Add null checks. Consider creating a composable specifically for page-level SEO that enforces route dependency.
- Test coverage: Recommend tests for components used in and outside routing context.

## Scaling Limits

**Single-Page History State:**
- Current capacity: Router handles typical portfolio page count (6-8 pages)
- Limit: If projects list grows beyond 50-100 items, ProjectsPage.vue performance degrades (all projects loaded at once)
- Scaling path: Implement pagination or virtual scrolling in ProjectsPage. Use server-side filtering if projects become dynamic.

**Inline Image Modules:**
- Current capacity: ~15-20 images loaded eagerly in memory
- Limit: If image count exceeds 100+, startup time and memory usage increase significantly
- Scaling path: Migrate to lazy-loading strategy. Consider CDN for image serving in production.

**Localization Key Lookups:**
- Current capacity: 500+ localization keys across en.ts and fr.ts
- Limit: If keys exceed 1000+, lookup performance and bundle size become concerns
- Scaling path: Implement lazy-loaded locale files (load only active language). Consider JSON-based locale format for better optimization.

## Dependencies at Risk

**No Testing Framework:**
- Risk: Zero test coverage visible in codebase. Refactoring breaks are undetectable.
- Impact: Security fixes, performance optimizations, and feature additions are risky.
- Migration plan: Add Jest + Vue Test Utils. Start with critical paths (router guards, composables, SEO).

**Hardcoded Translation Keys:**
- Risk: If translation key structure changes, UI silently breaks (missing translations show key names)
- Impact: Refactoring translations is error-prone and breaks are not caught in CI
- Migration plan: Add TypeScript strict typing for i18n keys using type-safe i18n library.

**External Analytics Dependency:**
- Risk: If Google Analytics changes API or service, tracking breaks
- Impact: Loss of analytics data, no visibility into user behavior
- Migration plan: Already using Umami (self-hosted alternative). Consider making analytics provider pluggable.

## Missing Critical Features

**No Error Boundary:**
- Problem: No Vue error boundary or fallback component for runtime errors
- Blocks: Cannot gracefully handle component errors or show error UI
- Fix approach: Create an error boundary component using Vue 3 error handling hooks (errorCaptured), wrap main app with it.

**No Offline Support:**
- Problem: No service worker or offline fallback
- Blocks: Portfolio becomes completely unavailable if user loses connection
- Fix approach: Implement service worker with offline fallback. Cache critical assets (HTML, CSS, JS).

**No Loading States:**
- Problem: No skeleton loaders or loading indicators for async operations
- Blocks: Users don't know if page is loading or broken. Especially impacts image loading.
- Fix approach: Add skeleton screens for ProjectDetailPage. Add loading indicators for gallery modal.

**No Proper 404 Page:**
- Problem: 404 redirects to homepage (mentioned in Tech Debt)
- Blocks: Users cannot identify when they've hit an invalid URL
- Fix approach: Create NotFoundPage.vue with suggestions for navigation.

**No Analytics Event Tracking:**
- Problem: Only page views tracked, no event analytics (clicks, form submissions, etc.)
- Blocks: Cannot understand user behavior beyond page traffic
- Fix approach: Add event tracking for CTA clicks, social link clicks, gallery interactions.

## Test Coverage Gaps

**No Unit Tests:**
- What's not tested: Composables (useSeo, useAssets, useProjects, useI18n), utility functions
- Files: All of `src/composables/` and `src/data/`
- Risk: Refactoring introduces subtle bugs. Type safety is partial (TypeScript, but no runtime checks).
- Priority: High - composables are core to the app and impact SEO/styling

**No Component Tests:**
- What's not tested: Interactive components (GalleryModal, ServiceFAQ, language switcher, theme toggle)
- Files: `src/components/GalleryModal.vue`, `src/components/ServiceFAQ.vue`, `src/components/ThemeToggle.vue`, `src/components/LanguageSwitcher.vue`
- Risk: UI behavior breaks silently. Accessibility features (keyboard nav, ARIA) may regress.
- Priority: High - GalleryModal keyboard navigation and language switching are user-facing

**No Integration Tests:**
- What's not tested: Router navigation, SEO meta tag updates, i18n language switching across pages
- Files: `src/router/index.ts`, cross-file composable interactions
- Risk: Multi-step user flows break. SEO meta tags may not update correctly on navigation.
- Priority: Medium - can catch cross-cutting issues

**No E2E Tests:**
- What's not tested: Full user journeys (landing → project detail → gallery → contact)
- Framework: None (not using Cypress, Playwright, etc.)
- Risk: Visual regressions, layout issues, navigation bugs in real browser contexts
- Priority: Medium - would catch integration issues and performance regressions

**No Accessibility Tests:**
- What's not tested: Keyboard navigation, screen reader compatibility, color contrast, focus management
- Files: All components with interactive elements
- Risk: Accessibility fails silently. Users with disabilities cannot navigate.
- Priority: High - portfolio should be accessible to all users

---

*Concerns audit: 2026-04-07*