Como hacer un portafolio web profesional para tu carrera

Tu curriculum vitae ya no es suficiente. Las empresas de tecnologia en Honduras quieren ver que has construido, no solo leer que sabes hacer. Un portafolio web profesional es tu carta de presentacion como ingeniero y puede ser la diferencia entre conseguir la entrevista o quedar en la pila de CVs ignorados.

Por que necesitas un portafolio

Si buscas empleo en desarrollo: Los reclutadores de empresas como Grupo Karim's, BAC, Ficohsa o startups locales revisan portafolios. Un proyecto funcional vale mas que una lista de tecnologias en tu CV.

Si buscas freelance: Los clientes necesitan ver trabajo previo antes de contratarte. Tu portafolio es tu vitrina.

Si estas por graduarte: Un portafolio con tu proyecto de tesis, proyectos de clase y proyectos personales demuestra crecimiento profesional.

Que incluir en tu portafolio

Seccion 1: Presentacion

Tu nombre, titulo profesional (o lo que aspiras ser), una foto profesional y una descripcion breve de quien eres. Dos o tres oraciones bastan.

Ejemplo: "Ingeniero en Sistemas egresado de UNITEC. Desarrollo aplicaciones web con React y aplicaciones moviles con Flutter. Me enfoco en soluciones que resuelven problemas reales."

No escribas una biografia completa. El visitante tiene 10 segundos de atencion.

Seccion 2: Proyectos (la mas importante)

Aqui es donde demuestras lo que sabes hacer. Cada proyecto debe incluir:

• Nombre del proyecto con un titulo descriptivo
• Descripcion breve — Que problema resuelve (2-3 oraciones)
• Captura de pantalla o demo — Una imagen vale mas que un parrafo
• Tecnologias utilizadas — Badges o etiquetas del stack
• Enlace al repositorio — GitHub, siempre
• Enlace a la demo — Si esta desplegado, incluyelo

Cuantos proyectos incluir: Entre 3 y 6. Es mejor tener 4 proyectos bien documentados que 12 a medias.

Que tipos de proyectos destacar:

Tipo de proyecto	Por que lo incluyes
Proyecto de tesis	Demuestra capacidad de resolver problemas complejos
Proyecto de clase destacado	Muestra tu progreso academico
Proyecto personal	Demuestra iniciativa y aprendizaje autonomo
Contribucion open source	Demuestra colaboracion y trabajo en equipo
Freelance o cliente real	Demuestra experiencia profesional

Seccion 3: Habilidades

Lista tus tecnologias organizadas por categoria. No infles la lista. Si pusiste Python pero solo hiciste un "Hola Mundo", no lo incluyas.

Formato recomendado:

• Frontend: React, TypeScript, Tailwind CSS, HTML5
• Backend: Node.js, Express, Firebase
• Movil: Flutter, Dart
• Base de datos: PostgreSQL, Firestore
• Herramientas: Git, GitHub, Figma, Postman

Seccion 4: Sobre mi

Un poco mas de contexto sobre tu trayectoria. Donde estudias o estudiaste, que te motiva, areas de interes. Mantenlo profesional pero con personalidad.

Seccion 5: Contacto

Formulario de contacto o al menos tu correo, LinkedIn y GitHub. Facilita que te encuentren.

Herramientas gratuitas para construirlo

Opcion 1: HTML + CSS + JavaScript (nivel basico)

Si quieres algo simple y rapido, una pagina estatica funciona perfectamente. Usa una plantilla de HTML5 y personalizala.

Ventaja: Control total, sin dependencias. Desventaja: Menos funcionalidades dinamicas.

Opcion 2: React + Tailwind + Vercel (nivel intermedio)

Si ya cursaste desarrollo web, construir tu portafolio con React demuestra tus habilidades y te da practica real.

Ventaja: Demuestra dominio del framework, desplegable gratis en Vercel. Desventaja: Requiere conocimiento previo de React.

Opcion 3: Next.js + MDX (nivel avanzado)

Si quieres un portafolio con blog integrado (recomendado para diferenciarte), Next.js con archivos MDX te permite escribir articulos como si fueran Markdown.

Ventaja: SEO optimizado, blog integrado, rendimiento excelente. Desventaja: Curva de aprendizaje si no conoces Next.js.

Opcion 4: Plataformas sin codigo

Si no eres de desarrollo web pero necesitas presencia online:

• GitHub Pages — Gratis, usando plantillas de Jekyll
• Notion + Super.so — Tu pagina de Notion convertida en sitio web
• Carrd.co — Paginas simples de una sola seccion

Despliegue gratuito

No necesitas pagar hosting. Estas opciones son gratuitas:

Plataforma	Ideal para	Limite gratis
Vercel	React, Next.js	Proyectos personales ilimitados
Netlify	Sitios estaticos, React	100 GB de ancho de banda
GitHub Pages	HTML estatico, Jekyll	Repositorios publicos
Firebase Hosting	Cualquier frontend	10 GB de transferencia

Errores que debes evitar

1. Usar plantillas sin personalizar — Si tu portafolio se ve identico al template de Bootstrap, pierde impacto
2. Proyectos sin descripcion — Un enlace a un repositorio sin README ni explicacion no dice nada
3. Informacion desactualizada — Si tu ultimo proyecto es de hace dos anos, parece que dejaste de aprender
4. Diseno sobrecargado — Animaciones excesivas, colores neon y 15 fuentes diferentes gritan amateur
5. Sin version movil — Si tu portafolio se ve mal en telefono, perdiste la mitad de tus visitantes
6. Links rotos — Verifica que todos los enlaces funcionen antes de compartirlo

Ejemplo de estructura profesional

Pagina principal
  - Hero: Nombre, titulo, foto, CTA
  - Proyectos destacados (3-4 cards)
  - Habilidades (grid de tecnologias)
  - Sobre mi (breve)
  - Contacto (formulario o enlaces)

Pagina de proyecto individual (opcional)
  - Descripcion extendida
  - Capturas de pantalla
  - Problema que resuelve
  - Stack utilizado
  - Lecciones aprendidas
  - Enlace a demo y repositorio

El portafolio como proyecto de clase

En varias universidades de Honduras, crear tu portafolio web puede funcionar como proyecto de clase para materias de desarrollo web, programacion o sistemas de informacion. Preguntale a tu catedratico — matas dos pajaros de un tiro.

En Folium Labs creamos portafolios web profesionales para estudiantes y profesionales. Si prefieres que un equipo experto diseñe y desarrolle tu portafolio mientras tu te concentras en tu tesis, estamos para ayudarte.

---

Tu portafolio es tu primer proyecto profesional. Tratalo como tal: planificalo, disenalo, desarrollalo y mantenlo actualizado.

Cotiza tu portafolio web →