Una sección de proyectos o trabajos realizados permite mostrar ejemplos concretos de lo que una empresa hace.

Puede utilizarse para presentar:

• proyectos realizados;

• implementaciones;

• trabajos de diseño;

• instalaciones;

• desarrollos;

• obras;

• productos personalizados;

• casos de estudio;

• clientes o marcas con las que se trabajó;

• resultados visuales;

• antes y después.

Una estructura habitual puede ser:

                 PROYECTOS REALIZADOS

        Conoce algunos de nuestros trabajos


┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│                 │ │                 │ │                 │
│     IMAGEN      │ │     IMAGEN      │ │     IMAGEN      │
│                 │ │                 │ │                 │
├─────────────────┤ ├─────────────────┤ ├─────────────────┤
│ Categoría       │ │ Categoría       │ │ Categoría       │
│ Proyecto A      │ │ Proyecto B      │ │ Proyecto C      │
│ Descripción     │ │ Descripción     │ │ Descripción     │
│ Ver proyecto →  │ │ Ver proyecto →  │ │ Ver proyecto →  │
└─────────────────┘ └─────────────────┘ └─────────────────┘

En tablet puede convertirse en:

[ Proyecto A ][ Proyecto B ]

[ Proyecto C ][ Proyecto D ]

Y en celular:

[ Proyecto A ]

[ Proyecto B ]

[ Proyecto C ]

En este tutorial aprenderás a:

• decidir entre Portfolio, Gallery y Cards;

• definir qué información mostrar de cada proyecto;

• construir una sección desde cero;

• utilizar una sección prediseñada de Portafolio;

• crear una grilla personalizada;

• utilizar Image correctamente;

• elegir Cover o Contain;

• mantener proporciones visuales coherentes;

• mostrar categorías como información sin inventar filtros;

• diferenciar etiquetas visuales de filtros funcionales;

• utilizar Links hacia casos de estudio;

• mostrar proyectos que no tienen una página individual;

• decidir entre Card clicable y CTA explícito;

• utilizar Hover;

• mantener contenido visible en dispositivos táctiles;

• clonar proyectos correctamente;

• evitar URLs e IDs duplicados;

• gestionar logos de clientes;

• mostrar trabajos reales sin inventar marcas, resultados o testimonios;

• adaptar la grilla 3 → 2 → 1;

• mantener actualizado el portafolio;

• utilizar IA para organizar contenido sin inventar proyectos.

Primera regla: muestra trabajos reales

Una sección de portafolio tiene una particularidad:

lo que muestras representa experiencia real de la empresa.

Por eso no deberías completar espacios vacíos con:

• empresas ficticias;

• logos de marcas con las que no trabajaste;

• proyectos inventados;

• resultados inexistentes;

• métricas ficticias;

• testimonios creados para acompañar un proyecto.

Ejemplo incorrecto

Proyecto para Empresa Internacional X

+300 % de ventas

si ese proyecto o resultado no existe.

Mejor

utiliza únicamente información que puedas presentar de forma legítima y precisa.

Un portafolio no necesita diez proyectos para ser profesional

Puede funcionar perfectamente con:

3 proyectos reales

antes que con:

12 ejemplos inventados

Segunda regla

La credibilidad del proyecto es más importante que la cantidad de Cards.

Portfolio vs Gallery vs Cards

Antes de construir la sección debemos elegir el patrón correcto.

Portfolio

La categoría:

Secciones → Portafolio

está orientada conceptualmente a mostrar:

TRABAJOS / PROYECTOS

con una presentación preparada para ese objetivo.

Puede ser el mejor punto de partida cuando deseas:

• mostrar proyectos;

• identificar cada trabajo;

• acompañarlos con información.

Gallery

Gallery está más orientada a:

VISUALIZAR IMÁGENES

Puede ser apropiada cuando el contenido principal es visual.

Por ejemplo:

• fotografías de una obra;

• instalaciones;

• productos realizados;

• imágenes de un evento;

• colección visual.

Si necesitas explicar:

qué proyecto es
+
qué se hizo
+
qué servicio se aplicó

puede convenir una estructura de Portfolio o Cards.

Cards

Cards ofrecen mayor libertad.

Puedes construir:

Image
Category
Heading
Paragraph
Link

exactamente como necesites.

Resumen

PORTFOLIO
→ proyectos o trabajos

GALLERY
→ colección principalmente visual

CARDS
→ composición personalizada

¿Cuál utilizaremos?

En este caso construiremos una versión personalizada utilizando:

• Section;

• Grid Row;

• Card;

• Image;

• Heading;

• Paragraph;

• Link.

También veremos cuándo puede ser más rápido comenzar con la sección prediseñada:

Portafolio

¿Qué información debería tener cada proyecto?

Una estructura sólida puede incluir:

IMAGEN
↓
CATEGORÍA / TIPO
↓
NOMBRE DEL PROYECTO
↓
DESCRIPCIÓN BREVE
↓
LINK OPCIONAL

Por ejemplo

[ IMAGEN ]

E-COMMERCE

Proyecto Empresa ABC

Desarrollo e implementación de una Página web orientada a la presentación y comercialización de productos.

Ver proyecto →

Utiliza únicamente información verdadera.

No necesitas mostrar todos esos elementos

Un proyecto también puede ser:

IMAGEN
+
NOMBRE

O:

IMAGEN
+
NOMBRE
+
CATEGORÍA

Depende de cuánto contexto necesite el visitante.

¿Qué debería responder una Card?

Idealmente:

¿QUÉ ESTOY VIENDO?

Y, cuando corresponda:

¿QUÉ TRABAJO SE REALIZÓ?

Y:

¿PUEDO CONOCER MÁS?

No conviertas cada Card en un caso de estudio completo

La Card resume.

Una página individual puede desarrollar:

• problema;

• solución;

• proceso;

• imágenes;

• resultado.

Paso 1. Selecciona los proyectos

Antes de diseñar crea una lista.

Por ejemplo:

Proyecto A
Proyecto B
Proyecto C
Proyecto D
Proyecto E
Proyecto F

Para cada uno recopila

Nombre:
Cliente:
Tipo de proyecto:
Descripción:
Imagen:
URL:

cuando esos datos correspondan y puedan publicarse.

No completes un campo inventando información

Si no tienes una métrica:

no agregues una.

Si no tienes una página individual:

no inventes una URL.

Paso 2. Decide qué proyectos tienen prioridad

No necesariamente tienes que mostrar:

los últimos seis

Puedes priorizar según:

• representatividad;

• variedad;

• calidad del material;

• relevancia para el público.

Por ejemplo

si ofreces:

Diseño web
E-commerce
Integraciones

puede ser útil mostrar ejemplos de varias áreas.

Pero no inventes diversidad

Si todavía no tienes un proyecto real de una categoría:

no lo presentes como realizado.

Paso 3. Revisa autorización y confidencialidad

Antes de publicar:

asegúrate de que el proyecto, imagen, marca o logo pueda mostrarse públicamente.

Especialmente si se trata de:

• trabajos internos;

• proyectos bajo confidencialidad;

• información privada;

• pantallas con datos de clientes;

• documentación interna.

Una captura puede contener:

• nombres;

• emails;

• teléfonos;

• pedidos;

• información comercial.

Revísala antes de publicarla.

No subas una captura directamente desde un sistema privado sin comprobar su contenido.

Paso 4. Cuidado con los logos

Mostrar:

LOGO DEL CLIENTE

puede aportar contexto.

Pero debe corresponder realmente al proyecto mostrado y debes tener derecho o autorización para utilizarlo cuando corresponda.

No utilices logos de marcas conocidas simplemente para:

“hacer que la sección parezca más importante”.

Un logo puede hacer pensar que existe:

• relación comercial;

• trabajo realizado;

• asociación.

Si esa relación no existe:

no lo muestres.

Paso 5. Decide cuántos proyectos mostrar

Tres proyectos:

[ A ][ B ][ C ]

Cuatro:

