FILES: - index.html - assets/styles.css - assets/main.js --- path: index.html --- Enzo M. | Digital Architect

System.init(version: "gemini")

Building digital landscapes with intent.

Enzo M. is a creative developer focused on bridging the gap between performance-driven code and human-centric design.

View Projects Get in touch

Selected Works

01

Nebula Protocol

A decentralized infrastructure layer for edge computing nodes.

RustWASM
02

Synthetix UI

An open-source design system built for rapid prototyping in React.

CSSJS
03

Flux Engine

High-performance rendering engine for static site generation.

GoCaddy

Ready to start?

Always open to discussing technical architecture or creative collaborations.

--- path: assets/styles.css --- :root { --bg: #0a0a0c; --surface: #141417; --text: #e1e1e6; --text-dim: #9494a5; --accent: #00ff9d; --accent-glow: rgba(0, 255, 157, 0.3); --font-main: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-main); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } #noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://grainy-gradients.vercel.app/noise.svg'); opacity: 0.05; pointer-events: none; z-index: 9999; } #cursor-glow { position: fixed; width: 400px; height: 400px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; transform: translate(-50%, -50%); transition: opacity 0.3s ease; opacity: 0; } nav { padding: 2rem; position: fixed; width: 100%; top: 0; z-index: 100; backdrop-filter: blur(10px); } .nav-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--font-mono); font-weight: 700; letter-spacing: -1px; font-size: 1.2rem; } .links a { color: var(--text-dim); text-decoration: none; margin-left: 2rem; font-size: 0.9rem; transition: color 0.3s; } .links a:hover { color: var(--accent); } main { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } section { padding: 100px 0; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; } #hero { min-height: 100vh; } .pre-title { font-family: var(--font-mono); color: var(--accent); font-size: 0.9rem; margin-bottom: 1rem; } h1 { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.1; font-weight: 700; margin-bottom: 2rem; max-width: 900px; } .gradient-text { background: linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about-line { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--text-dim); max-width: 600px; margin-bottom: 3rem; } .cta-group { display: flex; gap: 1.5rem; } .btn { padding: 1rem 2rem; border-radius: 4px; text-decoration: none; font-weight: 600; transition: all 0.3s; font-family: var(--font-mono); font-size: 0.9rem; } .btn.primary { background: var(--accent); color: var(--bg); } .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px var(--accent); } .btn.secondary { border: 1px solid #333; color: var(--text); } .btn.secondary:hover { border-color: var(--accent); background: rgba(255,255,255,0.05); } .section-label { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; color: var(--accent); margin-bottom: 3rem; letter-spacing: 2px; } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .project-card { background: var(--surface); padding: 3rem 2rem; border: 1px solid #222; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; } .project-card:hover { border-color: var(--accent); transform: translateY(-5px); } .card-num { font-family: var(--font-mono); color: #222; font-size: 4rem; position: absolute; top: -10px; right: 10px; font-weight: 700; z-index: 0; } .project-card h3 { position: relative; z-index: 1; margin-bottom: 1rem; } .project-card p { color: var(--text-dim); margin-bottom: 1.5rem; font-size: 0.95rem; } .tags { display: flex; gap: 0.5rem; } .tags span { font-size: 0.7rem; font-family: var(--font-mono); background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 2px; } .contact-box { text-align: center; background: linear-gradient(rgba(255,255,255,0.02), transparent); padding: 5rem 2rem; border-radius: 8px; } .email-link { font-size: clamp(1.5rem, 5vw, 3rem); color: var(--text); text-decoration: none; font-weight: 700; border-bottom: 2px solid var(--accent); display: inline-block; margin-top: 2rem; transition: all 0.3s; } .email-link:hover { color: var(--accent); } footer { padding: 4rem 2rem; border-top: 1px solid #111; text-align: center; } .footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; color: var(--text-dim); font-size: 0.8rem; } .easter-egg-hint { cursor: help; } @media (max-width: 768px) { .nav-content { flex-direction: column; gap: 1rem; } .links { margin: 0; } .links a { margin: 0 10px; } .footer-content { flex-direction: column; gap: 1rem; } } --- path: assets/main.js --- document.addEventListener('DOMContentLoaded', () => { const glow = document.getElementById('cursor-glow'); // Mouse Glow Effect document.addEventListener('mousemove', (e) => { glow.style.opacity = '1'; glow.style.left = e.clientX + 'px'; glow.style.top = e.clientY + 'px'; }); // Intersection Observer for Reveal Animations const observerOptions = { threshold: 0.1 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); document.querySelectorAll('.project-card, h1, .about-line').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; el.style.transition = 'all 0.8s cubic-bezier(0.23, 1, 0.32, 1)'; observer.observe(el); }); // Easter Egg: Press 'G' to trigger a glitch/accent change document.addEventListener('keydown', (e) => { if (e.key.toLowerCase() === 'g') { const root = document.documentElement; const colors = ['#00ff9d', '#00ccff', '#ff0055', '#ffcc00']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; root.style.setProperty('--accent', randomColor); // Console Message console.log("%c System Override: Color shifted to " + randomColor, "color: " + randomColor + "; font-weight: bold;"); // Subtle shake effect document.body.style.animation = 'shake 0.2s ease-in-out'; setTimeout(() => { document.body.style.animation = ''; }, 200); } }); }); // Add dynamic shake animation via JS for the easter egg const style = document.createElement('style'); style.innerHTML = ` @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(5px); } 50% { transform: translateX(-5px); } 100% { transform: translateX(0); } }`; document.head.appendChild(style);