fix(i18n): cubrir todos los strings visibles sin traducir

devsart95 · claude · devsart95 · commit 56d5f25f7ca4 · 2026-04-01T23:27:40.000-03:00
- Hero: subtítulo 'Fullstack developer · AI enthusiast · Agro worker.' → t()
- About: 'identity record' → t('about.hud.title'), con versión JA 'プロフィール'
- Skills: titleKey de AI/Web/Cloud usan claves i18n; badge FAST BUILDER → t()
- Connect: label email hardcodeado → t('connect.form.email')
- ThemeToggle: LIGHT/DARK y aria-label → t()
- LangSelector: aria-labels → t('lang.aria') / t('lang.switch')
- Translations: agrega hero.subtitle, about.hud.title, skills.*.title, connect.form.email, theme.*, lang.* en ES/EN/JA

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/components/LangSelector.tsx b/src/components/LangSelector.tsx
@@ -8,16 +8,16 @@ const LANGS: { code: Lang; label: string }[] = [
 ]
 
 export function LangSelector() {
-  const { lang, setLang } = useLang()
+  const { lang, setLang, t } = useLang()
 
   return (
-    <div className="lang-selector" role="group" aria-label="Language selector">
+    <div className="lang-selector" role="group" aria-label={t('lang.aria')}>
       {LANGS.map(({ code, label }) => (
         <button
           key={code}
           onClick={() => setLang(code)}
           aria-pressed={lang === code}
-          aria-label={`Switch to ${label}`}
+          aria-label={`${t('lang.switch')} ${label}`}
           className={`lang-btn${lang === code ? ' lang-btn-active' : ''}`}
         >
           {label}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
@@ -1,21 +1,23 @@
 import { useEffect, useState } from 'react'
+import { useLang } from '../context/LangContext'
 
 export function ThemeToggle() {
   const [theme, setTheme] = useState<'dark'|'light'>(
     () => (localStorage.getItem('theme') as 'dark'|'light') || 'dark'
   )
+  const { t } = useLang()
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme)
     localStorage.setItem('theme', theme)
   }, [theme])
 
-  const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark')
+  const toggle = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark')
 
   return (
     <button
       onClick={toggle}
-      aria-label="Toggle theme"
+      aria-label={t('theme.aria')}
       aria-pressed={theme === 'light'}
       style={{
         position: 'fixed',
@@ -37,7 +39,7 @@ export function ThemeToggle() {
       }}
     >
       <span style={{ fontSize: 14 }}>{theme === 'dark' ? '◐' : '◑'}</span>
-      {theme === 'dark' ? 'LIGHT' : 'DARK'}
+      {theme === 'dark' ? t('theme.light') : t('theme.dark')}
     </button>
   )
 }
diff --git a/src/components/sections/About.tsx b/src/components/sections/About.tsx
@@ -50,7 +50,7 @@ export function About() {
           </svg>
 
           <div className="hud-header">
-            <span className="hud-title-text">identity record</span>
+            <span className="hud-title-text">{t('about.hud.title')}</span>
             <div className="hud-title-line" />
             <span className="hud-badge">v2.026</span>
           </div>
diff --git a/src/components/sections/Connect.tsx b/src/components/sections/Connect.tsx
@@ -138,7 +138,7 @@ export function Connect() {
                   </div>
 
                   <div className="cf-field">
-                    <label className="cf-label" htmlFor="cf-email">email</label>
+                    <label className="cf-label" htmlFor="cf-email">{t('connect.form.email')}</label>
                     <input
                       id="cf-email"
                       className="cf-input"
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
@@ -22,7 +22,7 @@ export function Hero() {
           </h1>
 
           <p className="hero-tagline">
-            <strong>Fullstack developer</strong> · AI enthusiast · Agro worker.<br />
+            {t('hero.subtitle')}<br />
             {t('hero.tagline')}
           </p>
 
diff --git a/src/components/sections/Skills.tsx b/src/components/sections/Skills.tsx
@@ -11,6 +11,7 @@ interface Domain {
   id: string
   color: string
   badge?: string
+  badgeKey?: Parameters<ReturnType<typeof useLang>['t']>[0]
   titleKey: string
   subKey: string
   icon: ReactNode
@@ -20,7 +21,7 @@ interface Domain {
 const DOMAINS: Domain[] = [
   {
     id: 'ai', color: '#a78bfa', badge: 'SPECIALIST',
-    titleKey: 'AI & LLMs', subKey: 'skills.ai.sub',
+    titleKey: 'skills.ai.title', subKey: 'skills.ai.sub',
     icon: (
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
         <path d="M12 2a10 10 0 0 1 10 10c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2z" opacity=".3"/>
@@ -64,8 +65,8 @@ const DOMAINS: Domain[] = [
     ],
   },
   {
-    id: 'dev', color: '#34d399', badge: 'FAST BUILDER',
-    titleKey: 'Web & Apps', subKey: 'skills.dev.sub',
+    id: 'dev', color: '#34d399', badgeKey: 'skills.badge.fast' as const,
+    titleKey: 'skills.dev.title', subKey: 'skills.dev.sub',
     icon: (
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
         <polyline points="16 18 22 12 16 6"/>
@@ -128,7 +129,7 @@ const DOMAINS: Domain[] = [
   },
   {
     id: 'cloud', color: '#38bdf8',
-    titleKey: 'Cloud & DevOps', subKey: 'skills.cloud.sub',
+    titleKey: 'skills.cloud.title', subKey: 'skills.cloud.sub',
     icon: (
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
         <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
@@ -165,8 +166,9 @@ export function Skills() {
 
         <div className="skills-map">
           {DOMAINS.map((d, i) => {
-            const title = d.titleKey.startsWith('skills.') ? t(d.titleKey as Parameters<typeof t>[0]) : d.titleKey
+            const title = t(d.titleKey as Parameters<typeof t>[0])
             const sub   = t(d.subKey as Parameters<typeof t>[0])
+            const badge = d.badgeKey ? t(d.badgeKey) : d.badge
             return (
               <div
                 key={d.id}
@@ -181,7 +183,7 @@ export function Skills() {
                     <span className="sd-title">{title}</span>
                     <span className="sd-sub">{sub}</span>
                   </div>
-                  {d.badge && <span className="sd-badge">{d.badge}</span>}
+                  {badge && <span className="sd-badge">{badge}</span>}
                 </div>
                 <div className="sd-tools">
                   {d.tools.map(tool => (
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
@@ -9,8 +9,9 @@ export const translations = {
     'nav.contact': 'contacto',
     'nav.aria':    'Navegación principal',
     // Hero
-    'hero.available': 'disponible · San Pedro, Paraguay 🇵🇾',
-    'hero.tagline':   'Construyendo herramientas que importan desde San Pedro, Paraguay.',
+    'hero.available':   'disponible · San Pedro, Paraguay 🇵🇾',
+    'hero.subtitle':    'Fullstack developer · AI enthusiast · Agro worker.',
+    'hero.tagline':     'Construyendo herramientas que importan desde San Pedro, Paraguay.',
     'hero.cta.connect': 'conectar',
     'hero.cta.about':   'sobre mí',
     // Typewriter
@@ -22,6 +23,7 @@ export const translations = {
     // About
     'about.tag':              '// whoami',
     'about.h2':               'Sobre mí',
+    'about.hud.title':        'identity record',
     'about.key.name':         'nombre',
     'about.key.alias':        'alias',
     'about.key.location':     'ubicación',
@@ -38,23 +40,28 @@ export const translations = {
     'stack.tag': '// stack',
     'stack.h2':  'Tecnologías',
     // Skills
-    'skills.tag':        '// skills',
-    'skills.h2':         'Skills Map',
-    'skills.ai.sub':     'Modelos de lenguaje e integración de IA',
-    'skills.cloud.sub':  'Infraestructura en la nube y servidores',
-    'skills.bots.title': 'Bots & Mensajería',
-    'skills.bots.sub':   'Canales conversacionales y automatización inteligente',
-    'skills.dev.sub':    'TypeScript, React, Next.js y APIs modernas',
+    'skills.tag':          '// skills',
+    'skills.h2':           'Skills Map',
+    'skills.ai.title':     'AI & LLMs',
+    'skills.ai.sub':       'Modelos de lenguaje e integración de IA',
+    'skills.cloud.title':  'Cloud & DevOps',
+    'skills.cloud.sub':    'Infraestructura en la nube y servidores',
+    'skills.bots.title':   'Bots & Mensajería',
+    'skills.bots.sub':     'Canales conversacionales y automatización inteligente',
+    'skills.dev.title':    'Web & Apps',
+    'skills.dev.sub':      'TypeScript, React, Next.js y APIs modernas',
     'skills.python.title': 'Python & Data',
     'skills.python.sub':   'Backend, procesamiento de datos y scripts avanzados',
-    'skills.saas.title': 'SaaS & ERP Builder',
-    'skills.saas.sub':   'Productos verticales, ERP y SaaS para LATAM',
+    'skills.saas.title':   'SaaS & ERP Builder',
+    'skills.saas.sub':     'Productos verticales, ERP y SaaS para LATAM',
+    'skills.badge.fast':   'FAST BUILDER',
     // Connect
     'connect.tag':              '// social',
     'connect.h2':               'Conectar',
     'connect.form.title':       '// mensaje directo',
     'connect.form.name':        'nombre',
     'connect.form.name.ph':     'Tu nombre',
+    'connect.form.email':       'email',
     'connect.form.email.ph':    'tu@email.com',
     'connect.form.message':     'mensaje',
     'connect.form.message.ph':  '¿En qué puedo ayudarte?',
@@ -64,6 +71,13 @@ export const translations = {
     'connect.form.ok.sub':      'Recibí tu mensaje y te respondo a la brevedad.',
     'connect.form.err.fields':  'Completá todos los campos',
     'connect.form.err.send':    'Error al enviar, intentá de nuevo',
+    // Theme toggle
+    'theme.light': 'LIGHT',
+    'theme.dark':  'DARK',
+    'theme.aria':  'Cambiar tema',
+    // Lang selector
+    'lang.aria':   'Selector de idioma',
+    'lang.switch': 'Cambiar a',
     // Footer
     'footer.built': 'built with ♥ caffeine & late nights',
   },
@@ -76,8 +90,9 @@ export const translations = {
     'nav.contact': 'contact',
     'nav.aria':    'Main navigation',
     // Hero
-    'hero.available': 'available · San Pedro, Paraguay 🇵🇾',
-    'hero.tagline':   'Building tools that matter from San Pedro, Paraguay.',
+    'hero.available':   'available · San Pedro, Paraguay 🇵🇾',
+    'hero.subtitle':    'Fullstack developer · AI enthusiast · Agro worker.',
+    'hero.tagline':     'Building tools that matter from San Pedro, Paraguay.',
     'hero.cta.connect': 'connect',
     'hero.cta.about':   'about me',
     // Typewriter
@@ -89,6 +104,7 @@ export const translations = {
     // About
     'about.tag':              '// whoami',
     'about.h2':               'About me',
+    'about.hud.title':        'identity record',
     'about.key.name':         'name',
     'about.key.alias':        'alias',
     'about.key.location':     'location',
@@ -107,21 +123,26 @@ export const translations = {
     // Skills
     'skills.tag':          '// skills',
     'skills.h2':           'Skills Map',
+    'skills.ai.title':     'AI & LLMs',
     'skills.ai.sub':       'Language models & AI integration',
+    'skills.cloud.title':  'Cloud & DevOps',
     'skills.cloud.sub':    'Cloud infrastructure & servers',
     'skills.bots.title':   'Bots & Messaging',
     'skills.bots.sub':     'Conversational channels & smart automation',
+    'skills.dev.title':    'Web & Apps',
     'skills.dev.sub':      'TypeScript, React, Next.js & modern APIs',
     'skills.python.title': 'Python & Data',
     'skills.python.sub':   'Backend, data processing & advanced scripts',
     'skills.saas.title':   'SaaS & ERP Builder',
     'skills.saas.sub':     'Vertical products, ERP & SaaS for LATAM',
+    'skills.badge.fast':   'FAST BUILDER',
     // Connect
     'connect.tag':              '// social',
     'connect.h2':               'Connect',
     'connect.form.title':       '// direct message',
     'connect.form.name':        'name',
     'connect.form.name.ph':     'Your name',
+    'connect.form.email':       'email',
     'connect.form.email.ph':    'you@email.com',
     'connect.form.message':     'message',
     'connect.form.message.ph':  'How can I help you?',
@@ -131,6 +152,13 @@ export const translations = {
     'connect.form.ok.sub':      'Got your message — I\'ll get back to you shortly.',
     'connect.form.err.fields':  'Please fill in all fields',
     'connect.form.err.send':    'Send error, please try again',
+    // Theme toggle
+    'theme.light': 'LIGHT',
+    'theme.dark':  'DARK',
+    'theme.aria':  'Toggle theme',
+    // Lang selector
+    'lang.aria':   'Language selector',
+    'lang.switch': 'Switch to',
     // Footer
     'footer.built': 'built with ♥ caffeine & late nights',
   },
@@ -143,8 +171,9 @@ export const translations = {
     'nav.contact': '連絡',
     'nav.aria':    'メインナビゲーション',
     // Hero
-    'hero.available': 'オンライン · サン・ペドロ, パラグアイ 🇵🇾',
-    'hero.tagline':   'パラグアイのサン・ペドロから、重要なツールを作っています。',
+    'hero.available':   'オンライン · サン・ペドロ, パラグアイ 🇵🇾',
+    'hero.subtitle':    'Fullstack developer · AI enthusiast · Agro worker.',
+    'hero.tagline':     'パラグアイのサン・ペドロから、重要なツールを作っています。',
     'hero.cta.connect': 'コンタクト',
     'hero.cta.about':   '自己紹介',
     // Typewriter
@@ -156,6 +185,7 @@ export const translations = {
     // About
     'about.tag':              '// whoami',
     'about.h2':               '自己紹介',
+    'about.hud.title':        'プロフィール',
     'about.key.name':         '名前',
     'about.key.alias':        '別名',
     'about.key.location':     '所在地',
@@ -174,21 +204,26 @@ export const translations = {
     // Skills
     'skills.tag':          '// skills',
     'skills.h2':           'スキルマップ',
+    'skills.ai.title':     'AI & LLMs',
     'skills.ai.sub':       '言語モデルとAI統合',
+    'skills.cloud.title':  'Cloud & DevOps',
     'skills.cloud.sub':    'クラウドインフラとサーバー',
     'skills.bots.title':   'ボット & メッセージング',
     'skills.bots.sub':     '会話チャネルとスマート自動化',
+    'skills.dev.title':    'Web & アプリ',
     'skills.dev.sub':      'TypeScript、React、Next.js とモダンAPI',
     'skills.python.title': 'Python & データ',
     'skills.python.sub':   'バックエンド、データ処理、スクリプト',
     'skills.saas.title':   'SaaS & ERPビルダー',
     'skills.saas.sub':     'LATAMのバーティカルプロダクト・ERP・SaaS',
+    'skills.badge.fast':   'FAST BUILDER',
     // Connect
     'connect.tag':              '// social',
     'connect.h2':               'コンタクト',
     'connect.form.title':       '// ダイレクトメッセージ',
     'connect.form.name':        '名前',
     'connect.form.name.ph':     'お名前',
+    'connect.form.email':       'メール',
     'connect.form.email.ph':    'メールアドレス',
     'connect.form.message':     'メッセージ',
     'connect.form.message.ph':  'どのようにお手伝いできますか？',
@@ -198,6 +233,13 @@ export const translations = {
     'connect.form.ok.sub':      'メッセージを受け取りました。すぐに返信します。',
     'connect.form.err.fields':  'すべての項目を入力してください',
     'connect.form.err.send':    '送信エラー。もう一度お試しください',
+    // Theme toggle
+    'theme.light': 'LIGHT',
+    'theme.dark':  'DARK',
+    'theme.aria':  'テーマ切替',
+    // Lang selector
+    'lang.aria':   '言語選択',
+    'lang.switch': '言語を変更:',
     // Footer
     'footer.built': 'built with ♥ caffeine & late nights',
   },
