Skip to content

About

A small and basic sample portfolio that includes a gateway for sound, impressive CSS UI and animations and some Typescript

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Repository files navigation

Maya Chen Portfolio Website

Hey there, welcome to the portfolio project for Maya Chen, built this as a high-end showcase for a senior full-stack and distributed AI systems architect, honestly so hyped with how this turned out

What This Actually Is

Basically wanted to build something that feels super premium, not your usual boring dev portfolio, started with this pure black gateway modal that hits you right when you load in with a pulsing MC monogram logo and gives you two simple choices, Enter with Sound or Enter Muted, once you click Enter with Sound you get this rich ambient soundtrack that starts playing alongside delicate synthesized chimes whenever you hover or click on stuff, all generated in real time using the browser Web Audio API without needing heavy external sound effect downloads

The Vibe And Aesthetic

Went all in on a maximalist high-contrast monochrome look, lots of frosted glass everywhere, backdrop blur filters, silver borders, and subtle shadows, paired Playfair Display for the bold editorial headlines with Space Grotesk for the clean technical body type, plus real crisp photography that never gets dimmed or greyed out by annoying overlays, also threw in a dynamic particle canvas drifting in the background that has pointer events disabled so it never gets in the way of your clicks

What Is Inside

  • Gateway entrance modal with that pulsing logo and sound toggle
  • Sticky frosted glass navigation bar with a live animated equalizer wave
  • Hero section with oversized typography and a floating photo card that drifts gently
  • Live stat counters that roll up when you scroll down to them
  • Skills matrix laid out cleanly without generic badge clutter
  • Interactive career timeline highlighting distributed systems and AI milestones
  • Four featured engineering case studies with rich modal popups for deep dives
  • Working contact dispatch form with instant feedback and chime confirmation
  • Editorial footer with simulation disclaimer and back to top button

Tech Stack

Kept this totally lightweight and blisteringly fast, pure HTML5, modern CSS with custom variables, and vanilla JavaScript modules, no heavy framework runtime needed for this, Font Awesome 6 for icons, and Google Fonts for typography

How To Run It Locally

Clone or open up this directory, fire up any static server or run the development server with:

npm run dev

Then just pop open your browser at port 3000, hit Enter with Sound, and enjoy the vibe

About

A small and basic sample portfolio that includes a gateway for sound, impressive CSS UI and animations and some Typescript

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages