How this site is built

A portfolio for an AI engineer has to prove systems thinking, not claim it. The design and motion must serve one story, paint text first, and never cost a mid-range phone its frame rate.

1. 01Forest Film, a design system of panels: every section is a rounded panel that slides over the one before, on bone, sage, a drenched green or deep night, with one amber accent on the dark grounds and forest on the light ones. Archivo is the only typeface, used on its width axis; film grain sits over the whole page.
2. 02The hero is the film seen through my name: "Shravan" is cut out of a deep green sheet (a multiply mask), the footage plays inside the letters, and scrolling flies the camera through the second "a" into the film, where the tagline, the calls to action and the portrait rise. The footage is graded once at encode time as a forest duotone, so no filter runs in the browser.
3. 03Living type: section titles and the name are split into letters that rise out of their masks as they arrive and swell in width and weight toward a fine pointer, one animation frame per pointer move and only while on screen. Under reduced motion and on touch they simply stand.
4. 04The portraits respond to the visitor: hover, focus or tap the hero portrait and a light edge wipes it from black and white to colour while the card tilts toward the pointer; About's photograph blooms from the green duotone into colour; How I work has a living portrait in raw WebGL2 with depth parallax, loaded lazily on capable desktops only.
5. 05Lenis smooth scroll synced to the GSAP ticker; ScrollTrigger plays an illustrative agent trace and the five-step method as you scroll, and the systems recede as the next one arrives (scroll-driven CSS, no JavaScript).
6. 06Product mockups are HTML and CSS in the same system (rounded light windows, quiet lines, the accent for live states), crisp at any pixel density, labelled illustrative where they are not real screenshots, and static under reduced motion.
7. 07Case pages are static routes with shared-element view transitions from the home page and the work index, and a CSS fade where the View Transitions API is missing.
8. 08Architecture diagrams are hand-authored inline SVG (rounded boxes, the key node in the accent), labelled for screen readers and drawn on scroll.
9. 09Enquiries go through one validated route handler straight to an inbox. No database, no CMS: content is typed TypeScript checked by a test that also bans private names.

• First-load JavaScript, gzip: 283.5 KB on the home page, 248.6 KB on the work index and 213.6 KB on a case page.
• No three.js. The one WebGL layer is the living portrait in How I work, a lazy 4.1 KB (gzip) chunk for capable desktops only, and Motion's layout engine (28.0 KB gzip) loads after hydration for the filterable grids.
• Every text colour pair in the palette passes WCAG AA (4.5:1) in the contrast check, including text on each surface's darkest point; secondary grey reads at 5.9:1 on bone.
• Playwright covers the home, work index, case pages and contact form on desktop, mobile and reduced-motion projects, with axe reporting no serious or critical issues on six pages.

• Next.js
• React
• TypeScript
• GSAP ScrollTrigger
• Lenis
• Motion
• Tailwind CSS
• sharp