FILES: - index.html - assets/style.css - assets/app.js --- path: index.html --- Enzo M — Developer & Creator
Available for work

Building things that matter.

Full-stack engineer & creative technologist.
I craft interfaces that feel alive and systems that scale.

Get in touch See my work
scroll
0 Projects shipped
0 Years experience
0 Happy clients
0 Open source libs
Selected work

Projects

2024

Nexus Dashboard

Real-time analytics platform processing 2M+ events/day. Built with WebSockets, edge workers, and a custom rendering engine for zero-latency charts.

TypeScriptRustWebGL
2024

Chronos Protocol

Distributed task scheduler with visual DAG editor. Handles dependency chains across 500+ microservices with automatic retry and circuit breaking.

GoReactgRPC
2023

Strata UI

Open-source component library with 80+ primitives. Zero dependencies, full a11y, tree-shakeable. 4k+ GitHub stars and used in production by 300+ teams.

CSSWeb ComponentsA11y
About

Obsessed with
craft + clarity.

I'm Enzo — a full-stack engineer based somewhere between terminal windows and sketchbooks. I specialise in high-performance web applications, developer tooling, and the occasional side project that spirals out of control.

When I'm not pushing commits, I'm probably reading about distributed systems, tinkering with hardware, or arguing about type systems.

hello@enzom.dev GitHub ↗
TypeScript / JS
Rust / Go
Systems Design
UI / UX Design
DevOps / Infra
Contact

Let's build
something
remarkable.

Whether it's a product idea, a consulting gig, or just a conversation about tech — my inbox is open.

Send me an email
🚀

You found the easter egg.
+100 dev cred.

