¿Cómo utilizar Portafolio en el Editor de bloques de Waclis?

La sección Portafolio del Editor de bloques de Waclis permite presentar visualmente trabajos, proyectos, obras, casos o producciones realizadas por una empresa, profesional u organización.

Puedes utilizarla para mostrar:

• proyectos terminados;

• trabajos realizados;

• obras;

• instalaciones;

• desarrollos;

• diseños;

• implementaciones;

• campañas;

• producciones;

• casos de clientes;

• proyectos destacados;

• antes y después;

• ejemplos de aplicaciones;

• diferentes tipos de trabajos.

Dentro del Editor de bloques encontrarás diferentes diseños en:

Secciones → Portafolio

Según la composición seleccionada podrás personalizar elementos como:

• imágenes;

• títulos;

• categorías;

• descripciones;

• Links;

• Buttons;

• Cards;

• fondos;

• espacios;

• columnas;

• Hover;

• comportamiento responsive.

¿Qué es un Portafolio?

Un Portafolio es una selección organizada de trabajos que permite al visitante conocer qué has realizado realmente.

Por ejemplo:

PROYECTOS DESTACADOS

[ IMAGEN ]
Proyecto corporativo
Implementación para empresa del sector...

[ VER PROYECTO ]

[ IMAGEN ]
Proyecto retail
Desarrollo de...

[ VER PROYECTO ]

[ IMAGEN ]
Proyecto institucional
...

El objetivo no es solamente mostrar imágenes bonitas

Una fotografía por sí sola puede generar impacto visual.

Pero un Portafolio debería ayudar a responder preguntas como:

¿Qué proyecto estoy viendo?

¿Qué trabajo realizó la empresa?

¿A qué categoría pertenece?

¿Qué resultado o solución representa?

¿Puedo conocer más?

Portafolio vs Galería de imágenes

Estas dos secciones pueden parecer similares, pero tienen objetivos diferentes.

Galería de imágenes

Está orientada principalmente a:

mostrar un conjunto de imágenes.

Por ejemplo:

[ foto ][ foto ][ foto ]

[ foto ][ foto ][ foto ]

Puede utilizarse para:

• instalaciones;

• productos;

• eventos;

• ambientes;

• colecciones visuales.

Portafolio

Está orientado a:

mostrar trabajos o proyectos identificables.

Por ejemplo:

[ IMAGEN ]

Proyecto: Oficinas ABC

Diseño e implementación de...

La fotografía tiene un contexto.

Ejemplo comparativo

Galería

[ fotografía de oficina ]
[ fotografía de oficina ]
[ fotografía de oficina ]

Portafolio

PROYECTO OFICINAS ABC

Diseño y ejecución del espacio corporativo.

[ VER PROYECTO ]

Portafolio vs Testimonios

Portafolio

muestra:

lo que hiciste.

Testimonios

muestran:

qué dice un cliente sobre su experiencia.

Pueden utilizarse juntos.

Ejemplo

PORTAFOLIO

Proyecto ABC

↓

TESTIMONIO

"La implementación..."

Portafolio vs Contenidos destacados

Portafolio tiene una intención específica:

• trabajos;

• proyectos;

• casos.

Contenidos destacados puede utilizarse para resaltar:

• artículos;

• recursos;

• productos;

• páginas;

• campañas;

• contenidos diversos.

Portafolio vs Servicios

Servicios explica:

qué puede hacer la empresa por el cliente.

Portafolio demuestra:

qué trabajos ya realizó.

Ejemplo

SERVICIO

Diseño de espacios comerciales

↓

PORTAFOLIO

Proyecto Local A
Proyecto Local B
Proyecto Local C

¿Cuándo conviene utilizar Portafolio?

Es especialmente útil para empresas o profesionales cuyo trabajo puede demostrarse mediante proyectos.

Por ejemplo:

• arquitectura;

• construcción;

• diseño;

• desarrollo web;

• tecnología;

• fotografía;

• audiovisual;

• marketing;

• publicidad;

• eventos;

• merchandising;

• fabricación;

• decoración;

• ingeniería;

• consultoría;

• instalaciones;

• reformas;

• servicios profesionales.

También puede utilizarse para casos menos visuales

Por ejemplo, una empresa de tecnología puede presentar:

IMPLEMENTACIÓN EMPRESA A

Integración de...

aunque la imagen utilizada sea:

• captura;

• mockup;

• fotografía del cliente;

• gráfico;

• imagen representativa.

No necesitas tener fotografías espectaculares

El valor principal es que el proyecto esté:

• bien identificado;

• contextualizado;

• relacionado con lo que ofreces.

¿Cómo agregar una sección Portafolio?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.

Después abre:

Secciones

y selecciona:

Portafolio

Paso 1: elige una composición

Waclis mostrará los diseños disponibles.

Puedes encontrar alternativas orientadas a:

• grillas;

• Cards;

• imágenes con textos;

• proyectos con Overlay;

• diferentes cantidades de columnas;

• piezas visuales de distintos tamaños.

Elige principalmente según:

• cantidad de proyectos;

• proporción de las imágenes;

• cantidad de texto;

• necesidad de incluir Link;

• estilo visual general.

No elijas solamente por la imagen de ejemplo

Piensa cómo funcionará con tus proyectos reales.

Por ejemplo, una composición puede verse excelente con:

fotografías horizontales profesionales

pero tus imágenes reales pueden ser:

verticales
cuadradas
capturas de pantalla

La composición debería adaptarse al material disponible.

Paso 2: agrega la sección

Selecciona la composición elegida.

Después podrás personalizar individualmente cada proyecto.

Paso 3: utiliza Navigator

Una estructura conceptual habitual puede ser:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Grid Column
        │   └── Portfolio Item
        │       ├── Image
        │       ├── Heading
        │       ├── Paragraph
        │       └── Link
        │
        ├── Grid Column
        │   └── Portfolio Item
        │
        └── Grid Column
            └── Portfolio Item

La estructura exacta dependerá del diseño seleccionado.

¿Por qué es importante Navigator?

Porque si haces clic sobre:

Proyecto ABC

probablemente selecciones solamente:

Heading

Pero si quieres:

• clonar;

• mover;

• eliminar;

un proyecto completo necesitas seleccionar la unidad correspondiente.

Unidad completa

Conceptualmente:

Proyecto
├── Image
├── Heading
├── Category
├── Paragraph
└── Link

Esa es la estructura que normalmente debes tratar como una sola pieza.