[ A ][ B ]

[ C ][ D ]

o:

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

si el contenido es muy breve.

Seis:

[ A ][ B ][ C ]

[ D ][ E ][ F ]

Suele ser una cantidad muy cómoda para una Home.

Si tienes muchos más:

puede ser mejor:

proyectos destacados
+
CTA

Por ejemplo:

[ VER TODOS LOS PROYECTOS ]

No necesitas colocar 40 proyectos en la Home.

Paso 6. Abre el Editor

Desde:

Menúes

accede al Bloque editable correspondiente.

Puede ubicarse en:

• Home;

• página institucional;

• Servicios;

• una página específica de proyectos.

Paso 7. Revisa Portafolio prediseñado

Antes de construir manualmente:

abre:

Secciones → Portafolio

Revisa los diseños disponibles.

Si uno se adapta:

puedes utilizarlo.

Después modifica:

• Images;

• textos;

• Links;

• estilos.

Pero no asumas que cualquier elemento visual del diseño tiene comportamiento dinámico.

Por ejemplo

si ves:

categorías

comprueba si realmente funcionan como filtros antes de documentarlas o utilizarlas como tales.

Una etiqueta visual no crea automáticamente:

FILTRADO DINÁMICO

Paso 8. Si necesitas mayor control, crea una Section

Para nuestro caso:

agrega:

Section

Configura:

Container width:
Boxed

Y:

Container height:
Auto

No necesitamos Full Height.

La cantidad de proyectos determinará la altura.

Paso 9. Configura Padding

Como referencia:

72px arriba
72px abajo

Mobile puede necesitar menos.

Mantén coherencia con las demás Sections.

Paso 10. Crea el encabezado

Puedes utilizar:

Paragraph
Heading
Paragraph

Ejemplo

Texto superior:

NUESTRO TRABAJO

Heading:

Conoce algunos de nuestros proyectos

Paragraph:

Una selección de trabajos realizados en diferentes tipos de proyectos.

solo si esta descripción es correcta.

No escribas:

Más de 500 proyectos exitosos

si no tienes datos reales para afirmarlo.

Paso 11. Jerarquía

Si la página ya tiene H1:

el encabezado puede ser:

H2

Los títulos de proyectos pueden utilizar:

H3

Conceptualmente:

H1
Página principal

    H2
    Proyectos realizados

        H3
        Proyecto A

        H3
        Proyecto B

        H3
        Proyecto C

Paso 12. Agrega Grid Row

Debajo del encabezado:

Grid Row

Para tres proyectos por fila:

4 + 4 + 4

Desktop:

[ A ][ B ][ C ]

Tablet:

[ A ][ B ]

[ C ][ D ]

Mobile:

[ A ]

[ B ]

[ C ]

Paso 13. Configura responsive antes de terminar las Cards

Esto evita construir seis proyectos

y descubrir al final que:

tablet no funciona

Nuestro patrón será:

DESKTOP
3 columnas

TABLET
2 columnas

MOBILE
1 columna

Es un patrón muy robusto para proyectos con:

• Image;

• Heading;

• texto.

Paso 14. ¿Por qué no cuatro columnas?

Puede funcionar cuando cada proyecto utiliza:

imagen
+
título breve

Pero si agregas:

• categoría;

• Heading;

• Paragraph;

• CTA;

cuatro columnas pueden quedar demasiado estrechas.

Utiliza la cantidad que permita leer cómodamente.

Paso 15. Crea la primera Card

Dentro de la primera Column:

agrega:

Card

Estructura:

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

No necesitas todos los elementos.

Para nuestro ejemplo:

los utilizaremos para explicar cada opción.

Paso 16. Agrega Image

Dentro de Card agrega:

Image

Utiliza:

Set Image

Selecciona una imagen real del proyecto.

No utilices una imagen de stock que haga parecer que:

ese trabajo fue realizado por la empresa

si no corresponde.

Las imágenes de portafolio deben representar el trabajo mostrado.

Paso 17. Capturas de Páginas web

Si muestras un sitio:

puedes utilizar:

• captura de Home;

• vista de producto;

• composición de pantallas.

Revisa que la captura:

• sea legible;

• no contenga información privada;

• corresponda al proyecto.

Paso 18. No utilices capturas antiguas sin contexto

Si el proyecto cambió completamente después:

pregunta si la captura sigue representando:

el trabajo realizado

Puede utilizarse una versión histórica

si el contexto lo deja claro.

Pero no hagas pasar un estado antiguo por el estado actual del cliente.

Paso 19. Fotografía de trabajo físico

Para:

• instalaciones;

• obras;

• productos personalizados;

utiliza fotografías reales.

Revisa:

• iluminación;

• encuadre;

• privacidad;

• calidad.

Una buena Card necesita una imagen clara.

Paso 20. Proporción de Images

Este es uno de los puntos más importantes.

Evita:

A → 16:9
B → vertical
C → cuadrada

mostradas sin ningún tratamiento.

Puede provocar:

Cards visualmente desalineadas

Decide una proporción de presentación.

Por ejemplo:

16:9

O:

4:3

No existe una medida universal.

Lo importante:

mantener una lógica común.

Paso 21. Cover vs Contain

Para fotografía:

Cover

puede ser apropiado dentro de una caja común.

Pero puede recortar.

Para una captura completa de una interfaz:

Contain

puede ser preferible.

Ejemplo

Una captura contiene:

header
productos
footer

Cover puede cortar:

• Header;

• elementos laterales.

Si necesitas mostrar toda la interfaz:

Contain puede ser mejor.

Paso 22. No deformes

No obligues:

1200 × 800

a convertirse en:

600 × 200

mediante Width y Height incompatibles.

Utiliza:

• proporción;

• Cover;

• Contain;

según el caso.

Paso 23. Alt

Completa Alt según el contenido.

Por ejemplo:

Página principal del proyecto ABC mostrando el catálogo de productos

si eso describe realmente la captura.

No:

proyecto1

Paso 24. Categoría

Debajo de la Image puedes agregar un:

Paragraph

o un:

Badge

Ejemplo:

E-COMMERCE

O:

DISEÑO WEB

Esto ayuda a clasificar visualmente.

Pero cuidado

ETIQUETA DE CATEGORÍA
≠
FILTRO

El visitante puede ver:

E-COMMERCE

como información.

Eso no significa que al hacer clic:

se filtrarán todos los proyectos

Paso 25. Categorías y filtros

Si deseas:

TODOS
WEB
E-COMMERCE
DISEÑO

como filtros,

debes confirmar que la estructura o componente utilizado incluya realmente esa funcionalidad.

No construyas:

Links decorativos

y los presentes como:

filtros

si no hacen nada.

Un Paragraph o Badge puede mostrar categoría sin prometer interacción.

Paso 26. No inventes categorías

Si el proyecto fue:

Página institucional

no lo clasifiques como:

E-commerce

solo para completar una categoría.

La clasificación también debe ser precisa.

Paso 27. Agrega Heading

Ejemplo:

Proyecto ABC

Puede corresponder a:

H3

según la jerarquía.

También puede utilizar:

• nombre del proyecto;

• tipo de trabajo;

si no deseas publicar el nombre del cliente.

Por ejemplo:

Página web para empresa industrial

Eso puede ser apropiado si necesitas mantener la identidad privada.

Paso 28. No publiques el cliente si no corresponde

No necesitas escribir:

Cliente:
Empresa XYZ

si ese dato:

• no puede divulgarse;

• no aporta.

Puedes describir el proyecto de forma genérica.

Por ejemplo:

Portal comercial para empresa de distribución

Sin revelar información innecesaria.

Paso 29. Agrega Paragraph

Puede explicar brevemente:

qué trabajo se realizó

Ejemplo:

Desarrollo de una Página web orientada a presentar el catálogo y organizar diferentes líneas de productos.

si eso describe realmente el proyecto.

No necesitas una historia completa.

Paso 30. Evita descripciones vagas

