avalonxweb — Portfolio

Production-ready static landing page. No build step, no dependencies — pure HTML, CSS and vanilla JS.

Structure

.
├── index.html       — markup
├── styles.css       — all styles
├── script.js        — reveal animations, parallax, smooth scroll, rail scroll
└── assets/
    ├── favicon.svg / favicon-32.png / favicon-180.png / favicon-512.png
    ├── avatar.png
    ├── dungeon/     — 10 mobile screens from Dungeon Wallet
    └── pdf/         — 4 PDF decks (POSTHUMAN, Centrifuge, Sputnik, Quasar) + covers

Deploy

The site is a static folder. Drop it on any static host:

• Vercel: vercel --prod from the folder, or drag-drop the zip into the dashboard.
• Netlify: drag the folder into app.netlify.com/drop.
• Cloudflare Pages: connect a Git repo or upload the folder.
• GitHub Pages: push to a repo, enable Pages on the main branch.
• Any cPanel / FTP host: upload contents of the folder to public_html.

No environment variables, no build command — it's already built.

Local preview

# any static server works
python3 -m http.server 8000
# then open http://localhost:8000

What's inside

• Hero — name, role (Product UI/UX Lead), headline, stats, CTA buttons, framed portrait with HUD tags.
• About — product-first positioning, capabilities split into Product / Mobile / Web & Desktop / Systems.
• Selected Work — Umbrella (current Product Lead role, NDA-styled), featured Dungeon Wallet with a draggable/scrollable screen rail, plus half-cards: POSTHUMAN, Centrifuge, Sputnik, Quasar, WHITEHACKER, Norse Labs DVPN, Kilotons, Freelance.
• Decks — four PDF case studies with cover thumbnails (open in new tab).
• Stack — Design / Engineering / Practice / Process matrix (centered).
• Process — 4-step working loop.
• CTA / Contact — Telegram + email + location/availability table.
• Footer — links + copyright.

Customisation

All design tokens live as CSS custom properties at the top of styles.css (:root). Swap the palette, fonts or spacing there.

Fonts are loaded from Google Fonts: Syne (display), JetBrains Mono (body), Fraunces (italic accents).

Browser support

Modern evergreen browsers. Uses IntersectionObserver, CSS grid, custom properties, backdrop-filter. Falls back gracefully on older devices (reveal elements just appear without animation).

Contact

Telegram: @avalonweb Email: danilmilyutin2000@gmail.com