Paso 4: define qué proyectos quieres mostrar

No necesitas publicar todos los trabajos realizados.

Un Portafolio puede ser una selección.

Prioriza proyectos que ayuden a demostrar

• variedad;

• especialización;

• calidad;

• experiencia;

• sectores atendidos;

• capacidad;

• tipo de resultados.

Por ejemplo

Si realizaste 50 proyectos muy similares:

no necesitas mostrar los 50.

Puedes seleccionar:

Proyecto A
→ representa grandes empresas

Proyecto B
→ representa retail

Proyecto C
→ representa producción personalizada

Proyecto D
→ representa instalación

Calidad sobre cantidad

Un Portafolio con:

6 proyectos bien presentados

puede resultar más útil que:

30 imágenes sin explicación.

Paso 5: modifica el título general

Puedes utilizar:

Portafolio

Nuestros proyectos

Trabajos realizados

Proyectos destacados

Conoce nuestro trabajo

Casos seleccionados

según el tipo de actividad.

Utiliza terminología que tu público comprenda

Una constructora puede utilizar:

Obras realizadas

Una agencia:

Proyectos

Un fotógrafo:

Portafolio

Una empresa tecnológica:

Casos de implementación

Paso 6: agrega una introducción breve

Por ejemplo:

Conoce algunos de los proyectos que hemos desarrollado para empresas de diferentes sectores.

Otro ejemplo

Una selección de trabajos que refleja diferentes tipos de soluciones y aplicaciones.

No necesitas un párrafo extenso

El protagonismo principal estará en los proyectos.

Paso 7: reemplaza las imágenes

Selecciona:

Image

y utiliza:

Contenido → Set Image

para cargar la imagen correspondiente.

Utiliza imágenes reales cuando sea posible

Por ejemplo:

• trabajo terminado;

• instalación;

• producto aplicado;

• espacio final;

• interfaz;

• pieza desarrollada;

• proyecto en funcionamiento.

Evita utilizar una imagen genérica para representar un proyecto real

si tienes material del trabajo realizado.

Si no puedes publicar imágenes reales

Puedes utilizar:

• mockups;

• capturas;

• imágenes autorizadas;

• representaciones;

pero procura que quede claro qué se está mostrando.

Derechos y permisos

Antes de publicar material de proyectos de clientes, asegúrate de contar con autorización cuando corresponda.

Esto puede ser especialmente relevante para:

• marcas;

• personas;

• instalaciones privadas;

• proyectos confidenciales;

• información sensible.

No publiques información confidencial solamente porque tienes las fotografías

Logo del cliente

Si incorporas un logotipo, comprueba que su utilización esté permitida.

No asumas que haber trabajado para una empresa implica automáticamente poder utilizar su marca públicamente.

Paso 8: completa Alt

Si la imagen aporta contenido, utiliza un texto descriptivo.

Por ejemplo:

Stand corporativo desarrollado para feria empresarial

Interior del proyecto de oficinas corporativas

Página web desarrollada para empresa industrial

Evita

proyecto1

foto-final

El Alt debería describir la imagen

No necesita repetir todo el contenido de la Card.

Paso 9: define la proporción de las imágenes

La consistencia visual es muy importante en Portafolio.

Por ejemplo:

[ horizontal ]
[ vertical ]
[ cuadrada ]
[ horizontal ]

sin un tratamiento común puede generar una grilla irregular.

Puedes unificar el área visual

Por ejemplo:

┌──────────────────┐
│                  │
│      IMAGEN      │
│                  │
└──────────────────┘

manteniendo una misma proporción para todas las Cards.

Cover

Puede resultar especialmente útil cuando quieres que todas las imágenes llenen un mismo marco.

Por ejemplo:

object-fit: cover;

Ventaja

Permite mantener:

• misma altura;

• misma proporción;

• grilla ordenada.

Desventaja

Puede recortar partes de las imágenes.

Por eso debes revisar cada proyecto

Un recorte que funciona para:

fotografía de ambiente

puede cortar:

producto principal

en otro proyecto.

Contain

Puede ser mejor para:

• logotipos;

• capturas;

• producto completo;

• piezas gráficas;

• mockups.

Pero puede generar espacios

si la proporción no coincide con el marco.

No existe una única regla

Puedes decidir:

Portafolio fotográfico → Cover.

Portafolio de interfaces → posiblemente Contain.

Dependerá del contenido.

Evita deformar imágenes

No fuerces:

Width
+
Height

sin controlar proporción.

Paso 10: nombra cada proyecto

Utiliza títulos específicos.

Por ejemplo:

Showroom ABC

Sitio web Empresa XYZ

Stand Feria 2026

Oficinas Corporativas

Campaña Lanzamiento Producto

Evita

Proyecto 1

Proyecto 2

salvo que exista una razón para mantener anonimato.

Si el cliente no puede mencionarse

Puedes utilizar un título descriptivo:

Proyecto para empresa industrial

Implementación para cadena retail

sin revelar información confidencial.

Paso 11: utiliza categorías cuando aporten valor

Puedes identificar proyectos mediante categorías como:

Retail

Corporativo

Industrial

E-commerce

Arquitectura

Eventos

La categoría ayuda cuando existen varios tipos de trabajo

Por ejemplo:

PROYECTO A
Retail

PROYECTO B
Corporativo

PROYECTO C
Industrial

No inventes demasiadas categorías

Si tienes seis proyectos y seis categorías diferentes, quizá no estén ayudando a organizar.

Utiliza una clasificación consistente

Por ejemplo:

no mezcles:

Retail
2026
Buenos Aires
Diseño

como si fueran categorías equivalentes.

Representan conceptos distintos:

• sector;

• fecha;

• ubicación;

• tipo de trabajo.

Define una lógica

Por ejemplo:

Categoría = sector

o:

Categoría = servicio

y mantenla.

Paso 12: escribe una descripción breve

El proyecto debería explicar qué se realizó.

Por ejemplo:

Diseño y producción de un stand corporativo para una feria del sector.

Otro ejemplo

Desarrollo de una Página web institucional con catálogo de productos y contenido personalizado.

Otro ejemplo

Adecuación integral del espacio de atención y exhibición.

No escribas solamente

Excelente proyecto para un gran cliente.

No explica qué trabajo se realizó.

Utiliza verbos concretos

Por ejemplo:

• diseñamos;

• desarrollamos;

• implementamos;

• fabricamos;

• instalamos;

• produjimos;

• configuramos;

• realizamos.

