Carrera Profesional Desarrollo Web

Crea tu Portafolio de Desarrollador Profesional: CV, GitHub Pages y Portfolio Completo 2026

Publicado
Lectura 12 min lectura
Crea tu Portafolio de Desarrollador Profesional: CV, GitHub Pages y Portfolio Completo 2026

💡 Resumen

Guía definitiva para crear tu presencia profesional como desarrollador: CV impactante, portafolio en GitHub Pages, repositorios que impresionan y perfil GitHub completo. Todo lo que necesitas para destacar.

Requisitos previos

  • Conocimientos básicos de HTML/CSS
  • Cuenta de GitHub

Lo que aprenderás

  • Crear un CV profesional que destaque en 2026
  • Construir portafolio con GitHub Pages gratis
  • Organizar repositorios de forma profesional
  • Optimizar presencia en GitHub para reclutadores

Tu Portafolio es Tu Verdadero Currículum

Aquí va la verdad incómoda: en 2026, tu CV pdf vale menos que tu perfil de GitHub.

¿Por qué? Porque los reclutadores no quieren leerte, quieren verte en acción. Quieren ver tu código, tus proyectos funcionando, tu evolución como desarrollador.

Piénsalo: ¿contratarías a un chef que solo te muestra un documento describiendo platos que cocinó? No. Quieres probar su comida.

En esta guía completa aprenderás a construir tu presencia profesional completa:

  • CV moderno que realmente destaque
  • Portafolio en GitHub Pages (gratis, profesional, rápido)
  • Repositorios organizados que impresionen
  • Perfil GitHub optimizado para reclutadores

Todo esto te tomará menos de un fin de semana, pero te servirá para años de búsquedas de empleo.

¿Listo? Vamos.


Parte 1: Tu CV - La Primera Impresión

Antes del portafolio, necesitas un CV sólido. Pero no cualquier CV.

Lo Que Los Reclutadores Ven en 6 Segundos

Sí, leíste bien. 6 segundos es lo que un reclutador mira tu CV antes de decidir si continúa o descarta.

En esos 6 segundos buscan:

  • Nombre y rol claro (“Desarrollador Full Stack”)
  • Experiencia relevante (años y tecnologías)
  • Proyectos demostrables (links a GitHub/demos)
  • Skills técnicas organizadas y actuales

Estructura de CV que Funciona en 2026

┌─────────────────────────────────────┐
│ JUAN PÉREZ                          │
│ Desarrollador Full Stack            │
│ React · Node.js · TypeScript        │
│                                     │
│ 📧 email@ejemplo.com                │
│ 💻 github.com/juanperez             │
│ 🌐 juanperez.dev                    │
│ 📱 LinkedIn                          │
└─────────────────────────────────────┘

RESUMEN [3-4 líneas]
Desarrollador con 3+ años creando aplicaciones web...

EXPERIENCIA
• Empresa | Rol | Fechas
  - Logro con métricas
  - Proyecto con impacto
  - Tecnologías usadas

PROYECTOS DESTACADOS
• Nombre [GitHub] [Demo]
  Descripción breve + stack + resultado

HABILIDADES TÉCNICAS
Frontend: React, Next.js, TypeScript...
Backend: Node.js, Python, PostgreSQL...

Los 3 Secretos de Un CV Ganador

1. Métricas son Oro

❌ Mal: “Desarrollé una aplicación web” ✅ Bien: “Desarrollé app que redujo tiempo de proceso de 15 a 3 minutos, usada por 200+ usuarios diarios”

2. Tecnologías Actuales

En 2026, si tu CV dice “jQuery” como skill principal, perdiste.

Stack que buscan ahora:

  • Frontend: React, Next.js, Vue, Astro
  • Backend: Node.js, Python (Django/FastAPI), Go
  • Database: PostgreSQL, MongoDB, Redis
  • DevOps: Docker, Kubernetes, CI/CD
  • IA: Integración con APIs de OpenAI, LangChain (sí, esto ya es esperado)

Tip: Si necesitas actualizarte en tecnologías modernas, nuestros cursos de JavaScript, TypeScript y Angular te llevan de cero a listo para el mercado actual.

