A sleek, interactive portfolio showcasing Noise-infused UI, particles, and ambient music — built with modern web tooling and a focus on performance and polish.
- Deployed to GitHub Pages: https://mahi6148.github.io/
- Frontend: React + TypeScript
- Build: Vite (fast dev & build)
- Styling: Tailwind CSS (utility-first), custom CSS variables
- Animations: Framer Motion
- UI primitives: Radix UI, lucide-react icons
- Worker/Concurrency: Web Worker for particle simulation
- Audio: HTMLAudioElement for background music (tracks in
public/) - Deployment: gh-pages (publishes
dist)
- Code-splitting & lazy loading: Heavy modules (particles, gamification widgets, music player) are lazy-loaded to reduce initial bundle and improve TTI.
- Web Workers: Offloads particle physics to a worker thread to keep the main thread responsive and maintain 60fps UI.
- Progressive enhancement & fallbacks: Worker fallback updates in main thread ensure the visual effect remains functional if the worker fails in some environments.
- Environment-aware asset resolution: Uses
import.meta.env.BASE_URLso assets inpublic/work correctly on GitHub Pages and other bases. - Responsive design: Tailwind responsive utilities replace runtime window-sizing logic for robust layouts across devices.
- Accessibility & performance-minded images:
loading="lazy"and alt text for images; reduced DOM updates and removed noisy logs. - Small runtime optimizations: Removed debug console logs, dropped console in terser build, and manual chunking to optimize caching.
- Install deps:
npm install- Start dev server (fast HMR):
npm run dev- Build for production:
npm run build- Preview production build locally:
npm run preview- Deploy to GitHub Pages:
npm run deployNotes:
- Place audio files (e.g.
.opus) in thepublic/folder so they are copied intodistand served with correct MIME types. - Ensure
vite.config.tsbaseis correct for project vs user GitHub Pages (the config now outputs todistto matchdeploy).
- Visual language: soft rounded UI, glassmorphism-like backdrops, gradient accents — consistent with the portfolio theme.
- Particles: arrow-shaped particles with subtle drift and connective lines for a lightweight, ambient motion.
- If audio fails to load: open DevTools → Network and confirm audio file URL starts with the repo base and returns 200 with an
audio/*Content-Type. - If the particle effect looks static in production: check DevTools Console for worker loading errors and Network headers for the worker file (should be
text/javascript). The app now includes a main-thread fallback so motion remains, but worker errors are logged.
- Replace tracks in
public/and updatesrc/components/MusicPlayer.tsxDEMO_TRACKSif you want different audio. - Tweak particle behavior in
src/workers/noiseParticlesWorker.tsandsrc/components/NoiseParticles.tsx(forces, drift, count).
Made with ⚡ Vite + ❤️ — enjoy the motion and music.