Pero no necesitas escribir siempre en primera persona

También puedes utilizar:

Desarrollo integral de...

Describe el alcance sin convertir la Card en un caso de estudio completo

Una o dos frases suelen ser suficientes.

Paso 13: resultados

Si dispones de resultados verificables, puedes incorporarlos.

Por ejemplo:

Implementación para 12 sucursales.

Más de 500 piezas producidas.

Proyecto implementado en 3 sedes.

cuando esos datos sean reales.

No inventes métricas para hacer el proyecto más atractivo

Resultados cuantitativos

Solo utiliza cifras:

• correctas;

• autorizadas;

• relevantes.

Evita promesas causales sin evidencia

Por ejemplo:

Incrementó las ventas un 200 %

si no tienes información confiable que permita afirmarlo.

Portafolio vs Caso de éxito

Una Card de Portafolio puede resumir.

Un caso de éxito puede profundizar:

Problema
↓
Solución
↓
Implementación
↓
Resultado

Puedes enlazar desde Portafolio

Por ejemplo:

Proyecto ABC

Descripción breve.

[ VER CASO ]

Paso 14: configura el Link

Si el diseño contiene un enlace o Button, selecciona el elemento correspondiente.

Puedes utilizar:

Ver proyecto

Conocer el caso

Ver más

Ver trabajo

Utiliza una acción consistente

Si todos llevan a páginas de proyecto:

Ver proyecto

puede mantenerse en todas las Cards.

Evita mezclar sin razón

Proyecto A → Ver más
Proyecto B → Conocer
Proyecto C → Ir
Proyecto D → Detalles

Prueba todas las URLs

Después de guardar:

Ver página → abrir cada proyecto

Un Link clonado puede conservar el destino anterior

Por ejemplo:

Proyecto A:

/proyectos/a

Proyecto B clonado:

/proyectos/a

hasta que actualices su URL.

Este es un error muy frecuente al duplicar Cards

Revisa cada enlace.

Proyecto sin página propia

No necesitas incluir un Button.

Puedes mostrar:

Imagen
Título
Descripción

sin acción adicional.

No agregues “Ver proyecto” si no existe información adicional

Card completamente clicable

Algunas composiciones pueden utilizar un Link envolviendo una parte o toda la Card.

Por ejemplo:

Link
└── Project Card
    ├── Image
    ├── Heading
    └── Paragraph

En ese caso utiliza Navigator

para localizar el Link y modificar su URL.

Evita Links anidados

Si toda la Card ya es clicable, evita agregar otro Link dentro sin comprender la estructura.

En HTML, una estructura incorrecta de enlaces puede provocar comportamiento inesperado.

Mantén una acción clara

Paso 15: cantidad de proyectos

No existe una cantidad obligatoria.

Puedes mostrar:

• 3;

• 4;

• 6;

• 8;

• otros.

Tres proyectos

[ A ] [ B ] [ C ]

pueden ser suficientes para una Home.

Seis

[ A ] [ B ] [ C ]

[ D ] [ E ] [ F ]

pueden mostrar mayor variedad.

Página completa de Portafolio

Puede contener más proyectos.

No sobrecargues la Home

Puedes mostrar:

PROYECTOS DESTACADOS

[ 3 o 6 proyectos ]

[ VER TODOS LOS PROYECTOS ]

Esto permite mantener una Home más clara

Proyecto destacado

Puedes dar mayor protagonismo a uno.

Por ejemplo:

┌──────────────────────────────────────┐
│                                      │
│          PROYECTO DESTACADO          │
│                                      │
└──────────────────────────────────────┘

[ proyecto ][ proyecto ][ proyecto ]

Utilízalo cuando realmente exista un motivo

Por ejemplo:

• proyecto reciente;

• caso representativo;

• proyecto de gran escala;

• trabajo especialmente relevante.

No destaques todos

Si todo es:

DESTACADO

la jerarquía desaparece.

Etiquetas

Puedes utilizar un Badge en composiciones personalizadas.

Por ejemplo:

NUEVO

DESTACADO

Actualiza etiquetas temporales

Un proyecto de hace tres años no debería seguir marcado:

NUEVO

sin una razón.

Orden del Portafolio

Puedes organizar por:

• relevancia;

• fecha;

• categoría;

• tipo de trabajo.

Más reciente primero

Puede ser natural:

2026
2025
2024

Pero también puedes priorizar

proyecto más representativo

aunque no sea el más nuevo.

No necesitas seguir orden cronológico si el objetivo es demostrar capacidades

Grid responsive

Portafolio suele utilizar una grilla visual.

Tres columnas en desktop

[ A ] [ B ] [ C ]

Tablet

Puede convertirse en:

[ A ] [ B ]

[ C ]

Mobile

[ A ]

[ B ]

[ C ]

Cuatro columnas desktop

[ A ] [ B ] [ C ] [ D ]

Tablet

[ A ] [ B ]

[ C ] [ D ]

Mobile

[ A ]

[ B ]

[ C ]

[ D ]

No mantengas cuatro imágenes diminutas en celular

Cada proyecto necesita suficiente espacio para:

• imagen;

• título;

• descripción;

• Link.

Utiliza Grid Row

para configurar los tamaños de columnas por dispositivo.

Recuerda

Los iconos superiores de dispositivo:

• móvil;

• tablet;

• desktop;

son herramientas de previsualización.

No modifican por sí mismos la grilla.

Espacio entre proyectos

Mantén una separación coherente.

Por ejemplo:

[ CARD ]   [ CARD ]   [ CARD ]

con suficiente espacio para que cada proyecto se identifique.

No los separes tanto

que parezcan bloques sin relación.

Padding interno

Si la Card tiene texto:

┌─────────────────────┐
│       IMAGEN        │
├─────────────────────┤
│                     │
│ TÍTULO              │
│ Descripción         │
│                     │
└─────────────────────┘

mantén suficiente Padding en el área de contenido.

Border radius

Puedes utilizarlo sobre:

• Card;

• imagen;

• contenedor.

Mantén coherencia con la identidad visual.

Overflow

Si la imagen utiliza Hover con zoom dentro de una Card, puede ser necesario controlar el contenido que sobresale.

Por ejemplo:

overflow: hidden;

sobre el contenedor visual correcto.

Hover en Portafolio

Puede ser útil para comunicar que existe interacción.

Por ejemplo:

imagen
↓
Hover suave
↓
Overlay / título / acción

Pero el contenido importante no debería depender exclusivamente del Hover

