Portafolio y marca personal

Tu portafolio es tu vendedor que trabaja 24/7. Un cliente o reclutador decide en segundos si te contacta, y lo hace mirando tu trabajo, no tu título. En esta lección aprenderás qué proyectos mostrar, cómo presentarlos como casos de estudio y cómo construir una marca personal que haga que los clientes te encuentren.

Concepto

• Portafolio: la colección de tus mejores trabajos, presentados para demostrar que puedes resolver problemas reales.
• Marca personal: lo que la gente piensa cuando oye tu nombre ("el que hace sitios rapidísimos para restaurantes", "la experta en tiendas en línea"). Se construye con tu portafolio, tu contenido y cómo tratas a tus clientes.

Calidad sobre cantidad

Tres proyectos excelentes y bien explicados valen más que quince tutoriales copiados. Quien revisa tu portafolio busca evidencia de que resuelves problemas, no de que sigues instrucciones.

Qué proyectos incluir

Si ya tienes clientes

• Tus 3 a 6 mejores proyectos, idealmente variados (landing, sitio corporativo, tienda, sistema).
• Prioriza los que tengan resultados medibles y testimonio.
• Pide permiso al cliente (debería estar en tu contrato).

Si aún no tienes clientes

No esperes a tener clientes para tener portafolio:

1. Proyectos para negocios ficticios de tu nicho: "Dental Sonrisa", "Café Luna", "Inmobiliaria Horizonte". Trátalos como proyectos reales: brief, diseño, desarrollo y publicación.
2. Rediseños conceptuales: toma el sitio viejo de un negocio real y rediséñalo. Muestra el antes y el después (aclara que es un concepto no solicitado).
3. Retos con diseños profesionales: Frontend Mentor ofrece diseños reales para maquetar (ver Practicar y retos).
4. Herramientas útiles: un generador, una calculadora, una extensión. Algo que la gente pueda usar.
5. Proyectos para ONG, familiares o causas locales: reales y con impacto.
6. Contribuciones a código abierto: aunque sean pequeñas (documentación, traducciones, bugs).

Proyectos que debes evitar

• Clones exactos de tutoriales populares sin cambios (todos los reclutadores los reconocen).
• Proyectos sin terminar, con errores visibles o que no se ven bien en celular.
• Enlaces caídos o repositorios vacíos.

La estructura de un caso de estudio

No muestres solo una captura: cuenta la historia del proyecto.

CASO DE ESTUDIO: Dental Sonrisa

1. Portada
   Captura atractiva (escritorio + celular) y una línea de resultado:
   "Sitio web que triplicó las citas en línea en 3 meses".

2. El cliente y el problema
   Clínica dental con 15 años de experiencia. Recibía citas solo por
   teléfono; su sitio de 2016 no se veía en celular y tardaba 9 s en
   cargar.

3. Objetivo
   Aumentar las citas desde internet y reducir llamadas repetitivas
   (horarios, precios, ubicación).

4. Mi rol
   Descubrimiento, diseño UX/UI, desarrollo frontend y backend,
   despliegue y capacitación.

5. Proceso y decisiones
   - Wireframes enfocados en un solo objetivo: agendar.
   - Botón "Agenda tu cita" visible en todo momento en móvil.
   - Formulario de 4 campos (antes 11).
   - Imágenes WebP y sitio estático para cargar en menos de 1.5 s.

6. Tecnologías
   Astro, Tailwind CSS, Node + PostgreSQL, Nginx, Cloudflare.

7. Resultados
   - Citas en línea: de 8 a 27 al mes.
   - Tiempo de carga: de 9 s a 1.2 s.
   - Lighthouse: 98 en rendimiento móvil.

8. Testimonio
   "Ahora la mayoría de nuestros pacientes nuevos agendan desde el
   sitio. El proceso fue clarísimo." — Dra. Ana López

9. Enlaces
   [Ver sitio] [Ver código] (si es público)

Muestra el proceso

Incluir wireframes, bocetos o versiones descartadas demuestra que piensas antes de programar. A los clientes les da confianza; a los reclutadores les muestra criterio.

Tu sitio portafolio

Debe ser, en sí mismo, una demostración de tu calidad.

Estructura recomendada

Inicio
├── Hero: quién eres y a quién ayudas en una frase
│   "Desarrollo sitios web rápidos que convierten visitas en clientes
│    para consultorios y clínicas."
│   [Ver proyectos] [Agenda una llamada]
├── Proyectos destacados (3 a 6 tarjetas → casos de estudio)
├── Servicios (qué ofreces, con precios "desde" opcionales)
├── Proceso (cómo trabajas, en 4–5 pasos)
├── Testimonios
├── Sobre mí (breve, con foto profesional y cercana)
└── Contacto (formulario, correo, WhatsApp, Calendly)

