Proyecto: Tu Portafolio
¡Llegó la hora de poner todo en práctica! Vamos a crear un portafolio profesional desde cero.
Lo Que Vamos a Crear
Un sitio personal con:
- Header con navegación
- Sección hero (presentación)
- Sección sobre
- Sección de habilidades
- Sección de proyectos
- Formulario de contacto
- Footer
Estructura de Archivos
portafolio/
├── index.html
├── style.css
└── script.js
HTML Completo
html
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tu Nombre | Desarrollador</title> <link rel="stylesheet" href="style.css"></head><body> <!-- Header --> <header id="header"> <nav class="nav"> <a href="#" class="logo">TuNombre</a> <ul class="nav-list"> <li><a href="#sobre">Sobre</a></li> <li><a href="#habilidades">Habilidades</a></li> <li><a href="#proyectos">Proyectos</a></li> <li><a href="#contacto">Contacto</a></li> </ul> <button id="btn-tema">🌙</button> </nav> </header> <!-- Hero --> <section class="hero"> <div class="hero-content"> <p class="hero-subtitle">Hola, soy</p> <h1 class="hero-title">Tu Nombre</h1> <p class="hero-description"> Desarrollador en formación, apasionado por crear soluciones con código. </p> <div class="hero-buttons"> <a href="#proyectos" class="btn btn-primary">Ver Proyectos</a> <a href="#contacto" class="btn btn-outline">Contacto</a> </div> </div> </section> <!-- Sobre --> <section id="sobre" class="section"> <div class="container"> <h2 class="section-title">Sobre Mí</h2> <div class="sobre-content"> <div class="sobre-texto"> <p> ¡Hola! Mi nombre es [Tu Nombre] y estoy en transición de carrera hacia el área de tecnología. Descubrí mi pasión por la programación en 2026 y desde entonces vengo estudiando diariamente. </p> <p> Mi objetivo es convertirme en un desarrollador completo, creando soluciones que impacten positivamente la vida de las personas. </p> <p> Cuando no estoy programando, me gusta [tus hobbies]. </p> </div> </div> </div> </section> <!-- Habilidades --> <section id="habilidades" class="section section-alt"> <div class="container"> <h2 class="section-title">Habilidades</h2> <div class="habilidades-grid"> <div class="habilidad-card"> <span class="habilidad-icon">📄</span> <h3>HTML</h3> <p>Estructuración semántica de páginas web</p> </div> <div class="habilidad-card"> <span class="habilidad-icon">🎨</span> <h3>CSS</h3> <p>Estilización y layouts responsivos</p> </div> <div class="habilidad-card"> <span class="habilidad-icon">⚡</span> <h3>JavaScript</h3> <p>Interactividad y lógica de programación</p> </div> <div class="habilidad-card"> <span class="habilidad-icon">🔧</span> <h3>Git</h3> <p>Control de versiones y colaboración</p> </div> </div> </div> </section> <!-- Proyectos --> <section id="proyectos" class="section"> <div class="container"> <h2 class="section-title">Proyectos</h2> <div class="proyectos-grid"> <article class="proyecto-card"> <div class="proyecto-imagen"> <img src="https://via.placeholder.com/400x250" alt="Proyecto 1"> </div> <div class="proyecto-info"> <h3>Lista de Tareas</h3> <p>Aplicación para gestionar tareas diarias con localStorage.</p> <div class="proyecto-tags"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> </div> <div class="proyecto-links"> <a href="#" class="btn btn-small">Ver Proyecto</a> <a href="#" class="btn btn-small btn-outline">GitHub</a> </div> </div> </article> <article class="proyecto-card"> <div class="proyecto-imagen"> <img src="https://via.placeholder.com/400x250" alt="Proyecto 2"> </div> <div class="proyecto-info"> <h3>Calculadora</h3> <p>Calculadora funcional con diseño moderno.</p> <div class="proyecto-tags"> <span>HTML</span> <span>CSS</span> <span>JavaScript</span> </div> <div class="proyecto-links"> <a href="#" class="btn btn-small">Ver Proyecto</a> <a href="#" class="btn btn-small btn-outline">GitHub</a> </div> </div> </article> </div> </div> </section> <!-- Contacto --> <section id="contacto" class="section section-alt"> <div class="container"> <h2 class="section-title">Contacto</h2> <p class="section-subtitle"> ¿Quieres trabajar juntos o tienes alguna pregunta? ¡Contáctame! </p> <form id="form-contacto" class="form-contacto"> <div class="form-group"> <input type="text" id="nombre" placeholder="Tu nombre" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Tu email" required> </div> <div class="form-group"> <textarea id="mensaje" placeholder="Tu mensaje" rows="5" required></textarea> </div> <button type="submit" class="btn btn-primary btn-full">Enviar Mensaje</button> </form> <div id="form-exito" class="form-exito" hidden> ✅ ¡Mensaje enviado con éxito! </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-social"> <a href="https://github.com/tuusuario" target="_blank">GitHub</a> <a href="https://linkedin.com/in/tuusuario" target="_blank">LinkedIn</a> </div> <p>© 2026 Tu Nombre. Todos los derechos reservados.</p> </div> </footer> <script src="script.js"></script></body></html>CSS Completo
css
/* Reset y variables */* { margin: 0; padding: 0; box-sizing: border-box;} :root { --color-primario: #6366f1; --color-primario-hover: #4f46e5; --color-texto: #1f2937; --color-texto-leve: #6b7280; --color-fondo: #ffffff; --color-fondo-alt: #f3f4f6; --color-borde: #e5e7eb;} body.dark-mode { --color-texto: #f3f4f6; --color-texto-leve: #9ca3af; --color-fondo: #111827; --color-fondo-alt: #1f2937; --color-borde: #374151;} body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--color-fondo); color: var(--color-texto); line-height: 1.6;} /* Container */.container { max-width: 1100px; margin: 0 auto; padding: 0 20px;} /* Header */#header { position: fixed; top: 0; left: 0; right: 0; background: var(--color-fondo); border-bottom: 1px solid var(--color-borde); z-index: 1000;} .nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; max-width: 1100px; margin: 0 auto;} .logo { font-size: 1.5rem; font-weight: bold; color: var(--color-primario); text-decoration: none;} .nav-list { display: flex; list-style: none; gap: 30px;} .nav-list a { color: var(--color-texto); text-decoration: none; transition: color 0.3s;} .nav-list a:hover { color: var(--color-primario);} #btn-tema { background: none; border: none; font-size: 1.5rem; cursor: pointer;} /* Hero */.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 20px 40px;} .hero-subtitle { color: var(--color-primario); font-size: 1.1rem; margin-bottom: 10px;} .hero-title { font-size: 3.5rem; margin-bottom: 20px;} .hero-description { font-size: 1.2rem; color: var(--color-texto-leve); max-width: 500px; margin: 0 auto 30px;} .hero-buttons { display: flex; gap: 15px; justify-content: center;} /* Botones */.btn { display: inline-block; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s; cursor: pointer; border: none; font-size: 1rem;} .btn-primary { background: var(--color-primario); color: white;} .btn-primary:hover { background: var(--color-primario-hover);} .btn-outline { border: 2px solid var(--color-primario); color: var(--color-primario); background: transparent;} .btn-outline:hover { background: var(--color-primario); color: white;} .btn-small { padding: 8px 16px; font-size: 0.9rem;} .btn-full { width: 100%;} /* Secciones */.section { padding: 80px 0;} .section-alt { background: var(--color-fondo-alt);} .section-title { font-size: 2rem; text-align: center; margin-bottom: 50px;} .section-subtitle { text-align: center; color: var(--color-texto-leve); margin-bottom: 30px;} /* Sobre */.sobre-texto p { margin-bottom: 15px; color: var(--color-texto-leve);} /* Habilidades */.habilidades-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px;} .habilidad-card { background: var(--color-fondo); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid var(--color-borde); transition: transform 0.3s;} .habilidad-card:hover { transform: translateY(-5px);} .habilidad-icon { font-size: 2.5rem; display: block; margin-bottom: 15px;} .habilidad-card h3 { margin-bottom: 10px;} .habilidad-card p { color: var(--color-texto-leve); font-size: 0.9rem;} /* Proyectos */.proyectos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px;} .proyecto-card { background: var(--color-fondo); border-radius: 12px; overflow: hidden; border: 1px solid var(--color-borde);} .proyecto-imagen img { width: 100%; height: 200px; object-fit: cover;} .proyecto-info { padding: 20px;} .proyecto-info h3 { margin-bottom: 10px;} .proyecto-info p { color: var(--color-texto-leve); margin-bottom: 15px;} .proyecto-tags { display: flex; gap: 10px; margin-bottom: 15px;} .proyecto-tags span { background: var(--color-fondo-alt); padding: 4px 12px; border-radius: 20px; font-size: 0.8rem;} .proyecto-links { display: flex; gap: 10px;} /* Formulario */.form-contacto { max-width: 500px; margin: 0 auto;} .form-group { margin-bottom: 20px;} .form-contacto input,.form-contacto textarea { width: 100%; padding: 15px; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 1rem; background: var(--color-fondo); color: var(--color-texto);} .form-contacto input:focus,.form-contacto textarea:focus { outline: none; border-color: var(--color-primario);} .form-exito { text-align: center; padding: 20px; background: #d1fae5; color: #065f46; border-radius: 8px; margin-top: 20px;} /* Footer */.footer { text-align: center; padding: 30px; border-top: 1px solid var(--color-borde);} .footer-social { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px;} .footer-social a { color: var(--color-texto); text-decoration: none;} .footer-social a:hover { color: var(--color-primario);} /* Responsivo */@media (max-width: 768px) { .nav-list { display: none; } .hero-title { font-size: 2.5rem; } .hero-buttons { flex-direction: column; }}JavaScript
javascript
// Tema oscuro/claroconst btnTema = document.querySelector('#btn-tema'); btnTema.addEventListener('click', () => { document.body.classList.toggle('dark-mode'); btnTema.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';}); // Formulario de contactoconst form = document.querySelector('#form-contacto');const formExito = document.querySelector('#form-exito'); form.addEventListener('submit', (e) => { e.preventDefault(); // Simula envío form.style.display = 'none'; formExito.hidden = false; // Limpia después de 3 segundos setTimeout(() => { form.reset(); form.style.display = 'block'; formExito.hidden = true; }, 3000);}); // Scroll suave para linksdocument.querySelectorAll('a[href^="#"]').forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const id = link.getAttribute('href'); document.querySelector(id)?.scrollIntoView({ behavior: 'smooth' }); });});Próximos Pasos
- Personaliza con tu información
- Agrega proyectos reales conforme vayas creando
- Hospeda gratis en GitHub Pages o Vercel
- Mejora continuamente conforme aprendas más
¡Felicitaciones! ¡Creaste tu primer proyecto completo! 🎉
¡En la próxima lección, hablaremos sobre los próximos pasos en tu carrera! 🚀