Ejemplo:

Un proyecto increíble con excelentes resultados.

No explica:

• qué se hizo;

• qué tipo de proyecto fue.

Mejor:

Diseño y configuración de una Página web institucional con catálogo de productos.

si corresponde.

Paso 31. Evita adjudicarte trabajos que no realizaste

Si tu participación fue:

integración técnica

no escribas:

Diseñamos y desarrollamos toda la identidad, estrategia y plataforma

si no fue así.

Describe tu alcance real.

Esto mejora la precisión del portafolio.

Paso 32. Resultados

Puedes mostrar resultados cuando:

• son reales;

• pueden verificarse;

• corresponde publicarlos.

Por ejemplo:

Se migraron X productos

si el dato es real.

Pero no inventes:

+40 % conversiones

O:

3× más ventas

solo porque una Card “necesita una métrica”.

Un proyecto puede ser convincente sin estadísticas.

Paso 33. Testimonios dentro de proyectos

Si incorporas una cita:

debe ser un testimonio real.

No generes con IA:

“Estamos encantados con los resultados”
— Cliente X

si el cliente nunca lo dijo.

Si deseas prueba social:

utiliza testimonios reales y autorizados.

Paso 34. Agrega Link si existe una página individual

Por ejemplo:

Ver proyecto →

Configura:

Url

Puede llevar a:

• caso de estudio;

• página de proyecto;

• contenido relacionado.

Paso 35. No agregues Link si no existe destino

Si no tienes una página:

no uses:

Ver proyecto →
#

Puedes dejar la Card como:

Image
Category
Heading
Description

Eso es perfectamente válido.

Otra opción

utilizar un CTA general:

[ CONOCER NUESTRO TRABAJO ]

cuando exista una página general.

Paso 36. Link externo al proyecto

Podrías enlazar al sitio público realizado

si corresponde y está disponible.

Pero considera:

• el sitio puede haber cambiado;

• el cliente puede modificarlo;

• puede dejar de existir.

Si enlazas:

revisa periódicamente.

Y deja claro qué encontrará el visitante.

Por ejemplo:

Visitar sitio →

es diferente de:

Ver caso de estudio →

Paso 37. No atribuyas el estado actual del sitio automáticamente a tu trabajo

Si enlazas a un sitio de un cliente:

puede haber sido modificado después.

El proyecto presentado y el sitio actual pueden no ser idénticos.

Si eso puede generar confusión:

utiliza capturas y una descripción clara del alcance realizado.

Paso 38. Card clicable vs CTA visible

Una Card puede tener:

Image
Heading
Paragraph
Link

Solo el Link es necesariamente clicable.

La Card entera:

no es automáticamente un Link

Esto es importante porque un Hover fuerte puede hacer pensar:

“puedo hacer clic en cualquier lugar”.

Paso 39. CTA explícito

Una opción muy clara:

Ver proyecto →

El visitante entiende dónde está la acción.

Para la mayoría de los casos:

es una solución robusta.

Paso 40. Si quieres toda la Card clicable

Debes revisar cuidadosamente la estructura.

No crees:

Link externo
└── otros Links internos

Links anidados pueden generar problemas.

Si toda la Card es una sola navegación:

construye una estructura semánticamente coherente.

Pero no es necesario para conseguir un buen portafolio.

Paso 41. Hover

Una Card de proyecto puede utilizar:

• sombra;

• Border;

• pequeña elevación;

• cambio sutil de Image;

según diseño.

Por ejemplo:

Normal:

Card estable

Hover:

elevación ligera

Evita:

zoom enorme
+
rotación
+
Overlay
+
texto aparece
+
Button se mueve

todo simultáneamente.

Paso 42. Hover de Image

Puede utilizarse una pequeña ampliación visual.

Pero cuidado

si utilizas:

transform: scale(...)

debes controlar:

• Overflow;

• recorte.

Y mantener el resultado usable.

No necesitas Zoom para que una Card sea profesional.

Paso 43. No ocultes toda la información hasta Hover

Ejemplo problemático:

Normal:

solo Image

Hover:

Título
Descripción
Link

En touch puede ser incómodo.

Si el contenido es importante:

mantén al menos:

• título;

• contexto;

visible.

Paso 44. Overlay sobre la Image

Puede utilizarse para mostrar:

categoría
+
título

sobre la fotografía.

Pero debes revisar:

• contraste;

• mobile;

• touch.

Una Card con contenido debajo de la Image suele ser más simple y robusta.

Paso 45. Construye una Class base

A la Section:

portfolio-section

A Cards:

portfolio-card

A Images:

portfolio-image

A categorías:

portfolio-category

Son nombres de ejemplo.

Utiliza Classes cuando faciliten el mantenimiento.

Paso 46. Linked styles

Todas las Cards pueden compartir:

portfolio-card

Esto permite mantener:

• Border radius;

• Padding;

• Background;

• sombra.

Todas las Images:

portfolio-image

pueden compartir:

• proporción visual;

• comportamiento.

Esto es exactamente un caso donde los estilos compartidos resultan útiles.

Paso 47. No utilices IDs para estilos repetidos

Evita:

#project-1-image
#project-2-image
#project-3-image

con las mismas reglas.

Utiliza:

portfolio-image

ID solo si existe una necesidad única.

Paso 48. Clona la Card completa

Cuando el primer proyecto esté correctamente diseñado:

selecciona:

Card

en Navigator.

Utiliza:

Clonar

Después crea:

Proyecto A
Proyecto B
Proyecto C

Clonar la unidad completa mantiene:

• estructura;

• Classes;

• diseño.

Paso 49. Después de clonar, cambia TODO

Revisa:

IMAGE
ALT
CATEGORY
HEADING
PARAGRAPH
LINK TEXT
URL
ID

No solamente:

HEADING

Paso 50. Error típico de clonación

Original:

Proyecto Web A
Ver proyecto →
/proyectos/web-a

Copia:

Proyecto Web B
Ver proyecto →
/proyectos/web-a

La Card se ve correcta.

Pero lleva al proyecto equivocado.

Prueba cada Link.

Paso 51. Otro error: Image clonada

Proyecto B:

Heading B

pero continúa mostrando:

Image A

Puede ser especialmente grave en un portafolio.

El visitante podría asociar una imagen al cliente equivocado.

Revisa cuidadosamente.

Paso 52. Alt después de clonar

No dejes:

Alt:
Página del Proyecto A

en:

Proyecto B

Actualízalo.

Paso 53. Categoría clonada

También:

E-COMMERCE

puede permanecer accidentalmente en un proyecto:

INSTITUCIONAL

Revisa todos los textos pequeños.

Paso 54. IDs clonados

Si la Card utiliza:

id="proyecto-a"

la copia no debe conservarlo.

Utiliza IDs únicos cuando sean necesarios.

No es obligatorio agregar ID a cada Card.

Paso 55. No dupliques URLs de proyectos externos

Especialmente si cada Card apunta a un sitio distinto.

Pruébalas todas.

Paso 56. Alturas de Cards

Puede ocurrir:

Proyecto A
descripción corta

Proyecto B:

descripción mucho más larga

Y las Cards quedan de alturas diferentes.

No utilices inmediatamente:

height: 450px;

Primero revisa contenido.

Paso 57. Resume las descripciones

Una Card de portafolio no necesita contar:

• todo el proceso;

• cada desafío;

• todos los resultados.

Esa información pertenece al caso de estudio.

Mantén una extensión similar en función,

no necesariamente en cantidad exacta de caracteres.

Paso 58. CTA al final de Cards

Si quieres alinear los Links hacia abajo

puedes utilizar una estructura flexible localizada.

Conceptualmente:

.portfolio-section .portfolio-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

Y para el CTA:

.portfolio-section .portfolio-card-link {
    margin-top: auto;
}

Solo si:

• tus Classes existen;

• la estructura real es compatible.

No copies CSS automáticamente.

Paso 59. No utilices Position absolute para el CTA

Evita:

