Personal portfolio website. Interactive, professional, and a touch of personality.
Live at: shaurya.online
| Service | URL | Focus |
|---|---|---|
| Main Website | shaurya.online | Primary hub & desktop experience |
| Mobile Portfolio | portfolio.shaurya.online | Tailored for mobile viewing |
| Project Archive | pages.shaurya.online | Hosted projects & live demos |
| Status Page | status.shaurya.online | Real-time uptime monitoring |
Built with vanilla HTML, CSS, and JavaScript
| Layer | Detail |
|---|---|
| Markup | Semantic HTML5 |
| Styling | Custom CSS with CSS variables, responsive grid, dark/light theme |
| Scripting | Vanilla JS — scroll effects, mini game, theme toggle, poke feature |
| Fonts | Playfair Display (headings) · Schibsted Grotesk (body) |
| Images | Compressed and converted to AVIF via Squoosh |
| Performance | Audited with Google Lighthouse — 90+ across all categories |
| Testing | Playwright end-to-end via GitHub Actions CI |
| Hosting | GitHub Pages + Vercel + Custom domain via shaurya.online |
| Monitoring | BetterStack, Status page, UptimeRobot (multi-region: Asia + US) |
- Dark / Light theme — persisted via localStorage
- Poke feature — silent form submission via Formspree, no page redirect
- Cursor glow + tilt effects — pointer-aware interactions on cards
- Side navigation — scroll-aware active state, visible on wide screens
- Fully responsive — optimised layouts from mobile to ultrawide
- Interactive mini game — checkmate in one, with confetti on solving
- CI pipeline — Playwright tests run on every push via GitHub Actions
#140e0b #1e1511 #f8efe6 #d4c1b0 #f5a35c #ff6e54 #91dbc0
portfolio-web/
├── index.html # Single page markup
├── styles.css # All styles, variables, and media queries
├── script.js # All interactivity
├── assets/ # AVIF-optimised images, icons, chess pieces, resume PDF
└── tests/
└── portfolio.spec.js # Playwright UI tests
No build step required — just open the file.
git clone https://github.com/vermashaurya/vermashaurya.github.io.git
cd vermashaurya.github.io
open index.htmlOr serve it locally:
npx serve .
Google Lighthouse: Performance 99 · Accessibility 98 · Best Practices 100 · SEO 100
- Incident Reports — Tracked via BetterStack (SF + Mumbai + UK + Syd) & UptimeRobot (Asia + US regions)
- Real-time Alerts — Email and push notifications enabled
- Status Page — /status for an overview, or Check Status for a detailed report
- Performance Monitoring — Vercel Speed Insights (real user metrics)
Primary monitoring on Asia region with secondary US, UK, EU & AU monitors for global availability checks.
End-to-end UI tests written with Playwright, covering navigation, section visibility, contact links, and resume download.
npm install
npx playwright testCI runs automatically on every push via .github/workflows/playwright.yml.
This project is licensed under the MIT License.
Copyright © 2026
Feel free to take inspiration.
Happy Coding!
