portfolio/.planning/phases/02-content/02-02-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
02-content	02	execute	2	02-01	app/components/sections/HeroSection.vue app/components/sections/TestimonialsSection.vue app/components/layout/AppHeader.vue app/pages/index.vue	true	CONT-01 CONT-04	truths artifacts key_links Homepage H1 contains 'Hytale' via i18n key Hero CTAs are Discord + Contact per D-02 Badge uses i18n key, not hardcoded string TestimonialsSection accepts featured prop and filters accordingly Homepage shows 2-3 featured testimonials only Nav includes /hytale link path provides contains app/components/sections/HeroSection.vue Hytale-branded hero with i18n t('home.title') path provides contains app/components/sections/TestimonialsSection.vue Filterable testimonials with featured prop featured path provides contains app/components/layout/AppHeader.vue Nav with /hytale link hytale from to via pattern app/components/sections/HeroSection.vue i18n/locales/fr.json t('home.title') t('home. from to via pattern app/components/sections/TestimonialsSection.vue app/data/testimonials.ts import testimonials + filter on featured featured

Refonte hero homepage for Hytale branding, testimonials featured filtering, and nav update.

Purpose: The homepage must immediately communicate that Killian is a Hytale developer (CONT-01), show featured client testimonials (CONT-04), and provide navigation to the new /hytale page.

Output: Updated HeroSection, TestimonialsSection with featured prop, AppHeader with /hytale nav link.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/02-content/02-CONTEXT.md @.planning/phases/02-content/02-RESEARCH.md @.planning/phases/02-content/02-UI-SPEC.md @.planning/phases/02-content/02-01-SUMMARY.md

@app/components/sections/HeroSection.vue @app/components/sections/TestimonialsSection.vue @app/components/layout/AppHeader.vue @app/pages/index.vue @i18n/locales/fr.json @i18n/locales/en.json

export interface Testimonial { name: string; role: string; company: string; avatar: string; rating: number; content: string; date: string; platform: string; featured?: boolean; project_type: string; results?: string[]; }

export const testimonials: Testimonial[] // 5 items, 3 with featured: true export const testimonialsStats: TestimonialsStats // totalReviews: 5

home.title, home.subtitle, home.badge.available, home.cta.discord, home.cta.contact, home.stats.projects, home.stats.rating, home.terminal.role, nav.hytale

Task 1: Refonte HeroSection.vue for Hytale branding + i18n app/components/sections/HeroSection.vue app/components/sections/HeroSection.vue, i18n/locales/fr.json Modify HeroSection.vue to rebrand for Hytale per D-01 through D-07 and UI-SPEC:

1. H1 text — Replace current title with {{ t('home.title') }} (renders "Hytale Plugin Developer"). Keep the existing gradient text styling from UI-SPEC: bg-gradient-to-r from-brand-500 via-brand-400 to-emerald-400 bg-clip-text text-transparent.

2. Subtitle — Replace with {{ t('home.subtitle') }} (per D-04).

3. Badge "Available for projects" — The hardcoded string (around line 31) must become {{ t('home.badge.available') }} (per D-03). Keep the animated ping dot and existing styling.

4. CTAs — Replace existing CTA buttons with exactly 2 buttons per D-02:

   • Primary: Discord link — UButton with color="primary", icon i-simple-icons-discord, text {{ t('home.cta.discord') }}, links to Discord URL from siteConfig.social (find Discord entry). Add target="_blank" rel="noopener".
   • Secondary: Contact — UButton with variant="outline", text {{ t('home.cta.contact') }}, links to localePath('/contact').

5. Floating stats cards — Replace hardcoded "50+ projects" and "5.0 rating" strings (around lines 148-153) with {{ t('home.stats.projects') }} and {{ t('home.stats.rating') }}.

6. Terminal role — If the hero has a terminal/code block showing a role string (like 'Full Stack Dev'), replace with {{ t('home.terminal.role') }} or the literal 'Hytale Plugin Developer'.

7. Right column — Per D-05 and D-06, keep the existing 2-column grid layout. Keep whatever is on the right side (placeholder/illustration) as-is. Do NOT add an image.

8. Import siteConfig from ~/data/site to get the Discord URL: siteConfig.social.find(s => s.name === 'Discord')?.url. grep -q "t('home.title')" app/components/sections/HeroSection.vue && grep -q "t('home.badge.available')" app/components/sections/HeroSection.vue && grep -q "t('home.cta.discord')" app/components/sections/HeroSection.vue && grep -q "t('home.cta.contact')" app/components/sections/HeroSection.vue && echo "PASS" || echo "FAIL" <acceptance_criteria>

   • grep "Available for projects" app/components/sections/HeroSection.vue returns NO matches (hardcoded string removed)
   • grep "t('home.title')" app/components/sections/HeroSection.vue matches
   • grep "t('home.badge.available')" app/components/sections/HeroSection.vue matches
   • grep "discord" app/components/sections/HeroSection.vue shows Discord CTA
   • grep "t('home.cta.contact')" app/components/sections/HeroSection.vue matches
   • No hardcoded English/French strings remain in visible text areas </acceptance_criteria> HeroSection displays "Hytale Plugin Developer" H1, Hytale subtitle, i18n badge, Discord+Contact CTAs, i18n stats — all via t() keys

Task 2: TestimonialsSection featured prop + AppHeader nav + index.vue wiring app/components/sections/TestimonialsSection.vue, app/components/layout/AppHeader.vue, app/pages/index.vue app/components/sections/TestimonialsSection.vue, app/components/layout/AppHeader.vue, app/pages/index.vue 1. **TestimonialsSection.vue** — Add `featured` prop for homepage filtering (per D-15, D-17): ```typescript const props = defineProps<{ featured?: boolean }>() ``` Use a computed to filter: `const displayed = computed(() => props.featured ? testimonials.filter(t => t.featured) : testimonials)`. Replace direct `testimonials` usage in the template with `displayed`. Keep existing carousel/scroll pattern (`overflow-x-auto snap-x snap-mandatory`). Keep all existing styling and structure.

Also ensure any hardcoded testimonial-related strings use i18n keys from plan 01:

• Section label should use t('testimonials.label')
• Section title should use t('testimonials.title')
• Stats labels: t('testimonials.stats.reviews'), t('testimonials.stats.rating'), t('testimonials.stats.projects')

2. AppHeader.vue — Add /hytale nav link (per D-19). Insert after 'home' in navLinks:

   { key: 'hytale', path: '/hytale' },
   

   This single line addition makes it appear in both desktop nav and mobile drawer (same navLinks array drives both).

3. index.vue — Pass featured prop to TestimonialsSection:

   <TestimonialsSection featured />
   

   This makes the homepage show only 2-3 featured testimonials instead of all 5. grep -q "featured" app/components/sections/TestimonialsSection.vue && grep -q "hytale" app/components/layout/AppHeader.vue && grep -q "featured" app/pages/index.vue && echo "PASS" || echo "FAIL" <acceptance_criteria>

   • grep "defineProps" app/components/sections/TestimonialsSection.vue shows featured prop
   • grep "hytale" app/components/layout/AppHeader.vue shows nav entry
   • grep "TestimonialsSection" app/pages/index.vue shows featured prop passed
   • Existing carousel scroll pattern preserved in TestimonialsSection </acceptance_criteria> TestimonialsSection filters by featured prop on homepage (3 shown), all 5 shown by default. Nav includes /hytale. index.vue passes featured prop.

<threat_model>

Trust Boundaries

Boundary	Description
External Discord link	Hero CTA opens external Discord URL

STRIDE Threat Register

Threat ID	Category	Component	Disposition	Mitigation Plan
T-02-03	S (Spoofing)	Discord link in HeroSection	mitigate	Use rel="noopener" on external link, URL from siteConfig (not user input)
T-02-04	T (Tampering)	i18n keys	accept	Static JSON files, no runtime modification
</threat_model>

- Homepage H1 renders "Hytale Plugin Developer" (check via `curl localhost:3000 | grep -i hytale`) - Homepage shows exactly 3 featured testimonials, not all 5 - /hytale link visible in nav (desktop and mobile) - No hardcoded English/French strings in HeroSection or TestimonialsSection - Badge shows i18n text, not "Available for projects" literal

<success_criteria>

• Hero communicates Hytale positioning immediately
• Testimonials section is reusable with featured filter
• Navigation includes /hytale link
• All visible text uses i18n t() function </success_criteria>

After completion, create `.planning/phases/02-content/02-02-SUMMARY.md`