position:absolute;
bottom:20px;

Puede superponerse cuando la descripción crece.

Flexbox suele ser más flexible si necesitas esta alineación.

Paso 60. No utilices Height fija de la Image sin comprender Cover

Puedes definir una zona visual común.

Pero si usas:

Height fija

debes decidir qué ocurre con la imagen.

Cover:

recorta

Contain:

conserva completa

Utiliza según el material.

Paso 61. Capturas de software con fondo común

Si todas tienen proporciones diferentes:

puedes utilizar un contenedor visual como:

fondo neutro
+
Image en Contain

Así puedes mantener un marco consistente

sin cortar la captura.

Es una alternativa útil.

Paso 62. Fotografías con Cover

Para proyectos fotográficos:

puede resultar apropiado:

marco común
+
Cover

Pero revisa que:

• personas;

• producto;

• obra;

no queden recortados de forma problemática.

Paso 63. Una misma estrategia no sirve para todo

No apliques:

Cover

a:

• fotografías;

• capturas;

• logos;

indistintamente.

El contenido visual determina el tratamiento.

Paso 64. Logos como Image

Un logo normalmente necesita mostrarse completo.

Por eso:

Contain

suele ser conceptualmente más apropiado que Cover.

No recortes:

• nombre;

• isotipo.

Paso 65. Logos de tamaños diferentes

Puede ocurrir:

Logo A muy horizontal
Logo B cuadrado
Logo C vertical

Utiliza un marco común

y deja que el logo:

se adapte dentro

No estires todos al mismo Width y Height deformándolos.

Paso 66. ¿Logo o captura?

Pregunta:

¿Qué demuestra mejor el trabajo?

Un logo solamente demuestra:

quién era el cliente

Una captura puede mostrar:

qué se realizó

Cuando sea posible:

el trabajo visual suele ser más informativo que el logo.

Paso 67. Logo + proyecto

Puedes combinar:

Logo pequeño
+
Image del proyecto

Pero no sobrecargues.

La Image principal debería seguir teniendo protagonismo.

Paso 68. Portfolio vs logos de clientes

Si solamente quieres mostrar:

marcas que trabajan con la empresa

eso puede ser otra sección distinta.

No necesariamente un Portafolio.

Puede ser:

CLIENTES
[ logos ]

Pero recuerda:

mostrar esos logos implica comunicar una relación.

Utiliza únicamente marcas reales que corresponda mostrar.

Paso 69. Categorías visuales

Puedes crear:

WEB
E-COMMERCE
INTEGRACIONES

mediante Badge o Paragraph.

Mantén:

• Typography;

• color;

• tamaño;

consistentes.

No necesitas colores completamente diferentes.

Paso 70. Badge de categoría

Puede utilizar:

[ E-COMMERCE ]

Pero Badge no crea un filtro.

Es simplemente una etiqueta,

salvo que exista otra funcionalidad específica.

Paso 71. No hagas parecer clicable una categoría que no lo es

Evita:

cursor pointer
+
Hover

sobre un Badge puramente informativo.

El visitante podría intentar filtrar.

Diseño y función deben coincidir.

Paso 72. Filtros manuales falsos

No construyas:

TODOS | WEB | E-COMMERCE

como texto decorativo

si al hacer clic no sucede nada.

Si no existe filtrado:

puedes simplemente utilizar:

categoría dentro de cada Card

Mucho más claro.

Paso 73. Si existe una funcionalidad real de filtro

Entonces debes comprobar:

• qué controla;

• qué categorías reconoce;

• qué ocurre en mobile.

Pero no la daremos por supuesta.

La apariencia del componente no es prueba de funcionalidad.

Paso 74. Portfolio y Gallery

Si tienes un proyecto con muchas imágenes

puedes presentar:

Card del proyecto
→ página individual
→ Gallery

Esto es mejor que colocar:

15 imágenes del mismo proyecto

dentro de la grilla principal.

El Portafolio presenta.

Gallery desarrolla el contenido visual.

Paso 75. Image Compare para antes/después

Si tienes un trabajo con:

ANTES
+
DESPUÉS

y ambas imágenes son comparables,

puedes evaluar:

Image Compare

Por ejemplo:

• rediseño;

• restauración;

• transformación visual.

Pero debe ser una comparación real.

No manipules imágenes para exagerar el resultado.

Las dos deberían tener:

• encuadre comparable;

• contexto suficiente.

Paso 76. Antes/después sin Image Compare

También puedes utilizar:

ANTES | DESPUÉS

mediante Grid.

Puede ser más claro cuando:

• el visitante necesita ver ambas simultáneamente.

No necesitas un componente interactivo obligatoriamente.

Paso 77. Gallery dentro de una Card

Evita introducir una Gallery completa dentro de cada Card

si el resultado se vuelve demasiado pesado.

Una Image representativa suele ser suficiente para la grilla.

Después puedes ampliar.

Paso 78. Video del proyecto

Puede utilizarse:

• en caso de estudio;

• como contenido destacado.

Pero seis videos embebidos en una grilla pueden:

• aumentar peso;

• distraer;

• cargar varios proveedores.

Para la lista principal:

una Image suele ser más eficiente.

Paso 79. Animaciones

Una vez que la grilla funcione:

puedes evaluar:

Animate on scroll

Por ejemplo:

animar:

Grid

o Cards suavemente.

No configures:

Proyecto A → Zoom
Proyecto B → Bounce
Proyecto C → Rotate

Mantén consistencia.

Paso 80. No retrases los proyectos

Una animación escalonada puede utilizar pequeños Delays.

Pero no hagas esperar varios segundos para:

Proyecto 6

El contenido debe poder descubrirse rápidamente.

Paso 81. Responsive de Hover

No dependas del Hover.

En mobile:

el visitante debe ver:

• Image;

• Heading;

• información importante.

La versión touch debe funcionar por sí misma.

Paso 82. Responsive 3 → 2 → 1

Nuestro patrón principal:

DESKTOP

[ A ][ B ][ C ]

[ D ][ E ][ F ]

Tablet:

[ A ][ B ]

[ C ][ D ]

[ E ][ F ]

Mobile:

[ A ]

[ B ]

[ C ]

[ D ]

[ E ]

[ F ]

Este patrón permite que:

• Images;

• títulos;

• descripciones;

mantengan un ancho cómodo.

Paso 83. No conserves tres columnas en tablet si no caben

Un proyecto con:

Heading de 3 líneas

puede volverse:

Heading de 6 líneas

Pasa a dos columnas.

No reduzcas Font size como primera solución.

Paso 84. No mantengas dos columnas en celulares estrechos si el contenido se comprime

Una Card con:

• categoría;

• título;

• texto;

puede necesitar todo el ancho.

Utiliza una columna.

Paso 85. Mobile y Images

Una Image debe:

• adaptarse al ancho;

• conservar proporción;

• no generar scroll horizontal.

Evita:

width:600px

fija.

Paso 86. Mobile y Padding

Una Card puede necesitar menos Padding

que en desktop.

Pero no lo elimines.

Debe conservar:

espacio interno

Paso 87. Mobile y Links

El CTA debe ser fácil de seleccionar.

No utilices un texto diminuto.

Y no dependas únicamente de una pequeña flecha.

Paso 88. Revisa la Card más difícil

Busca:

Heading más largo

Y:

descripción más larga

Y:

Image con proporción más problemática

Si esas funcionan:

la grilla tiene una base más robusta.

Paso 89. Revisa contenido real

No termines el diseño utilizando:

Proyecto 1
Lorem ipsum

Sustitúyelo por:

• títulos reales;

• Images reales;

• textos reales.

El portafolio es una de las secciones donde el material real cambia completamente el diseño.

Paso 90. No diseñes con seis imágenes perfectas de stock

y después intentes colocar:

capturas reales de proporciones distintas

Diseña desde temprano con el material definitivo.

Paso 91. Proyectos sin buena Image

Si un proyecto no tiene una buena fotografía:

