Portafolio personal donde muestro 3 apps nativas Android, 13 sistemas y plantillas web y 2 apps de Windows en desarrollo. Construido con React 19 + Vite 6 + Tailwind CSS 4 + TypeScript, con carga adaptativa y soporte ES / EN / PT / FR.

🇺🇸 Read in English

Personal portfolio showcasing 3 native Android apps, 13 web systems/templates and 2 Windows apps (in development). Built with React 19 + Vite 6 + Tailwind CSS 4 + TypeScript, with adaptive loading and ES/EN/PT/FR i18n.

Important

Experiencia profesional: el sitio de Clínica Veterinaria Felycan es un proyecto real desarrollado y publicado para la empresa, mostrado con su autorización en la sección Colaboraciones con empresas. Las webs del mapa de constelaciones son plantillas demo. Las apps móviles son proyectos nativos con Kotlin; las de Windows están en desarrollo activo.

13 demos repartidas en 3 constelaciones. Todas están marcadas como Plantilla demo en cards y modales. El mapa Sistemas descubiertos muestra solo proyectos web: Android y Windows viven en sus propias secciones.

Ambas llevan el badge En proceso mientras siguen en desarrollo activo.

• Felycan: clinicaveterinariafelycan.cl, con captura local responsive generada desde felycan.png.
• El sitio de la clínica bloquea iframes mediante frame-ancestors 'none', por lo que la vista previa usa imágenes WebP ligeras para cualquier conexión.
• Para actualizar las capturas, desde la raíz del proyecto:

node scripts/optimize-felycan.mjs

• Selector de temas: icono de pincel junto al idioma, con cinco paletas oscuras espaciales: Morado (predeterminada), Verde, Rojo, Celeste y Supernova (dorado y naranja eléctrico). La preferencia se guarda en localStorage bajo space-theme y se comparte con la página 404.
• 404 independiente: 404.html tiene su propia entrada React (src/notfound.tsx) y se genera en dist/404.html. vercel.json sirve los archivos existentes y responde con esta página y estado HTTP 404 para las rutas inexistentes. En desarrollo, la app también muestra la pantalla 404 para rutas desconocidas.
• La nueva sección, el selector y los mensajes de error están traducidos a ES / EN / PT / FR.

Frontend
Mobile
Backend
Base de datos
UI e íconos
Rendimiento

🇪🇸 Español es

🇺🇸 English en

🇧🇷 Português pt

🇫🇷 Français fr

ES / EN / PT / FR 100 % traducido, sin textos hardcodeados, mediante t(lang, key) en src/lib/i18n.ts.

Hero multiplataforma De "solo Kotlin" a "Kotlin + Web & Desktop".	i18n completo 100 % traducido ES / EN / PT / FR, sin hardcodes, con t(lang, key).	Íconos Lucide Reemplazo total de emojis por iconografía consistente.
Carga adaptativa navigator.connection + medición manual: iframe si la conexión es rápida, WebP estático si es lenta.	Load More galáctico 6 iniciales, +6 por clic y contador Mostrando X de Y.	Badge Plantilla demo Disclaimer profesional en cards y modales.

Así decide el portafolio cómo mostrar cada vista previa:

%%{init: {'theme':'base','themeVariables':{'primaryColor':'#1A1333','primaryTextColor':'#F1ECFF','primaryBorderColor':'#9B7BFF','lineColor':'#FF63B8','secondaryColor':'#241A4A','tertiaryColor':'#0B0816','fontFamily':'Segoe UI, Arial, sans-serif'}}}%%
flowchart LR
    A([Visita]) --> B{¿Hay navigator.connection?}
    B -- Sí --> C[Lee la calidad de conexión]
    B -- No --> D[Medición manual de respaldo]
    C --> E{¿Conexión rápida?}
    D --> E
    E -- Sí --> F[Vista previa en iframe]
    E -- No --> G[Imagen WebP estática]

Loading

Ver qué se hizo para que Google encuentre el portafolio

• title, description, canonical y JSON-LD (Person) en index.html.
• OpenGraph + Twitter Card con imagen social 1200×630 (public/og-image.png).
• robots.txt + sitemap.xml registrados en Google Search Console.
• Páginas SEO estáticas para intención de búsqueda: /servicios.html, /desarrollo-web-chile.html, /apps-android-kotlin-chile.html y /software-windows.html.
• Contenido HTML inicial en la home para que Google lea servicios, experiencia real y FAQ incluso antes de renderizar React.
• JSON-LD adicional de servicios y FAQPage para reforzar búsquedas por desarrollo web, apps Android Kotlin y software Windows en Chile.

Ver el árbol de carpetas

MiPresentacion
 ┣ src/
 ┃ ┣ components/           → NebulaMap, OrbitCard, MobileShowcase, Hero, Skills...
 ┃ ┣ data/                 → projectsData.ts (18 proyectos)
 ┃ ┣ hooks/                → useConnectionQuality.ts (Network Info API + fallback)
 ┃ ┣ lib/                  → i18n.ts (4 idiomas), previewImages.ts
 ┃ ┗ App.tsx               → Hero multiplataforma + fondo galaxia
 ┣ public/                 → og-image, robots, sitemap, verificación GSC, images/
 ┣ vite.config.ts
 ┣ package.json
 ┗ README.md

# Desarrollo
npm run dev          # http://localhost:5173

# Build de producción
npm run build        # → dist/

# Vista previa del build
npm run preview

Producción en Vercel: https://miportafolio-fguz.vercel.app/, con deploy automático desde main. Indexado en Google Search Console con sitemap e imagen social para compartir.