3. Links Funcionando

Todo proyecto en tu CV debe tener:

  • 🔗 Link a código (GitHub)
  • 🌐 Link a demo (si es posible)
  • 📝 README completo

No menciones proyectos “privados” o “código no disponible”. Si no puedes mostrarlo, no cuenta.

Herramienta Bonus: IA Para Mejorar Tu CV

Usa ChatGPT para pulir descripciones:

Prompt: "Mejora esta descripción profesional:
'Trabajé con Python y Django en un proyecto web'"

Resultado: "Desarrollé API REST con Python/Django que 
procesa 10,000+ requests diarios, implementando cache 
con Redis que redujo latencia de 2s a 300ms"

Profundiza: Nuestro Curso de ChatGPT te enseña prompt engineering profesional para CV, cover letters, y preparación de entrevistas.


Parte 2: GitHub Pages - Tu Portafolio Gratis

Ahora viene la parte divertida: construir tu portafolio.

¿Por Qué GitHub Pages?

3 razones simples:

  1. Gratis - $0 al mes, para siempre
  2. Simple - Push a GitHub = deploy automático
  3. Profesional - Dominio .dev o tudominio.com gratis

Opción 1: Para Principiantes (HTML/CSS/JS)

Si estás empezando, NO necesitas frameworks complicados.

Estructura mínima:

portfolio/
├── index.html
├── style.css
├── script.js
├── projects/
│   ├── project1/
│   └── project2/
└── images/

index.html básico:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Juan Pérez - Desarrollador Full Stack</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Juan Pérez</h1>
    <p>Desarrollador Full Stack | React · Node.js</p>
    <nav>
      <a href="#proyectos">Proyectos</a>
      <a href="#sobre-mi">Sobre Mí</a>
      <a href="#contacto">Contacto</a>
    </nav>
  </header>

  <section id="proyectos">
    <h2>Proyectos</h2>
    <!-- Projects cards here -->
  </section>

  <section id="sobre-mi">
    <h2>Sobre Mí</h2>
    <p>Tu historia...</p>
  </section>

  <section id="contacto">
    <h2>Contacto</h2>
    <!-- Contact form or links -->
  </section>
</body>
</html>

Refuerza bases: Si HTML/CSS se siente difícil, nuestros cursos de HTML5 y CSS3 te llevan de cero a dominio completo en weeks, no meses.

Opción 2: Para Level Up (Astro - Recomendado)

Astro es el sweet spot perfecto: moderno, rápido, fácil.

¿Por qué Astro?

  • 🚀 Ultra rápido (genera HTML estático)
  • 🎨 Usa componentes pero sin peso JS innecesario
  • 📦 Soporta React, Vue, Svelte si quieres
  • 🔥 Ideal para portfolios (este sitio usa Astro)

Setup en 2 minutos:

npm create astro@latest mi-portafolio
cd mi-portafolio
npm install
npm run dev

Componente de proyecto:

---
// ProjectCard.astro
const { title, description, tech, github, demo, image } = Astro.props;
---

<article class="project">
  <img src={image} alt={title} />
  <h3>{title}</h3>
  <p>{description}</p>
  
  <div class="tech-stack">
    {tech.map(t => <span class="badge">{t}</span>)}
  </div>
  
  <div class="links">
    <a href={github}>GitHub</a>
    <a href={demo}>Demo</a>
  </div>
</article>

<style>
  .project {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.2s;
  }
  
  .project:hover {
    transform: translateY(-4px);
  }
</style>

Aprende más: Para dominar desarrollo web moderno, revisa nuestras rutas de estudio que incluyen desde fundamentos hasta frameworks avanzados.

Opción 3: Para React Lovers (Next.js)

Si buscas trabajo específicamente con React, Next.js demuestra que estás actualizado.

Setup:

npx create-next-app@latest mi-portafolio
cd mi-portafolio
npm run dev

Configuración para GitHub Pages:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: { unoptimized: true }
}

module.exports = nextConfig