no necesitas inventar una.

Puedes utilizar:

• captura real;

• representación apropiada;

• Card más textual;

según el caso.

Pero no utilices una imagen engañosa.

Paso 92. Proyectos antiguos

No necesitas eliminar automáticamente un proyecto porque sea antiguo.

Puede seguir siendo:

• representativo;

• relevante.

Pero revisa:

• Links;

• capturas;

• contexto.

Si el sitio externo ya no existe:

un Link “Visitar sitio” puede romperse.

Paso 93. Mantenimiento de Links

Periódicamente comprueba:

Ver proyecto
Visitar sitio
Ver caso

Los recursos externos pueden cambiar.

Si un proyecto desaparece:

puedes mantener el caso con material propio,

si corresponde,

pero elimina el Link roto.

Paso 94. Proyecto que ya no representa el nivel actual

También puedes actualizar la selección.

Un portafolio debería mostrar trabajos:

representativos

No necesariamente todos los trabajos históricos.

Paso 95. Fecha del proyecto

Puedes mostrar:

2026

cuando aporte contexto.

Pero no es obligatoria.

Si la fecha puede hacer parecer que un proyecto es actual cuando no lo es:

utilízala con precisión.

Paso 96. Estado del proyecto

Puedes indicar:

Proyecto realizado en 2025

si es relevante.

No utilices:

Activo

si no estás verificando realmente su estado.

Paso 97. Proyecto en proceso

Puedes mostrarlo solo si corresponde.

Por ejemplo:

EN DESARROLLO

Pero eso requiere mantenimiento.

Cuando finalice:

actualízalo.

Paso 98. CTA general

Después de los proyectos puedes agregar:

[ VER TODOS LOS PROYECTOS ]

Solo si existe:

• página;

• sección;

con más contenido.

No uses:

#

Paso 99. CTA de contacto después del Portfolio

También puede ser:

¿Quieres conversar sobre tu proyecto?

[ CONTACTAR ]

Puede ser un recorrido natural:

VER TRABAJOS
↓
CONFIANZA
↓
CONTACTAR

Esto conecta muy bien con el tutorial anterior de CTA.

Paso 100. No mezcles “Ver todos” y “Contactar” con el mismo peso

Puedes utilizar:

[ VER TODOS LOS PROYECTOS ]

¿Tienes un proyecto?
Contactar →

O priorizar una única acción.

Mantén jerarquía.

Paso 101. Section Background

Puedes utilizar:

• blanco;

• gris suave;

• otro color coherente.

Cards:

• fondo;

• Border;

• sombra.

Evita demasiados efectos.

Una sección de proyectos ya tiene:

mucho contenido visual

El diseño alrededor puede ser más sobrio.

Paso 102. No compitas con las Images

Si todas las Cards tienen:

• gradiente;

• sombras grandes;

• bordes de color;

• animaciones;

las fotografías pueden perder protagonismo.

El trabajo debe ser el centro.

Paso 103. Grid y separación

Mantén espacio entre:

• columnas;

• filas.

Especialmente:

fila 1

y:

fila 2

No deben parecer pegadas.

Paso 104. No utilices Margin derecho manual en cada Card

Evita:

.portfolio-card {
    margin-right: 30px;
}

sin considerar:

• última Card;

• Wrap.

Utiliza el Grid y una estrategia coherente.

Paso 105. No utilices Position absolute para la grilla

Evita:

.project-a {
    left:0;
}

.project-b {
    left:400px;
}

Grid ya resuelve la distribución.

Paso 106. No utilices Width fija

Evita:

.portfolio-card {
    width:350px;
}

como base.

Deja que:

Column

determine el ancho.

Paso 107. CSS localizado

Si necesitas ajustes:

.portfolio-section .portfolio-card {
    /* estilos */
}

No:

.card {
}

Puede afectar otras Cards.

Paso 108. Images localizadas

Evita:

img {
    border-radius:16px;
}

Mejor:

.portfolio-section .portfolio-image {
    /* estilos */
}

según tu estructura.

Paso 109. Heading localizado

Evita:

h3 {
}

si solo quieres modificar proyectos.

Utiliza scope.

Paso 110. Badge localizado

Evita modificar:

.badge {
}

globalmente.

Puede afectar otras secciones.

Paso 111. Bootstrap

Waclis utiliza:

Bootstrap 4

No agregues otra versión para construir una grilla.

Tampoco agregues:

• otra biblioteca de Grid;

• JavaScript;

sin necesidad.

Paso 112. No agregues una librería de Portfolio solo para filtros

Si deseas filtros:

primero comprueba las herramientas disponibles.

No cargues un plugin externo solamente porque un tutorial de Internet lo utiliza.

Puede:

• duplicar dependencias;

• generar conflictos.

Si necesitas un comportamiento que no está disponible:

evalúa primero si realmente es necesario.

Un portafolio sin filtros puede funcionar perfectamente.

Paso 113. No necesitas JavaScript para una grilla normal

Nuestro ejemplo:

Grid
+
Cards
+
Links

puede construirse sin JavaScript adicional.

Mantén la solución simple.

Paso 114. Navigator

La estructura puede verse conceptualmente:

SECTION .portfolio-section
├── Heading Area
│   ├── Paragraph
│   ├── H2
│   └── Paragraph
│
└── Grid Row
    ├── Column
    │   └── Card .portfolio-card
    │       ├── Image
    │       ├── Paragraph / Badge
    │       ├── H3
    │       ├── Paragraph
    │       └── Link
    │
    ├── Column
    │   └── Card .portfolio-card
    │
    └── Column
        └── Card .portfolio-card

Utiliza Navigator para:

• seleccionar Card completa;

• seleccionar Image;

• seleccionar Link;

• comprobar jerarquía.

Paso 115. Seleccionar padre

Si has seleccionado:

Paragraph

pero quieres clonar:

Card

utiliza:

Seleccionar padre

Hasta alcanzar la unidad correcta.

No clones solo el Paragraph.

Paso 116. Eliminar proyecto

Selecciona la Card completa.

Después:

Eliminar

Recuerda:

Waclis no solicita confirmación.

Si eliminas accidentalmente:

utiliza:

Deshacer

Paso 117. No elimines Column accidentalmente

Si quieres borrar un proyecto

y seleccionas:

Grid Row

puedes eliminar más de lo esperado.

Confirma en Navigator.

Paso 118. Reemplazar un proyecto

Puedes reutilizar una Card existente.

Pero revisa:

Image
Alt
Category
Heading
Description
Link
URL
Id

Es equivalente al proceso de clonación.

Paso 119. Guardar por etapas

Después de:

Grid

→ Guardar Cambios

Después:

contenido real

→ Guardar Cambios

Después:

responsive + diseño

→ Guardar Cambios

No asumimos autosave.

Paso 120. Ver página

Utiliza:

Ver página

Recorre la sección como visitante.

No evalúes únicamente:

“las Cards están alineadas”.

Pregunta:

• ¿entiendo qué trabajo muestra cada una?

• ¿las imágenes son claras?

• ¿sé dónde hacer clic?

Paso 121. Prueba todos los Links

Proyecto A:

Ver proyecto →

Proyecto B:

Ver proyecto →

Proyecto C:

Ver proyecto →

Haz clic en todos.

Clonar Cards hace especialmente importante esta prueba.

Paso 122. Comprueba Links externos

Si conducen a sitios de terceros:

verifica que:

• siguen disponibles;

• son los destinos correctos.

Paso 123. Revisa desktop

Comprueba:

• tres columnas;

• Images;

• títulos;

• categorías;

• Cards.

Pregunta:

¿Los proyectos son el elemento protagonista?

Paso 124. Revisa monitor grande

Boxed debería ayudar a mantener:

Cards con ancho razonable

No aumentes el Container indefinidamente.

Paso 125. Revisa tablet

Comprueba:

2 columnas

Especialmente:

• títulos largos;

• Links;

• Image.

Paso 126. Revisa mobile