--- path: assets/style.css --- /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #080b10; --surface: #0e1420; --border: rgba(255,255,255,0.07); --text: #e8ecf4; --muted: #6b7794; --accent: #00e5a0; --accent2: #0070f3; --warn: #ff6b35; --font-display: 'Syne', sans-serif; --font-mono: 'JetBrains Mono', monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 15px; line-height: 1.7; overflow-x: hidden; cursor: none; } a { color: inherit; text-decoration: none; } /* ── Grain overlay ── */ .grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.35; } /* ── Custom cursor ── */ .cursor-dot, .cursor-ring { position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%, -50%); transition: opacity 0.3s; } .cursor-dot { width: 6px; height: 6px; background: var(--accent); } .cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(0,229,160,0.4); transition: width 0.2s var(--ease-out), height 0.2s var(--ease-out), border-color 0.2s; } body:has(a:hover) .cursor-ring, body:has(button:hover) .cursor-ring { width: 52px; height: 52px; border-color: var(--accent); } /* ── Nav ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 3rem; transition: background 0.4s, backdrop-filter 0.4s, padding 0.3s; } .nav.scrolled { background: rgba(8,11,16,0.85); backdrop-filter: blur(20px); padding: 1rem 3rem; border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--accent); letter-spacing: -0.02em; } .nav-links { display: flex; gap: 2.5rem; list-style: none; } .nav-links a { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); position: relative; padding-bottom: 2px; transition: color 0.2s; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 0.3s var(--ease-out); } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { width: 100%; } /* ── Hero ── */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 8rem 2rem 6rem; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.18; animation: orbFloat 14s ease-in-out infinite alternate; } .orb-1 { width: 500px; height: 500px; background: var(--accent); top: -10%; left: -10%; animation-duration: 16s; } .orb-2 { width: 400px; height: 400px; background: var(--accent2); bottom: -15%; right: -5%; animation-duration: 20s; animation-delay: -5s; } .orb-3 { width: 300px; height: 300px; background: var(--warn); top: 30%; left: 50%; animation-duration: 24s; animation-delay: -10s; opacity: 0.10; } @keyframes orbFloat { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(40px, 30px) scale(1.08); } } .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); } .hero-content { position: relative; z-index: 1; max-width: 860px; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem; border: 1px solid rgba(0,229,160,0.25); border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--accent); margin-bottom: 2.5rem; background: rgba(0,229,160,0.06); } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,160,0.25); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(0,229,160,0.25); } 50% { box-shadow: 0 0 0 7px rgba(0,229,160,0); } } .hero-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 1.8rem; display: flex; flex-direction: column; align-items: center; } .line { display: block; } .accent-line { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-sub { font-size: clamp(0.9rem, 2vw, 1.05rem); color: var(--muted); max-width: 500px; margin: 0 auto 3rem; line-height: 1.8; } .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.8rem; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.03em; border-radius: 6px; border: none; cursor: none; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, background 0.2s; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.08); transform: translateX(-100%); transition: transform 0.35s var(--ease-out); } .btn:hover::before { transform: translateX(0); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: #080b10; font-weight: 500; box-shadow: 0 0 30px rgba(0,229,160,0.2); } .btn-primary:hover { box-shadow: 0 0 50px rgba(0,229,160,0.35); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { border-color: rgba(255,255,255,0.2); } .btn-large { padding: 1.1rem 2.5rem; font-size: 1rem; } /* ── Hero scroll indicator ── */ .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 1; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0; animation: fadeUp 1s 1.5s var(--ease-out) forwards; } .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--muted)); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity: 0.4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.2); } } /* ── Stats strip ── */ .stats-strip { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 3rem 2rem; } .stats-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; align-items: center; padding: 1rem 3rem; text-align: center; } .stat-num { font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; line-height: 1; background: linear-gradient(135deg, var(--text), var(--muted)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; } .stat-div { width: 1px; height: 50px; background: var(--border); } /* ── Section common ── */ .section-tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; font-weight: 500; } .section-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .section-header { text-align: center; margin-bottom: 4rem; } /* ── Work / Projects ── */ .work { padding: 8rem 2rem; max-width: 1100px; margin: 0 auto; } .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .project-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s; cursor: none; } .project-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,229,160,0.06) 0%, transparent 60%); opacity: 0; transition: opacity 0.3s; } .project-card:hover::before { opacity: 1; } .project-card:hover { border-color: rgba(0,229,160,0.25); transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; } .card-icon { color: var(--accent); } .card-year { font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; } .card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 0.8rem; } .card-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; } .card-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .card-tags span { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); } .card-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); transition: color 0.2s, border-color 0.2s, background 0.2s; } .card-link:hover { color: var(--accent); border-color: var(--accent); background: rgba(0,229,160,0.08); } /* ── About ── */ .about { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8rem 2rem; } .about-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } .about-text p { color: var(--muted); margin-bottom: 1rem; font-size: 0.9rem; } .about-text .section-title em { font-style: normal; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .about-links { display: flex; gap: 1.5rem; margin-top: 2rem; } .text-link { font-size: 0.82rem; color: var(--accent); border-bottom: 1px solid rgba(0,229,160,0.3); padding-bottom: 2px; transition: border-color 0.2s; } .text-link:hover { border-color: var(--accent); } .skill-item { margin-bottom: 1.4rem; } .skill-name { display: block; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.5rem; text-transform: uppercase; } .skill-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; } .skill-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 1s var(--ease-out); } /* ── Contact ── */ .contact { padding: 8rem 2rem; text-align: center; position: relative; overflow: hidden; } .contact::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(0,229,160,0.06) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); } .contact-inner { position: relative; z-index: 1; } .contact-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1.0; letter-spacing: -0.04em; margin: 1rem 0 1.5rem; } .contact-title em { font-style: normal; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .contact-sub { max-width: 420px; margin: 0 auto 3rem; color: var(--muted); font-size: 0.9rem; } /* ── Footer ── */ .footer { background: var(--surface); border-top: 1px solid var(--border); padding: 2.5rem 3rem; } .footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--accent); } .footer-copy { font-size: 0.75rem; color: var(--muted); } .footer-hint { font-size: 0.72rem; color: rgba(255,255,255,0.2); } .footer-hint kbd { font-family: var(--font-mono); background: var(--border); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px; padding: 1px 5px; font-size: 0.68rem; } /* ── Easter egg ── */ .egg-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(8,11,16,0.92); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s; } .egg-overlay.show { opacity: 1; pointer-events: auto; } .egg-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 3rem; text-align: center; max-width: 360px; transform: scale(0.9); transition: transform 0.4s var(--ease-spring); } .egg-overlay.show .egg-box { transform: scale(1); } .egg-icon { font-size: 3.5rem; margin-bottom: 1.5rem; } .egg-box p { color: var(--muted); margin-bottom: 2rem; font-size: 0.9rem; line-height: 1.7; } .egg-box strong { color: var(--text); } /* ── Reveal animations ── */ .reveal { opacity: 0; transform: translateY(28px); animation: fadeUp 0.9s var(--ease-out) forwards; } [data-delay="0.1"] { animation-delay: 0.1s; } [data-delay="0.2"] { animation-delay: 0.2s; } [data-delay="0.3"] { animation-delay: 0.3s; } .reveal-section { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal-section.in-view { opacity: 1; transform: translateY(0); } [data-index="0"] { transition-delay: 0s; } [data-index="1"] { transition-delay: 0.12s; } [data-index="2"] { transition-delay: 0.24s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } /* ── Responsive ── */ @media (max-width: 768px) { .nav { padding: 1.2rem 1.5rem; } .nav.scrolled { padding: 0.9rem 1.5rem; } .nav-links { gap: 1.5rem; } .about-inner { grid-template-columns: 1fr; gap: 3rem; } .stats-inner { gap: 0; } .stat { padding: 1rem 1.5rem; } .stat-div { display: none; } .footer-inner { flex-direction: column; align-items: flex-start; } body { cursor: auto; } .cursor-dot, .cursor-ring { display: none; } } --- path: assets/app.js --- 'use strict'; /* ── Custom cursor ── */ const dot = document.getElementById('cursorDot'); const ring = document.getElementById('cursorRing'); let ringX = 0, ringY = 0, dotX = 0, dotY = 0; window.addEventListener('mousemove', e => { dotX = e.clientX; dotY = e.clientY; }); (function animateCursor() { ringX += (dotX - ringX) * 0.12; ringY += (dotY - ringY) * 0.12; dot.style.left = dotX + 'px'; dot.style.top = dotY + 'px'; ring.style.left = ringX + 'px'; ring.style.top = ringY + 'px'; requestAnimationFrame(animateCursor); })(); /* ── Nav scroll state ── */ const nav = document.getElementById('nav'); window.addEventListener('scroll', () => { nav.classList.toggle('scrolled', window.scrollY > 40); }, { passive: true }); /* ── Card spotlight effect ── */ document.querySelectorAll('.project-card').forEach(card => { card.addEventListener('mousemove', e => { const rect = card.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(1); const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(1); card.style.setProperty('--mx', x + '%'); card.style.setProperty('--my', y + '%'); }); }); /* ── Intersection observer: reveal sections ── */ const revealEls = document.querySelectorAll('.reveal-section'); const obs = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('in-view'); obs.unobserve(entry.target); } }); }, { threshold: 0.12 }); revealEls.forEach(el => obs.observe(el)); /* ── Skill bars: animate when in view ── */ const skillObs = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.querySelectorAll('.skill-fill').forEach(bar => { const w = bar.dataset.width; setTimeout(() => { bar.style.width = w + '%'; }, 200); }); skillObs.unobserve(entry.target); } }); }, { threshold: 0.3 }); document.querySelectorAll('.about-skills').forEach(el => skillObs.observe(el)); /* ── Counter animation ── */ function animateCount(el) { const target = +el.dataset.target; const duration = 1400; const start = performance.now(); function step(now) { const progress = Math.min((now - start) / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); el.textContent = Math.round(eased * target); if (progress < 1) requestAnimationFrame(step); else el.textContent = target; } requestAnimationFrame(step); } const statsObs = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.querySelectorAll('.stat-num').forEach(animateCount); statsObs.unobserve(entry.target); } }); }, { threshold: 0.4 }); document.querySelectorAll('.stats-strip').forEach(el => statsObs.observe(el)); /* ── Easter egg: Konami-ish (↑↑↓↓) ── */ const eggOverlay = document.getElementById('eggOverlay'); const eggClose = document.getElementById('eggClose'); const sequence = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown']; let seqIndex = 0; document.addEventListener('keydown', e => { if (e.key === sequence[seqIndex]) { seqIndex++; if (seqIndex === sequence.length) { eggOverlay.classList.add('show'); seqIndex = 0; } } else { seqIndex = e.key === sequence[0] ? 1 : 0; } }); eggClose.addEventListener('click', () => eggOverlay.classList.remove('show')); eggOverlay.addEventListener('click', e => { if (e.target === eggOverlay) eggOverlay.classList.remove('show'); });