A single-page portfolio for Manash K., a UI and interactive web developer who designs and hand-codes animated, 3D and interactive websites for startups and small businesses. It is hand-coded in one HTML file with no framework, no build step and no template.
- Living character. A 3D-style portrait built from separate layers (body, head, face, eyes). The head turns and the pupils follow your cursor.
- Smarter eyes in the contact section. Snappy eye movement with tiny overshoot, micro-saccades, asymmetric blinks (sometimes double), a head tilt while you type, a wink on Copy email / Send enquiry, and "smiling" eyes when you hover a button. After a few seconds of inactivity he looks around the section and makes eye contact.
- Selected work. Twelve live, UI-focused projects. Hovering a row shows a generated preview card that follows the cursor.
- Packages. Three clear price tiers: Basic, Standard (most picked) and Premium (immersive 3D / interactive). Each one opens a WhatsApp chat.
- Process. Four steps: Brief, Direction, Build, Launch.
- Contact. A direct WhatsApp button (+91 92587 11610) and an enquiry form that sends to the owner's inbox, with a
mailto:fallback if sending fails. - Details. Custom cursor, magnetic buttons, scroll progress bar, grain overlay, scroll-reveal animations, and
prefers-reduced-motionsupport.
 |
 |
| Selected work | Hover preview card |
 |
 |
| Packages | Process |
| Project | What it is |
|---|---|
| Vinyl Vault | Skeuomorphic hi-fi shop and record club: working SVG turntable, Web Audio vinyl sound, ambient rain/hearth mixer, 3D sleeves, lead form. Single HTML file, no images |
| Material Theory | Interactive 3D material visualizer for architects with instant cost estimates |
| Kabaad | Brutalist marketplace and zine for scrap artists, with synthesized sound |
| Stepwells | Scroll-driven 3D gallery of India's stepwells with ambient audio and a reduced-motion fallback |
| Pelagic One | Concept swim-watch site with a WebGL underwater background and glassmorphism UI |
| Spice Atlas | Interactive guide to India's spices: pantry, map, flavour wheel, sound |
| SoftCraft | Neumorphic UI studio landing page with a shadow playground and dark mode |
| AURA ONE | Scroll-driven 3D headphone page (Three.js, GSAP, Lenis) with a finish picker |
| Meridian One | Scroll-driven underwater 3D watch site built with Three.js |
| NIMBUS ONE | Scroll-driven 3D running-shoe page with a finish picker |
| Forge Gym | Responsive fitness website with schedules, trainers and plans |
| Grinova Dental | Dental clinic site with booking, before/after slider, live map and a Gemini chatbot |
- Plain HTML, CSS and JavaScript in one self-contained file (
index.html). Images are embedded, so there are no asset folders and no dependencies. - Fonts from Google Fonts: Bricolage Grotesque, Instrument Sans and Instrument Serif. If they cannot load, system fonts are used instead.
- Contact form delivery through FormSubmit (no account needed).
Just open index.html in a browser. Or serve the folder:
npx serve .Because it is a single static file, it works on any static host.
- Vercel / Netlify: drag the folder into the dashboard, or connect the repo.
- GitHub Pages: push to a repo and enable Pages on the main branch.
The form posts to FormSubmit and delivers to webdevmanash@gmail.com.
- Deploy the site to your own domain or host.
- Submit the form once yourself.
- FormSubmit sends a one-time confirmation email. Click the link in it, otherwise later enquiries will not arrive.
If sending is blocked or fails (for example offline, or on a host that restricts outside requests), the form falls back to opening the visitor's email app with the message filled in.
Everything is in index.html:
| What | Where to look |
|---|---|
| Projects (name, blurb, tags, link) | the P array in the script near the bottom |
| WhatsApp number | search for 919258711610 (buttons, contact line, footer, package cards) |
| Prices and package details | the #packages section |
| Email address | search for webdevmanash@gmail.com (link, copy button and form) |
| Social links | the <footer> |
| Colors and spacing | the CSS variables at the top of the <style> block |
| Eye and head behaviour | the "contact peek" script (contact section) and the "character" script (hero) |
- Headings and landmarks are semantic, and the portrait has a text description.
- Animations are turned off for visitors who prefer reduced motion.
- The contact-section character is hidden below 900px width, where there is no room for it.
Manash K. GitHub · LinkedIn · WhatsApp · webdevmanash@gmail.com
© 2026 Manash K. · Built by hand, no templates.