fanfuso/ayr2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

seccion portfolio finish

Browse Source
This commit is contained in:
fanfuso
2026-09-18 21:17:15 -03:00
parent 49e7206a6a
commit c86173f574
20 changed files with 623 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/main.css
+173 -29
View File
@@ -169,6 +169,18 @@ ul {
top: 0;
z-index: 100;
box-shadow: var(--shadow);
transition: transform 0.35s ease, box-shadow 0.35s ease;
will-change: transform;
}
.site-header.is-hidden {
transform: translateY(-100%);
box-shadow: none;
}
.site-header.is-scrolled {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
body.menu-open .site-header {
transform: translateY(0) !important;
}
.main-nav {
@@ -1967,7 +1979,9 @@ RESPONSIVE METODOLOGÍA
align-self: flex-start;
}
/* Columna Derecha: Carrusel */
/* ============================================
CARRUSEL DE PORTFOLIO (CON TAGS)
============================================ */
.portfolio-carousel {
position: relative;
width: 100%;
@@ -1976,12 +1990,15 @@ RESPONSIVE METODOLOGÍA
.carousel-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
/* Altura fija para contener tags + imagen 4:3 */
min-height: 420px;
overflow: hidden;
border-radius: 16px;
box-shadow: var(--shadow);
background-color: var(--bg-surface);
}
/* Cada slide */
.carousel-slide {
position: absolute;
top: 0;
@@ -1990,13 +2007,56 @@ RESPONSIVE METODOLOGÍA
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
flex-direction: column;
padding: var(--spacing-sm);
gap: var(--spacing-sm);
}
.carousel-slide.active {
opacity: 1;
}
/* Tags dentro del slide */
.slide-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
flex-shrink: 0;
}
.slide-tag {
font-family: var(--font-small);
font-size: 0.75rem;
font-weight: 600;
padding: 0.3rem 0.75rem;
border-radius: 999px;
background-color: var(--btn-primary-bg);
color: var(--text-on-accent);
letter-spacing: 0.3px;
line-height: 1.2;
}
/* Wrapper de la imagen (respeta ratio 4:3) */
.slide-image-wrapper {
flex: 1;
width: 100%;
border-radius: 12px;
overflow: hidden;
position: relative;
background-color: var(--bg-surface-elevated);
}
.slide-image-wrapper::before {
content: "";
display: block;
padding-top: 75%; /* Ratio 4:3 */
}
.carousel-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
@@ -2029,6 +2089,59 @@ RESPONSIVE METODOLOGÍA
background-color: var(--btn-primary-hover);
}
/* ============================================
RESPONSIVE CARRUSEL PORTFOLIO
============================================ */
@media (max-width: 968px) {
.portfolio-container {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.portfolio-text {
text-align: center;
align-items: center;
}
.portfolio-subtitle {
max-width: 100%;
}
.portfolio-text .btn {
align-self: center;
}
.carousel-container {
min-height: 380px;
}
}
@media (max-width: 768px) {
.portfolio-section {
padding: var(--spacing-md) var(--spacing-sm);
}
.carousel-container {
min-height: 340px;
}
.slide-tag {
font-size: 0.7rem;
padding: 0.25rem 0.6rem;
}
}
@media (max-width: 480px) {
.carousel-container {
min-height: 300px;
}
.carousel-slide {
padding: var(--spacing-xs);
gap: var(--spacing-xs);
}
}
/* ============================================
TIRA MARQUEE (ICONOS INFINITOS CON FADE)
============================================ */
@@ -2063,67 +2176,98 @@ RESPONSIVE METODOLOGÍA
}
}
/* ============================================
TIRA MARQUEE (ICONOS INFINITOS)
============================================ */
.marquee-section {
margin-top: var(--spacing-lg);
overflow: hidden;
padding: var(--spacing-md) 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
/* Efecto fade en los bordes */
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.marquee-track {
display: flex;
gap: var(--spacing-md);
animation: marquee-scroll 35s linear infinite;
will-change: transform;
}
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Contenedor de cada icono: tamaño fijo para alinear */
.marquee-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
width: 110px; /* Ancho fijo de la caja */
height: 60px; /* Altura fija de la caja */
}
/* El icono en sí: se adapta dentro de la caja sin deformarse */
.marquee-icon {
width: 60px;
height: 60px;
width: 100%;
height: 100%;
display: block;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-size: contain; /* Clave: contiene el SVG sin deformarlo */
mask-size: contain;
/* Estado base: neutro y sin interactividad */
filter: grayscale(100%) opacity(0.5);
color: var(--text-muted);
transition: all 0.3s ease;
}
/* Iconos específicos (mantener los que ya tenías) */
.icon-google { -webkit-mask-image: url("../assets/iconos/google.svg"); mask-image: url("../assets/iconos/google.svg"); }
.icon-meta { -webkit-mask-image: url("../assets/iconos/meta.svg"); mask-image: url("../assets/iconos/meta.svg"); }
.icon-hubspot { -webkit-mask-image: url("../assets/iconos/hubspot.svg"); mask-image: url("../assets/iconos/hubspot.svg"); }
.icon-shopify { -webkit-mask-image: url("../assets/iconos/shopify.svg"); mask-image: url("../assets/iconos/shopify.svg"); }
.icon-wordpress { -webkit-mask-image: url("../assets/iconos/wordpress.svg"); mask-image: url("../assets/iconos/wordpress.svg"); }
.icon-figma { -webkit-mask-image: url("../assets/iconos/figma.svg"); mask-image: url("../assets/iconos/figma.svg"); }
.icon-adobe { -webkit-mask-image: url("../assets/iconos/adobe.svg"); mask-image: url("../assets/iconos/adobe.svg"); }
.icon-mailchimp { -webkit-mask-image: url("../assets/iconos/mailchimp.svg"); mask-image: url("../assets/iconos/mailchimp.svg"); }
.marquee-icon:hover {
filter: grayscale(0%) opacity(1);
color: var(--brand-crimson);
transform: scale(1.1);
}
/* Iconos específicos */
.icon-analytics { -webkit-mask-image: url("../assets/vectores/analytics.svg"); mask-image: url("../assets/vectores/analytics.svg"); }
.icon-face { -webkit-mask-image: url("../assets/vectores/face.svg"); mask-image: url("../assets/vectores/face.svg"); }
.icon-google { -webkit-mask-image: url("../assets/vectores/google.svg"); mask-image: url("../assets/vectores/google.svg"); }
.icon-googleads { -webkit-mask-image: url("../assets/vectores/googleads.svg"); mask-image: url("../assets/vectores/googleads.svg"); }
.icon-insta { -webkit-mask-image: url("../assets/vectores/insta.svg"); mask-image: url("../assets/vectores/insta.svg"); }
.icon-meta { -webkit-mask-image: url("../assets/vectores/meta.svg"); mask-image: url("../assets/vectores/meta.svg"); }
.icon-openai { -webkit-mask-image: url("../assets/vectores/openai.svg"); mask-image: url("../assets/vectores/openai.svg"); }
.icon-tiktok { -webkit-mask-image: url("../assets/vectores/tiktok.svg"); mask-image: url("../assets/vectores/tiktok.svg"); max-width: 250px; }
.icon-whatsapp { -webkit-mask-image: url("../assets/vectores/whatsapp.svg"); mask-image: url("../assets/vectores/whatsapp.svg"); }
.icon-wordpress { -webkit-mask-image: url("../assets/vectores/wordpress.svg"); mask-image: url("../assets/vectores/wordpress.svg"); }
/* ============================================
RESPONSIVE MARQUEE
============================================ */
@media (max-width: 768px) {
.marquee-item {
width: 60px;
height: 60px;
}
.marquee-icon {
width: 45px;
height: 45px;
width: 90px;
height: 50px;
}
}
@media (max-width: 480px) {
.marquee-item {
width: 50px;
height: 50px;
width: 75px;
height: 40px;
}
.marquee-icon {
width: 35px;
height: 35px;
.marquee-track {
gap: var(--spacing-sm);
}
}
/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;