Proyecto Práctico 1: Diseño de un Portafolio

por

En este proyecto, crearemos una página personal sencilla y moderna utilizando Bootstrap 5. La página incluirá una barra de navegación (Navbar), tarjetas (Cards) para destacar proyectos o habilidades, y un pie de página (Footer). Este diseño será totalmente responsivo y personalizable para que se adapte a cualquier necesidad personal o profesional.

1. Estructura del Proyecto

1.1. Objetivo del Proyecto

  • Crear un portafolio personal que contenga:
  • Navbar: Navegación para secciones como Inicio, Proyectos, Sobre mí, y Contacto.
  • Cards: Una sección con tarjetas para mostrar proyectos destacados.
  • Footer: Información de contacto y redes sociales.

1.2. Archivos Necesarios

  • index.html: Página principal.
  • style.css: Opcional, para estilos personalizados.
  • Imágenes de ejemplo para proyectos.

2. Configuración Inicial

2.1. Integración de Bootstrap

Incluye Bootstrap 5 mediante un CDN en tu archivo index.html.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portafolio Personal</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css"> <!-- Archivo opcional para personalización -->
</head>
<body>
</body>
</html>

3. Desarrollo del Portafolio

3.1. Creación de la Barra de Navegación (Navbar)

Una barra de navegación fija en la parte superior con enlaces a las secciones principales.

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Mi Portafolio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#inicio">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#proyectos">Proyectos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#sobremi">Sobre mí</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contacto">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

3.2. Sección de Proyectos con Cards

Usaremos las Cards de Bootstrap para mostrar proyectos destacados.

<section id="proyectos" class="py-5">
  <div class="container">
    <h2 class="text-center mb-4">Proyectos Destacados</h2>
    <div class="row">
      <!-- Card 1 -->
      <div class="col-md-4">
        <div class="card">
          <img src="img/proyecto1.jpg" class="card-img-top" alt="Proyecto 1">
          <div class="card-body">
            <h5 class="card-title">Proyecto 1</h5>
            <p class="card-text">Descripción breve del proyecto 1.</p>
            <a href="#" class="btn btn-primary">Ver más</a>
          </div>
        </div>
      </div>
      <!-- Card 2 -->
      <div class="col-md-4">
        <div class="card">
          <img src="img/proyecto2.jpg" class="card-img-top" alt="Proyecto 2">
          <div class="card-body">
            <h5 class="card-title">Proyecto 2</h5>
            <p class="card-text">Descripción breve del proyecto 2.</p>
            <a href="#" class="btn btn-primary">Ver más</a>
          </div>
        </div>
      </div>
      <!-- Card 3 -->
      <div class="col-md-4">
        <div class="card">
          <img src="img/proyecto3.jpg" class="card-img-top" alt="Proyecto 3">
          <div class="card-body">
            <h5 class="card-title">Proyecto 3</h5>
            <p class="card-text">Descripción breve del proyecto 3.</p>
            <a href="#" class="btn btn-primary">Ver más</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

3.3. Pie de Página (Footer)

Un pie de página sencillo con enlaces a redes sociales.

<footer class="bg-dark text-white text-center py-3">
  <div class="container">
    <p class="mb-1">© 2024 Mi Portafolio - Todos los derechos reservados.</p>
    <div>
      <a href="#" class="text-white me-3"><i class="fab fa-facebook"></i></a>
      <a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a>
      <a href="#" class="text-white"><i class="fab fa-linkedin"></i></a>
    </div>
  </div>
</footer>

4. Personalización del Estilo (Opcional)

Puedes agregar estilos personalizados en el archivo style.css.

body {
  margin-top: 56px; /* Para evitar que el contenido quede oculto bajo la Navbar fija */
}
footer {
  background-color: #333;
}
footer a {
  text-decoration: none;
}

5. Scripts Necesarios

Incluye los scripts de Bootstrap para la funcionalidad de la Navbar y otros componentes.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

6. Orden y Proceso para Juntar Todos los Componentes del Proyecto de Portafolio

  1. Preparación del Archivo HTML
    Crea un archivo llamado index.html. Este será el archivo principal donde ensamblaremos todos los componentes. Asegúrate de incluir la estructura básica de HTML junto con los enlaces al CDN de Bootstrap 5 y el archivo style.css (si usas estilos personalizados).
   <!DOCTYPE html>
   <html lang="es">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mi Portafolio</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
   </body>
   </html>
  1. Agregar la Navbar
    Dentro de la etiqueta <body>, coloca el código de la Navbar para la navegación superior fija. Esta sección debe estar al principio para que funcione como encabezado.
   <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
       <!-- Código de la Navbar -->
     </nav>
   </body>
  1. Añadir Secciones del Contenido Principal
    Después de la Navbar, crea las diferentes secciones del portafolio:
  • Inicio (puede ser una introducción breve).
  • Proyectos: Usa el código de las Cards dentro de un contenedor <section> con un id para referenciarlo desde la Navbar.
   <section id="proyectos" class="py-5">
     <div class="container">
       <!-- Cards de los proyectos -->
     </div>
   </section>
  1. Agregar el Pie de Página (Footer)
    Al final del archivo HTML, inserta el Footer para cerrar la estructura del sitio. Esto asegurará que toda la información básica de contacto esté visible en la parte inferior.
   <footer class="bg-dark text-white text-center py-3">
     <!-- Código del Footer -->
   </footer>
  1. Incluir Scripts de Bootstrap
    Antes de cerrar la etiqueta </body>, incluye los scripts necesarios para que los componentes interactivos (como la Navbar y los Dropdowns) funcionen correctamente.
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  1. Agregar Estilos Personalizados (Opcional)
    Si tienes estilos adicionales para personalizar tu diseño, crea un archivo llamado style.css y vincúlalo en la sección <head> del HTML.
   <link rel="stylesheet" href="style.css">

Orden Completo en el Archivo HTML

Cuando completes todos los pasos, tu archivo index.html debería verse así:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Portafolio</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <!-- Código de la Navbar -->
  </nav>

  <!-- Sección de Proyectos -->
  <section id="proyectos" class="py-5">
    <div class="container">
      <!-- Cards de los proyectos -->
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white text-center py-3">
    <!-- Código del Footer -->
  </footer>

  <!-- Scripts de Bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

Orden Resumido

  1. Crear la estructura HTML básica.
  2. Agregar el componente Navbar al inicio del cuerpo (<body>).
  3. Crear la sección de contenido principal con Cards para los proyectos.
  4. Colocar el Footer al final del archivo.
  5. Incluir los scripts de Bootstrap para funcionalidades interactivas.
  6. Añadir estilos personalizados según sea necesario.
Te recomendamos leer:  Proyecto Práctico 3: Blog o Sitio de Noticias

Siguiendo este orden, tendrás un portafolio funcional y estructurado con Bootstrap 5.

7. Resultado Final

Al abrir index.html en un navegador, obtendrás una página web que:

  • Contiene una Navbar fija con enlaces a las secciones.
  • Presenta proyectos destacados en una sección con Cards.
  • Finaliza con un Footer profesional.

Este proyecto es una base sólida que puede extenderse con más secciones, animaciones, o integración de otras funcionalidades como formularios de contacto.

Rate this post

Deja un comentario

Web Devs