En celular no existe el mismo comportamiento.

Por ejemplo

Evita que:

Nombre del proyecto

solo pueda verse al pasar el mouse.

Si es información esencial, asegúrate de que exista una experiencia clara también en dispositivos táctiles.

Hover de imagen

Puedes utilizar un zoom moderado.

Por ejemplo:

.portafolio-section .proyecto-imagen {
    transition: transform .3s ease;
}

.portafolio-section .proyecto-card:hover .proyecto-imagen {
    transform: scale(1.04);
}

cuando corresponda a la estructura.

No utilices zoom excesivo

Puede generar:

• recortes;

• movimiento visual;

• pérdida de detalle.

Overlay

Puede utilizarse para mostrar:

• título;

• categoría;

• CTA;

sobre la imagen.

Ejemplo

┌───────────────────────┐
│                       │
│        IMAGEN         │
│                       │
│   PROYECTO ABC        │
│   Retail              │
│                       │
└───────────────────────┘

Contraste

Si el texto aparece sobre una fotografía, comprueba:

• color;

• Overlay;

• legibilidad.

No utilices texto blanco directamente sobre cualquier fotografía

Una zona clara puede hacerlo desaparecer.

Overlay moderado

puede ayudar.

No oscurezcas tanto la imagen que deje de apreciarse el trabajo

El Portafolio necesita mostrar el proyecto.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Section;

• Grid Row;

• Cards.

Manténlas moderadas

Un Portafolio ya es visualmente rico.

No necesita:

imagen gira
título rebota
Card aumenta
texto aparece

todo simultáneamente.

Puede ser suficiente

una entrada suave de cada Card.

Animaciones y comparación

Si el visitante quiere recorrer los proyectos rápidamente, evita delays muy largos.

Portafolio con diferentes proporciones

Si una composición está diseñada como mosaico:

[ grande ][ pequeño ]
[ grande ][ pequeño ]

puede utilizar diferentes tamaños de imagen intencionalmente.

No fuerces todas a la misma proporción si el diseño depende del mosaico

Pero mantén claro qué proyecto corresponde a cada bloque.

Masonry o mosaico

Una composición visual irregular puede ser atractiva.

Sin embargo, es más sensible a:

• tamaños de imágenes;

• textos;

• responsive.

Comprueba cuidadosamente celular.

Si buscas máxima simplicidad

una grilla uniforme suele ser más fácil de mantener.

Portafolio con categorías

Puedes mostrar una etiqueta visual.

Por ejemplo:

RETAIL

Proyecto A

Si quieres filtros interactivos

No asumas que escribir:

Todos | Retail | Corporativo | Industrial

crea automáticamente un sistema de filtrado.

Esto es muy importante

Un filtro visual requiere una lógica funcional real.

No presentes Buttons o Links como filtros si:

• no ocultan;

• no muestran;

• no reorganizan;

los proyectos realmente.

Una categoría escrita dentro de la Card sí puede utilizarse sin lógica adicional

Por ejemplo:

Proyecto A
Categoría: Retail

No confundir categoría con filtro

Si el diseño prediseñado ya incluye filtrado funcional

conserva su estructura y pruébala mediante:

Ver página

antes y después de modificar.

No modifiques JavaScript únicamente para cambiar nombres de categorías

Primero identifica cómo funciona la estructura.

Portafolio y enlaces externos

Un proyecto puede dirigir hacia:

• página interna;

• caso de estudio;

• sitio externo.

Si enlazas una Página web realizada

por ejemplo:

Ver sitio

comprueba que:

• la URL siga activa;

• el proyecto pueda mostrarse públicamente;

• el destino sea correcto.

No envíes al usuario hacia un sitio que ya no corresponde al trabajo presentado

Proyectos antiguos

No tienes que eliminarlos automáticamente.

Pueden seguir demostrando experiencia.

Pero comprueba que:

• información;

• marcas;

• enlaces;

• capturas;

sigan siendo apropiados.

Un sitio web realizado años atrás puede haber cambiado

Si el cliente modificó completamente su Página web, un Link directo podría dejar de representar tu trabajo original.

En ese caso puede ser mejor utilizar:

• captura;

• caso propio;

• descripción;

en lugar de enlazar el sitio actual.

Fecha del proyecto

Puedes incorporarla cuando sea útil.

Por ejemplo:

2026

o:

Proyecto realizado en 2026

No es obligatoria

Si la fecha no aporta a la decisión, puedes omitirla.

Ubicación

En proyectos físicos puede ser útil:

Pilar, Buenos Aires

Pero evita publicar datos de ubicación sensibles

si el proyecto corresponde a un espacio privado.

Cliente

Puedes incluir el nombre:

Cliente: Empresa ABC

cuando tengas autorización.

Si no

puedes utilizar:

Cliente del sector industrial

Confidencialidad

Un Portafolio profesional también requiere decidir qué no debe publicarse.

Evita mostrar:

• información interna;

• datos comerciales privados;

• pantallas con datos reales;

• credenciales;

• nombres sin autorización;

• documentación confidencial.

Capturas de software

Si utilizas screenshots, revisa que no contengan:

• datos personales;

• emails;

• teléfonos;

• pedidos reales;

• información financiera;

• credenciales.

Utiliza datos de demostración cuando sea necesario

Antes y después

Portafolio puede mostrar transformaciones.

Por ejemplo:

ANTES

[ imagen ]

DESPUÉS

[ imagen ]

También existe el componente Image Compare

dentro de Elementos.

Puede resultar útil cuando quieres comparar visualmente dos estados y la composición seleccionada lo permite.

Pero no es obligatorio

También puedes mostrar dos imágenes lado a lado.

Etiqueta claramente

Antes
Después

para que la comparación se comprenda.

No manipules fotografías de forma que genere una comparación engañosa

Mantén condiciones visuales razonablemente comparables cuando sea relevante.

Portafolio de diseño web

Puedes mostrar:

[ captura ]

EMPRESA ABC

Diseño y desarrollo de Página web institucional.

[ VER PROYECTO ]

Revisa imágenes en móvil

Las capturas largas de desktop pueden quedar:

• diminutas;

• ilegibles.

Puedes utilizar:

• recorte representativo;

• mockup;

• composición preparada.

No intentes mostrar una captura completa de 5000 px dentro de una Card pequeña

El visitante no podrá apreciar el contenido.

Portafolio de productos personalizados

Ejemplo:

[ producto terminado ]

PROYECTO CORPORATIVO