Parte 3: Secciones Que TODO Portafolio Necesita

No importa qué tecnología uses. Estas secciones son obligatorias:

1. Hero / Above the Fold

Los primeros pixeles que ven. Hazlos valer.

Qué incluir:

  • Nombre grande y claro
  • Tu “tagline” (ej: “Desarrollador Full Stack especializado en React”)
  • Call-to-action obvio (“Ver proyectos”, “Contactar”)
  • Tu foto (opcional pero ayuda a humanizarte)

Ejemplo:

<section class="hero">
  <h1>Hola, soy <span class="highlight">Juan Pérez</span></h1>
  <p class="tagline">Desarrollador Full Stack construyendo 
  aplicaciones web rápidas y escalables</p>
  <div class="cta">
    <a href="#proyectos" class="btn-primary">Ver Proyectos</a>
    <a href="#contacto" class="btn-secondary">Hablemos</a>
  </div>
</section>

2. Proyectos - El Corazón de Tu Portafolio

Regla de oro: 3-6 proyectos bien documentados > 20 medio hechos

Para cada proyecto muestra:

## Nombre del Proyecto [GitHub] [Demo]

### El Problema
¿Qué problema resuelve? ¿Por qué lo construiste?

### La Solución
¿Cómo lo resolviste? ¿Qué hace tu proyecto?

### Stack Tecnológico
- Frontend: React, TailwindCSS
- Backend: Node.js, Express
- Database: PostgreSQL
- Deploy: Docker, Railway

### Destacados
- 500+ usuarios activos
- 99.9% uptime últimos 3 meses
- API procesa 10k requests/día

### Screenshots
[Imágenes del proyecto funcionando]

[Ver Código] [Ver Demo en Vivo]

Pro tip: Si no tienes proyectos “reales”, construye estos:

Nivel1: Principiante

  • To-do app con persistencia (localStorage o backend)
  • Calculadora avanzada
  • App del clima con API pública

Nivel 2: Intermedio

  • Blog con CMS
  • E-commerce simple con carrito
  • Dashboard con auth y gráficas

Nivel 3: Avanzado

  • Chat en tiempo real (WebSockets)
  • App fullstack con múltiples roles
  • Integración con IA (OpenAI API)

Construye mientras aprendes: La forma más efectiva de aprender es haciendo. Nuestro Curso de Bases de Datos y APIs te guían paso a paso construyendo proyectos reales integrados.

3. Sobre Mí

No escribas una biografía desde nacimiento. Los reclutadores quieren saber:

✅ Qué haces ahora ✅ Tu experiencia relevante ✅ Tus intereses tech ✅ Por qué eres un buen fit

Ejemplo:

Soy desarrollador web con 3+ años construyendo aplicaciones 
modernas. Me especializo en crear interfaces rápidas con React 
y bases de datos escalables con PostgreSQL.

Actualmente trabajo en [Empresa] donde desarrollé [proyecto 
importante]. Antes estuve en [experiencia anterior] donde 
aprendí [habilidad valiosa].

Fuera del código, me apasiona contribuir a open source y 
aprender sobre arquitectura de sistemas distribuidos.

4. Skills Técnicas

Organiza por categorías:

### Frontend
React • Next.js • TypeScript • TailwindCSS • Astro

### Backend  
Node.js • Python • Django • PostgreSQL • Redis

### DevOps & Tools
Docker • Git • GitHub Actions • AWS • Vercel

### En Aprendizaje
Kubernetes • Go • GraphQL

Honestidad > Inflar: Es mejor decir “aprendiendo Kubernetes” que mentir y no poder responder en entrevista.

5. Contacto

Hazlo ultra fácil contactarte:

<section id="contacto">
  <h2>Hablemos</h2>
  <p>¿Tienes un proyecto en mente? Estoy abierto a nuevas oportunidades</p>
  
  <div class="contact-links">
    <a href="mailto:tu@email.com">📧 Email</a>
    <a href="https://linkedin.com/in/tu-perfil">💼 LinkedIn</a>
    <a href="https://github.com/tu-usuario">💻 GitHub</a>
    <a href="https://twitter.com/tu-usuario">🐦 Twitter/X</a>
  </div>
