Una primera versión construida con lo que sé hoy
No me quedé conforme con solamente aprender lo enseñado en el curso y seguir avanzando, por lo que decidí a pesar de que va a ser súper básico, que sería bueno para mi viaje hacia ser Full-Stack Developer desde cero, crear mis proyectos desde cero también.
Esto no la hace perfecta obviamente, quizá tenga errores, pero es de mi autoría, funciona y es real.
Es el primer proyecto donde puse en práctica lo que estoy aprendiendo:
HTML para estructura, CSS para diseño, y JavaScript para interacción.
No esperé a saber “todo” para empezar.
Construí esta V1 con lo que tengo ahora mismo: fundamentos.
Tecnologías que usé
- HTML5 para la estructura y semántica
- CSS + Bootstrap 5 para lograr que sea responsive
- JavaScript para comportamiento básico con el fin de cumplir mi capricho (sí, pregunté e investigué un poco).
Quería demostrarme dos cosas:
- que puedo construir algo funcional sin Frameworks,
- y que tengo la base suficiente para escalar después.
Estructura principal del index.html
Esta es la misma estructura que está en el repositorio:
📁 Header → logo y navegación
📁 Main
┣ Hero
┣ “Qué estoy haciendo ahora”
┣ Placeholder de proyectos
┣ Formulario de contacto
📁 Footer
Ejemplo real del Hero:
<section id="home" class="section section-hero">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-7">
<h1 class="hero-title">
Camino a ser <span class="hero-highlight">Full-Stack Developer</span>
</h1>
<p class="hero-subtitle">
Construyendo mi portfolio real mientras documento cada paso.
</p>
</div>
<div class="col-lg-5">
<div class="video-box">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
Lo importante:
- Semántica clara,
- Bootstrap para columnas limpias,
- propósito definido en cada sección.
CSS: construyendo mi identidad
No usé solo Bootstrap.
Escribí mis propios estilos base para que todo tenga coherencia visual con mi marca.
body {
background: #050608;
color: #f6f1eb;
font-family: 'Inter', sans-serif;
line-height: 1.7;
}
.section {
padding: 80px 0;
}
.section-hero {
min-height: 100vh;
display: flex;
align-items: center;
}
.hero-title {
font-family: "Space Grotesk";
font-size: clamp(2.4rem, 4vw, 3.4rem);
font-weight: 600;
}
.hero-highlight {
color: #4da3ff;
}
CSS real.
Tu estilo real.
Tu identidad visual real.
JavaScript: mínimo, pero funcional
La V1 tiene muy poco JavaScript.
Solo lo necesario para que la navegación tenga scroll suave.
const links = document.querySelectorAll('.nav-link[href^="#"]');
links.forEach(link => {
link.addEventListener("click", event => {
event.preventDefault();
const id = link.getAttribute("href").substring(1);
const target = document.getElementById(id);
if (!target) return;
target.scrollIntoView({
behavior: "smooth",
block: "start",
});
});
});
No necesitás React para hacer que tu sitio “respire”.
Solo entendiendo eventos y DOM ya podés avanzar mucho.
El formulario: estructura hoy, funcionalidad mañana
El formulario está ahí con un propósito:
<form class="contact-form"> <label for="name">Nombre</label> <input id="name" required /> <label for="email">Email</label> <input id="email" type="email" required /> <label for="message">Mensaje</label> <textarea id="message"></textarea> <button type="submit">Enviar</button> </form>
- mostrar estructura,
- practicar semántica,
- y preparar terreno para cuando avance a backend.
La funcionalidad real vendrá cuando empiece con Node.js + Express.
Por qué esta V1 importa
Porque existe.
Porque la construí con lo que sé hoy.
Porque no esperé para empezar.
Esta V1 no busca generar impacto.
Busca existir, ser real, ser base.
Y sobre esa base voy a construir cada semana.
Es parte de mi identidad:
Aprender creando.
Repositorio público
Podés acceder al repositorio del cual me basé para publicar en esta entrada los Snippets.
GitHub:https://github.com/mathiaspaezdev/mathiaspaez-portfolio-v1