Comprueba:

1 columna

Observa:

• tamaño Image;

• Paragraph;

• CTA;

• separación.

Paso 127. Revisa el orden de proyectos en mobile

En desktop:

A B C
D E F

Mobile:

normalmente debería convertirse de forma predecible:

A
B
C
D
E
F

Comprueba el Navigator y Grid.

Paso 128. No alteres el orden visual solamente para rellenar huecos

Por ejemplo:

si una Card es más alta

no reorganices:

A C E
B D F

solo para conseguir una grilla tipo Masonry,

a menos que realmente estés utilizando y comprendiendo ese patrón.

Para un portafolio simple:

un orden predecible suele ser más fácil de mantener.

Paso 129. ¿Qué hacer si una Image no carga?

Comprueba:

• recurso seleccionado;

• URL;

• archivo.

No la sustituyas por una imagen genérica sin relación.

Paso 130. ¿Qué hacer si una Image está pixelada?

Puede ser demasiado pequeña para el área.

Utiliza un archivo de resolución apropiada.

Pero no subas un recurso desproporcionadamente grande sin necesidad.

Busca equilibrio:

calidad
+
peso

Paso 131. ¿Qué hacer si una captura tiene texto ilegible?

Puede ser:

• demasiado detallada;

• demasiado pequeña.

Considera:

• recortar una zona relevante;

• utilizar una captura diferente;

• ampliar en una página individual.

No intentes hacer toda la Card enorme.

Paso 132. ¿Qué hacer si una captura necesita verse completa?

Utiliza:

Contain

cuando sea apropiado.

Paso 133. ¿Qué hacer si queda espacio vacío alrededor con Contain?

Puede ser normal.

Puedes utilizar:

fondo neutro

en el marco.

No cambies a Cover automáticamente si se perdería información.

Paso 134. ¿Qué hacer si una fotografía queda mal con Contain?

Probablemente:

Cover

sea visualmente más adecuado.

Siempre comprobando el recorte.

Paso 135. ¿Qué hacer si los proyectos tienen proporciones completamente diferentes?

Crea un marco visual común.

Y decide individualmente:

• Cover;

• Contain;

según el tipo de recurso.

No deformes.

Paso 136. ¿Qué hacer si solo tengo dos proyectos?

Puedes utilizar:

6 + 6

No necesitas crear una tercera Card vacía.

Mejor:

[ Proyecto A ][ Proyecto B ]

Dos trabajos reales siguen siendo mejores que agregar uno ficticio.

Paso 137. ¿Qué hacer si solo tengo un proyecto?

Puedes convertirlo en:

caso destacado

Por ejemplo:

[ IMAGEN GRANDE ][ TEXTO DEL PROYECTO ]

No necesitas una grilla.

Utiliza texto + imagen.

Paso 138. ¿Qué hacer si tengo cuatro proyectos?

Puedes utilizar:

[ A ][ B ]

[ C ][ D ]

Muy cómodo.

O cuatro columnas si el contenido es mínimo y funciona en desktop.

Revisa tablet.

Paso 139. ¿Qué hacer si tengo nueve proyectos?

Puedes utilizar:

3 × 3

Pero pregunta si todos necesitan estar en esa página.

Una Home puede mostrar:

6 destacados

y llevar a:

Portafolio completo

Paso 140. ¿Qué hacer si quiero ordenar por fecha?

Puedes ordenar manualmente.

No asumas que el Grid se ordena automáticamente.

Puedes utilizar:

más recientes primero

si esa es tu estrategia.

Paso 141. ¿Qué hacer si quiero ordenar por relevancia?

También.

Pero no utilices etiquetas como:

Más exitoso

sin datos.

Simplemente organiza visualmente.

Paso 142. ¿Qué hacer si quiero una categoría “Destacado”?

Puede ser:

DESTACADO

como Badge

si representa una selección editorial.

No implica necesariamente:

• ventas;

• popularidad.

Puedes explicar qué significa si es necesario.

Paso 143. ¿Qué hacer si quiero un proyecto principal más grande?

Puedes utilizar una composición:

[        PROYECTO DESTACADO         ]

[ Proyecto B ][ Proyecto C ]

Es una variante válida.

Pero necesitas una estructura diferente del Grid uniforme.

No fuerces una Card estándar a ocupar dos columnas mediante márgenes.

Diseña la grilla conscientemente.

Paso 144. ¿Qué hacer si quiero una sección Masonry?

Es un patrón diferente.

No asumas que Gallery o Portfolio genera Masonry automáticamente.

Si el componente disponible ofrece ese diseño:

puedes utilizarlo.

Si no:

no agregues una biblioteca externa sin evaluar necesidad.

Paso 145. ¿Qué hacer si quiero Lightbox?

Gallery puede ser más apropiada si el objetivo es:

abrir imágenes ampliadas

Pero no asumimos que toda Gallery incorpora Lightbox.

Comprueba el comportamiento real.

Portfolio y Lightbox no son lo mismo.

Paso 146. ¿Qué hacer si quiero abrir un detalle sin cambiar de página?

Eso requiere una interacción específica.

No simules un modal mediante un Link #.

Si no existe esa funcionalidad:

utiliza:

• página individual;

• información dentro de Card.

Paso 147. ¿Qué hacer si quiero mostrar el cliente pero no el proyecto?

Entonces probablemente estás creando:

sección de clientes

No un portafolio.

Usa la estructura que represente correctamente el contenido.

Paso 148. ¿Qué hacer si quiero mostrar proyectos confidenciales?

No publiques información confidencial.

Puedes describir de forma anonimizada:

Proyecto para empresa del sector industrial

cuando eso sea apropiado.

Pero evita información que permita identificar datos que deban permanecer privados.

Paso 149. ¿Qué hacer si quiero ocultar datos de una captura?

Lo ideal es preparar una imagen segura antes de publicarla.

No confíes solamente en:

poner otra capa encima mediante CSS

El archivo original puede seguir siendo accesible.

Utiliza un recurso ya preparado para publicación.

Paso 150. ¿Qué hacer si una Card utiliza un cliente conocido?

No necesitas exagerarlo.

Proyecto:

Nombre real

Descripción:

Trabajo real realizado

Eso es suficiente.

No agregues:

“líder mundial que confió exclusivamente en nosotros”

si no corresponde.

Paso 151. Utilizar IA para organizar proyectos

Puedes utilizar ChatGPT, Claude o Gemini.

Prompt

Tengo estos proyectos reales:

[lista]

Para cada uno dispongo de:
- nombre;
- tipo de proyecto;
- trabajo realizado;
- imagen;
- URL opcional.

Organízalos para una sección de portafolio.

No inventes:
- clientes;
- métricas;
- testimonios;
- resultados;
- categorías que no puedan inferirse de los datos.

IA para redactar Cards

Proyecto:
[nombre]

Trabajo realizado:
[descripción real]

Necesito:
- categoría de máximo 3 palabras;
- Heading de máximo 8 palabras;
- descripción de máximo 30 palabras.

No agregues resultados ni tareas que no fueron mencionadas.

IA para revisar precisión

Estos son los datos reales del proyecto:

[datos]

Este es el texto que quiero publicar:

[texto]

Identifica afirmaciones que no estén respaldadas por los datos suministrados.

No las corrijas todavía.

IA para elegir proyectos destacados

Tengo estos proyectos:

[lista con información]

Necesito seleccionar 6 para Home.

Evalúa solamente según:
- variedad;
- representatividad de servicios;
- calidad del material disponible.

No inventes importancia comercial ni resultados.
Separa:
- candidatos principales;
- secundarios.

IA para ordenar

Estos son mis 6 proyectos:

[lista]

Propón un orden visual que:
- alterne tipos de proyecto;
- evite demasiados elementos similares juntos.

No cambies categorías ni inventes información.

IA para decidir Portfolio vs Gallery

Tengo este contenido:

[describir]

Necesito decidir entre:
- Portfolio;
- Gallery;
- Cards personalizadas.

