Proyecto Final Parte 4

La sección de proyectos es un elemento crucial en cualquier portafolio web, ya que permite mostrar de manera efectiva nuestras habilidades y experiencia. Utilizando técnicas avanzadas de CSS, podemos crear una presentación visualmente atractiva que capte la atención de los visitantes y potencie nuestra imagen profesional.

¿Cómo estructurar la sección de proyectos con CSS avanzado?

Para comenzar con nuestra sección de proyectos, necesitamos establecer el contenedor principal con un espaciado adecuado y prepararlo para las animaciones de scroll:

.proyectos {
  padding: var(--espaciado-muy-grande) 0;
  view-timeline-name: scroll-proyectos;
  view-timeline-axis: block;
}

La propiedad view-timeline-name es fundamental, ya que nos permite definir un nombre para nuestra línea de tiempo de animación basada en el scroll. Al establecer el eje como block, indicamos que queremos que las animaciones se activen con el desplazamiento vertical.

¿Cómo animar el título de la sección?

El título "Mis proyectos" debe destacar y aparecer gradualmente a medida que el usuario hace scroll:

.proyectos h2 {
  font-size: var(--tamanio-xl);
  text-align: center;
  margin-bottom: var(--espaciado-grande);
  animation: aparecer linear;
  animation-timeline: scroll-proyectos;
  animation-range: entry 10% cover 20%;
}

La clave aquí está en la configuración de animation-range, que determina cuándo comienza y termina la animación en relación con la visibilidad del elemento en el viewport. Cuando el elemento es visible en un 10%, la animación comienza, y cuando alcanza el 20% de visibilidad, la animación se completa.

¿Cómo crear una cuadrícula adaptable para los proyectos?

Para mostrar los proyectos de manera organizada, implementamos una cuadrícula con Grid que se adapta a diferentes tamaños de pantalla:

.cuadricula-proyectos {
  display: grid;
  gap: var(--espaciado-grande);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

La técnica de repeat(auto-fit, minmax(280px, 1fr)) es especialmente útil para crear diseños responsivos sin media queries. Esta configuración permite que las tarjetas de proyectos se reorganicen automáticamente según el espacio disponible, manteniendo un ancho mínimo de 280px y distribuyendo el espacio restante equitativamente.

¿Cómo diseñar las tarjetas de proyectos con efectos interactivos?

Las tarjetas de proyectos deben ser atractivas y proporcionar retroalimentación visual cuando el usuario interactúa con ellas:

.tarjeta-proyecto {
  border-radius: var(--borde-radius);
  overflow: hidden;
  background-color: var(--color-claro);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  content-visibility: auto;
  contain-intrinsic-size: 300px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-proyecto:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

El uso de content-visibility: auto es una optimización crucial que mejora significativamente el rendimiento de la página, ya que indica al navegador que no renderice el contenido hasta que esté cerca del viewport. Esto es especialmente valioso para elementos con imágenes como nuestras tarjetas de proyectos.

¿Cómo crear efectos visuales en las imágenes de los proyectos?

Para las imágenes de los proyectos, implementamos un efecto interesante que combina escala de grises y mezcla de modos:

.contenedor-imagen {
  max-height: 200px;
  position: relative;
  overflow: hidden;
}

.contenedor-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  filter: grayscale(50%);
  transition: filter 0.5s, mix-blend-mode 0.5s;
}

.tarjeta-proyecto:hover .contenedor-imagen img {
  filter: grayscale(0);
  mix-blend-mode: normal;
}

Este efecto transforma las imágenes de una apariencia desaturada a una vibrante al pasar el ratón por encima, creando una experiencia interactiva que atrae la atención del usuario. El uso de mix-blend-mode y filter combinados produce resultados visualmente interesantes que pueden adaptarse a diferentes estilos de diseño.

¿Cómo organizar el contenido y las etiquetas en las tarjetas?

Para completar nuestras tarjetas, necesitamos estructurar el contenido interno y las etiquetas de tecnologías:

.contenido {
  padding: var(--espaciado-intermedio);
}

.contenido h3 {
  font-size: var(--tamanio-grande);
  margin-bottom: var(--espaciado-pequenio);
}

.contenido p {
  font-size: var(--tamanio-base);
  margin-bottom: var(--espaciado-pequenio);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaciado-xs);
  margin-top: var(--espaciado-pequenio);
}

.etiqueta {
  background-color: color-mix(in oklab, var(--color-secundario), var(--color-claro));
  padding: calc(var(--espaciado-xs) / 2) var(--espaciado-xs);
  border-radius: var(--borde-radius);
  font-size: var(--tamanio-pequenio);
}

La función color-mix() es una técnica avanzada que permite crear colores derivados de nuestra paleta principal, manteniendo la consistencia visual en todo el diseño. En este caso, mezclamos el color secundario con el color claro para crear un fondo sutil para las etiquetas.

La implementación de una sección de proyectos con estas técnicas avanzadas de CSS no solo mejora la estética de nuestro portafolio, sino que también optimiza el rendimiento y crea una experiencia de usuario más agradable. ¿Has utilizado alguna de estas técnicas en tus proyectos? Comparte tu experiencia en los comentarios.