``` FILES: - index.html - assets/style.css - assets/app.js --- path: index.html --- Enzo M. • Creative Technologist

Hey, I'm Enzo

Creative technologist crafting elegant digital experiences

View My Work Get in Touch

About

I'm a passionate developer and designer who loves blending code with creativity. When I'm not building web apps, you'll find me experimenting with new technologies, contributing to open source, or exploring the intersection of art and technology.

Projects

🎨

Design System

A modular, accessible component library built with modern CSS and vanilla JS.

Learn more →
🚀

API Dashboard

Real-time analytics dashboard with interactive charts and dark mode support.

Learn more →
🤖

AI Playground

Experimental interface for exploring generative AI models with creative prompts.

Learn more →

Let's Connect

Have a project in mind or just want to say hello? I'd love to hear from you!

Email Me
--- path: assets/style.css --- /* ===== CSS Variables & Theme ===== */ :root { --bg-primary: #ffffff; --bg-secondary: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --accent: #6366f1; --accent-hover: #4f46e5; --border: #e2e8f0; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --transition: all 0.3s ease; } [data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --accent: #818cf8; --accent-hover: #a5b4fc; --border: #334155; --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2); } /* ===== Reset & Base ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: var(--transition); overflow-x: hidden; } /* ===== Utilities ===== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .skip-link { position: absolute; top: -40px; left: 0; background: var(--accent); color: white; padding: 0.5rem 1rem; z-index: 100; transition: top 0.3s; } .skip-link:focus { top: 0; } .section { padding: 5rem 0; } .section-title { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ===== Header & Nav ===== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); transition: var(--transition); } [data-theme="dark"] .site-header { background: rgba(15, 23, 42, 0.8); } .nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; max-width: 1200px; margin: 0 auto; } .nav-brand { font-weight: 700; font-size: 1.25rem; color: var(--accent); } .theme-toggle { background: none; border: none; cursor: pointer; padding: 0.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); color: var(--text-primary); } .theme-toggle:hover { background: var(--bg-secondary); transform: rotate(15deg); } .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; } .icon.moon { display: none; } [data-theme="dark"] .icon.sun { display: none; } [data-theme="dark"] .icon.moon { display: block; } /* ===== Hero Section ===== */ .hero { min-height: 90vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 2rem 0; } .hero-content { text-align: center; max-width: 800px; padding: 0 1.5rem; z-index: 2; animation: fadeInUp 0.8s ease-out; } .hero-title { font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 800; margin-bottom: 1rem; line-height: 1.1; } .accent { background: linear-gradient(135deg, var(--accent), var(--accent-hover)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2rem; } .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn { padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: var(--transition); cursor: pointer; border: 2px solid transparent; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover { background: var(--bg-secondary); transform: translateY(-2px); } .btn-small { padding: 0.5rem 1rem; font-size: 0.9rem; } .orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.5; animation: float 8s ease-in-out infinite; } .orb-1 { width: 300px; height: 300px; background: var(--accent); top: 10%; right: 10%; animation-delay: 0s; } .orb-2 { width: 200px; height: 200px; background: var(--accent-hover); bottom: 15%; left: 15%; animation-delay: -4s; } /* ===== About Section ===== */ .about { background: var(--bg-secondary); } .about-text { max-width: 700px; margin: 0 auto; text-align: center; font-size: 1.1rem; color: var(--text-secondary); } /* ===== Projects Section ===== */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .project-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: var(--transition); animation: fadeInUp 0.6s ease-out backwards; } .project-card:nth-child(2) { animation-delay: 0.1s; } .project-card:nth-child(3) { animation-delay: 0.2s; } .project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .project-icon { font-size: 2rem; margin-bottom: 1rem; } .project-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .project-desc { color: var(--text-secondary); margin-bottom: 1rem; font-size: 0.95rem; } .project-link { color: var(--accent); text-decoration: none; font-weight: 500; transition: var(--transition); } .project-link:hover { color: var(--accent-hover); } /* ===== Contact Section ===== */ .contact { text-align: center; background: var(--bg-secondary); } .contact-text { max-width: 600px; margin: 0 auto 2rem; color: var(--text-secondary); } /* ===== Footer ===== */ .site-footer { padding: 2rem 0; border-top: 1px solid var(--border); text-align: center; color: var(--text-secondary); font-size: 0.9rem; } .footer-links { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; } .footer-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: var(--transition); } .footer-links a:hover { color: var(--accent); } /* ===== Easter Egg ===== */ .easter-egg { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn 0.3s ease; } .easter-egg-content { background: var(--bg-primary); padding: 2rem; border-radius: 16px; text-align: center; max-width: 400px; box-shadow: var(--shadow-lg); animation: popIn 0.4s ease; } .easter-emoji { font-size: 3rem; display: block; margin-bottom: 1rem; } /* ===== Animations ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -20px); } } /* ===== Responsive ===== */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; } .hero-cta { flex-direction: column; align-items: center; } .section { padding: 3rem 0; } .nav { padding: 0.75rem 1rem; } } /* ===== Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } --- path: assets/app.js --- // ===== Theme Toggle ===== const themeToggle = document.getElementById('themeToggle'); const html = document.documentElement; const savedTheme = localStorage.getItem('theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (savedTheme === 'dark' || (!savedTheme && prefersDark)) { html.setAttribute('data-theme', 'dark'); } themeToggle.addEventListener('click', () => { const current = html.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; html.setAttribute('data-theme', next); localStorage.setItem('theme', next); }); // ===== Dynamic Year ===== document.getElementById('year').textContent = new Date().getFullYear(); // ===== Smooth Scroll for Anchor Links ===== document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // ===== Easter Egg: Konami Code + "cool" ===== const konamiCode = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a']; let konamiIndex = 0; const coolCode = ['c','o','o','l']; let coolIndex = 0; const easterEgg = document.getElementById('easter-egg'); const closeEaster = document.getElementById('closeEaster'); function showEasterEgg() { easterEgg.hidden = false; document.body.style.overflow = 'hidden'; } document.addEventListener('keydown', (e) => { // Konami code if (e.key === konamiCode[konamiIndex]) { konamiIndex++; if (konamiIndex === konamiCode.length) { showEasterEgg(); konamiIndex = 0; } } else { konamiIndex = 0; } // "cool" code (case-insensitive) if (e.key.toLowerCase() === coolCode[coolIndex]) { coolIndex++; if (coolIndex === coolCode.length) { showEasterEgg(); coolIndex = 0; } } else { coolIndex = 0; } }); closeEaster.addEventListener('click', () => { easterEgg.hidden = true; document.body.style.overflow = ''; }); easterEgg.addEventListener('click', (e) => { if (e.target === easterEgg) { easterEgg.hidden = true; document.body.style.overflow = ''; } }); // ===== Subtle Scroll Animations ===== const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; observer.unobserve(entry.target); } }); }, observerOptions); document.querySelectorAll('.project-card').forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(card); }); ```