Producción de artículos personalizados para una campaña empresarial.

Portafolio de arquitectura

[ fotografía de obra ]

OFICINAS CORPORATIVAS

Diseño y ejecución de...

Portafolio audiovisual

[ imagen ]

CAMPAÑA DE LANZAMIENTO

Producción audiovisual para...

Podría incluir Embed Video en una página específica del proyecto cuando corresponda.

Portafolio de eventos

[ stand / evento ]

FERIA EMPRESARIAL

Diseño y producción de...

Portafolio de consultoría

Puede requerir menos fotografía y más contexto.

Por ejemplo:

[ imagen representativa ]

IMPLEMENTACIÓN EMPRESA INDUSTRIAL

Proyecto de reorganización de...

No fuerces un estilo fotográfico si el trabajo es principalmente intelectual o técnico

Utiliza:

• gráficos;

• mockups;

• resultados;

• diagramas;

• identidad del proyecto.

Proyecto individual detallado

Puedes crear una página con:

TÍTULO

Imagen principal

Descripción

Objetivo

Solución

Galería

Resultado

Testimonio

CTA

El Portafolio puede funcionar como índice

PORTAFOLIO
↓
Cards
↓
cada Card abre proyecto

Esto permite mantener la grilla simple

y desarrollar los detalles en páginas independientes.

Clonar un proyecto

Procedimiento recomendado:

1. Abrir Navigator.
2. Localizar la Card completa.
3. Seleccionarla.
4. Clonar elemento.
5. Reemplazar Image.
6. Actualizar Alt.
7. Actualizar título.
8. Actualizar categoría.
9. Actualizar descripción.
10. Actualizar Link.
11. Revisar ID.
12. Comprobar responsive.

No clones únicamente Image

Si quieres crear un nuevo proyecto.

No clones solamente la Grid Column sin comprobar su contenido

Puede ser correcto si contiene toda la Card, pero utiliza Navigator para asegurarte.

Después de clonar revisa el enlace

Es uno de los errores más frecuentes.

Eliminar un proyecto

Selecciona la unidad completa.

Recuerda:

Waclis no solicita confirmación.

Si eliminas algo incorrectamente:

Deshacer

No elimines solamente Image

si quieres quitar todo el proyecto.

Podrías dejar:

Título
Descripción
Link

sin fotografía.

Reorganizar la grilla

Si pasas de:

6 proyectos

a:

5

comprueba cómo queda la última fila.

Ejemplo

[ A ] [ B ] [ C ]

[ D ] [ E ]

puede ser perfectamente válido.

Pero si deseas una distribución diferente

ajusta Grid Row o la composición.

No agregues un proyecto ficticio solo para completar la fila

Mover proyectos

Puedes modificar el orden.

Selecciona siempre la unidad completa.

Ejemplo

Antes:

Proyecto antiguo
Proyecto reciente
Proyecto principal

Después:

Proyecto principal
Proyecto reciente
Proyecto antiguo

Orden por relevancia

puede resultar más útil que orden de creación.

Classes compartidas

En personalizaciones avanzadas puedes utilizar:

portafolio-section
portafolio-grid
proyecto-card
proyecto-imagen
proyecto-content
proyecto-title
proyecto-category
proyecto-text
proyecto-link

Linked styles

Puede ser muy útil.

Por ejemplo, todas las Cards pueden compartir:

proyecto-card

para mantener:

• Border radius;

• fondo;

• Padding;

• Hover.

No crees un ID diferente para cada Card solamente para aplicar el mismo diseño

Utiliza Classes compartidas.

Excepción

Si quieres destacar un proyecto:

class="proyecto-card proyecto-destacado"

ID

Utilízalo si necesitas:

• una excepción única;

• ancla;

• referencia específica.

Por ejemplo:

id="proyecto-oficinas-abc"

Mantén IDs únicos

Especialmente después de clonar.

CSS personalizado

Ejemplo:

.portafolio-section .proyecto-card {
    overflow: hidden;
    border-radius: 12px;
}

Imagen