Analiza según:
- cantidad de información por elemento;
- importancia de la imagen;
- necesidad de Link individual.

No generes código.

IA para categorías

Proyectos reales:

[lista]

Agrúpalos utilizando únicamente categorías que puedan derivarse claramente de la información suministrada.

No inventes filtros.
No generes funcionalidad.
Solo propón etiquetas de categoría.

IA para revisar un supuesto filtro

Tengo estos elementos visuales en mi sección:

TODOS
WEB
E-COMMERCE

Actualmente:
[describir comportamiento real]

Analiza si puedo llamarlos “filtros” o si son solamente etiquetas/Links.

No asumas funcionalidad no descrita.

IA para imágenes

Tengo estas imágenes de proyectos:

1. [proporción y contenido]
2. [proporción y contenido]
3. [proporción y contenido]

Analiza:
- qué imágenes podrían utilizar Cover;
- cuáles necesitan Contain;
- cómo mantener un marco visual consistente.

No propongas recortes que eliminen información esencial.

IA para capturas

Tengo una captura de una Página web para utilizar en un portafolio.

Describe un checklist para revisar antes de publicarla:
- datos personales;
- emails;
- teléfonos;
- información privada;
- legibilidad;
- vigencia.

No inventes contenido de la captura.

IA para Cards clonadas

Card original:
[HTML]

Card clonada:
[HTML]

Busca:
- Image repetida;
- Alt repetido;
- categoría repetida;
- Heading repetido;
- Paragraph repetido;
- href repetido;
- IDs repetidos.

No inventes reemplazos.

IA para responsive

Tengo 6 Cards de portafolio.

Cada una contiene:
- Image;
- Badge;
- H3;
- Paragraph;
- Link.

Objetivo:
Desktop: 3 columnas.
Tablet: 2.
Mobile: 1.

Waclis utiliza Bootstrap 4.

Explícame cómo organizarlo mediante Grid Row.

No generes CSS si puede resolverse desde el Grid del Editor.

IA para Hover

Tengo Cards:

.portfolio-section .portfolio-card

Solo el Link interno es clicable.

Necesito un Hover sutil que no haga pensar que toda la Card es clicable.

No ocultes contenido.
No cambies layout.
No utilices JavaScript.

Devuélveme solamente CSS localizado.

IA para CSS localizado

Section:
.portfolio-section

Card:
.portfolio-card

Image:
.portfolio-image

Category:
.portfolio-category

Necesito:
- estilos únicamente para el portafolio;
- no modificar otras Cards;
- no modificar otras Images;
- no modificar Badges globales.

Waclis utiliza Bootstrap 4.

No agregues JavaScript.
Devuélveme solo CSS localizado.

IA para detectar CSS global

Revisa este CSS:

[pegar]

Busca selectores demasiado globales sobre:

.card
img
h3
p
a
.badge
.row
.col

Indica qué otras partes de Waclis podrían verse afectadas.

No modifiques el código.

IA para casos de estudio

Tengo estos datos reales de un proyecto:

Cliente:
[si puede publicarse]

Situación:
[...]

Trabajo realizado:
[...]

Resultado verificable:
[...]

Ayúdame a estructurar un caso de estudio con:
- introducción;
- necesidad;
- solución;
- resultado.

No inventes información para completar campos faltantes.
Si falta un dato, indícalo.

IA para detectar afirmaciones inventadas

Datos reales:
[pegar]

Texto actual del portafolio:
[pegar]

Marca cualquier:
- porcentaje;
- resultado;
- testimonio;
- relación comercial;
- tarea realizada;

que no esté respaldada por los datos.

No reescribas todavía.

IA para mantenimiento

Tengo esta lista de proyectos publicados:

[lista]

Crea un checklist periódico para revisar:
- Links;
- Images;
- clientes;
- categorías;
- fechas;
- proyectos que ya no representan el portafolio.

No propongas eliminar proyectos sin indicar el motivo.

Buenas prácticas

Recomendamos:

• utilizar proyectos reales;

• elegir trabajos representativos;

• revisar permiso y confidencialidad;

• utilizar Images auténticas;

• mantener proporciones coherentes;

• utilizar Cover o Contain según el contenido;

• completar Alt;

• utilizar categorías reales;

• no presentar etiquetas como filtros si no lo son;

• utilizar Heading claros;

• describir el trabajo realmente realizado;

• utilizar Links solo cuando existe destino;

• probar todas las URLs;

• clonar Card completa;

• actualizar toda la información clonada;

• mantener IDs únicos;

• utilizar Classes compartidas;

• probar 3 → 2 → 1;

• revisar contenido real;

• mantener el portafolio actualizado.

Errores frecuentes

Inventar proyectos para completar la grilla

Muestra solo trabajos reales.

Mostrar logos de empresas sin relación real

No comuniques una asociación inexistente.

Inventar métricas

Utiliza resultados verificables.

Generar testimonios ficticios con IA

No atribuyas declaraciones inexistentes.

Afirmar que realizaste tareas que no hiciste

Describe tu alcance real.

Publicar una captura con información privada

Revísala previamente.

Utilizar Image de stock como si fuera el proyecto

La Image debe representar el trabajo.

Utilizar Gallery cuando necesitas explicar cada proyecto

Considera Portfolio o Cards.

Utilizar Cards cuando solo necesitas mostrar fotografías

Gallery puede ser más simple.

Utilizar etiquetas de categoría como falsos filtros

No prometas funcionalidad inexistente.

Hacer que una categoría parezca clicable sin serlo

Mantén coherencia.

Utilizar Cover sobre una captura importante

Puede cortar información.

Utilizar Contain para fotografías sin evaluar el resultado

Puede dejar demasiado espacio.

Deformar Images

Mantén proporción.

Mezclar proporciones sin tratamiento

Crea un sistema visual.

Utilizar cuatro columnas con descripciones largas

Reduce columnas.

Mantener tres columnas en tablet aunque queden estrechas

Pasa a dos.

Mantener dos columnas en mobile sin comprobar

Una puede ser mejor.

Diseñar con Lorem Ipsum

Utiliza proyectos reales cuanto antes.

Diseñar con imágenes perfectas de stock y reemplazarlas al final

Trabaja con material real.

Clonar Card y dejar Image original

Revisa todo.

Clonar Alt

Actualiza.

Clonar categoría

Revisa.

Clonar URL

Prueba cada Link.

Duplicar IDs

Mantén unicidad.

Agregar “Ver proyecto” con #

Elimina el CTA si no hay destino.

Hacer toda la Card parecer clicable cuando solo funciona el Link

Mantén coherencia visual.

Ocultar información hasta Hover

Touch debe funcionar.

Utilizar Hover excesivo

El proyecto debe ser protagonista.

Fijar Height de Card

Puede cortar contenido.

Fijar Heading Height

Puede fallar con texto real.

Utilizar Position absolute para CTA

Utiliza estructura flexible.

Utilizar Width fija de Card

Deja trabajar al Grid.

Utilizar Position absolute para la grilla

Utiliza Grid Row.

Aplicar .card globalmente

Puede afectar otras Cards.

Aplicar img globalmente

Puede afectar todo el sitio.

Aplicar .badge globalmente

Puede modificar otros componentes.

Aplicar .row globalmente

Puede romper otros Grids.

Agregar Bootstrap adicional

Waclis ya utiliza Bootstrap 4.

Agregar una biblioteca de Portfolio sin necesidad

Utiliza primero las herramientas existentes.

Inventar filtros con JavaScript sin necesidad

Una grilla simple puede ser suficiente.

No revisar Links externos con el tiempo

Pueden quedar obsoletos.

No actualizar proyectos antiguos

Mantén el portafolio representativo.

Flujo profesional recomendado

