* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Red Hat Display', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px;
}
.menu-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
/* Barra Principal (Alineación Estricta) */
.main-menu {
background-color: #D3FF33;
height: 64px !important;
max-height: 64px !important;
border-radius: 80px;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 30px !important;
color: #191919;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
position: relative;
z-index: 10;
overflow: hidden !important; /* Previene desbordamiento de imágenes */
}
.logo-container {
display: flex !important;
align-items: center !important;
height: 100% !important;
max-width: 60% !important;
}
/* Control estricto del tamaño del Logo SVG */
.logo-desktop {
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
display: block !important;
}
.logo-mobile {
height: 32px !important;
width: 32px !important;
max-height: 32px !important;
object-fit: contain !important;
display: none !important;
}
.logo-spacer {
flex: 1 !important;
}
/* Hamburguesa GSAP */
.hamburger {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 24px !important;
height: 16px !important;
cursor: pointer;
flex-shrink: 0 !important;
position: relative !important;
}
.hamburger-line {
height: 3px !important;
width: 100% !important;
background-color: #191919 !important;
border-radius: 2px !important;
position: absolute !important;
left: 0 !important;
}
.line-1 { top: 0 !important; }
.line-2 { top: 6px !important; }
.line-3 { top: 12px !important; }
/* Menú Expandido */
.expanded-menu {
display: flex;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
height: 0;
opacity: 0;
visibility: hidden;
position: relative;
}
.menu-section {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
}
.section-left {
background-color: #D3FF33;
color: #191919;
}
.section-right {
background-color: #191919;
color: white;
}
.section-title {
font-weight: 700;
margin-bottom: 24px;
}
.menu-links {
display: flex;
flex-direction: column;
gap: 16px;
}
.expanded-menu .menu-link {
text-decoration: none !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
.section-left .menu-link,
.section-left a {
color: #191919 !important;
}
.section-right .menu-link,
.section-right a {
color: #ffffff !important;
}
/* Responsivo */
@media (min-width: 1000px) {
.menu-container { max-width: 1000px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 56px; }
.menu-link { font-size: 24px; }
}
@media (min-width: 700px) and (max-width: 999px) {
.menu-container { max-width: 700px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 48px; }
.menu-link { font-size: 22px; }
}
@media (max-width: 699px) {
.menu-container { max-width: 400px; }
.expanded-menu { flex-direction: column; }
body { padding: 40px 16px; }
.logo-desktop { display: none !important; }
.logo-mobile { display: block !important; }
.main-menu { padding: 0 20px !important; }
.section-title { font-size: 36px; }
.menu-link { font-size: 20px; }
}
document.addEventListener("DOMContentLoaded", function() {
const mainMenu = document.getElementById('mainMenu');
const expandedMenu = document.getElementById('expandedMenu');
const menuLinks = document.querySelectorAll('.menu-link');
const sectionTitles = document.querySelectorAll('.section-title');
let isOpen = false;
// Timeline de Despliegue GSAP
const menuTL = gsap.timeline({ paused: true, reversed: true });
// Animación de la hamburguesa a 'X'
menuTL.to('.line-1', { duration: 0.3, y: 6, rotate: 45, ease: 'power2.inOut' }, 0)
.to('.line-2', { duration: 0.2, opacity: 0, scaleX: 0, ease: 'power2.inOut' }, 0)
.to('.line-3', { duration: 0.3, y: -6, rotate: -45, ease: 'power2.inOut' }, 0);
// Despliegue fluido del contenedor
menuTL.to(expandedMenu, {
duration: 0.5,
height: 'auto',
opacity: 1,
visibility: 'visible',
ease: 'power3.out'
}, 0);
// Revelado progresivo de contenidos
menuTL.from(sectionTitles, { duration: 0.4, y: 20, opacity: 0, stagger: 0.1, ease: 'power2.out' }, 0.2);
menuTL.from(menuLinks, { duration: 0.4, y: 20, opacity: 0, stagger: 0.05, ease: 'power2.out' }, 0.3);
function toggleMenu() {
isOpen = !isOpen;
if (isOpen) {
menuTL.play();
} else {
menuTL.reverse();
}
}
mainMenu.addEventListener('click', toggleMenu);
// Hover suave en enlaces individuales
menuLinks.forEach(link => {
link.addEventListener('mouseenter', () => gsap.to(link, { x: 8, duration: 0.2, ease: 'power2.out' }));
link.addEventListener('mouseleave', () => gsap.to(link, { x: 0, duration: 0.2, ease: 'power2.out' }));
});
// Cerrar menú al hacer clic fuera
document.addEventListener('click', function(e) {
if (isOpen && !mainMenu.contains(e.target) && !expandedMenu.contains(e.target)) {
toggleMenu();
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Red Hat Display', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px;
}
.menu-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
/* Barra Principal (Alineación Estricta) */
.main-menu {
background-color: #D3FF33;
height: 64px !important;
max-height: 64px !important;
border-radius: 80px;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 30px !important;
color: #191919;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
position: relative;
z-index: 10;
overflow: hidden !important; /* Previene desbordamiento de imágenes */
}
.logo-container {
display: flex !important;
align-items: center !important;
height: 100% !important;
max-width: 60% !important;
}
/* Control estricto del tamaño del Logo SVG */
.logo-desktop {
height: 20px !important;
width: auto !important;
max-height: 20px !important;
object-fit: contain !important;
display: block !important;
}
.logo-mobile {
height: 32px !important;
width: 32px !important;
max-height: 32px !important;
object-fit: contain !important;
display: none !important;
}
.logo-spacer {
flex: 1 !important;
}
/* Hamburguesa GSAP */
.hamburger {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 24px !important;
height: 16px !important;
cursor: pointer;
flex-shrink: 0 !important;
position: relative !important;
}
.hamburger-line {
height: 3px !important;
width: 100% !important;
background-color: #191919 !important;
border-radius: 2px !important;
position: absolute !important;
left: 0 !important;
}
.line-1 { top: 0 !important; }
.line-2 { top: 6px !important; }
.line-3 { top: 12px !important; }
/* Menú Expandido */
.expanded-menu {
display: flex;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
height: 0;
opacity: 0;
visibility: hidden;
position: relative;
}
.menu-section {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
position: relative;
}
.section-left {
background-color: #D3FF33;
color: #191919;
}
.section-right {
background-color: #191919;
color: white;
}
.section-title {
font-weight: 700;
margin-bottom: 24px;
}
.menu-links {
display: flex;
flex-direction: column;
gap: 16px;
}
.expanded-menu .menu-link {
text-decoration: none !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
font-weight: 500 !important;
}
.section-left .menu-link,
.section-left a {
color: #191919 !important;
}
.section-right .menu-link,
.section-right a {
color: #ffffff !important;
}
/* Responsivo */
@media (min-width: 1000px) {
.menu-container { max-width: 1000px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 56px; }
.menu-link { font-size: 24px; }
}
@media (min-width: 700px) and (max-width: 999px) {
.menu-container { max-width: 700px; }
.expanded-menu { flex-direction: row; }
.section-title { font-size: 48px; }
.menu-link { font-size: 22px; }
}
@media (max-width: 699px) {
.menu-container { max-width: 400px; }
.expanded-menu { flex-direction: column; }
body { padding: 40px 16px; }
.logo-desktop { display: none !important; }
.logo-mobile { display: block !important; }
.main-menu { padding: 0 20px !important; }
.section-title { font-size: 36px; }
.menu-link { font-size: 20px; }
}
document.addEventListener("DOMContentLoaded", function() {
const mainMenu = document.getElementById('mainMenu');
const expandedMenu = document.getElementById('expandedMenu');
const menuLinks = document.querySelectorAll('.menu-link');
const sectionTitles = document.querySelectorAll('.section-title');
let isOpen = false;
// Timeline de Despliegue GSAP
const menuTL = gsap.timeline({ paused: true, reversed: true });
// Animación de la hamburguesa a 'X'
menuTL.to('.line-1', { duration: 0.3, y: 6, rotate: 45, ease: 'power2.inOut' }, 0)
.to('.line-2', { duration: 0.2, opacity: 0, scaleX: 0, ease: 'power2.inOut' }, 0)
.to('.line-3', { duration: 0.3, y: -6, rotate: -45, ease: 'power2.inOut' }, 0);
// Despliegue fluido del contenedor
menuTL.to(expandedMenu, {
duration: 0.5,
height: 'auto',
opacity: 1,
visibility: 'visible',
ease: 'power3.out'
}, 0);
// Revelado progresivo de contenidos
menuTL.from(sectionTitles, { duration: 0.4, y: 20, opacity: 0, stagger: 0.1, ease: 'power2.out' }, 0.2);
menuTL.from(menuLinks, { duration: 0.4, y: 20, opacity: 0, stagger: 0.05, ease: 'power2.out' }, 0.3);
function toggleMenu() {
isOpen = !isOpen;
if (isOpen) {
menuTL.play();
} else {
menuTL.reverse();
}
}
mainMenu.addEventListener('click', toggleMenu);
// Hover suave en enlaces individuales
menuLinks.forEach(link => {
link.addEventListener('mouseenter', () => gsap.to(link, { x: 8, duration: 0.2, ease: 'power2.out' }));
link.addEventListener('mouseleave', () => gsap.to(link, { x: 0, duration: 0.2, ease: 'power2.out' }));
});
// Cerrar menú al hacer clic fuera
document.addEventListener('click', function(e) {
if (isOpen && !mainMenu.contains(e.target) && !expandedMenu.contains(e.target)) {
toggleMenu();
}
});
});
Design Systems vs. Feature Velocity.
Navigation Home About me Projects Blog Follow me LinkedIn ↗ Behance ↗ Instagram ↗ Art projects ↗ Get in touch Go back Prototyping in the Age of AI: Why Strategic UX Matters More Than Ever The landscape of digital product design is shifting rapidly. With the rise of AI-driven prototyping tools, low-code platforms, and automated…
Navigation Home About me Projects Blog Follow me LinkedIn ↗ Behance ↗ Instagram ↗ Art projects ↗ Get in touch Go back Design Systems vs. Feature Velocity: Finding the Sweet Spot in Product Design In modern product development, Design Systems are often treated as the ultimate source of truth. They promise consistency, faster iteration, and…