Requisitos técnicos

• Dominio propio (tunombre.com o tunombre.dev): cuesta poco y transmite profesionalismo.
• Rápido (Lighthouse ≥ 90), responsive, accesible y sin errores de ortografía.
• Título y descripción optimizados para que te encuentren ("Desarrollador web en Guadalajara").
• Correo con tu dominio (hola@tunombre.com).
• Puedes publicarlo gratis en Netlify, Vercel, Cloudflare Pages o GitHub Pages (ver PaaS).

GitHub como portafolio técnico

Para empleos, tu GitHub pesa mucho:

• README de perfil: crea un repositorio con tu mismo nombre de usuario; su README.md aparece en tu perfil. Preséntate, tus tecnologías y proyectos destacados.
• Fija (pin) tus 6 mejores repositorios.
• Cada repo destacado con un README completo: qué es, captura o GIF, demo en vivo, tecnologías, cómo instalarlo y qué aprendiste.
• Commits con mensajes claros y constantes.
• Sin repos con credenciales o archivos .env subidos.

LinkedIn

• Titular que diga a quién ayudas, no solo tu puesto: "Desarrollador Full Stack | Sitios y sistemas web para negocios | React · Node · PHP".
• Acerca de: 3 párrafos cortos: qué haces, para quién y cómo contactarte.
• Destacados: enlaces a tu portafolio y a tus mejores casos de estudio.
• Experiencia: incluye tu trabajo freelance como experiencia real, con proyectos y resultados.
• Pide recomendaciones a clientes y compañeros.

Contenido: que te encuentren

Publicar contenido te posiciona como experto y atrae clientes sin buscarlos.

Ideas que funcionan:

• Antes y después de un rediseño (con permiso).
• Mini tutoriales de lo que aprendes ("Cómo hice un menú hamburguesa accesible").
• Errores comunes de los sitios de tu nicho ("5 errores que hacen que los sitios de restaurantes pierdan clientes"). Este contenido lo leen tus clientes potenciales, no otros programadores.
• Proceso de un proyecto, del boceto al lanzamiento.

Dónde: LinkedIn (clientes de empresa), Instagram o TikTok (negocios locales), un blog en tu portafolio (SEO a largo plazo), dev.to o Hashnode (comunidad técnica).

Constancia > perfección: una publicación útil a la semana durante un año vale más que diez en una semana y luego nada.

Error común

Hablarles a otros programadores cuando buscas clientes. Un dueño de restaurante no quiere leer sobre "server components"; quiere saber cómo recibir más reservaciones. Habla el idioma de quien te va a pagar.

Coherencia de marca

• La misma foto, nombre y descripción en todos tus perfiles.
• Una paleta de colores y tipografía para tu portafolio, propuestas y redes.
• Un correo profesional y una firma de correo con tus enlaces.
• Cumple lo que prometes: la mejor marca personal es un cliente que te recomienda.

Ejercicios

1. Escribe la frase de tu hero: "Ayudo a [quién] a [lograr qué] con [qué servicio]".
2. Elige un proyecto tuyo y escríbelo como caso de estudio con las 9 secciones.
3. Escribe el README de perfil de GitHub con presentación, tecnologías y 3 proyectos destacados.

Ver solución (ejemplo)

1. "Ayudo a restaurantes y cafeterías a recibir más pedidos y reservaciones con sitios web rápidos y fáciles de actualizar."
2. Asegúrate de incluir problema, objetivo, tu rol, decisiones con su porqué y resultados (aunque sean de rendimiento si el proyecto es ficticio: "Lighthouse 98, carga en 1 s").
3. Estructura sugerida:

# Hola, soy Ana 👋
Desarrollador web full stack en México. Construyo sitios y sistemas
para negocios que quieren vender más en internet.

Tecnologías: HTML, CSS, JavaScript, TypeScript, React, Node.js, PHP,
Laravel, MySQL, PostgreSQL, Docker.

Proyectos destacados:
- Dental Sonrisa — sitio con agenda de citas (Astro + Node) [demo]
- Inventario Pro — sistema de inventario (Laravel + MySQL) [demo]
- Generador de degradados — herramienta CSS (Vue) [demo]

Contacto: hola@tunombre.com · tunombre.com · LinkedIn

Resumen

• Muestra pocos proyectos, excelentes y explicados como casos de estudio.
• Sin clientes: proyectos ficticios de tu nicho, rediseños conceptuales, retos y herramientas.
• Tu sitio portafolio debe ser rápido, con dominio propio y un mensaje claro de a quién ayudas.
• GitHub y LinkedIn completos y coherentes.
• Publica contenido útil para tus clientes potenciales con constancia.
• Siguiente: Freelance vs empleo.