* {
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();
}
});
});
Friction as a Feature, Prototyping in the Age of AI y What UI Kits Don’t Teach You.
Navigation Home About me Projects Blog Follow me LinkedIn ↗ Behance ↗ Instagram ↗ Art projects ↗ Get in touch Go back Friction as a Feature: When Fast UX Isn’t Always Better UX In modern product design, velocity is usually treated as the ultimate metric. We optimize user flows to reduce clicks, strip away modal…
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…