Cyberpunk-minimal portfolio. Dark theme, GSAP animations, neon accents.
- HTML5 + Tailwind CSS 3.4 (CDN, JIT)
- GSAP 3.12 + ScrollTrigger
- Vanilla JS (zero framework overhead)
- Google Fonts: Space Grotesk + DM Mono
index.html ← Main page
style-custom.css ← Neon vars, layout, animations CSS
gsap-animations.js ← GSAP ScrollTrigger, hero parallax, stagger reveals
projects.js ← 12 project entries (cat/img/title/desc/url)
README.md
npx vercel --prodDrag-and-drop the folder at app.netlify.com/drop
Push to main, enable Pages from Settings → Pages → Deploy from branch.
Edit projects.js — each object:
{
id: 1,
cat: 'VIDEO', // VIDEO | AI | VFX | MOTION
img: 'https://...', // 800px wide, 16:9
title: 'Project Name',
desc: 'Short description',
url: 'https://...'
}In style-custom.css, edit :root:
--neon: #00d4ff; /* Main accent */In index.html search for "Cris Del Ninno" and "about-bio".
In index.html #contact section — update href attributes.
Update href="mailto:cris@delninno.com" and the visible text.
- LCP: < 1s (fonts preloaded, images lazy)
- Lighthouse: 95+ Performance, 100 Accessibility
- Bundle: < 50KB HTML+CSS+JS (excluding CDN GSAP ~80KB gzipped)
- ARIA live region on projects grid
- ARIA pressed state on filter buttons
- Keyboard navigable (tab order preserved)
@prefers-reduced-motiondisables all animations & custom cursor- Semantic HTML5 landmarks (nav, main, section, article)