badrish
The interactive bee anatomy chapter on Dr. Srinivasan’s website, with a 3D bee, labelled callouts, and chapter controls.
A little playfulness, rooted in the subject: the live bee anatomy chapter.

A personal project with a practical problem

My dad’s teaching and research material had grown over many years. I wanted to give it a home that felt like him, while making papers, presentations, and learning resources easier to find.

My contribution covered the website design, front-end development, content migration, interactive 3D, and deployment. The research and teaching materials remain his and the credited contributors’ work.

Give the archive a way in

The site combines a career narrative with a searchable publication explorer, topic filters, a presentation library, reading resources, and video lessons. Visitors can browse publication records as a honeycomb or a list, and preview documents in the browser before downloading them.

FROM ARCHIVE TO LIVE WEBSITE

01Organise & credit content02Build navigation & readers03Add interactive 3D04Export & test on Hostinger

A bee with a story to tell

A Blender-generated illustrative bee model becomes a five-chapter Three.js experience. Camera views and labelled callouts introduce different parts of the bee. It connects the interaction to the subject of the site instead of adding decoration with no purpose.

Manual controls and reduced-motion support offer other ways to explore. Rendering pauses offscreen or in a hidden tab, and pixel density is capped to keep the scene manageable on smaller devices.

The work between “built” and “live”

The React and TypeScript application uses a Vinext/Vite static export. Delivering it on Hostinger required checking the actual output directory, clean URL behaviour, asset paths, and browser compatibility.

01 / ROUTES

Make clean URLs resolve.

Adapt the exported pages and hosting configuration so navigation reaches the intended page while real files and downloads keep working.

02 / DOCUMENTS

Fix the worker, fix the reader.

Hostinger served a PDF.js module worker as plain text. A host-compatible JavaScript worker path restored in-browser previews.

03 / MOBILE

Give the story room to move.

Tune the bee chapter’s touch-scroll distance, camera sequence, and navigation for a smaller viewport.

What this demonstrates

Front-end engineering includes content structure, interaction, accessibility, and the unglamorous details of getting a build to behave on a real host. This project brought those pieces together for someone whose work I care about.

Academic content and original research tools are credited to Dr. M. R. Srinivasan and the named contributors. The bee is an illustrative 3D model, not a validated anatomical reconstruction.