Overview
This portfolio website is a hands-on demonstration of modern front-end development. The entire site was designed, built, and deployed from scratch — covering everything from custom CSS animations and a dark-mode theming system to Firebase Hosting and Analytics integration. Every detail was crafted manually, from the starfield background to the responsive layout and smooth scroll behavior.
"Building this site was an exercise in keeping things lean — no frameworks, no build tools, just clean HTML, CSS, and JavaScript that loads instantly and works everywhere."
Features
Visual & UX
- Animated starfield background (CSS + JS)
- Mouse-trail falling star particle effect
- Hero avatar with radial glow ring
- Typing animation on page load
- Scroll-triggered fade-in for all sections
- Dark mode by default, persisted via localStorage
Navigation & Layout
- Sticky nav with active link highlight on scroll
- Smooth scroll to all sections
- Mobile hamburger menu
- Scroll-to-top button
- Fully responsive — desktop, tablet, mobile
- Project detail pages with Read More navigation
Tech Stack
Deliberately kept framework-free. No React, no build step, no bundler. The site loads instantly because there's nothing to compile or hydrate — just HTML, CSS, and a single JS file.
Development Process
The site was built entirely from scratch without any frameworks or build tools. Here's what went into it:
- Designed the visual language from scratch — dark space theme, gradient palette, and typography hierarchy
- Implemented all CSS animations manually, including the starfield, mouse-trail particles, and fade-in transitions
- Wrote all JavaScript features from the ground up — typing effect, scroll spy, Intersection Observer, mobile menu, and more
- Structured the project for maintainability — single stylesheet, single JS file, reusable component patterns
- Set up Firebase Hosting with CDN and SSL, and integrated Firebase Analytics for visitor tracking
- Built the project detail page system with consistent layout and navigation across all pages
"Keeping the stack minimal — no React, no bundler, no dependencies — means the site loads instantly and is trivial to maintain. Sometimes the right tool is just the platform itself."
CSS Architecture
The stylesheet uses CSS custom properties for a complete theming system. All colors, shadows, and surfaces switch between light and dark mode by toggling a single .dark class on the body.
- Primary gradient: indigo → plum (
#667eea → #764ba2) - Dark accent: lavender (
#E0BBE4) and plum (#957DAD) - Responsive breakpoints at 768px and 480px
- CSS Grid for skills and project layouts
- Keyframe animations: fadeInUp, blinkStars, fallStar