</section>

---

## Parte 4: Deploy a GitHub Pages - Guía Completa

GitHub Pages es **100% gratis** y te da hosting profesional. Aquí está TODO lo que necesitas saber.

### Documentación Oficial

📚 **[Guía oficial de GitHub Pages](https://docs.github.com/es/pages/getting-started-with-github-pages/creating-a-github-pages-site)** - Documentación completa en español

### Opción 1: Setup Básico (HTML/CSS/JS)

Para sitios estáticos sin build process.

**Paso 1: Crea el repositorio**

El nombre es **crítico**:
```bash
# DEBE ser exactamente: tu-usuario.github.io
# Ejemplo: si tu usuario es "juanperez", el repo debe ser "juanperez.github.io"

git init
git remote add origin https://github.com/tu-usuario/tu-usuario.github.io

Paso 2: Estructura de archivos

tu-usuario.github.io/
├── index.html       # ← Archivo principal (obligatorio)
├── style.css
├── script.js
├── images/
└── projects/

Paso 3: Push tu código

git add .
git commit -m "Initial portfolio"
git push -u origin main

Paso 4: Configurar GitHub Pages

  1. Ve a tu repositorio en GitHub
  2. SettingsPages (menú lateral izquierdo)
  3. Source: Deploy from a branch
  4. Branch: main → carpeta / (root)Save

Paso 5: Espera 1-2 minutos

Tu sitio estará en: https://tu-usuario.github.io 🎉

Verificación:

  • ✅ URL funciona
  • ✅ HTTPS automático (GitHub lo configura)
  • ✅ Certificado SSL válido

Opción 2: Setup Con Build Process (Astro/Next.js/React)

Para proyectos que necesitan compilación.

Paso 1: Configurar tu proyecto

Para Astro:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://tu-usuario.github.io',
  // Si usas un repo que NO es tu-usuario.github.io:
  // base: '/nombre-repo',
});

Para Next.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
  // Si usas un repo que NO es tu-usuario.github.io:
  // basePath: '/nombre-repo',
}

module.exports = nextConfig

Paso 2: Crear GitHub Actions Workflow

Crea el archivo .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  # Permite ejecutar manualmente desde Actions tab
  workflow_dispatch:

# Permisos necesarios para deploy
permissions:
  contents: read
  pages: write
  id-token: write

# Solo un deploy a la vez
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist  # Para Astro
          # path: ./out  # Para Next.js
          # path: ./build  # Para Create React App

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Paso 3: Configurar GitHub Pages

  1. SettingsPages
  2. Source: GitHub Actions (NO “Deploy from a branch”)
  3. Save

Paso 4: Push y deploy automático

git add .
git commit -m "Add GitHub Actions deploy workflow"
git push

Paso 5: Monitorear el deploy

  1. Ve a la pestaña Actions en tu repo
  2. Verás el workflow “Deploy to GitHub Pages” ejecutándose
  3. Espera a que termine (1-3 minutos)
  4. ✅ Tu sitio está en https://tu-usuario.github.io

Configuraciones Importantes en GitHub Pages

Settings → Pages - Opciones clave:

1. Custom domain (Opcional)

  • Agrega tu dominio personalizado aquí
  • Ejemplo: tudominio.dev
  • GitHub genera certificado SSL automáticamente

2. Enforce HTTPS

  • SIEMPRE activado (obligatorio para SEO y seguridad)

3. Build and deployment

  • Source: GitHub Actions (recomendado) o Deploy from branch
  • Si usas Actions, verás el historial de deploys

4. Visibility

  • Public: Cualquiera puede ver tu sitio (normal)
  • Private: Solo tú y colaboradores (requiere GitHub Pro)

Troubleshooting Común

❌ Error: “404 - There isn’t a GitHub Pages site here”

Soluciones:

  1. Verifica que el repo se llame exactamente tu-usuario.github.io
  2. Asegúrate de tener un archivo index.html en la raíz
  3. Espera 2-3 minutos después del primer push
  4. Verifica en Settings → Pages que esté configurado

❌ Error: “Page build failed”

Soluciones:

  1. Revisa la pestaña Actions para ver el error específico
  2. Verifica que npm run build funcione localmente
  3. Asegúrate de que el path en el workflow sea correcto (dist, out, o build)

❌ Estilos/imágenes no cargan

Soluciones:

  1. Usa rutas relativas: ./style.css no /style.css
  2. Si usas un repo que NO es usuario.github.io, configura base en tu config
  3. Verifica que los archivos estén en el directorio correcto después del build

GitHub Student Developer Pack 🎓

¿Eres estudiante? Accede a beneficios GRATIS por valor de $200,000+ USD

🔗 GitHub Student Developer Pack

Qué incluye (relevante para tu portafolio):

Dominios gratis:

  • .me domain gratis por 1 año (Namecheap)
  • .live domain gratis por 1 año
  • Valor: $15-20/año

Hosting y servicios:

  • Heroku - Créditos para hosting
  • DigitalOcean - $200 en créditos
  • Microsoft Azure - $100 en créditos
  • MongoDB Atlas - Clusters gratis mejorados

Herramientas de desarrollo:

  • GitHub Pro gratis (repos privados ilimitados)
  • GitHub Copilot gratis (IA para código)
  • Canva Pro gratis (diseño para tu portafolio)
  • JetBrains - IDEs profesionales gratis

Cómo aplicar:

  1. Ve a education.github.com/pack
  2. Click en “Get your pack”
  3. Verifica con email universitario (.edu, .ac, etc.)
  4. O sube foto de tu credencial estudiantil
  5. Aprobación en 1-7 días

Requisitos:

  • ✅ Ser estudiante activo (universidad, bootcamp acreditado)
  • ✅ Tener cuenta de GitHub
  • ✅ Email universitario O credencial válida

Pro tip: Usa el dominio gratis para tu portafolio. tudominio.me se ve mucho más profesional que usuario.github.io

Dominio Personalizado - Setup Completo

Si conseguiste un dominio (gratis con Student Pack o comprado), aquí está cómo configurarlo:

Paso 1: Configurar DNS

En tu proveedor de dominio (Namecheap, Cloudflare, etc.), agrega estos registros:

Tipo   Nombre   Valor
A      @        185.199.108.153
A      @        185.199.109.153
A      @        185.199.110.153
A      @        185.199.111.153
CNAME  www      tu-usuario.github.io

Paso 2: Configurar en GitHub

  1. SettingsPages
  2. Custom domain: tudominio.dev (o .me, .com, etc.)
  3. Save
  4. Espera verificación DNS (puede tomar 24-48h)
  5. Enforce HTTPS (se activa automáticamente después de verificación)

Paso 3: Crear archivo CNAME

En la raíz de tu proyecto:

tudominio.dev

Esto previene que GitHub elimine tu dominio custom en cada deploy.

Resultado:

  • https://tudominio.dev → Tu portafolio
  • https://www.tudominio.dev → Redirige a tudominio.dev
  • https://tu-usuario.github.io → Redirige a tudominio.dev
  • ✅ HTTPS automático en todos

Recursos Oficiales

Documentación:

Tutoriales oficiales:


Parte 5: Repositorios Que Impresionan

Tu portafolio linkea a tus repositorios. Asegúrate de que se vean profesionales.

README.md es Tu Carta de Presentación

Estructura completa:

# 📱 Nombre del Proyecto

> Descripción corta y atractiva

[![Demo](badge)](link) [![License](badge)](link)

## 📸 Demo

![Screenshot](./screenshot.png)

🔗 [Ver en vivo](https://demo-url.com)

## 🎯 Sobre el Proyecto

### El Problema
[Describe el problema que resuelves]

### La Solución
[Cómo tu proyecto lo soluciona]

## ✨ Características

- ✅ Feature 1
- ✅ Feature 2
- 🚧 Feature en desarrollo

## 🛠️ Tecnologías

- React 18
- Node.js / Express
- PostgreSQL
- Docker

## 📦 Instalación

\`\`\`bash
# Clona el repo
git clone https://github.com/usuario/proyecto

# Instala dependencias
npm install

# Configura .env
cp .env.example .env

# Inicia dev server
npm run dev
\`\`\`

## 🚀 Deploy

[Instrucciones de deploy si aplica]

## 📄 Licencia

MIT License - ver [LICENSE](LICENSE)

## 📬 Contacto

Tu Nombre - [@twitter](link) - email@ejemplo.com

El .gitignore Correcto

NUNCA hagas commit de:

# Dependencias
node_modules/
vendor/

# Secretos
.env
.env.local
*.key
*.pem

# Build
dist/
build/
out/
.next/

# OS
.DS_Store
Thumbs.db

# IDEs
.vscode/
.idea/

Genera uno perfecto en: gitignore.io

Commits Profesionales

❌ Mal:

git commit -m "fixes"
git commit -m "update"
git commit -m "asdfasdf"

✅ Bien:

git commit -m "feat: add user authentication with JWT"
git commit -m "fix: resolve memory leak in image upload"
git commit -m "docs: update API documentation"
git commit -m "refactor: extract validation logic to utils"

Formato: tipo: descripción

Tipos comunes:

  • feat: Nueva feature
  • fix: Bug fix
  • docs: Documentación
  • refactor: Refactorización
  • test: Tests
  • chore: Mantenimiento

Parte 6: Perfil GitHub Optimizado

README de Perfil

Crea repositorio con tu mismo nombre de usuario: github.com/tuusuario/tuusuario

Ejemplo:

# 👋 Hola, soy Juan Pérez

## 🚀 Sobre Mí
Desarrollador Full Stack construyendo aplicaciones web 
modernas con React y Node.js.

## 💻 Tech Stack

![React](https://img.shields.io/badge/-React-61DAFB?logo=react&logoColor=black)
![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?logo=typescript&logoColor=white)
![Node.js](https://img.shields.io/badge/-Node.js-339933?logo=node.js&logoColor=white)

## 🔥 Proyectos Destacados

- **Task Manager AI** - App de gestión con IA → [Ver demo](link)
- **E-commerce** - Tienda fullstack → [Ver código](link)

## 📊 GitHub Stats

![Stats](https://github-readme-stats.vercel.app/api?username=tuusuario&show_icons=true)

## 📫 Contacto

- 💼 [LinkedIn](link)
- 🌐 [Portfolio](link)
- 📧 tu@email.com

Activity: Contribuciones Regulares

Los reclutadores ven tu gráfica de contribuciones. Una gráfica verde dice “consistente y activo”.

Cómo mantenerla verde:

  • Commits pequeños pero diarios
  • Contribuye a open source
  • Trabaja en proyectos personales
  • Mejora documentación

No hace falta commit 365 días, pero actividad regular (3-4x/semana) muestra profesionalismo.


Parte 7: SEO Para que Te Encuentren

Tu portafolio debe ranquear en Google.

Meta Tags Esenciales

<head>
  <!-- Básico SEO -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Juan Pérez - Desarrollador Full Stack | React, Node.js</title>
  <meta name="description" content="Portafolio de Juan Pérez, 
  desarrollador Full Stack especializado en aplicaciones web 
  con React, Node.js y PostgreSQL">

  <!-- Open Graph (LinkedIn, Facebook) -->
  <meta property="og:title" content="Juan Pérez - Desarrollador">
  <meta property="og:description" content="Portafolio y proyectos">
  <meta property="og:image" content="https://tudominio.dev/og-image.jpg">
  <meta property="og:url" content="https://tudominio.dev">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Juan Pérez - Desarrollador">
  <meta name="twitter:image" content="https://tudominio.dev/og-image.jpg">
</head>

Dominio Personalizado (Opcional pero Pro)

Consigue dominio .dev → $12-15/año

Proveedores:

  • Namecheap (económico)
  • Cloudflare (precio al costo)
  • Google Domains/Squarespace

Configuración:

  1. En tu DNS añade:

    A    @    185.199.108.153
    A    @    185.199.109.153
    CNAME www tu-usuario.github.io
  2. En GitHub Settings > Pages:

    • Custom domain: tudominio.dev
    • Enforce HTTPS: ✅

Resultado: tudominio.dev > usuario.github.io (más profesional)


Tu Plan de Acción: Este Fin de Semana

No pospongas. Estas son horas, no semanas.

Sábado (4-5 horas)

Mañana (2h):

  • Actualiza tu CV con estructura moderna
  • Lista 3-6 proyectos a mostrar
  • Revisa READMEs de tus repos principales

Tarde (2-3h):

  • Crea repositorio usuario.github.io
  • Setup inicial de portafolio (elige stack)
  • Crea secciones: Hero, Proyectos, Sobre Mí
  • Primer deploy!

Domingo (3-4 horas)

Mañana (2h):

  • Añade projects cards con links
  • Crea README de perfil GitHub
  • Optimiza READMEs de 3 proyectos principales

Tarde (1-2h):

  • SEO: meta tags, og:image
  • Responsive: prueba en móvil
  • Share en LinkedIn!

Cursos Relacionados Para Fortalecer Tu Portafolio

Tu portafolio será tan bueno como tus habilidades. Estos cursos te llevan del básico al profesional:

Fundamentos Web

  • HTML5 → Estructura semántica perfecta
  • CSS3 → Diseños modernos y responsive
  • JavaScript → Interactividad y lógica

Frontend Moderno

Backend & Bases de Datos

DevOps & Deploy

  • Docker → Contenedorización esencial
  • DynamoDB → Bases de datos cloud

Bonus: Productividad

  • ChatGPT → Acelera desarrollo con IA

Ver todos los cursos: /cursos


Siguientes Pasos: Consigue el Trabajo

Tienes tu portafolio. Ahora a buscar trabajo.

En nuestro próximo artículo veremos:

  • Las mejores plataformas de empleo en español
  • Cómo aplicar efectivamente
  • Optimizar LinkedIn
  • Preparar entrevistas

📌 Guía Completa de Plataformas de Empleo para Devs → Léelo cuando tu portafolio esté online. Guía de Empleo 2026


Resumen: Tu Checklist

  • CV actualizado con métricas y links
  • Portafolio en GitHub Pages online
  • 3-6 proyectos con READMEs completos
  • Perfil GitHub con README personalizado
  • Commits profesionales en repos
  • SEO configurado (meta tags)
  • Responsive en mobile
  • Todos los links funcionando
  • Compartido en LinkedIn

¿Completaste todo? Felicidades. Ahora tienes una presencia profesional que el 90% de developers no tiene.

¿Atascado en algo? Revisa los cursos relacionados o deja un comentario abajo.


¿Qué tecnología usarás para tu portafolio? ¿Ya tienes proyectos listos o los construirás desde cero? Comparte tu plan en LinkedIn y etiquétame para ver tu progreso.

Preguntas Frecuentes

¿Necesito saber programación avanzada para crear mi portafolio?

No. Si sabes HTML, CSS y JavaScript básico, puedes crear un portafolio profesional. Si quieres algo más moderno, frameworks como Astro son muy sencillos de aprender y puedes usar nuestro curso gratuito de HTML5 y CSS3 para fortalecer bases.

¿GitHub Pages es realmente gratis?

Sí, 100% gratis. Obtienes hosting ilimitado, SSL automático, y puedes usar tu dominio personalizado. Es la mejor opción para desarrolladores justamente porque ya tienes GitHub.

¿Cuántos proyectos debo mostrar en mi portafolio?

Calidad sobre cantidad. Entre 3-6 proyectos BIEN documentados es perfecto. Cada uno debe resolver un problema real, tener README completo, código limpio, y si es posible, demo en vivo.

¿Qué tecnologías debo usar para mi portafolio?

Depende de tu objetivo. HTML/CSS/JS puro es perfecto para mostrar fundamentos. Astro si quieres algo moderno y rápido. React/Next.js si buscas trabajo específicamente con esas tecnologías. Lo importante es que el resultado se vea profesional y cargue rápido.