Aquí os comparto una interfaz en el que estaremos creando un portfolio para nuestra página web, utilizando Bootstrap 5.3, HTML5, CSS3, Flexbox, jQuery y JavaScript. Os proporcionaré el código separado en los archivos correspondientes: HTML, CSS y JavaScript.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio de Proyectos Web</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Barra de navegación -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Mis Proyectos</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">
<li class="nav-item">
<button class="btn nav-link active" data-category="todos">Todos</button>
</li>
<li class="nav-item">
<button class="btn nav-link" data-category="ecommerce">E-commerce</button>
</li>
<li class="nav-item">
<button class="btn nav-link" data-category="corporativo">Corporativos</button>
</li>
<li class="nav-item">
<button class="btn nav-link" data-category="personal">Personales</button>
</li>
</ul>
</div>
</div>
</nav>
<!-- Contenedor de los trabajos -->
<div class="container my-5">
<div class="row" id="projects-container">
<!-- Tarjeta de Proyecto 1 -->
<div class="col-md-4 project-card" data-category="ecommerce">
<div class="card mb-4">
<img src="img1.jpg" class="card-img-top" alt="Proyecto 1">
<div class="card-body">
<h5 class="card-title">Tienda en Línea XYZ</h5>
<p class="card-text">Cliente: XYZ Store</p>
<p class="card-text">Dirección: www.xyzstore.com</p>
<p class="card-text">Descripción: Plataforma de comercio electrónico con integración de pasarela de pagos.</p>
</div>
</div>
</div>
<!-- Tarjeta de Proyecto 1-2 -->
<div class="col-md-4 project-card" data-category="ecommerce">
<div class="card mb-4">
<img src="img4.jpg" class="card-img-top" alt="Proyecto 1">
<div class="card-body">
<h5 class="card-title">Tienda en Línea XYZ</h5>
<p class="card-text">Cliente: XYZ Store</p>
<p class="card-text">Dirección: www.xyzstore.com</p>
<p class="card-text">Descripción: Plataforma de comercio electrónico con integración de pasarela de pagos.</p>
</div>
</div>
</div>
<!-- Tarjeta de Proyecto 2 -->
<div class="col-md-4 project-card" data-category="corporativo">
<div class="card mb-4">
<img src="img2.jpg" class="card-img-top" alt="Proyecto 2">
<div class="card-body">
<h5 class="card-title">Corporativo ABC</h5>
<p class="card-text">Cliente: ABC Company</p>
<p class="card-text">Dirección: www.abccorp.com</p>
<p class="card-text">Descripción: Sitio web corporativo con sección de noticias y portafolio de servicios.</p>
</div>
</div>
</div>
<!-- Tarjeta de Proyecto 3 -->
<div class="col-md-4 project-card" data-category="personal">
<div class="card mb-4">
<img src="img3.jpg" class="card-img-top" alt="Proyecto 3">
<div class="card-body">
<h5 class="card-title">Blog Personal de Juan Pérez</h5>
<p class="card-text">Cliente: Juan Pérez</p>
<p class="card-text">Dirección: www.juanperez.com</p>
<p class="card-text">Descripción: Blog personal enfocado en tecnología y viajes.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and Dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>/* Estilo para la barra de navegación */
.navbar {
margin-bottom: 30px;
}
.nav-link {
color: white !important;
font-size: 1.1rem;
margin-right: 10px;
}
.nav-link.active {
font-weight: bold;
}
/* Estilo para las tarjetas */
.project-card .card {
transition: transform 0.3s ease;
}
.project-card .card:hover {
transform: scale(1.05);
}
/* Personalización del cuerpo */
body {
background-color: #f8f9fa;
}
/* Margen inferior para cada tarjeta */
.project-card {
margin-bottom: 20px;
}
/* Estilos adicionales para la tarjeta */
.card-img-top {
height: 200px;
object-fit: cover;
}$(document).ready(function() {
// Manejo de filtrado por categoría
$('.nav-link').click(function() {
var category = $(this).data('category');
// Marcar como activo el botón seleccionado
$('.nav-link').removeClass('active');
$(this).addClass('active');
// Mostrar/ocultar proyectos según la categoría
if (category === 'todos') {
$('.project-card').show();
} else {
$('.project-card').each(function() {
if ($(this).data('category') === category) {
$(this).show();
} else {
$(this).hide();
}
});
}
});
});Si necesitas más consejos de programación, no dudes en seguirme en mi página web profesional o en mi newsletter en Linkedin. Y, si te gusta el contenido, me ayudarás compartiéndolo en tus redes sociales.