.portafolio-section .proyecto-imagen {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

Responsive

@media (max-width: 768px) {
    .portafolio-section .proyecto-imagen {
        height: 240px;
    }
}

si esos valores corresponden a tu composición.

Recuerda

Estas Classes son ejemplos de nombres personalizados.

No representan obligatoriamente las Classes originales de todas las composiciones de Waclis.

Utiliza primero el editor visual

No necesitas CSS para:

• reemplazar imagen;

• cambiar título;

• modificar texto;

• ajustar Grid básico.

Evita CSS global

No utilices:

img {
    height: 280px;
    object-fit: cover;
}

porque modificaría muchas imágenes de la Página web.

Tampoco

.card {
    border-radius: 12px;
}

si solo quieres cambiar Portafolio.

Limita el scope

CSS y Linked styles

Si una regla afecta todos los proyectos y eso es lo que buscas, es correcto.

Si solo quieres una excepción

utiliza:

• Class adicional;

• ID.

Código HTML

Si necesitas analizar la estructura exacta de una Card puedes utilizar:

Editar código HTML <>

sobre el elemento seleccionado.

Esto puede ser útil para identificar

Link
└── Card
    ├── Image
    └── Content

Pero no necesitas editar HTML para cambiar un proyecto habitual

Utiliza las opciones visuales.

Evita eliminar Classes estructurales

Especialmente si la composición ya contiene:

• Hover;

• Overlay;

• interacción.

JavaScript

Un Portafolio estático normalmente no necesita JavaScript personalizado para cambiar:

• imágenes;

• textos;

• colores;

• Grid.

Si el diseño incluye

• filtros;

• animaciones específicas;

• interacción;

conserva su lógica si ya funciona.

No agregues otra biblioteca externa solamente para crear un efecto visual simple

Si un filtro deja de funcionar

Revisa primero:

1. Deshacer.

2. Navigator.

3. Classes.

4. IDs.

5. estructura.

6. cambios HTML.

7. CSS personalizado.

No reconstruyas inmediatamente el componente con otro script

Performance

Un Portafolio puede contener muchas imágenes.

Esto puede afectar la carga de la Página web.

Utiliza archivos adecuados para web

Evita cargar:

20 fotografías originales enormes

si se mostrarán en Cards pequeñas.

Mantén suficiente calidad

pero evita peso innecesario.

Más proyectos = más imágenes

Por eso selecciona conscientemente cuántos quieres mostrar.

Home

Puede mostrar menos.

Página completa

puede mostrar más.

Imágenes coherentes

Una grilla suele verse mejor si las fotografías comparten cierto criterio:

• iluminación;

• proporción;

• estilo;

• tratamiento.

No es obligatorio que sean idénticas

El objetivo es evitar una colección visualmente caótica.

Color

Si algunas imágenes son muy oscuras y otras muy claras, el texto superpuesto puede necesitar un Overlay consistente.

Evita configurar una solución diferente para cada Card si puedes preparar mejor las imágenes

Portafolio y accesibilidad

Comprueba:

• Alt;

• contraste;

• Links comprensibles;

• información no dependiente únicamente del Hover.

Si varias Cards tienen Button “Ver proyecto”

el título de cada Card proporciona contexto visual.

En personalizaciones avanzadas, intenta mantener también una estructura suficientemente descriptiva para la navegación.

No elimines indicadores de foco

si personalizas Links o Buttons mediante CSS.

Mobile

Portafolio necesita especial atención porque las imágenes suelen tener gran protagonismo.

Comprueba

• Image;

• título;

• categoría;

• descripción;

• Button;

• Hover alternativo;

• espacios.

Cards que dependen del Hover

deben tener una experiencia funcional también en móvil.

Por ejemplo

Si desktop muestra:

Hover
→ aparece título

comprueba qué ocurre en celular.

El título no debería quedar inaccesible

No ocultes todos los textos en mobile

solamente para que las imágenes sean más grandes.

El Portafolio necesita contexto.

Puede reducirse la descripción

si es demasiado extensa, pero mantén:

• título;

• información esencial.

Ejemplo práctico: Portafolio de tres proyectos

Queremos:

PROYECTOS DESTACADOS

[ IMAGEN ]
PROYECTO A
Retail
Diseño y producción de...
[ VER PROYECTO ]

[ IMAGEN ]
PROYECTO B
Corporativo
Implementación de...
[ VER PROYECTO ]

[ IMAGEN ]
PROYECTO C
Industrial
Desarrollo de...
[ VER PROYECTO ]

Paso 1

Abre:

Secciones → Portafolio

Paso 2

Selecciona una composición de tres proyectos.

Paso 3

Utiliza Navigator para identificar cada Card.

Paso 4

Modifica el Heading general.

Paso 5

Reemplaza cada Image.

Paso 6

Completa Alt.

Paso 7

Modifica títulos.

Paso 8

Actualiza categorías.

Paso 9

Redacta descripciones breves.

Paso 10

Configura Links.

Paso 11

Comprueba Cover / Contain.

Paso 12

Revisa la grilla.

Paso 13

Revisa Hover.

Paso 14

Comprueba desktop.

Paso 15

Comprueba tablet.

Paso 16

Comprueba celular.

Paso 17

Guarda.

Paso 18

Utiliza:

Ver página

Paso 19

Abre los tres proyectos.

Ejemplo práctico: Portafolio sin páginas internas

TRABAJOS REALIZADOS

[ fotografía ]
Proyecto A
Descripción breve.

[ fotografía ]
Proyecto B
Descripción breve.

No necesitas Button si no existe contenido adicional.

Ejemplo práctico: Home + página completa

Home:

PROYECTOS DESTACADOS

[ A ] [ B ] [ C ]

[ VER TODOS LOS PROYECTOS ]

Página Portafolio:

[ A ] [ B ] [ C ]

[ D ] [ E ] [ F ]

[ G ] [ H ] [ I ]

Ejemplo práctico: proyecto con categoría

[ IMAGEN ]

OFICINAS ABC

Corporativo

Diseño y adecuación integral del espacio.

[ VER PROYECTO ]

Ejemplo práctico: caso tecnológico

[ CAPTURA / MOCKUP ]

IMPLEMENTACIÓN EMPRESA INDUSTRIAL

Tecnología

Configuración e integración de una solución para centralizar...

Ejemplo práctico: proyecto confidencial

[ IMAGEN AUTORIZADA / REPRESENTATIVA ]

IMPLEMENTACIÓN PARA EMPRESA RETAIL

Desarrollo de una solución para...

No necesitas publicar el nombre del cliente.

¿Qué hacer si tengo imágenes verticales y horizontales mezcladas?

Puedes:

• utilizar un marco común con Cover;

• preparar recortes;

• elegir otra composición;

• utilizar un mosaico.

No deformes las imágenes para igualarlas

¿Qué hacer si Cover corta elementos importantes?

Puedes:

• elegir otra fotografía;

• ajustar su composición;

• utilizar Contain;

• aumentar el área visible.

¿Qué hacer si Contain deja mucho espacio vacío?

Evalúa si:

• el fondo puede formar parte del diseño;

• otra imagen funciona mejor;

• Cover es más apropiado.

¿Qué hacer si una fotografía tiene texto incorporado?

Comprueba que siga siendo legible.

En general es preferible que:

• nombre;

• categoría;

• descripción;

sean elementos editables del Portafolio.

¿Qué hacer si todos los proyectos tienen diferentes alturas?

Revisa:

• tamaño de imágenes;

• longitud de descripción;

• estructura.

No uses Height fijo sin considerar responsive.

¿Qué hacer si los Buttons quedan desalineados?

Primero intenta:

• equilibrar contenido;

• utilizar una Card flexible.

Evita aplicar Margin diferente a cada proyecto.

¿Qué hacer si tengo un proyecto con mucha información?

Utiliza una página propia.

La Card debe resumir.

¿Qué hacer si no tengo descripción?

Al menos intenta incluir:

• título;

• categoría;

para proporcionar contexto.

¿Qué hacer si no puedo mencionar al cliente?

Utiliza:

Proyecto para empresa del sector...

sin revelar información protegida.

¿Qué hacer si quiero mostrar el logo del cliente?

Comprueba primero si puedes publicarlo.

¿Qué hacer si un sitio web que enlacé cambió?

Evalúa si ese Link sigue representando tu trabajo.

Puede ser mejor enlazar un caso propio o eliminar el Link.

¿Qué hacer si un proyecto dejó de ser representativo?

Puedes reemplazarlo por uno más reciente o relevante.

El Portafolio debe mantenerse actualizado

No necesariamente eliminando todo lo antiguo, sino revisando la selección.

¿Qué hacer si quiero cambiar el orden?

Selecciona Cards completas mediante Navigator y muévelas.

¿Qué hacer si al clonar Proyecto A, Proyecto B sigue abriendo A?

Modifica la URL de la copia.

¿Qué hacer si ambos tienen el mismo ID?

Actualiza el ID de la copia.

¿Qué hacer si elimino un proyecto y queda una columna vacía?

Revisa:

• Grid Column;

• Grid Row;

• wrapper de la Card.

Probablemente eliminaste solo el contenido interior.

¿Qué hacer si quiero pasar de tres a cuatro proyectos?

Clona una Card completa y revisa:

• desktop;

• tablet;

• móvil.

Puede ser necesario cambiar la distribución.

¿Qué hacer si quiero pasar de cuatro a tres?

Elimina una unidad completa y redistribuye Grid.

¿Qué hacer si al modificar un Border radius cambian todos?

Comprueba:

Linked styles

Si todos deben tener la misma forma:

es correcto.

¿Qué hacer si quiero destacar una sola Card?

Agrega una Class adicional.

¿Qué hacer si el Hover no funciona en Ver página?

Revisa:

• Class;

• selector;

• estructura;

• CSS.

¿Qué hacer si funciona en desktop pero no tiene sentido en celular?

No dependas del Hover para mostrar información principal.

Diseña un estado móvil comprensible.

¿Qué hacer si aparece scroll horizontal?

Revisa:

• Grid;

• Width;

• imágenes;

• Margin;

• Transform del Hover;

• Min Width.

Un zoom de imagen también puede contribuir

si el contenedor no controla correctamente el overflow.

¿Qué hacer si el Portafolio carga muy lento?

Revisa principalmente:

• cantidad de imágenes;

• dimensiones;

• peso de archivos.

No necesitas imágenes gigantes para miniaturas pequeñas

¿Qué hacer si tengo 50 proyectos?

Puedes:

• seleccionar destacados;

• crear una página completa;

• agrupar por categorías;

• dividir por servicios.

No intentes mostrar los 50 en Home

¿Qué hacer si quiero filtros por categoría?

Primero verifica si la composición utilizada ya tiene un mecanismo funcional de filtrado.

No crees Buttons que parezcan filtros si no hacen nada.

Si necesitas desarrollar un filtrado personalizado

será una modificación avanzada y debe conservarse una lógica clara entre:

• categorías;

• elementos;

• controles.

No asumas que puede resolverse únicamente con CSS.

Utilizar IA para seleccionar proyectos

ChatGPT, Claude o Gemini pueden ayudarte a organizar información real.

Por ejemplo:

Tengo estos 12 proyectos:

[pegar lista con descripción]

Quiero seleccionar 6 para un Portafolio.

El objetivo es mostrar:
- variedad;
- experiencia;
- diferentes sectores;
- diferentes tipos de trabajo.

No inventes información.

Indícame cuáles seleccionarías y qué capacidad demuestra cada uno.

IA para redactar Cards

Tengo este proyecto:

Nombre:
[datos]

Sector:
[datos]

Trabajo realizado:
[datos]

Resultado verificable:
[datos]

Redacta una Card de Portafolio con:

- título;
- categoría;
- descripción máxima de 30 palabras;
- CTA "Ver proyecto".

Utiliza español neutro.

No inventes resultados ni características.

IA para anonimizar un proyecto

Puedes solicitar:

Tengo este caso:

[datos]

No puedo mencionar el nombre del cliente.

Reescribe la presentación para Portafolio manteniendo:
- sector;
- tipo de proyecto;
- trabajo realizado;
- resultado autorizado.

Elimina cualquier dato que permita identificar directamente al cliente.

No inventes información.

IA para reducir descripciones

Estas son seis descripciones de proyectos:

[pegar]

Redúcelas a un máximo de 25 palabras cada una.

Mantén una extensión similar y la misma estructura.

No inventes datos.

IA para definir categorías

Tengo estos proyectos:

[lista]

Propón una clasificación en un máximo de 4 categorías.

Utiliza un único criterio de clasificación.

Explica cuál elegiste:
- sector;
- tipo de servicio;
- tipo de proyecto.

No cambies los proyectos.

IA para revisar coherencia

Revisa estas Cards de Portafolio:

[pegar contenido]

Identifica:
- títulos poco descriptivos;
- proyectos sin contexto;
- categorías inconsistentes;
- descripciones que hablan de beneficios pero no del trabajo realizado;
- posibles repeticiones.

No agregues datos nuevos.

IA para CSS

Por ejemplo:

Estoy personalizando un Portafolio en Waclis.

La sección utiliza:
.portafolio-section

Las Cards:
.proyecto-card

Las imágenes:
.proyecto-imagen

Los títulos:
.proyecto-title

Necesito:
- 3 Cards por fila en desktop;
- 2 por fila en tablet;
- 1 por fila en celular;
- imágenes con misma altura;
- object-fit cover;
- Border radius de 12 px;
- Hover con zoom muy sutil;
- sin afectar otras imágenes ni Cards.

No modifiques HTML.

No agregues JavaScript.

No elimines Classes existentes.

Devuélveme solamente CSS limitado a .portafolio-section.

IA para analizar una imagen

Si la herramienta admite imágenes puedes consultar:

Quiero utilizar esta fotografía como miniatura de un proyecto en un Portafolio.

La imagen se mostrará con Cover en una Card horizontal.

Analiza qué elementos importantes podrían quedar recortados y qué zona debería mantenerse visible.

No modifiques la imagen.

IA para revisar HTML antes de clonar

Este es el HTML de una Card de Portafolio en Waclis:

[pegar únicamente la Card]

Necesito duplicar el proyecto completo.

Indícame cuál es el contenedor raíz de la Card y qué elementos internos debo actualizar después de clonarlo.

No elimines ni renombres Classes.

Buenas prácticas para Portafolio

Recomendamos:

• seleccionar proyectos representativos;

• priorizar calidad sobre cantidad;

• utilizar imágenes reales cuando sea posible;

• comprobar permisos de publicación;

• no revelar información confidencial;

• utilizar títulos específicos;

• mantener una clasificación coherente;

• explicar qué trabajo se realizó;

• utilizar métricas solo cuando sean reales;

• completar Alt;

• mantener proporciones de imagen coherentes;

• elegir conscientemente Cover o Contain;

• utilizar Navigator;

• clonar proyectos completos;

• revisar Links después de clonar;

• mantener IDs únicos;

• utilizar Linked styles para mantener consistencia;

• adaptar Grid responsive;

• no depender del Hover para información esencial;

• optimizar imágenes;

• probar todos los proyectos mediante Ver página.

Errores frecuentes

Confundir Portafolio con Galería

El Portafolio necesita contexto de proyecto.

Mostrar fotografías sin explicar qué trabajo se realizó

Agrega título y descripción.

Publicar todos los proyectos sin priorizar

Selecciona.

Utilizar imágenes genéricas cuando tienes material real autorizado

El trabajo real suele comunicar mejor.

Publicar logos de clientes sin comprobar autorización

Revisa permisos.

Mostrar información confidencial

Elimina datos sensibles.

Utilizar capturas con datos reales

Anonimiza o utiliza información de demostración.

Utilizar títulos “Proyecto 1”, “Proyecto 2”

Sé más descriptivo.

Mezclar categorías con años y ubicaciones

Utiliza una lógica consistente.

Inventar resultados

Publica únicamente información verificable.

Utilizar Cover sin revisar el recorte

Comprueba cada imagen.

Deformar fotografías para igualar Cards

Respeta proporciones.

Utilizar descripciones demasiado largas

Resume y enlaza un caso completo.

Colocar Button “Ver proyecto” sin contenido adicional

Elimínalo si no aporta.

Clonar una Card y olvidar cambiar la URL

Prueba todos los proyectos.

Clonar y repetir IDs

Mantén IDs únicos.

Eliminar solamente Image y dejar el resto

Elimina la unidad completa si corresponde.

Mantener cuatro columnas diminutas en móvil

Adapta Grid.

Ocultar los títulos hasta Hover

La información esencial debe funcionar también en celular.

Utilizar Hover excesivo

El proyecto es el protagonista.

Crear filtros visuales que no funcionan

No simules funcionalidades inexistentes.

Aplicar CSS global a img o .card

Limita el scope.

Cargar imágenes innecesariamente pesadas

Optimiza para web.

No revisar proyectos antiguos

Comprueba que sigan representando correctamente tu trabajo.

No probar Links

Utiliza Ver página.

Flujo recomendado

1. SELECCIONAR PROYECTOS
↓
2. COMPROBAR AUTORIZACIONES
↓
3. DEFINIR CATEGORÍAS
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR PORTAFOLIO
↓
6. REVISAR NAVIGATOR
↓
7. REEMPLAZAR IMÁGENES
↓
8. COMPLETAR ALT
↓
9. MODIFICAR TÍTULOS
↓
10. AGREGAR CATEGORÍAS
↓
11. REDACTAR DESCRIPCIONES
↓
12. CONFIGURAR LINKS
↓
13. REVISAR COVER / CONTAIN
↓
14. PERSONALIZAR CARDS
↓
15. REVISAR LINKED STYLES
↓
16. CONFIGURAR GRID RESPONSIVE
↓
17. OPTIMIZAR IMÁGENES
↓
18. GUARDAR CAMBIOS
↓
19. VER PÁGINA
↓
20. PROBAR TODOS LOS PROYECTOS

Checklist antes de publicar Portafolio

• Los proyectos seleccionados representan correctamente nuestro trabajo.

• Priorizamos calidad sobre cantidad.

• Tenemos autorización para publicar el material cuando corresponde.

• No publicamos información confidencial.

• No aparecen datos personales o sensibles en capturas.

• Los nombres de clientes pueden publicarse si se utilizan.

• Los logotipos pueden publicarse si se utilizan.

• Todas las imágenes fueron reemplazadas.

• No quedan imágenes de ejemplo.

• Las fotografías tienen buena calidad.

• Las imágenes están optimizadas para web.

• Completé Alt cuando corresponde.

• Revisé Cover / Contain.

• Los elementos importantes no quedan recortados.

• Las imágenes no están deformadas.

• Cada proyecto tiene un título claro.

• Las categorías utilizan un criterio consistente.

• Cada descripción explica qué trabajo se realizó.

• Las métricas publicadas son reales.

• Los Buttons son necesarios.

• Los Links apuntan al proyecto correcto.

• Revisé Links después de clonar.

• Utilicé Navigator para seleccionar Cards completas.

• Los IDs personalizados son únicos.

• Linked styles tiene el alcance esperado.

• Las Cards mantienen un diseño coherente.

• El Hover es moderado.

• La información esencial no depende únicamente del Hover.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Grid se reorganiza correctamente.

• Los textos no se cortan.

• Los Buttons no desbordan.

• No existe scroll horizontal inesperado.

• Las imágenes no hacen que la página cargue innecesariamente lento.

• Cualquier filtro visible funciona realmente si existe.

• El CSS personalizado está limitado a Portafolio.

• No agregué JavaScript innecesario.

• Guardé los cambios.

• Probé cada proyecto mediante Ver página.

En resumen

La sección Portafolio permite presentar trabajos realizados de forma visual y organizada.

La diferencia principal con una Galería es:

GALERÍA
→ muestra imágenes

PORTAFOLIO
→ muestra proyectos

Un proyecto debería aportar contexto.

Por ejemplo:

[ IMAGEN ]

OFICINAS CORPORATIVAS

Corporativo

Diseño y adecuación integral del espacio.

[ VER PROYECTO ]

Una estructura habitual puede ser:

Section
└── Grid Row
    ├── Project Card
    │   ├── Image
    │   ├── Heading
    │   ├── Category
    │   ├── Paragraph
    │   └── Link
    └── ...

Por eso utiliza Navigator para seleccionar la Card completa antes de:

• clonar;

• mover;

• eliminar.

Cuando clonas un proyecto:

no olvides cambiar también su Link e ID.

En imágenes:

Cover ayuda a mantener una grilla uniforme, pero puede recortar.

Contain ayuda a mostrar todo el contenido, pero puede generar espacios.

Elige según el material.

En responsive:

Desktop

[ A ] [ B ] [ C ]

puede convertirse en:

Mobile

[ A ]

[ B ]

[ C ]

Utiliza Grid Row para adaptar la estructura.

También recuerda:

no publiques un proyecto únicamente porque la imagen se ve bien.

Explica qué trabajo se realizó.

Y antes de mostrar:

• nombres de clientes;

• logos;

• fotografías;

• resultados;

• capturas;

comprueba que puedas publicarlos y que no contengan información confidencial.

Finalmente:

Guardar Cambios → Ver página → revisar todos los proyectos → probar Links → revisar celular.

Un buen Portafolio no es simplemente una colección estética.

Debe ayudar al visitante a responder:

“¿Qué tipo de trabajos puede realizar esta empresa y qué evidencia tengo de su experiencia?”