1. LISTAR PROYECTOS REALES
↓
2. REVISAR QUÉ PUEDE PUBLICARSE
↓
3. SELECCIONAR PROYECTOS DESTACADOS
↓
4. REUNIR IMÁGENES REALES
↓
5. DEFINIR INFORMACIÓN POR CARD
↓
6. ELEGIR PORTFOLIO / GALLERY / CARDS
↓
7. CREAR SECTION
↓
8. CONFIGURAR BOXED / AUTO
↓
9. CREAR ENCABEZADO
↓
10. AGREGAR GRID ROW
↓
11. CONFIGURAR 3 COLUMNAS DESKTOP
↓
12. CONFIGURAR 2 TABLET
↓
13. CONFIGURAR 1 MOBILE
↓
14. CREAR PRIMERA CARD
↓
15. AGREGAR IMAGE
↓
16. CONFIGURAR ALT
↓
17. AGREGAR CATEGORÍA
↓
18. AGREGAR H3
↓
19. AGREGAR DESCRIPCIÓN
↓
20. AGREGAR LINK SI EXISTE DESTINO
↓
21. CREAR CLASSES
↓
22. CLONAR CARD
↓
23. ACTUALIZAR TODA LA COPIA
↓
24. REVISAR IDS
↓
25. REVISAR LINKED STYLES
↓
26. REVISAR IMÁGENES
↓
27. CONFIGURAR HOVER SI APORTA
↓
28. REVISAR DESKTOP
↓
29. REVISAR TABLET
↓
30. REVISAR MOBILE
↓
31. GUARDAR CAMBIOS
↓
32. VER PÁGINA
↓
33. PROBAR TODOS LOS LINKS
↓
34. REVISAR PRECISIÓN DE LA INFORMACIÓN

Checklist de proyectos

• Todos los proyectos son reales.

• La empresa puede presentarlos públicamente.

• La participación descrita corresponde al trabajo realmente realizado.

• No inventé clientes.

• No inventé resultados.

• No inventé métricas.

• No inventé testimonios.

• No publiqué información confidencial.

• Los proyectos seleccionados son representativos.

Checklist de Images

• Cada Image corresponde al proyecto correcto.

• No utilicé stock engañoso.

• La resolución es suficiente.

• La imagen no contiene información privada.

• Alt corresponde a la Image.

• Elegí Cover o Contain conscientemente.

• No deformé la proporción.

• Existe coherencia visual entre proyectos.

• Desktop funciona.

• Tablet funciona.

• Mobile funciona.

Checklist de Cards

• Todas comparten una estructura coherente.

• Categoría es correcta.

• Heading es correcto.

• Descripción representa el trabajo real.

• El Link corresponde al proyecto.

• No existe CTA falso.

• Las Cards no tienen Height rígida problemática.

• Cloné la unidad completa.

• Actualicé todo después de clonar.

• Los IDs son únicos.

Checklist de categorías

• Las categorías representan realmente los proyectos.

• Utilizo un mismo criterio.

• No mezclé categorías de niveles diferentes sin necesidad.

• Un Badge informativo no parece un filtro.

• No llamo “filtro” a una opción que no filtra.

• No agregué comportamiento ficticio.

Checklist de interacción

• La Card se comprende sin Hover.

• La información principal siempre está visible.

• Hover es moderado.

• La Card no parece clicable si no lo es.

• El CTA visible tiene un destino real.

• No existen Links anidados incorrectamente.

• Touch funciona sin depender de Hover.

Checklist responsive

• Desktop utiliza una cantidad adecuada de columnas.

• Tablet utiliza 2 cuando corresponde.

• Mobile utiliza 1 cuando corresponde.

• Los Headings mantienen legibilidad.

• Las descripciones tienen ancho suficiente.

• Las Images no desbordan.

• Los Links son fáciles de utilizar.

• Existe separación entre filas.

• No existe scroll horizontal.

• No oculté proyectos solamente para resolver el layout.

Checklist técnico

• Utilicé Navigator.

• La Section tiene una Class propia si necesito CSS.

• Las Cards comparten una Class.

• Las Images comparten una Class cuando corresponde.

• Revisé Linked styles.

• Los IDs son únicos.

• No modifiqué .card globalmente.

• No modifiqué img globalmente.

• No modifiqué h3 globalmente.

• No modifiqué .badge globalmente.

• No modifiqué .row globalmente.

• No agregué Bootstrap.

• No agregué JavaScript innecesario.

• El CSS adicional tiene scope.

Checklist de Links

• Todos los Links tienen URL real.

• No existen valores #.

• Cada Card abre su proyecto correcto.

• “Visitar sitio” lleva al sitio correcto.

• “Ver proyecto” lleva al caso correcto.

• Target fue revisado.

• Los sitios externos continúan disponibles.

• No queda ninguna URL de una Card clonada.

Checklist de mantenimiento

• Revisaré periódicamente Links.

• Revisaré proyectos que ya no representan el nivel actual.

• Revisaré imágenes desactualizadas.

• Revisaré categorías.

• Revisaré proyectos marcados como “Nuevo”.

• Revisaré proyectos “En desarrollo”.

• Actualizaré casos cuando cambie información relevante.

• No dejaré Links externos rotos.

Checklist final

• Utilicé contenido real.

• Guardé los cambios.

• Utilicé Ver página.

• Probé todos los Links.

• Revisé desktop.

• Revisé tablet.

• Revisé celular.

• Revisé un dispositivo real cuando fue posible.

• La grilla se entiende sin Hover.

• Las Images corresponden a los proyectos.

• No hay información confidencial visible.

• No existen afirmaciones no verificadas.

• El visitante puede entender qué tipo de trabajos realiza la empresa.

En resumen

Antes de diseñar un portafolio debes decidir:

¿QUÉ QUIERO MOSTRAR?

Si el objetivo es principalmente visual:

GALLERY

puede ser apropiada.

Si quieres mostrar trabajos con contexto:

PORTFOLIO

o:

CARDS PERSONALIZADAS

pueden ser mejores.

Una Card profesional puede estructurarse:

IMAGE
↓
CATEGORY
↓
HEADING
↓
DESCRIPTION
↓
LINK OPCIONAL

Pero:

LINK OPCIONAL

significa exactamente eso.

Si no existe una página del proyecto:

no agregues:

Ver proyecto →
#

Puedes dejar la Card informativa.

Para una grilla completa

un patrón sólido es:

DESKTOP
3 columnas

Tablet:

2 columnas

Mobile:

1 columna

Respecto de Images:

FOTOGRAFÍA
→ Cover puede funcionar

Mientras:

CAPTURA / LOGO / PRODUCTO COMPLETO
→ Contain puede ser más apropiado

siempre según el contenido.

Respecto de categorías:

BADGE / TEXTO
→ categoría visual

No necesariamente:

FILTRO DINÁMICO

No prometas una interacción que no existe.

Respecto de la clonación:

IMAGE
ALT
CATEGORY
HEADING
DESCRIPTION
LINK
URL
ID

deben revisarse.

Respecto de la credibilidad:

PROYECTO REAL
+
DESCRIPCIÓN PRECISA

es mucho más valioso que:

PROYECTO INVENTADO
+
MÉTRICA IMPACTANTE

No inventes:

• clientes;

• logos asociados;

• porcentajes;

• ventas;

• conversiones;

• testimonios;

• tareas realizadas.

Finalmente

el flujo profesional es:

PROYECTOS REALES
↓
SELECCIONAR
↓
PREPARAR IMÁGENES
↓
DEFINIR CONTENIDO
↓
CREAR GRID
↓
CREAR CARD BASE
↓
CLONAR
↓
ACTUALIZAR TODO
↓
RESPONSIVE
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PROBAR LINKS
↓
REVISAR PRECISIÓN

Una sección de proyectos está correctamente construida cuando el visitante puede responder:

“Entiendo qué tipo de trabajos realiza esta empresa, puedo ver ejemplos reales y sé dónde obtener más información cuando está disponible.”

El objetivo del portafolio no es parecer más grande de lo que la empresa es.

El objetivo es mostrar de manera clara, atractiva y confiable el trabajo que realmente puede demostrar.