All Prompts
All Prompts
Frontend Engineer Portfolio Landing Page Template
HTML/CSS шаблон лендинга "Frontend Engineer Portfolio" для разработчиков. Современный дизайн, адаптивный, для демонстрации проектов и навыков.
Prompt
<html lang="en" class="dark"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend Engineer Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=Manrope:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
body { font-family: "Inter", sans-serif; background-color: #030303; color: #e5e5e5; }
.font-manrope { font-family: "Manrope", sans-serif; }
.font-mono { font-family: "JetBrains Mono", monospace; }
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }
/* Utilities */
.glass-panel {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.text-glow { text-shadow: 0 0 30px rgba(255, 255, 255, 0.15); }
.border-gradient { border-image: linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(255,255,255,0.01)) 1; }
/* --- UNIQUE ANIMATIONS --- */
/* 1. Hero: Blur Reveal */
.reveal-blur { opacity: 0; filter: blur(20px); transform: scale(0.95); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .reveal-blur { opacity: 1; filter: blur(0); transform: scale(1); }
/* 2. Text: Line Slide Up */
.reveal-text-line { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translateY(20px); opacity: 0; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .reveal-text-line { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateY(0); opacity: 1; }
/* 3. Grid: Staggered Cards */
.stagger-grid > * { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible.stagger-grid > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
/* 4. Toolkit: Connector Draw */
.draw-line path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s ease-in-out; }
.is-visible .draw-line path { stroke-dashoffset: 0; }
/* 5. Footer: Curtain Rise */
.reveal-curtain { transform: translateY(100%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .reveal-curtain { transform: translateY(0); }
/* Hover Effects */
.hover-card-shine { position: relative; overflow: hidden; }
.hover-card-shine::after {
content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
transform: skewX(-25deg); transition: 0.5s;
}
.hover-card-shine:hover::after { left: 150%; transition: 1s; }
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const observerOptions = { threshold: 0.15, rootMargin: "0px 0px -50px 0px" };
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
}
});
}, observerOptions);
document.querySelectorAll('section, .reveal-group, .stagger-grid').forEach(el => observer.observe(el));
});
</script>
<style>
body { font-family: "Inter", sans-serif; background-color: #030303; color: #e5e5e5; }
.font-manrope { font-family: "Manrope", sans-serif; }
.font-mono { font-family: "JetBrains Mono", monospace; }
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444; }
/* Utilities */
.glass-panel {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.text-glow { text-shadow: 0 0 30px rgba(255, 255, 255, 0.15); }
.border-gradient { border-image: linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(255,255,255,0.01)) 1; }
/* --- UNIQUE ANIMATIONS --- */
/* 1. Hero: Blur Reveal */
.reveal-blur { opacity: 0; filter: blur(20px); transform: scale(0.95); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .reveal-blur { opacity: 1; filter: blur(0); transform: scale(1); }
/* 2. Text: Line Slide Up */
.reveal-text-line { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: translateY(20px); opacity: 0; filter: blur(8px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .reveal-text-line { clip-path: polygon(0 0, 100% 0, 100% 120%, 0 120%); transform: translateY(0); opacity: 1; filter: blur(0); }
/* 3. Grid: Staggered Cards */
.stagger-grid > * { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible.stagger-grid > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.is-visible.stagger-grid > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
/* 4. Toolkit: Connector Draw */
.draw-line path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s ease-in-out; }
.is-visible .draw-line path { stroke-dashoffset: 0; }
/* 5. Footer: Curtain Rise */
.reveal-curtain { transform: translateY(100%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.is-visible .reveal-curtain { transform: translateY(0); }
/* Hover Effects */
.hover-card-shine { position: relative; overflow: hidden; }
.hover-card-shine::after {
content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
transform: skewX(-25deg); transition: 0.5s;
}
.hover-card-shine:hover::after { left: 150%; transition: 1s; }
</style>
<style>
@keyframes beam-flow { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: -200; } } .animate-beam { stroke-dasharray: 150 1200; animation: beam-flow 3s linear infinite; }
</style>
<style>
.char-reveal {
display: inline-block;
transform: translateY(40%);
opacity: 0;
filter: blur(8px);
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease, filter 1s ease;
will-change: transform, opacity, filter;
}
.is-visible .char-reveal {
transform: translateY(0);
opacity: 1;
filter: blur(0);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const targets = document.querySelectorAll("[data-split-text]");
targets.forEach(target => {
const text = target.innerText.trim();
target.innerHTML = "";
target.setAttribute("aria-label", text);
text.split("").forEach((char, i) => {
const span = document.createElement("span");
span.textContent = char === " " ? "\u00A0" : char;
span.className = "char-reveal";
span.style.transitionDelay = `${i * 0.02}s`;
target.appendChild(span);
});
});
});
</script>
<style>
@keyframes sys-scan{0%{top:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}}@keyframes sys-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-10px)}}.animate-sys-scan{animation:sys-scan 12s linear infinite}.animate-sys-drift{animation:sys-drift 15s ease-in-out infinite}
</style>
<script>
// Configure Tailwind to include our custom 3D transform utilities
tailwind.config = {
theme: {
extend: {
// Add any custom theme extensions here if needed
}
},
plugins: [
function({ addUtilities }) {
const rotateXUtilities = {};
const rotateYUtilities = {};
const rotateZUtilities = {};
const rotateValues = [0, 5, 10, 15, 20, 30, 45, 75];
// Generate rotate-x utilities
rotateValues.forEach((value) => {
rotateXUtilities[`.rotate-x-${value}`] = {
'--tw-rotate-x': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateXUtilities[`.-rotate-x-${value}`] = {
'--tw-rotate-x': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-y utilities
rotateValues.forEach((value) => {
rotateYUtilities[`.rotate-y-${value}`] = {
'--tw-rotate-y': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateYUtilities[`.-rotate-y-${value}`] = {
'--tw-rotate-y': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-z utilities
rotateValues.forEach((value) => {
rotateZUtilities[`.rotate-z-${value}`] = {
'--tw-rotate-z': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateZUtilities[`.-rotate-z-${value}`] = {
'--tw-rotate-z': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Perspective utilities
const perspectiveUtilities = {
".perspective-none": { perspective: "none" },
".perspective-dramatic": { perspective: "100px" },
".perspective-near": { perspective: "300px" },
".perspective-normal": { perspective: "500px" },
".perspective-midrange": { perspective: "800px" },
".perspective-distant": { perspective: "1200px" },
};
// Transform style utilities
const transformStyleUtilities = {
".transform-style-preserve-3d": { "transform-style": "preserve-3d" },
".transform-style-flat": { "transform-style": "flat" },
};
addUtilities({
...rotateXUtilities,
...rotateYUtilities,
...rotateZUtilities,
...perspectiveUtilities,
...transformStyleUtilities,
});
}
]
};
</script>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">
.font-newsreader { font-family: 'Newsreader', serif !important; }
</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">
.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }
</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">
.font-oswald { font-family: 'Oswald', sans-serif !important; }
</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">
.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }
</style> <style>
/* 3D Transform utilities */
.perspective-none { perspective: none !important; }
.perspective-dramatic { perspective: 100px !important; }
.perspective-near { perspective: 300px !important; }
.perspective-normal { perspective: 500px !important; }
.perspective-midrange { perspective: 800px !important; }
.perspective-distant { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.transform-style-flat { transform-style: flat !important; }
</style></head>
<body class="selection:bg-indigo-500/30 selection:text-white overflow-x-hidden bg-[#030303]">
<div class="top-0 w-full h-screen -z-10 bg-cover bg-center saturate-0 absolute" style="background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fc03fa5a-129a-4943-8063-30b7b6d88a78_3840w.webp");; mask-image: linear-gradient(to bottom, transparent, black 0%, black 20%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 20%, transparent)" data-alpha-mask="20"></div>
<div id="wrapper" class="">
<!--
Progress blur from top. Usage:
1) Insert this code in the <body>
!-->
<div class="gradient-blur">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
.gradient-blur {
position: fixed;
z-index: 5;
inset: 0 0 auto 0;
height: 12%;
pointer-events: none;
}
.gradient-blur>div,
.gradient-blur::before,
.gradient-blur::after {
position: absolute;
inset: 0;
}
.gradient-blur::before {
content: "";
z-index: 1;
backdrop-filter: blur(0.5px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 0) 37.5%);
}
.gradient-blur>div:nth-of-type(1) {
z-index: 2;
backdrop-filter: blur(1px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 0) 50%);
}
.gradient-blur>div:nth-of-type(2) {
z-index: 3;
backdrop-filter: blur(2px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0) 62.5%);
}
.gradient-blur>div:nth-of-type(3) {
z-index: 4;
backdrop-filter: blur(4px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 37.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 0) 75%);
}
.gradient-blur>div:nth-of-type(4) {
z-index: 5;
backdrop-filter: blur(8px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0) 87.5%);
}
.gradient-blur>div:nth-of-type(5) {
z-index: 6;
backdrop-filter: blur(16px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 62.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 0) 100%);
}
.gradient-blur>div:nth-of-type(6) {
z-index: 7;
backdrop-filter: blur(32px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 1) 100%);
}
.gradient-blur::after {
content: "";
z-index: 8;
backdrop-filter: blur(64px);
mask: linear-gradient(to top,
rgba(0, 0, 0, 0) 87.5%,
rgba(0, 0, 0, 1) 100%);
}
</style>
</div>
<!-- Fixed Header -->
<nav class="fixed z-50 top-0 inset-x-0 p-6 flex justify-between items-start pointer-events-none">
<!-- Left: Identity Module -->
<div class="pointer-events-auto group flex items-center gap-3 pl-1.5 pr-5 py-1.5 rounded-full bg-[#0A0A0A]/80 border border-white/10 backdrop-blur-xl shadow-[0_4px_24px_-1px_rgba(0,0,0,0.3)] hover:border-white/20 transition-all duration-300 hover:scale-[1.02]">
<div class="relative w-9 h-9 rounded-full overflow-hidden bg-gradient-to-br from-neutral-800 to-black border border-white/10 flex items-center justify-center group-hover:rotate-90 transition-transform duration-500 ease-out">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white relative z-10">
<path d="M12 19V5"></path>
<path d="M5 12l7-7 7 7"></path>
</svg>
<div class="absolute inset-0 bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex flex-col gap-0.5">
<span class="leading-none text-xs font-semibold text-white tracking-tight font-manrope">
Folio.Build
</span>
<div class="flex items-center gap-1.5">
<span class="w-1 h-1 rounded-full bg-emerald-500 animate-pulse"></span>
<span class="text-[10px] text-neutral-500 font-mono leading-none tracking-tight">
v2.4.0
</span>
</div>
</div>
</div>
<!-- Center: Dynamic Navigation Island -->
<div class="hidden md:flex pointer-events-auto absolute left-1/2 -translate-x-1/2 top-6 items-center p-1 rounded-full bg-[#0A0A0A]/60 border border-white/10 backdrop-blur-2xl shadow-2xl ring-1 ring-white/5 transition-all duration-300 hover:bg-[#0A0A0A]/80 hover:scale-[1.01]">
<a href="/work" class="transition-all active:scale-95 text-xs font-medium text-white bg-white/10 border-white/5 border rounded-full pt-2 pr-5 pb-2 pl-5 relative shadow-[0_2px_10px_rgba(0,0,0,0.2)]">
Work
</a>
<a href="/stack" class="hover:text-white transition-colors group/link text-xs font-medium text-neutral-400 rounded-full pt-2 pr-5 pb-2 pl-5 relative">
Stack
<span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-white opacity-0 group-hover/link:opacity-100 transition-opacity"></span>
</a>
<a href="/process" class="hover:text-white transition-colors group/link text-xs font-medium text-neutral-400 rounded-full pt-2 pr-5 pb-2 pl-5 relative">
Process
<span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-white opacity-0 group-hover/link:opacity-100 transition-opacity"></span>
</a>
<a href="/about" class="hover:text-white transition-colors group/link text-xs font-medium text-neutral-400 rounded-full pt-2 pr-5 pb-2 pl-5 relative">
About
<span class="absolute bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-white opacity-0 group-hover/link:opacity-100 transition-opacity"></span>
</a>
</div>
<!-- Right: Action Module -->
<div class="pointer-events-auto flex items-center gap-3">
<!-- Status Indicator -->
<div class="hidden lg:flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#0A0A0A]/40 border border-white/5 backdrop-blur-md">
<div class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</div>
<span class="text-[10px] font-mono text-neutral-400 font-medium tracking-wider uppercase">
Open to work
</span>
</div>
<!-- Menu Toggle -->
<button class="group relative w-11 h-11 rounded-full bg-white text-black flex items-center justify-center hover:scale-105 transition-all duration-300 shadow-[0_0_30px_-5px_rgba(255,255,255,0.3)] border border-transparent hover:border-white/50 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-tr from-transparent via-transparent to-neutral-200 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="flex flex-col gap-[5px] items-end group-hover:items-center transition-all duration-300 w-4">
<span class="w-full h-[1.5px] bg-black rounded-full transition-all duration-300 group-hover:w-full group-hover:rotate-45 group-hover:translate-y-[6.5px]"></span>
<span class="w-3/4 h-[1.5px] bg-black rounded-full transition-all duration-300 group-hover:w-0 group-hover:opacity-0"></span>
<span class="w-1/2 h-[1.5px] bg-black rounded-full transition-all duration-300 group-hover:w-full group-hover:-rotate-45 group-hover:-translate-y-[6.5px]"></span>
</div>
</button>
</div>
</nav>
<!-- Section 1: Hero (Asymmetrical Digital Layout) -->
<section class="reveal-group min-h-screen flex flex-col lg:px-12 overflow-hidden is-visible w-full pt-32 pr-6 pb-20 pl-6 relative justify-center" id="hero">
<!-- Background Grid -->
<div class="absolute inset-0 z-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(#333 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);"></div>
<div class="grid grid-cols-1 lg:grid-cols-12 w-full max-w-[1400px] z-10 mr-auto ml-auto relative gap-x-12 gap-y-12 items-end">
<!-- Left: Typography -->
<div class="lg:col-span-8 flex flex-col reveal-group group parallax-text is-visible perspective-midrange gap-x-6 gap-y-6" style="transform: translate3d(0px, 175.6px, 0px); opacity: 0.0266075;">
<!-- Status Badge -->
<div class="flex items-center gap-3 mb-4 transition-all duration-1000 ease-out opacity-0 translate-y-4 blur-sm group-[.is-visible]:opacity-100 group-[.is-visible]:translate-y-0 group-[.is-visible]:blur-0 delay-100">
<span class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]"></span>
<span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">
Available for hire
</span>
</div>
<!-- Creative Title Sequence -->
<h1 class="text-[12vw] lg:text-[7.5rem] leading-[0.85] flex flex-col items-start gap-4 font-medium tracking-tighter font-manrope mix-blend-exclusion select-none text-transparent bg-clip-text" style="background-image: linear-gradient(115deg, rgba(255,255,255,0.15) 40%, #ffffff 50%, rgba(255,255,255,0.15) 60%); background-size: 200% auto; animation: light-scan 5s linear infinite; will-change: background-position;">
<style>
@keyframes light-scan {
0% { background-position: -100% 0; }
100% { background-position: 200% 0; }
}
</style>
<div class="">DIGITAL</div>
<div class="pl-12 lg:pl-32">ARCHTCT</div>
<div class="">& ENGINEER</div>
</h1>
<!-- Description -->
<p class="mt-8 max-w-xl font-light text-lg leading-relaxed transform transition-all duration-1000 ease-out translate-y-8 opacity-0 group-[.is-visible]:translate-y-0 group-[.is-visible]:opacity-100 delay-500">
<span class="animate-shimmer-text">
Senior Frontend Engineer specialized in crafting pixel-perfect,
performant digital experiences. Turning complex systems into
elegant, human-centric interfaces.
</span>
</p>
<!-- Buttons -->
<div class="mt-8 flex flex-wrap gap-4 transform transition-all duration-1000 ease-out translate-y-8 opacity-0 group-[.is-visible]:translate-y-0 group-[.is-visible]:opacity-100 delay-700">
<button class="group relative px-6 py-3 rounded-lg bg-white text-black text-sm font-semibold tracking-tight overflow-hidden hover:bg-neutral-100 transition-colors">
<span class="relative z-10 flex items-center gap-2">
View Projects
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-1">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</span>
</button>
<button class="px-6 py-3 rounded-lg border border-white/10 text-white text-sm font-medium hover:bg-white/5 transition-colors">
Download Resume
</button>
</div>
</div>
<!-- Right: Code/Visual -->
<div class="hidden lg:flex lg:col-span-4 h-full items-center justify-center relative perspective-[2000px] parallax-visual pointer-events-none select-none z-0" style="transform: translate3d(0px, -87.8px, 0px);">
<div class="reveal-group aspect-[3/4] border-white/[0.04] backdrop-blur-[2px] transform transition-all duration-[3000ms] ease-out [&.is-visible]:opacity-100 [&.is-visible]:translate-y-0 [&.is-visible]:scale-100 origin-center flex flex-col overflow-hidden is-visible bg-gradient-to-b from-white/[0.01] to-transparent opacity-0 w-full border rounded-xl shadow-2xl translate-y-8 scale-95 rotate-x-[2deg] rotate-y-[-10deg] gap-x-6 gap-y-6" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 35%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 35%, transparent);">
<div class="h-12 border-b border-white/[0.04] flex items-center px-4 gap-3 bg-white/[0.005]">
<div class="w-2 h-2 rounded-full bg-white/[0.1]"></div>
<div class="w-2 h-2 rounded-full bg-white/[0.1]"></div>
<div class="w-16 h-1.5 rounded-full bg-white/[0.05]"></div>
</div>
<div class="flex-1 flex">
<div class="w-16 border-r border-white/[0.04] flex flex-col items-center py-6 gap-4 bg-white/[0.005]">
<div class="w-8 h-8 rounded-lg bg-white/[0.03] border border-white/[0.02]"></div>
<div class="w-8 h-8 rounded-lg bg-white/[0.02] border border-white/[0.02]"></div>
<div class="w-8 h-8 rounded-lg bg-white/[0.02] border border-white/[0.02]"></div>
</div>
<div class="flex-1 p-6 flex flex-col gap-6">
<div class="w-full h-1/3 rounded-lg border border-white/[0.03] bg-white/[0.01] relative overflow-hidden">
<div class="absolute top-4 left-4 w-1/4 h-2 bg-white/[0.03] rounded"></div>
</div>
<div class="flex gap-4 h-1/4">
<div class="flex-1 rounded-lg border border-white/[0.03] bg-white/[0.01]"></div>
<div class="flex-1 rounded-lg border border-white/[0.03] bg-white/[0.01]"></div>
</div>
<div class="flex-1 flex flex-col gap-3 mt-2">
<div class="w-full h-2 bg-white/[0.02] rounded-sm"></div>
<div class="w-5/6 h-2 bg-white/[0.02] rounded-sm"></div>
<div class="w-4/6 h-2 bg-white/[0.02] rounded-sm"></div>
</div>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent animate-sys-scan pointer-events-none"></div>
</div>
</div>
</div>
<div class="absolute inset-y-0 right-12 w-px bg-white/5 hidden lg:block overflow-hidden pointer-events-none z-0">
<div class="absolute top-0 left-0 w-full h-96 bg-gradient-to-b from-transparent via-white/15 to-transparent animate-sys-scan"></div>
</div>
</section>
<!-- Section 2: Expertise (Bento Grid) -->
<section class="relative w-full px-6 lg:px-12 py-24 bg-neutral-950/50 border-y border-white/5">
<div class="max-w-[1400px] mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 reveal-group">
<h2 class="font-manrope text-5xl lg:text-7xl font-semibold text-white tracking-tight leading-[0.9]">
<span class="block" data-split-text="" aria-label="Core"><span class="char-reveal" style="transition-delay: 0s;">C</span><span class="char-reveal" style="transition-delay: 0.02s;">o</span><span class="char-reveal" style="transition-delay: 0.04s;">r</span><span class="char-reveal" style="transition-delay: 0.06s;">e</span></span>
<span class="block text-neutral-600" data-split-text="" aria-label="Competencies"><span class="char-reveal" style="transition-delay: 0s;">C</span><span class="char-reveal" style="transition-delay: 0.02s;">o</span><span class="char-reveal" style="transition-delay: 0.04s;">m</span><span class="char-reveal" style="transition-delay: 0.06s;">p</span><span class="char-reveal" style="transition-delay: 0.08s;">e</span><span class="char-reveal" style="transition-delay: 0.1s;">t</span><span class="char-reveal" style="transition-delay: 0.12s;">e</span><span class="char-reveal" style="transition-delay: 0.14s;">n</span><span class="char-reveal" style="transition-delay: 0.16s;">c</span><span class="char-reveal" style="transition-delay: 0.18s;">i</span><span class="char-reveal" style="transition-delay: 0.2s;">e</span><span class="char-reveal" style="transition-delay: 0.22s;">s</span></span>
</h2>
<p class="reveal-blur transition-delay-200 text-neutral-400 max-w-xs text-sm font-mono mt-6 md:mt-0">
// ARCHITECTURE // INTERACTION // SYSTEMS
</p>
</div>
<!-- Bento Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-20 stagger-grid w-full h-auto max-w-[1200px] mr-auto ml-auto pt-12 pb-12 gap-x-8 gap-y-8 items-start">
<!-- Left Feature: Cycles/Velocity -->
<div class="flex flex-col gap-6 group md:pr-4">
<div class="space-y-3">
<h3 class="text-2xl font-semibold text-white tracking-tight">
Build
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">
momentum
</span>
with CI/CD
</h3>
<p class="text-neutral-400 font-light text-base leading-relaxed max-w-md">
Create healthy deployment routines and focus your engineering
efforts on what work should ship next.
</p>
</div>
<!-- Visual Container -->
<div class="aspect-[4/3] w-full relative group/card perspective-[1000px]">
<div class="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent rounded-xl border border-white/10 transition-all duration-500 group-hover/card:border-white/20 shadow-2xl overflow-hidden">
<!-- Animated Grid Background -->
<div class="absolute inset-0 z-0 opacity-30 pointer-events-none" style="background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg) translateY(0) scale(2); transform-origin: top center;"></div>
<style>
@keyframes float-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse-glow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes dash-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
</style>
<!-- Main Interface Card (Floating) -->
<div class="absolute inset-x-6 bottom-0 top-10 bg-[#0A0A0A] rounded-t-xl border-x border-t border-white/10 shadow-[0_-20px_60px_-15px_rgba(0,0,0,1)] flex flex-col overflow-hidden transition-all duration-500 ease-out group-hover/card:translate-y-[-10px] group-hover/card:scale-[1.02] group-hover/card:shadow-[0_-30px_80px_-20px_rgba(16,185,129,0.15)] origin-bottom">
<!-- Glossy Reflection -->
<div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent"></div>
<!-- Toolbar -->
<div class="h-10 border-b border-white/5 flex items-center px-4 gap-3 bg-white/[0.02]">
<div class="flex gap-1.5">
<div class="w-2.5 h-2.5 rounded-full bg-white/10"></div>
<div class="w-2.5 h-2.5 rounded-full bg-white/10"></div>
</div>
<div class="ml-auto flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)] animate-pulse"></span>
<span class="text-[10px] font-mono text-neutral-500">
Live
</span>
</div>
</div>
<!-- Chart Content -->
<div class="flex-1 relative p-6 flex flex-col">
<div class="flex justify-between items-start mb-4">
<div>
<div class="text-[10px] text-neutral-500 uppercase tracking-wider font-mono mb-1">
Deployment Velocity
</div>
<div class="text-3xl text-white font-medium tracking-tight flex items-baseline gap-2">
24.5/day
<span class="text-xs font-mono text-emerald-500 bg-emerald-500/10 px-1.5 py-0.5 rounded">
+12%
</span>
</div>
</div>
</div>
<!-- Graph Area -->
<div class="flex-1 relative w-full mt-2">
<svg class="w-full h-full overflow-visible" preserveAspectRatio="none" viewBox="0 0 300 150">
<defs>
<linearGradient id="chart-fill" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#10b981" stop-opacity="0.2"></stop>
<stop offset="100%" stop-color="#10b981" stop-opacity="0"></stop>
</linearGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur"></feGaussianBlur>
<feComposite in="SourceGraphic" in2="blur" operator="over"></feComposite>
</filter>
</defs>
<!-- Grid Lines -->
<line x1="0" y1="100" x2="300" y2="100" stroke="#333" stroke-width="1" stroke-dasharray="4 4" opacity="0.5"></line>
<line x1="0" y1="50" x2="300" y2="50" stroke="#333" stroke-width="1" stroke-dasharray="4 4" opacity="0.3"></line>
<!-- Previous Period (Dashed) -->
<path d="M0 130 C 60 120, 120 100, 180 110 S 260 90, 300 100" fill="none" stroke="#525252" stroke-width="2" stroke-dasharray="4 4" opacity="0.5"></path>
<!-- Current Period (Solid + Glow) -->
<path d="M0 120 C 50 120, 80 80, 150 70 S 220 50, 300 20 L 300 150 L 0 150 Z" fill="url(#chart-fill)" opacity="0.5" class=""></path>
<path d="M0 120 C 50 120, 80 80, 150 70 S 220 50, 300 20" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" filter="url(#glow)" class="drop-shadow-lg"></path>
<!-- Interactive Point -->
<g class="animate-[float-gentle_3s_ease-in-out_infinite]" style="transform-origin: 220px 50px;">
<circle cx="220" cy="50" r="4" fill="#030303" stroke="#10b981" stroke-width="2"></circle>
<circle cx="220" cy="50" r="12" fill="#10b981" opacity="0.2" class="animate-[pulse-glow_2s_infinite]"></circle>
<!-- Tooltip attached to point -->
<foreignObject x="180" y="0" width="80" height="40" overflow="visible">
<div class="bg-neutral-900 border border-white/10 rounded px-2 py-1 text-[9px] text-white text-center shadow-lg whitespace-nowrap -translate-y-full mb-2">
Deploy #42
</div>
</foreignObject>
</g>
</svg>
</div>
<!-- X-Axis -->
<div class="flex justify-between text-[9px] text-neutral-600 font-mono mt-1">
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span>Sat</span>
<span>Sun</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Feature: Triage/Task Management -->
<div class="flex flex-col gap-6 group md:pl-4">
<div class="space-y-3">
<h3 class="text-2xl font-semibold text-white tracking-tight">
Manage requests with Triage
</h3>
<p class="text-neutral-400 font-light text-base leading-relaxed max-w-md">
Review and assign incoming bug reports, feature requests, and
other unplanned work.
</p>
</div>
<!-- Visual Container -->
<div class="relative w-full aspect-[4/3] bg-gradient-to-br from-white/[0.03] to-transparent rounded-xl border border-white/10 overflow-hidden shadow-2xl flex flex-col pt-8 pl-8 pr-8 pb-0 hover:border-white/20 transition-colors duration-500 group/right">
<!-- Inner Card Interface -->
<div class="flex-1 rounded-t-lg border-t border-x border-white/5 bg-[#0A0A0A] relative overflow-hidden shadow-inner ring-1 ring-white/5 transition-transform duration-500 group-hover/right:translate-y-[-4px]">
<!-- Inner Glow -->
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent pointer-events-none"></div>
<div class="p-6 h-full flex flex-col relative z-10">
<div class="text-sm font-medium text-white tracking-tight mb-6 flex justify-between">
<span>Inbox</span>
<span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-neutral-400">
12 Pending
</span>
</div>
<div class="flex flex-col space-y-3">
<!-- Active Item (Highlighted) -->
<div class="flex items-start gap-3 p-2 -ml-2 rounded-lg bg-white/[0.04] border border-white/5 relative z-10 group-hover/right:border-white/10 transition-colors">
<div class="w-5 h-5 mt-0.5 rounded bg-neutral-800 flex items-center justify-center border border-white/10 text-[9px] text-neutral-400 font-mono shadow-sm">
P
</div>
<div class="flex flex-col gap-0.5 min-w-0">
<span class="text-xs text-neutral-200 truncate font-medium">
Hydration error on production build
</span>
<div class="flex items-center gap-1.5 mt-0.5">
<div class="w-3 h-3 rounded-full bg-neutral-700 flex items-center justify-center overflow-hidden ring-1 ring-black">
<div class="w-full h-full bg-indigo-500 opacity-80"></div>
</div>
<span class="text-[10px] text-neutral-500 font-mono">
alex
</span>
</div>
</div>
</div>
<!-- Context Menu (Simulated UI) -->
<div class="absolute top-[88px] left-[50px] w-[180px] bg-[#161618] border border-white/10 rounded-lg shadow-[0_20px_40px_-10px_rgba(0,0,0,0.7)] z-30 flex flex-col p-1 backdrop-blur-3xl ring-1 ring-white/10 animate-[float-gentle_4s_ease-in-out_infinite_1s]">
<button class="flex items-center gap-2.5 px-3 py-1.5 text-[11px] text-white hover:bg-white/10 text-left transition-colors rounded group/item">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-neutral-500 group-hover/item:text-neutral-300">
<path d="M12 5v14M5 12h14"></path>
</svg>
Accept
</button>
<button class="flex items-center gap-2.5 px-3 py-1.5 text-[11px] text-white hover:bg-indigo-600 hover:text-white group/menu text-left transition-colors bg-white/5 rounded my-0.5">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-neutral-400 group-hover/menu:text-indigo-200">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
Mark as duplicate
</button>
<button class="flex items-center gap-2.5 px-3 py-1.5 text-[11px] text-white hover:bg-white/10 text-left transition-colors rounded group/item">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-neutral-500 group-hover/item:text-neutral-300">
<path d="M18 6 6 18M6 6l12 12"></path>
</svg>
Decline
</button>
</div>
<!-- Inactive Item 1 -->
<div class="flex items-start gap-3 p-2 -ml-2 opacity-30 blur-[0.5px] select-none pointer-events-none">
<div class="w-5 h-5 mt-0.5 rounded bg-neutral-800 flex items-center justify-center border border-white/10 text-[9px] text-neutral-400 font-mono">
B
</div>
<div class="flex flex-col gap-0.5 min-w-0">
<span class="text-xs text-neutral-200 truncate">
Fix CLS on mobile navigation
</span>
<div class="flex items-center gap-1.5 mt-0.5">
<div class="w-3 h-3 rounded-full bg-neutral-700"></div>
<span class="text-[10px] text-neutral-500 font-mono">
sarah
</span>
</div>
</div>
</div>
<!-- Inactive Item 2 -->
<div class="flex items-start gap-3 p-2 -ml-2 opacity-10 blur-[1px] select-none pointer-events-none">
<div class="w-5 h-5 mt-0.5 rounded bg-neutral-800 flex items-center justify-center border border-white/10 text-[9px] text-neutral-400 font-mono">
F
</div>
<div class="flex flex-col gap-0.5 min-w-0">
<span class="text-xs text-neutral-200 truncate">
Update Tailwind dependencies
</span>
<div class="flex items-center gap-1.5 mt-0.5">
<div class="w-3 h-3 rounded-full bg-neutral-700"></div>
<span class="text-[10px] text-neutral-500 font-mono">
mark
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="relative w-full py-32 bg-[#030303] border-t border-white/5 reveal-group">
<div class="lg:px-12 max-w-[1400px] mr-auto ml-auto pr-6 pl-6">
<div class="flex flex-col lg:flex-row justify-between items-end mb-20">
<h2 class="font-manrope text-5xl lg:text-7xl font-medium text-white tracking-tight">
<span data-split-text="" aria-label="Selected"><span class="char-reveal" style="transition-delay: 0s;">S</span><span class="char-reveal" style="transition-delay: 0.02s;">e</span><span class="char-reveal" style="transition-delay: 0.04s;">l</span><span class="char-reveal" style="transition-delay: 0.06s;">e</span><span class="char-reveal" style="transition-delay: 0.08s;">c</span><span class="char-reveal" style="transition-delay: 0.1s;">t</span><span class="char-reveal" style="transition-delay: 0.12s;">e</span><span class="char-reveal" style="transition-delay: 0.14s;">d</span></span>
<span class="text-neutral-600" data-split-text="" aria-label="Works"><span class="char-reveal" style="transition-delay: 0s;">W</span><span class="char-reveal" style="transition-delay: 0.02s;">o</span><span class="char-reveal" style="transition-delay: 0.04s;">r</span><span class="char-reveal" style="transition-delay: 0.06s;">k</span><span class="char-reveal" style="transition-delay: 0.08s;">s</span></span>
</h2>
<a href="#" class="group flex items-center gap-2 text-sm text-white border-b border-transparent hover:border-white transition-colors pb-0.5 mt-6 lg:mt-0">
View Archive
<span class="group-hover:translate-x-1 transition-transform">
→
</span>
</a>
</div>
<div class="flex flex-col w-full">
<!-- Project 1 -->
<div class="group relative border-t border-white/10 transition-colors hover:bg-white/[0.02]">
<a href="#" class="flex flex-col md:flex-row md:items-center justify-between z-10 w-full pt-12 pr-4 pb-12 pl-4 relative">
<div class="flex items-center gap-8 md:w-1/2">
<span class="font-mono text-xs text-neutral-600 group-hover:text-emerald-500 transition-colors">
01
</span>
<h3 class="text-3xl lg:text-5xl font-manrope font-light text-neutral-300 group-hover:text-white transition-colors group-hover:translate-x-4 duration-500 tracking-tight">
Finance Dashboard
</h3>
</div>
<div class="flex items-center gap-8 md:w-1/2 md:justify-end mt-4 md:mt-0 opacity-40 group-hover:opacity-100 transition-opacity">
<span class="text-xs font-mono text-neutral-400">
React / D3.js
</span>
<span class="text-xs font-mono text-neutral-400">2024</span>
<svg class="w-6 h-6 text-white -rotate-45 group-hover:rotate-0 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</a>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[250px] bg-neutral-800 rounded-lg pointer-events-none opacity-0 group-hover:opacity-100 scale-90 group-hover:scale-100 transition-all duration-500 z-0 overflow-hidden rotate-3 group-hover:rotate-6 hidden lg:block border border-white/10 shadow-2xl" style="display: block;">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8bfe1b0a-890a-496f-94e8-b00252fb834a_800w.jpg" class="opacity-100 mix-blend-normal w-full h-full object-cover" alt="Project">
</div>
</div>
<!-- Project 2 -->
<div class="group relative border-t border-white/10 transition-colors hover:bg-white/[0.02]">
<a href="#" class="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between z-10 relative">
<div class="flex items-center gap-8 md:w-1/2">
<span class="font-mono text-xs text-neutral-600 group-hover:text-emerald-500 transition-colors">
02
</span>
<h3 class="text-3xl lg:text-5xl font-manrope font-light text-neutral-300 group-hover:text-white transition-colors group-hover:translate-x-4 duration-500 tracking-tight">
AI Chat Interface
</h3>
</div>
<div class="flex items-center gap-8 md:w-1/2 md:justify-end mt-4 md:mt-0 opacity-40 group-hover:opacity-100 transition-opacity">
<span class="text-xs font-mono text-neutral-400">
Next.js / OpenAI
</span>
<span class="text-xs font-mono text-neutral-400">2023</span>
<svg class="w-6 h-6 text-white -rotate-45 group-hover:rotate-0 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</a>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[250px] bg-neutral-800 rounded-lg pointer-events-none opacity-0 group-hover:opacity-100 scale-90 group-hover:scale-100 transition-all duration-500 z-0 overflow-hidden -rotate-2 group-hover:-rotate-3 hidden lg:block border border-white/10 shadow-2xl" style="display: block;">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6967b11d-b166-47e5-b2fc-fed5b9c7c0ea_800w.jpg" class="opacity-100 mix-blend-normal w-full h-full object-cover" alt="Project">
</div>
</div>
<!-- Project 3 -->
<div class="group relative border-t border-b border-white/10 transition-colors hover:bg-white/[0.02]">
<a href="#" class="flex flex-col md:flex-row md:items-center justify-between w-full z-10 pt-12 pr-4 pb-12 pl-4 relative">
<div class="flex items-center gap-8 md:w-1/2">
<span class="font-mono text-xs text-neutral-600 group-hover:text-emerald-500 transition-colors">
03
</span>
<h3 class="text-3xl lg:text-5xl font-manrope font-light text-neutral-300 group-hover:text-white transition-colors group-hover:translate-x-4 duration-500 tracking-tight">
Design System
</h3>
</div>
<div class="flex items-center gap-8 md:w-1/2 md:justify-end mt-4 md:mt-0 opacity-40 group-hover:opacity-100 transition-opacity">
<span class="text-xs font-mono text-neutral-400">
Storybook / Tokens
</span>
<span class="text-xs font-mono text-neutral-400">2023</span>
<svg class="w-6 h-6 text-white -rotate-45 group-hover:rotate-0 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</div>
</a>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[250px] bg-neutral-800 rounded-lg pointer-events-none opacity-0 group-hover:opacity-100 scale-90 group-hover:scale-100 transition-all duration-500 z-0 overflow-hidden rotate-1 group-hover:rotate-3 hidden lg:block border border-white/10 shadow-2xl">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0255963c-52aa-4da8-b87e-9a8069544a92_800w.webp" class="opacity-100 mix-blend-normal w-full h-full object-cover" alt="Project">
</div>
</div>
</div>
</div>
</section>
<section class="w-full py-24 bg-neutral-950 border-t border-white/5 relative overflow-hidden reveal-group">
<!-- Decorative lines -->
<div class="absolute inset-0 flex justify-between pointer-events-none max-w-[1400px] mx-auto px-6 lg:px-12 opacity-10">
<div class="w-px h-full bg-white"></div>
<div class="w-px h-full bg-white"></div>
<div class="w-px h-full bg-white"></div>
<div class="w-px h-full bg-white"></div>
</div>
<div class="max-w-[1400px] mx-auto px-6 lg:px-12 relative z-10 grid grid-cols-1 md:grid-cols-3 gap-12 text-center md:text-left">
<!-- Item 1 -->
<div class="flex flex-col group cursor-default px-4 gap-x-4 gap-y-4">
<span class="text-xs text-[#fcfcfc] font-mono mb-2">
01 — PERFORMANCE
</span>
<div class="text-6xl lg:text-7xl font-semibold font-manrope text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 group-hover:to-white transition-all duration-500 tracking-tight">
<100
<span class="text-3xl align-top">ms</span>
</div>
<p class="text-neutral-400 font-light leading-relaxed max-w-xs mx-auto md:mx-0">
Interaction to Next Paint (INP) optimized. Ensuring every click
feels instant.
</p>
</div>
<!-- Item 2 -->
<div class="flex flex-col gap-4 group cursor-default gap-x-4 gap-y-4">
<span class="text-xs text-[#ffffff] font-mono mb-2">
02 — QUALITY
</span>
<div class="text-6xl lg:text-7xl font-semibold font-manrope text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 group-hover:to-white transition-all duration-500 tracking-tight">
100
<span class="text-3xl align-top">%</span>
</div>
<p class="text-neutral-400 font-light leading-relaxed max-w-xs mx-auto md:mx-0">
Test coverage across core business logic. Shipping with confidence,
every time.
</p>
</div>
<!-- Item 3 -->
<div class="flex flex-col gap-4 group cursor-default">
<span class="text-xs text-[#ffffff] font-mono mb-2">
03 — SCALABILITY
</span>
<div class="text-6xl lg:text-7xl font-semibold font-manrope text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 group-hover:to-white transition-all duration-500 tracking-tight">
Global
</div>
<p class="text-neutral-400 font-light leading-relaxed max-w-xs mx-auto md:mx-0">
Edge-ready architecture designed to serve users worldwide with
minimal latency.
</p>
</div>
</div>
</section>
<section class="relative w-full py-32 bg-[#050505] border-t border-white/5 reveal-group overflow-hidden">
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 40px 40px;"></div>
<div class="max-w-[1400px] mx-auto px-6 lg:px-12 relative z-10">
<div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-6">
<h2 class="text-4xl lg:text-6xl font-manrope font-semibold text-white tracking-tight reveal-text-line">
System Architecture
</h2>
<p class="font-mono text-neutral-500 text-sm max-w-xs text-right reveal-blur transition-delay-200">
// STRUCTURE // PATTERNS // FLOW
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-white/10 border border-white/10 stagger-grid">
<div class="group relative bg-[#080808] p-8 h-80 flex flex-col justify-between overflow-hidden hover:bg-[#0A0A0A] transition-colors duration-500">
<div class="absolute top-0 right-0 p-6 opacity-20 group-hover:opacity-100 transition-opacity duration-500 text-white">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path d="m9 12 2 2 4-4"></path>
</svg>
</div>
<div class="flex flex-col gap-4">
<span class="text-xs font-mono text-neutral-600">01</span>
<h3 class="text-xl text-white font-manrope font-medium tracking-tight">
Abstraction Layers
</h3>
</div>
<p class="text-sm text-neutral-500 font-light leading-relaxed group-hover:text-neutral-400 transition-colors">
Encapsulating complexity behind clean, intuitive interfaces.
</p>
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
</div>
<div class="group relative bg-[#080808] p-8 h-80 flex flex-col justify-between overflow-hidden hover:bg-[#0A0A0A] transition-colors duration-500">
<div class="absolute top-0 right-0 p-6 opacity-20 group-hover:opacity-100 transition-opacity duration-500 text-white">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M2 12h20"></path>
<path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6"></path>
<path d="M12 2v10"></path>
</svg>
</div>
<div class="flex flex-col gap-4">
<span class="text-xs font-mono text-neutral-600">02</span>
<h3 class="text-xl text-white font-manrope font-medium tracking-tight">
Component Composition
</h3>
</div>
<p class="text-sm text-neutral-500 font-light leading-relaxed group-hover:text-neutral-400 transition-colors">
Atomic building blocks assembled into coherent systems.
</p>
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
</div>
<div class="group relative bg-[#080808] p-8 h-80 flex flex-col justify-between overflow-hidden hover:bg-[#0A0A0A] transition-colors duration-500">
<div class="absolute top-0 right-0 p-6 opacity-20 group-hover:opacity-100 transition-opacity duration-500 text-white">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect width="18" height="18" x="3" y="3" rx="2"></rect>
<path d="M9 3v18"></path>
<path d="m15 9 3 3-3 3"></path>
</svg>
</div>
<div class="flex flex-col gap-4">
<span class="text-xs font-mono text-neutral-600">03</span>
<h3 class="text-xl text-white font-manrope font-medium tracking-tight">
Fault Tolerance
</h3>
</div>
<p class="text-sm text-neutral-500 font-light leading-relaxed group-hover:text-neutral-400 transition-colors">
Systems designed to fail gracefully and recover instantly.
</p>
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
</div>
<div class="group relative bg-[#080808] p-8 h-80 flex flex-col justify-between overflow-hidden hover:bg-[#0A0A0A] transition-colors duration-500">
<div class="absolute top-0 right-0 p-6 opacity-20 group-hover:opacity-100 transition-opacity duration-500 text-white">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2v4"></path>
<path d="m16.2 7.8 2.9-2.9"></path>
<path d="M18 12h4"></path>
<path d="m16.2 16.2 2.9 2.9"></path>
<path d="M12 18v4"></path>
<path d="m7.8 16.2-2.9 2.9"></path>
<path d="M6 12H2"></path>
<path d="m7.8 7.8-2.9-2.9"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</div>
<div class="flex flex-col gap-4">
<span class="text-xs font-mono text-neutral-600">04</span>
<h3 class="text-xl text-white font-manrope font-medium tracking-tight">
State Sync
</h3>
</div>
<p class="text-sm text-neutral-500 font-light leading-relaxed group-hover:text-neutral-400 transition-colors">
Optimistic updates ensuring perceptible zero-latency.
</p>
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
</div>
</div>
</div>
</section>
<section class="w-full py-32 bg-[#030303] border-t border-white/5 reveal-group relative overflow-hidden">
<div class="max-w-[1400px] mx-auto px-6 lg:px-12 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<div class="lg:col-span-5 reveal-text-line">
<h2 class="font-manrope text-4xl lg:text-5xl font-semibold text-white mb-4">
<div data-split-text="" aria-label="Modern Stack"><span class="char-reveal" style="transition-delay: 0s;">M</span><span class="char-reveal" style="transition-delay: 0.02s;">o</span><span class="char-reveal" style="transition-delay: 0.04s;">d</span><span class="char-reveal" style="transition-delay: 0.06s;">e</span><span class="char-reveal" style="transition-delay: 0.08s;">r</span><span class="char-reveal" style="transition-delay: 0.1s;">n</span><span class="char-reveal" style="transition-delay: 0.12s;"> </span><span class="char-reveal" style="transition-delay: 0.14s;">S</span><span class="char-reveal" style="transition-delay: 0.16s;">t</span><span class="char-reveal" style="transition-delay: 0.18s;">a</span><span class="char-reveal" style="transition-delay: 0.2s;">c</span><span class="char-reveal" style="transition-delay: 0.22s;">k</span></div>
</h2>
</div>
<div class="lg:col-span-7 stagger-grid">
<div class="space-y-8 font-mono text-sm md:text-base leading-loose text-neutral-400">
<p>
We believe that
<span class="group inline-block relative cursor-help align-bottom mx-1">
<span class="relative z-10 text-white">perfection</span>
<span class="absolute inset-0 bg-white z-20 group-hover:scale-x-0 transition-transform duration-500 ease-out origin-right"></span>
</span>
is achieved not when there is nothing more to add, but when there
is
<span class="group inline-block relative cursor-help align-bottom mx-1">
<span class="relative z-10 text-white">
nothing left to take away
</span>
<span class="absolute inset-0 bg-white z-20 group-hover:scale-x-0 transition-transform duration-500 ease-out origin-left"></span>
</span>
.
</p>
<p>
Every line of code is a liability until it proves itself an
<span class="group inline-block relative cursor-help align-bottom mx-1">
<span class="relative z-10 text-white">asset</span>
<span class="absolute inset-0 bg-white z-20 group-hover:scale-x-0 transition-transform duration-500 ease-out origin-right"></span>
</span>
. We build systems that are robust by definition, not by
<span class="group inline-block relative cursor-help align-bottom mx-1">
<span class="relative z-10 text-white">complexity</span>
<span class="absolute inset-0 bg-white z-20 group-hover:scale-x-0 transition-transform duration-500 ease-out origin-left"></span>
</span>
.
</p>
<div class="h-px w-full bg-white/10 mt-8"></div>
<div class="flex justify-between text-xs uppercase tracking-widest text-neutral-600">
<span>Status: Optimal</span>
<span>Entropy: 0%</span>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: The Toolkit Pipeline (Unique Visualization) -->
<section class="reveal-group relative w-full py-32 px-6 overflow-hidden">
<div class="max-w-[1200px] mx-auto relative z-10">
<div class="text-center mb-16">
<h2 class="text-4xl lg:text-6xl font-manrope font-medium text-white mb-6">
<span class="block" data-split-text="" aria-label="Recent"><span class="char-reveal" style="transition-delay: 0s;">R</span><span class="char-reveal" style="transition-delay: 0.02s;">e</span><span class="char-reveal" style="transition-delay: 0.04s;">c</span><span class="char-reveal" style="transition-delay: 0.06s;">e</span><span class="char-reveal" style="transition-delay: 0.08s;">n</span><span class="char-reveal" style="transition-delay: 0.1s;">t</span></span>
<span class="block pl-12 lg:pl-24 text-neutral-600" data-split-text="" aria-label="Collaborations"><span class="char-reveal" style="transition-delay: 0s;">C</span><span class="char-reveal" style="transition-delay: 0.02s;">o</span><span class="char-reveal" style="transition-delay: 0.04s;">l</span><span class="char-reveal" style="transition-delay: 0.06s;">l</span><span class="char-reveal" style="transition-delay: 0.08s;">a</span><span class="char-reveal" style="transition-delay: 0.1s;">b</span><span class="char-reveal" style="transition-delay: 0.12s;">o</span><span class="char-reveal" style="transition-delay: 0.14s;">r</span><span class="char-reveal" style="transition-delay: 0.16s;">a</span><span class="char-reveal" style="transition-delay: 0.18s;">t</span><span class="char-reveal" style="transition-delay: 0.2s;">i</span><span class="char-reveal" style="transition-delay: 0.22s;">o</span><span class="char-reveal" style="transition-delay: 0.24s;">n</span><span class="char-reveal" style="transition-delay: 0.26s;">s</span></span>
</h2>
<p class="text-neutral-500 reveal-blur transition-delay-100">
Orchestrating the best tools for the job
</p>
</div>
<!-- Pipeline Visual -->
<div class="relative">
<!-- SVG Connector Lines -->
<svg class="absolute top-1/2 left-0 w-full h-[160%] -translate-y-1/2 -z-10 pointer-events-none md:opacity-100 opacity-40" viewBox="0 0 1200 400" fill="none" preserveAspectRatio="none">
<defs>
<linearGradient id="beam-grad-left" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#6366f1" stop-opacity="0"></stop>
<stop offset="50%" stop-color="#818cf8"></stop>
<stop offset="100%" stop-color="#6366f1" stop-opacity="0"></stop>
</linearGradient>
<linearGradient id="beam-grad-right" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#10b981" stop-opacity="0"></stop>
<stop offset="50%" stop-color="#34d399"></stop>
<stop offset="100%" stop-color="#10b981" stop-opacity="0"></stop>
</linearGradient>
<filter id="beam-glow">
<feGaussianBlur stdDeviation="3" result="blur"></feGaussianBlur>
<feFlood flood-color="rgba(99, 102, 241, 0.5)" result="color"></feFlood>
<feComposite in="color" in2="blur" operator="in" result="shadow"></feComposite>
<feMerge>
<feMergeNode in="shadow"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Left Path (Noodle) -->
<path d="M 200 320 C 350 320, 450 100, 600 100" class="stroke-white/5" stroke-width="3"></path>
<path d="M 200 320 C 350 320, 450 100, 600 100" stroke="url(#beam-grad-left)" stroke-width="4" class="animate-beam" style="filter: url(#beam-glow); mix-blend-mode: screen;"></path>
<!-- Right Path (Noodle) -->
<path d="M 1000 320 C 850 320, 750 100, 600 100" class="stroke-white/5" stroke-width="3"></path>
<path d="M 1000 320 C 850 320, 750 100, 600 100" stroke="url(#beam-grad-right)" stroke-width="4" class="animate-beam" style="animation-delay: 1.5s; filter: url(#beam-glow); mix-blend-mode: screen;"></path>
</svg>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-4 items-center justify-items-center stagger-grid">
<!-- Node 1 -->
<div class="glass-panel w-64 p-5 rounded-xl border border-white/10 hover:border-indigo-500/50 transition-colors duration-300">
<div class="flex items-center gap-3 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 256 256" data-icon="logos:typescript-icon" class="iconify text-2xl iconify--logos">
<path fill="#3178C6" d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0"></path>
<path fill="#FFF" d="M150.518 200.475v27.62q6.738 3.453 15.938 5.179T185.849 235q9.934 0 18.874-1.899t15.678-6.257q6.738-4.359 10.669-11.394q3.93-7.033 3.93-17.391q0-7.51-2.246-13.163a30.8 30.8 0 0 0-6.479-10.055q-4.232-4.402-10.149-7.898t-13.347-6.602q-5.442-2.245-9.761-4.359t-7.342-4.316q-3.024-2.2-4.665-4.661t-1.641-5.567q0-2.848 1.468-5.135q1.469-2.288 4.147-3.927t6.565-2.547q3.887-.906 8.638-.906q3.456 0 7.299.518q3.844.517 7.732 1.597a54 54 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807q-6.306-2.417-13.778-3.582T198.633 107q-9.847 0-18.658 2.115q-8.811 2.114-15.506 6.602q-6.694 4.49-10.582 11.437Q150 134.102 150 143.769q0 12.342 7.127 21.06t21.638 14.759a292 292 0 0 1 10.625 4.575q4.924 2.244 8.509 4.66t5.658 5.265t2.073 6.474a9.9 9.9 0 0 1-1.296 4.963q-1.295 2.287-3.93 3.97t-6.565 2.632t-9.2.95q-8.983 0-17.794-3.151t-16.327-9.451m-46.036-68.733H140V109H41v22.742h35.345V233h28.137z"></path>
</svg>
<span class="text-white font-medium">TypeScript</span>
</div>
<ul class="space-y-1 text-xs text-neutral-400 font-mono list-disc list-inside">
<li>Strict Typing</li>
<li>Zod Validation</li>
<li>tRPC</li>
</ul>
</div>
<!-- Node 2 (Center) -->
<div class="glass-panel w-72 p-6 rounded-2xl border border-white/20 bg-white/5 shadow-[0_0_30px_rgba(255,255,255,0.05)] transform md:-translate-y-16">
<div class="flex items-center justify-between mb-4">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 256 256" data-icon="logos:nextjs-icon" class="iconify text-3xl iconify--logos">
<defs>
<linearGradient id="IconifyId19b2d9827704858e00" x1="55.633%" x2="83.228%" y1="56.385%" y2="96.08%">
<stop offset="0%" stop-color="#FFF"></stop>
<stop offset="100%" stop-color="#FFF" stop-opacity="0"></stop>
</linearGradient>
<linearGradient id="IconifyId19b2d9827704858e01" x1="50%" x2="49.953%" y1="0%" y2="73.438%">
<stop offset="0%" stop-color="#FFF"></stop>
<stop offset="100%" stop-color="#FFF" stop-opacity="0"></stop>
</linearGradient>
<circle id="IconifyId19b2d9827704858e02" cx="128" cy="128" r="128"></circle>
</defs>
<mask id="IconifyId19b2d9827704858e03" fill="#fff">
<use href="#IconifyId19b2d9827704858e02"></use>
</mask>
<g mask="url(#IconifyId19b2d9827704858e03)">
<circle cx="128" cy="128" r="128"></circle>
<path fill="url(#IconifyId19b2d9827704858e00)" d="M212.634 224.028L98.335 76.8H76.8v102.357h17.228V98.68L199.11 234.446a128 128 0 0 0 13.524-10.418"></path>
<path fill="url(#IconifyId19b2d9827704858e01)" d="M163.556 76.8h17.067v102.4h-17.067z"></path>
</g>
</svg>
<span class="px-2 py-0.5 rounded text-[10px] bg-white text-black font-bold">
CORE
</span>
</div>
<p class="text-sm text-neutral-300 mb-4">
The meta-framework of choice for full-stack React applications.
</p>
<div class="flex gap-2">
<span class="text-[10px] border border-white/10 rounded px-1.5 py-0.5 text-neutral-400">
SSR
</span>
<span class="text-[10px] border border-white/10 rounded px-1.5 py-0.5 text-neutral-400">
Edge
</span>
</div>
</div>
<!-- Node 3 -->
<div class="glass-panel w-64 p-5 rounded-xl border border-white/10 hover:border-purple-500/50 transition-colors duration-300">
<div class="flex items-center gap-3 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.67em" height="1em" viewBox="0 0 256 154" data-icon="logos:tailwindcss-icon" class="iconify text-2xl text-cyan-400 iconify--logos">
<defs>
<linearGradient id="IconifyId19b2d9827704858e04" x1="-2.778%" x2="100%" y1="32%" y2="67.556%">
<stop offset="0%" stop-color="#2298BD"></stop>
<stop offset="100%" stop-color="#0ED7B5"></stop>
</linearGradient>
</defs>
<path fill="url(#IconifyId19b2d9827704858e04)" d="M128 0Q76.8 0 64 51.2Q83.2 25.6 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8q51.2 0 64-51.2q-19.2 25.6-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0M64 76.8q-51.2 0-64 51.2q19.2-25.6 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6q51.2 0 64-51.2q-19.2 25.6-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8"></path>
</svg>
<span class="text-white font-medium">Tailwind</span>
</div>
<ul class="space-y-1 text-xs text-neutral-400 font-mono list-disc list-inside">
<li>Custom Config</li>
<li>Shadcn UI</li>
<li>Animations</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: Work / Testimonials (Parallax Scroll) -->
<section class="overflow-hidden bg-[#050505] w-full border-white/5 border-t pt-32 pb-32 relative">
<style class="">
/* Exact pixel calculation for seamless loop: (400px width + 24px gap) * 4 items = 1696px */
@keyframes scroll-left-exact {
0% { transform: translateX(0); }
100% { transform: translateX(-1696px); }
}
@keyframes scroll-right-exact {
0% { transform: translateX(-1696px); }
100% { transform: translateX(0); }
}
.animate-marquee-left {
animation: scroll-left-exact 40s linear infinite;
}
.animate-marquee-right {
animation: scroll-right-exact 40s linear infinite;
}
/* Creative interaction: Pause and dim non-hovered items */
.marquee-track:hover {
animation-play-state: paused;
}
.marquee-track:hover .glass-panel {
opacity: 0.5;
filter: blur(2px);
transform: scale(0.98);
}
.marquee-track .glass-panel:hover {
opacity: 1;
filter: blur(0);
transform: scale(1.05);
z-index: 10;
border-color: rgba(255,255,255,0.2);
box-shadow: 0 0 30px rgba(255,255,255,0.05);
}
</style>
<div class="px-6 lg:px-12 mb-16 relative z-10 max-w-3xl">
<h2 class="text-4xl lg:text-5xl font-manrope font-semibold text-white tracking-tight reveal-text-line">
Recent <span class="text-neutral-600">Collaborations</span>
</h2>
</div>
<!-- Marquee Container -->
<div class="w-full relative flex flex-col gap-8 group">
<!-- Gradient Masks for Seamless Fade -->
<div class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-[#050505] to-transparent z-20 pointer-events-none"></div>
<div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-[#050505] to-transparent z-20 pointer-events-none"></div>
<!-- Row 1: Scroll Left -->
<div class="w-full overflow-hidden transform skew-x-0">
<div class="flex gap-6 animate-marquee-left marquee-track w-max pl-6 py-4">
<!-- Set 1 -->
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"The attention to detail is unmatched. The animations feel
organic and the performance scores are perfect."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ec73f0-6fd3-4d0c-922c-fcc592c983df_320w.webp" alt="Sarah L." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Sarah L.</div>
<div class="text-neutral-500 text-xs font-mono">
CTO, Fintech Inc.
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Transformed our legacy dashboard into a modern, blazing fast
application. The code quality is exceptional."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Mark D." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div class="">
<div class="text-white text-sm font-medium">Mark D.</div>
<div class="text-neutral-500 text-xs font-mono">
Product Lead, SaaS Co.
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"A rare combination of design sensibility and engineering rigor.
Delivered well ahead of schedule."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7fac4589-f18c-4e9a-b68d-c56fb2ab4a91_320w.webp" alt="Elena R." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Elena R.</div>
<div class="text-neutral-500 text-xs font-mono">
Founder, Studio X
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Refactored our entire frontend architecture. The developer
experience improvements were immediate."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/eae5dceb-fa80-4934-b110-86decb2f64ac_320w.webp" alt="David K." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">David K.</div>
<div class="text-neutral-500 text-xs font-mono">
VP Eng, DataFlow
</div>
</div>
</div>
</div>
<!-- Set 1 Duplicate (For Loop) -->
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"The attention to detail is unmatched. The animations feel
organic and the performance scores are perfect."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f19d9627-4570-4c87-b42e-f42bc9d1bc31_320w.jpg" alt="Sarah L." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Sarah L.</div>
<div class="text-neutral-500 text-xs font-mono">
CTO, Fintech Inc.
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Transformed our legacy dashboard into a modern, blazing fast
application. The code quality is exceptional."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c4ee565a-2084-483b-8358-9fc06da5ee99_320w.jpg" alt="Mark D." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Mark D.</div>
<div class="text-neutral-500 text-xs font-mono">
Product Lead, SaaS Co.
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"A rare combination of design sensibility and engineering rigor.
Delivered well ahead of schedule."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/48efba97-0b3f-4a79-a4e3-6d8f000e4515_320w.jpg" alt="Elena R." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Elena R.</div>
<div class="text-neutral-500 text-xs font-mono">
Founder, Studio X
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Refactored our entire frontend architecture. The developer
experience improvements were immediate."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg" alt="David K." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">David K.</div>
<div class="text-neutral-500 text-xs font-mono">
VP Eng, DataFlow
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Row 2: Scroll Right -->
<div class="w-full overflow-hidden transform skew-x-0">
<div class="flex gap-6 animate-marquee-right marquee-track w-max pl-6 py-4">
<!-- Set 2 (Same cards, shifted order for variety: 3, 4, 1, 2) -->
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"A rare combination of design sensibility and engineering rigor.
Delivered well ahead of schedule."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/43fc57bc-1266-44cf-a579-3f8ec64d4431_320w.webp" alt="Elena R." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Elena R.</div>
<div class="text-neutral-500 text-xs font-mono">
Founder, Studio X
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Refactored our entire frontend architecture. The developer
experience improvements were immediate."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/840334b9-a7b3-46b9-bc52-858af7161039_320w.jpg" alt="David K." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div class="">
<div class="text-white text-sm font-medium">David K.</div>
<div class="text-neutral-500 text-xs font-mono">
VP Eng, DataFlow
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"The attention to detail is unmatched. The animations feel
organic and the performance scores are perfect."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/99667665-1a71-4064-bf58-4743bb9e0ebc_320w.webp" alt="Sarah L." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Sarah L.</div>
<div class="text-neutral-500 text-xs font-mono">
CTO, Fintech Inc.
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Transformed our legacy dashboard into a modern, blazing fast
application. The code quality is exceptional."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c92852bb-a510-405a-85ab-ffa0fde136a4_320w.jpg" alt="Mark D." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Mark D.</div>
<div class="text-neutral-500 text-xs font-mono">
Product Lead, SaaS Co.
</div>
</div>
</div>
</div>
<!-- Set 2 Duplicate -->
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"A rare combination of design sensibility and engineering rigor.
Delivered well ahead of schedule."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b5fa796b-5a4e-4746-8463-8e491f896f5c_320w.jpg" alt="Elena R." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Elena R.</div>
<div class="text-neutral-500 text-xs font-mono">
Founder, Studio X
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Refactored our entire frontend architecture. The developer
experience improvements were immediate."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ddc37ed0-cf39-4a27-9409-f680f25cb6d7_320w.jpg" alt="David K." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">David K.</div>
<div class="text-neutral-500 text-xs font-mono">
VP Eng, DataFlow
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"The attention to detail is unmatched. The animations feel
organic and the performance scores are perfect."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/24f664fd-07a7-45e6-9553-ed03aa0c764f_320w.jpg" alt="Sarah L." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Sarah L.</div>
<div class="text-neutral-500 text-xs font-mono">
CTO, Fintech Inc.
</div>
</div>
</div>
</div>
<div class="w-[400px] h-[240px] glass-panel rounded-2xl p-8 flex flex-col justify-between shrink-0 transition-all duration-500 cursor-default">
<p class="text-neutral-300 text-lg font-light leading-relaxed">
"Transformed our legacy dashboard into a modern, blazing fast
application. The code quality is exceptional."
</p>
<div class="flex items-center gap-4 border-t border-white/5 pt-6 mt-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b1ff7db9-55f7-4ead-8fe2-f5b11ff644e0_320w.jpg" alt="Mark D." class="w-10 h-10 rounded-full object-cover shadow-inner ring-2 ring-white/10">
<div>
<div class="text-white text-sm font-medium">Mark D.</div>
<div class="text-neutral-500 text-xs font-mono">
Product Lead, SaaS Co.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer: Curtain Reveal -->
<footer class="lg:px-12 overflow-hidden reveal-group w-full border-white/10 border-t pt-32 pr-6 pb-12 pl-6 relative">
<!-- Large Background Text -->
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none opacity-[0.03]">
<span class="text-[25vw] font-bold font-manrope text-white tracking-tighter">
DANIEL
</span>
</div>
<div class="relative z-10 max-w-[1400px] mx-auto flex flex-col lg:flex-row justify-between items-start gap-20">
<div class="flex flex-col gap-8 max-w-2xl">
<h2 class="text-5xl lg:text-7xl font-semibold text-white tracking-tight leading-none reveal-curtain">
Ready to build
<span class="text-neutral-600">something iconic?</span>
</h2>
<div class="reveal-curtain transition-delay-100">
<button class="group flex items-center gap-4 text-xl text-white hover:text-neutral-300 transition-colors">
<span class="border-b border-white/30 pb-1">
Start a conversation
</span>
<svg class="transition-transform group-hover:translate-x-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-16 reveal-curtain transition-delay-200">
<div class="flex flex-col gap-4">
<span class="text-xs font-mono text-neutral-500 uppercase tracking-widest">
Socials
</span>
<a href="#" class="text-sm text-neutral-300 hover:text-white transition-colors">
Twitter / X
</a>
<a href="#" class="text-sm text-neutral-300 hover:text-white transition-colors">
GitHub
</a>
<a href="#" class="text-sm text-neutral-300 hover:text-white transition-colors">
LinkedIn
</a>
</div>
<div class="flex flex-col gap-4">
<span class="text-xs font-mono text-neutral-500 uppercase tracking-widest">
Sitemap
</span>
<a href="#" class="text-sm text-neutral-300 hover:text-white transition-colors">
Work
</a>
<a href="#" class="text-sm text-neutral-300 hover:text-white transition-colors">
About
</a>
<a href="#" class="text-sm text-neutral-300 hover:text-white transition-colors">
Lab
</a>
</div>
</div>
</div>
<div class="relative z-10 mt-32 pt-8 border-t border-white/5 flex justify-between items-center text-[10px] text-neutral-600 font-mono uppercase tracking-wider">
<span>© 2025 Frontend Engineer.</span>
<span>
Local time:
<span id="time">00:00 UTC</span>
</span>
</div>
</footer>
<script>
// Simple Time Script
setInterval(() => {
const now = new Date();
document.getElementById('time').innerText = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', timeZoneName: 'short' });
}, 1000);
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const text = document.querySelector(".parallax-text");
const visual = document.querySelector(".parallax-visual");
if (!text || !visual) return;
window.addEventListener("scroll", () => {
const scrolled = window.scrollY;
// Optimization: only animate when hero is roughly in view
if (scrolled > window.innerHeight) return;
// Text moves slightly down (slower scroll speed) to create depth
text.style.transform = `translate3d(0, ${scrolled * 0.2}px, 0)`;
text.style.opacity = Math.max(0, 1 - (scrolled / window.innerHeight));
// Visual moves slightly up (faster scroll speed) to feel closer
visual.style.transform = `translate3d(0, ${scrolled * -0.1}px, 0)`;
}, { passive: true });
});
</script>
<script>
document.addEventListener('mousemove',e=>{const t=document.getElementById('system-layer-content');if(t){const n=(window.innerWidth/2-e.clientX)*.01,o=(window.innerHeight/2-e.clientY)*.01;t.style.transform=`translate3d(${n}px,${o}px,0) rotateY(${n*.1}deg) rotateX(${-o*.1}deg)`}});
</script>
</body></html>