# Shravan P Jois > AI Engineer. I build agentic systems that survive production. Based in Bengaluru, India. AI Engineer first, web development is my hobby. I build AI solutions, agentic systems and automation workflows, from proof of concept to deployment. AI Engineer with 3 years building production-grade Generative AI and agentic systems for enterprise teams. At TietoEvry that means LangGraph multi-agent systems, an AI-SDLC framework that automates requirement analysis, code generation, review, testing and documentation, enterprise agents on Microsoft Copilot Studio and Microsoft 365 Copilot, a GenAI clinical notes summariser (RAG + LangChain) and an ML + LlamaIndex fraud anomaly engine. Before that, at Plugeasy Technologies, I built the backends behind EV charging: Python/FastAPI microservices on OCPP 1.6 and OCPI, REST APIs for the apps and charge points, MongoDB design and database automation for live charging sessions, all running on AWS. Open to: AI Engineer, Generative AI Engineer and LLM / Agentic AI Engineer roles. ## Contact - Email: shravancode7@gmail.com - Phone: +91 91106 38551 - LinkedIn: https://www.linkedin.com/in/shravanpjois/ - GitHub: https://github.com/shravancode7-oss - GitLab: https://gitlab.com/SJcode67 - Résumé: https://www.shravanjois.in/Shravan_P_Jois_Resume_LaTeX.pdf ## Working with me AI-assisted development is how I accelerate proof-of-concept delivery: Claude Code for whole features and migrations, GitHub Copilot inside the editor, Codex for delegated tasks, with the agent skills, hooks and documentation that keep them honest. Need a solution built this way? An agent, a skill, a workflow or the whole product: write to me and we will scope it together. Certified on Claude Code (Anthropic: Claude Code in Action, Claude Code 101) and GitHub Copilot (Microsoft: GitHub Copilot Fundamentals, Part 1 and 2). ## Pages - [Home](https://www.shravanjois.in): hero, about, the thesis (why agents fail), how I work, fundamentals first, coding agents (Claude Code, GitHub Copilot, Codex), selected systems, web craft, experience, toolkit, recognition, contact - [Work](https://www.shravanjois.in/work): every case study, filterable by track - [Full text](https://www.shravanjois.in/llms-full.txt): every case study in full, experience, skills and certifications in one file ## Experience - Junior AI Engineer, TietoEvry (Jul 2025 to Present, Bengaluru · Hybrid) - Associate Engineer, Plugeasy Technologies (Apr 2024 to Jun 2025, Remote) - AI & Python Engineering Intern, Verzeo (Sep 2021 to Oct 2021, Remote) - B.E. Electronics & Communication Engineering, Jawaharlal Nehru National College of Engineering (JNNCE), Shivamogga, Karnataka (Dec 2020 to Aug 2023) ## Recognition - 1st Prize, TietoEvry TechUtsav 2025: For EVA (Digital Human), the AI-SDLC multi-agent framework, and enterprise GenAI capability demos presented to senior leadership. - GitHub Copilot Fundamentals (Part 1 & 2), Microsoft, Oct 2026 - Claude Code in Action, Anthropic, Oct 2026 - Claude Code 101, Anthropic, Oct 2026 - Claude Platform 101, Anthropic, Oct 2026 - Introduction to Claude Cowork, Anthropic, Oct 2026 - AI Fluency: Framework & Foundations, Anthropic, Oct 2026 - Claude 101, Anthropic, Oct 2026 - Internship Program: Artificial Intelligence, Verzeo, Jan 2022 ## Skills - Agentic AI: Multi-agent systems, Agentic RAG, Tool and function calling, Model Context Protocol (MCP), Context engineering, Prompt engineering, LLM evaluation, Guardrails, Multimodal AI and digital humans, Claude, GPT, Gemini, Llama, Mistral - Frameworks: LangGraph, LangChain, LlamaIndex, CrewAI, PyTorch, Hugging Face Transformers, Scikit-learn, Python and FastAPI - Microsoft AI stack: Copilot Studio, M365 Copilot, Azure OpenAI, Power Automate, Graph API, Adaptive Cards - Cloud and LLMOps: AWS (EC2, S3, Lambda, Bedrock), Docker, CI/CD, Git, GitHub, GitLab, LLMOps and Responsible AI - Data and retrieval: ChromaDB, Pinecone, Weaviate, Embeddings and semantic search, MongoDB, PostgreSQL, Anomaly detection - Web: React, Next.js 15/16, Astro, TypeScript, Tailwind v4, Motion, GSAP and Lenis, Three.js and React Three Fiber, i18n ## Common questions ### What does Shravan P Jois do? Shravan P Jois is an AI Engineer in Bengaluru, India. I build AI solutions, agentic systems and automation workflows, from proof of concept to deployment. I build agentic systems that survive production. ### What roles is he open to? AI Engineer, Generative AI Engineer and LLM / Agentic AI Engineer roles. Both résumés on this site are current and generated from the same content as the pages. ### Where is he based? Bengaluru, India, on Indian Standard Time (IST). The contact section shows the local time and when a reply can be expected. ### Is web development part of the work? AI Engineer first; web development is his hobby. The sites in Web Craft were designed and built as a hobby, and this portfolio is one of them. ### What was the TietoEvry TechUtsav 2025 prize for? 1st Prize, TietoEvry TechUtsav 2025: For EVA (Digital Human), the AI-SDLC multi-agent framework, and enterprise GenAI capability demos presented to senior leadership. ### How do I get in touch? Through the contact cards: email (Gmail or any mail app), a WhatsApp message with a greeting ready, or a call. Hiring enquiries have their own short form under Open to roles. ## Case studies: Systems - [AI-SDLC Multi-Agent Framework](https://www.shravanjois.in/work/ai-sdlc): A LangGraph framework at TietoEvry where one supervisor agent coordinates specialised agents for requirement analysis, code generation, peer review, unit tests and documentation. - [EVA, Digital Human](https://www.shravanjois.in/work/eva): An emotional virtual assistant: a multimodal persona that combines NLP sentiment analysis, real-time computer vision, real-time speech synthesis and generative AI. - [Agentic IT Helpdesk](https://www.shravanjois.in/work/helpdesk): The same problem solved twice: an enterprise helpdesk agent on Microsoft Copilot Studio, and an independent full-stack platform where four cooperating agents triage, resolve, escalate and read sentiment. - [WhatsApp AI Assistant SaaS](https://www.shravanjois.in/work/whatsapp-assistant): A multi-tenant SaaS that sells Claude-powered WhatsApp assistants to small businesses. - [Clinical Notes Intelligence](https://www.shravanjois.in/work/clinical-notes): A clinical documentation assistant for therapists. - [EV Charging Platform, Plugeasy](https://www.shravanjois.in/work/ev-charging): Core backend microservices for Plugeasy's EV charging platform, implementing OCPP 1.6 and OCPI for real-time charge point management, plus a full redesign of plugeasy.in with measured Core Web Vitals. - [Requirement Engineering Agent](https://www.shravanjois.in/work/requirement-agent): An M365 Copilot agent that extracts, classifies and validates requirements from meeting transcripts, emails and documents, and writes them up as structured requirement documents with acceptance criteria. - [Healthcare Assistant](https://www.shravanjois.in/work/healthcare-assistant): A Copilot Studio assistant that answers patient queries and schedules appointments, with HIPAA-aligned security and enterprise access controls. - [Shopmate, Retail AI Persona](https://www.shravanjois.in/work/shopmate): A lifelike 3D digital human that helps shoppers discover products, deployed in a live customer-facing retail setting. - [Evolutionary Trading Lab](https://www.shravanjois.in/work/trading-lab): A research and backtesting lab that evolves trading strategies with a hand-written genetic algorithm and tests them hard against overfitting. - [Banking Transaction Anomaly Detection](https://www.shravanjois.in/work/fraud-anomaly): An anomaly detection engine for banking transactions that pairs machine learning with LlamaIndex retrieval and feeds enterprise fraud mitigation workflows. - [WebForge, AI Site Generator](https://www.shravanjois.in/work/webforge): Paste a Google Maps, Yelp or business URL: Claude extracts the business details and generates a complete single-file HTML website to preview and download. - [Business Search Agent](https://www.shravanjois.in/work/lead-finder): A lead finder that searches Google Maps for businesses in a city with no website or a weak one, enriches and scores them, and writes a sales playbook and outreach sequence for each. ## Case studies: Web - [Jeweller, Fürth](https://www.shravanjois.in/work/jeweller-ring): A static trilingual site (German, Arabic, English) for a jeweller in Fürth, led by a live Three.js ring you can spin and a stone selector that swaps the gem in real time. - [Premium ice cream brand](https://www.shravanjois.in/work/ice-cream-scroll): A concept site for a small-batch ice cream brand told through scroll-scrubbed video: the hero cone tumbles into the first flavour card and a sundae builds itself scoop by scoop. - [Burger house scroll story](https://www.shravanjois.in/work/burger-scroll): A concept site where a burger rotates, bursts apart and is rebuilt layer by layer as you scroll, followed by a full-screen menu with an animated add-to-cart. - [Aparna Gold Buyers](https://www.shravanjois.in/work/gold-buyer-brand): A static multi-page site for a gold buyer in J.P. Nagar, Bengaluru, built with Astro 5 islands. - [E-commerce platform](https://www.shravanjois.in/work/commerce-platform): A production e-commerce template on Next.js 16: storefront, cart, real Stripe checkout, accounts and admin, all driven from one config file and runnable end to end with no API keys. - [Bilingual café, Leipzig](https://www.shravanjois.in/work/bilingual-cafe): A German and English concept site for a café and cake shop in Leipzig, on Next.js 15 locale routing with a typed translation contract. - [Hair atelier and day spa](https://www.shravanjois.in/work/hair-atelier): A concept site for a hair atelier and day spa with a WebGL aura in the hero, drawn by a bubble shader I wrote by hand after the stock material measured about 630 ms per frame. - [How this site is built](https://www.shravanjois.in/work/this-site): I designed and built this portfolio myself, as a hobby project: deep green and bone panels with one amber accent, a hero where you fly through my name into a film, type that swells toward the cursor, scroll-played stories and product mockups in HTML and CSS, on a Next.js App Router site. ## Case studies: Products - [ShopLive](https://www.shravanjois.in/work/shoplive): A social-commerce marketplace for India built around structured, real-time price negotiation between buyers and sellers: a Flutter app, an Express API and a React ops dashboard. # Systems: the case studies in full ## AI-SDLC Multi-Agent Framework Canonical: https://www.shravanjois.in/work/ai-sdlc Track: Systems. Role: Architect, TietoEvry. Years: 2025–present. A LangGraph framework at TietoEvry where one supervisor agent coordinates specialised agents for requirement analysis, code generation, peer review, unit tests and documentation. ### Problem One framework where requirement analysis, code generation, review, unit tests and documentation are each an agent, and a single supervisor owns the result. ### What I built - A supervisor agent on LangGraph that coordinates the specialised agents. - Specialised agents for requirement analysis, code generation, peer review, unit test creation and documentation. - Each agent is an independent LangGraph node with its own custom skills and tool calling. - GitHub Copilot custom agents, skills and hooks, with FastAPI REST services around the framework. - Presented to senior leadership as part of the entry that won 1st prize at TietoEvry TechUtsav 2025. ### Proof - 1st prize, TietoEvry TechUtsav 2025 (with EVA and enterprise GenAI demos) ### Stack LangGraph, LangChain, Python, FastAPI, Azure OpenAI, GitHub Copilot, REST ## EVA, Digital Human Canonical: https://www.shravanjois.in/work/eva Track: Systems. Role: Engineer, TietoEvry. Years: 2025. An emotional virtual assistant: a multimodal persona that combines NLP sentiment analysis, real-time computer vision, real-time speech synthesis and generative AI. It won 1st prize at TietoEvry TechUtsav 2025. ### Problem EVA combines language, sentiment, vision and speech in one persona. ### What I built - NLP sentiment analysis on what the user says. - Real-time computer vision with object detection. - Real-time speech synthesis for spoken answers, with Pipecat in the pipeline. - Generative AI through Azure OpenAI and LangChain behind the persona. ### Proof - 1st prize, TietoEvry TechUtsav 2025 ### Stack Python, PyTorch, Azure OpenAI, LangChain, Pipecat, Computer vision ## Agentic IT Helpdesk Canonical: https://www.shravanjois.in/work/helpdesk Track: Systems. Role: Architect and engineer. The same problem solved twice: an enterprise helpdesk agent on Microsoft Copilot Studio, and an independent full-stack platform where four cooperating agents triage, resolve, escalate and read sentiment. ### Problem IT support queues fill with repetitive tickets. Triage is manual, SLAs slip quietly, and angry users wait behind calm ones. ### What I built - Copilot Studio agent with custom skills, adaptive cards and Power Automate flows for triage, intent classification, routing to sub-agents and escalation; reduced MTTR. - Full-stack platform: FastAPI (async) + SQLAlchemy 2.0 + Celery/Redis backend, React 18 + TypeScript frontend with shadcn/ui. - Four agents: Triage runs on create, Resolution does knowledge-base and similar-ticket RAG with optional auto-resolve at 0.9 confidence, Escalation sweeps SLAs every five minutes, Sentiment auto-escalates angry users. - Every agent decision logged with reasoning, confidence, model, latency and fallback flag; runs keyless on deterministic heuristics. - JWT auth with RBAC, refresh tokens in httpOnly cookies, audit log, sliding-window rate limiting, prompt-injection hardening. - Native WebSocket ticket events, live activity feed, analytics dashboard with SLA at-risk queue. ### Proof - Built four cooperating agents that triage, resolve, escalate and read sentiment on every ticket, with an SLA sweep every 5 minutes that escalates at-risk tickets on its own - Kept it production-ready with 82 backend tests at about 87% coverage - Shipped multi-tenant organisations with plan-based feature gating on a Docker Compose production stack with health checks ### Stack Copilot Studio, Power Automate, Azure OpenAI, FastAPI, SQLAlchemy, Celery, Redis, PostgreSQL, React, TypeScript, WebSockets, Claude API ## WhatsApp AI Assistant SaaS Canonical: https://www.shravanjois.in/work/whatsapp-assistant Track: Systems. Role: Architect and engineer. A multi-tenant SaaS that sells Claude-powered WhatsApp assistants to small businesses. An operator onboards clients; each business owner gets a scoped dashboard for the bot, its knowledge and human handoff. ### Problem Small businesses answer the same WhatsApp questions all day: hours, services, prices. They need an assistant that knows their business, hands over to a person when it should, and cannot run up an unbounded AI bill. ### What I built - Per-tenant webhook with X-Hub-Signature-256 HMAC verification and redelivery dedup on Meta message IDs. - System prompt built per tenant from hours, services, pricing and FAQs, with prompt caching across a customer's turns. - Conversation memory of the last 10 turns per customer, serialised per conversation to avoid races. - Human handoff: the owner takes over, replies from the dashboard through the business's own WhatsApp number, then resumes the bot. - Knowledge base of typed articles and PDF, TXT or Markdown uploads; text is extracted, originals discarded, within a 16k-character prompt budget. - Usage caps: monthly conversation limits per tier, a daily Claude token budget, 20 AI calls per customer per hour, warnings at 80%. - Two-tier RBAC where cross-tenant requests return 404, TOTP 2FA, Google and Microsoft OAuth, JWT token-version revocation, three-layer rate limiting and prompt-injection guardrails. - Production boot refuses a weak JWT secret, and the webhook fails closed without the app secret. ### Proof - About 45 REST endpoints, documented - Railway deploy with a /health check ### Stack Node.js, Express, Claude API, WhatsApp Business Cloud API, PostgreSQL, Prisma, React, Tailwind CSS, Docker ## Clinical Notes Intelligence Canonical: https://www.shravanjois.in/work/clinical-notes Track: Systems. Role: Engineer (TietoEvry), then independent build. A clinical documentation assistant for therapists. It started at TietoEvry as a LangChain RAG summariser, then became an independent build: upload a session, get a transcript, summaries, SOAP and BIRP notes, and grounded Q&A. ### Problem After each session a therapist has to turn a conversation into structured notes. The notes must be accurate and must never claim something the session does not support. ### What I built - At TietoEvry: a GenAI therapy notes summariser with LangChain, RAG and Streamlit that significantly reduced practitioner review time. - Independent build: React + TypeScript frontend and FastAPI backend; audio (MP3, WAV, M4A) or text upload with an editable transcript and ffmpeg pre-processing. - Overall summary, key entities, SOAP note and BIRP note generation on Azure OpenAI, with a non-Azure OpenAI fallback. - RAG Q&A over the session: chunking, embeddings, ChromaDB retrieval and reranking, confidence-threshold flagging and per-question caching. - Guardrails keep answers grounded in the transcript, with no diagnoses and no PII. - Runs fully offline on heuristic stubs when no AI credentials are configured; high-contrast, keyboard-navigable UI. ### Stack Python, FastAPI, LangChain, Azure OpenAI, ChromaDB, Streamlit, React, TypeScript, ffmpeg ## EV Charging Platform, Plugeasy Canonical: https://www.shravanjois.in/work/ev-charging Track: Systems. Role: Backend lead (Associate Engineer); web redesign. Core backend microservices for Plugeasy's EV charging platform, implementing OCPP 1.6 and OCPI for real-time charge point management, plus a full redesign of plugeasy.in with measured Core Web Vitals. ### Problem Plugeasy needed backend services for real-time charge point management over OCPP 1.6 and OCPI, with APIs for the frontend, mobile apps and IoT charging devices, and a redesigned public site for its charging station management system. ### What I built - Led core backend microservices in Python and FastAPI, implementing OCPP 1.6 and OCPI for real-time charge point management and interoperability. - RESTful APIs connecting the frontend, mobile apps and IoT charging devices. - MongoDB schema design, indexing, query optimisation and database automation for real-time charging session data. - Deployed and maintained the services on AWS EC2, S3 and Lambda. - Site redesign in Next.js: a canvas hero with a 60-node network over an India outline converging on Bengaluru, with a static SVG fallback for reduced motion. - SEO and GEO: JSON-LD, generated llms.txt and llms-full.txt, and Markdown twins of each page served on Accept: text/markdown. - A brand gate with five enforced rules, plus audits for accessibility, contrast per theme, performance, SEO and responsive layout across 7 routes and 9 widths. ### Proof - Brought the redesigned plugeasy.in to a largest paint of about 1.0 s with layout shift under 0.01 - Traced the logo to a crisp SVG at 99.4% overlap with the original (IoU 0.9936) ### Stack Python, FastAPI, OCPP 1.6, OCPI, MongoDB, AWS, Next.js, TypeScript, Tailwind CSS ## Requirement Engineering Agent Canonical: https://www.shravanjois.in/work/requirement-agent Track: Systems. Role: Engineer, TietoEvry. An M365 Copilot agent that extracts, classifies and validates requirements from meeting transcripts, emails and documents, and writes them up as structured requirement documents with acceptance criteria. ### Problem Requirements are scattered across meetings, mail threads and documents. Someone has to pull them out, sort them and check them before work can start. ### What I built - Reads meeting transcripts, emails and documents through Microsoft Graph API. - Extracts, classifies and validates requirements with Azure OpenAI and NLP. - Outputs structured requirement documents with acceptance criteria. - Built on M365 Copilot and Agent Builder, with Python for the processing steps. ### Stack M365 Copilot, Agent Builder, Graph API, Azure OpenAI, Python, NLP ## Healthcare Assistant Canonical: https://www.shravanjois.in/work/healthcare-assistant Track: Systems. Role: Engineer, TietoEvry. A Copilot Studio assistant that answers patient queries and schedules appointments, with HIPAA-aligned security and enterprise access controls. ### Problem Patients ask the same questions and book the same kinds of appointments, and every answer touches sensitive data. ### What I built - Answers patient queries in natural language on Copilot Studio. - Schedules appointments as part of the same conversation. - HIPAA-aligned security and enterprise access controls around the assistant. ### Stack Copilot Studio, LLM, NLP, Python ## Shopmate, Retail AI Persona Canonical: https://www.shravanjois.in/work/shopmate Track: Systems. Role: Engineer. A lifelike 3D digital human that helps shoppers discover products, deployed in a live customer-facing retail setting. ### Problem Personalised product discovery for retail customers, through a persona they can talk to face to face. ### What I built - A 3D digital human avatar for personalised retail product discovery. - Multimodal AI synthesis pipelines behind the persona. - Generative answers from an LLM, deployed in a live customer-facing retail environment. ### Stack Digital Human, Generative AI, Multimodal AI, LLM, Python ## Evolutionary Trading Lab Canonical: https://www.shravanjois.in/work/trading-lab Track: Systems. Role: Independent build. A research and backtesting lab that evolves trading strategies with a hand-written genetic algorithm and tests them hard against overfitting. Simulation only: it never places an order. ### Problem A strategy that looks great on past data is usually overfit. The lab is built to say so: every result is judged on data the strategy never saw. ### What I built - Genetic algorithm (genome, operators, fitness, loop) written by hand for readability, with penalties for drawdown, overtrading and complexity. - Strict time-ordered train, validation and test split, plus walk-forward analysis; no look-ahead, since a signal at bar t fills at the t+1 open; fees and slippage included. - PSR and deflated Sharpe on every single-split run, and a ROBUST or OVERFIT verdict with in-sample against out-of-sample equity curves. - FastAPI with a WebSocket stream of per-generation progress, checkpoint resume, a batch runner, paper trading and alert-only signals. ### Stack Python, FastAPI, numpy, pandas, ccxt, React, TypeScript, WebSockets ## Banking Transaction Anomaly Detection Canonical: https://www.shravanjois.in/work/fraud-anomaly Track: Systems. Role: Engineer, TietoEvry. Years: 2025–present. An anomaly detection engine for banking transactions that pairs machine learning with LlamaIndex retrieval and feeds enterprise fraud mitigation workflows. ### Problem Fraud hides in a stream of ordinary transactions. Flags are only useful if they reach the team that acts on them. ### What I built - Machine learning models that flag anomalous banking transactions. - LlamaIndex retrieval alongside the models. - Integration with enterprise fraud mitigation workflows. ### Stack Python, Machine learning, LlamaIndex ## WebForge, AI Site Generator Canonical: https://www.shravanjois.in/work/webforge Track: Systems. Role: Independent build. Paste a Google Maps, Yelp or business URL: Claude extracts the business details and generates a complete single-file HTML website to preview and download. ### Problem A small business with no website already has its facts online on a maps or review listing. WebForge turns that listing into a first site in one step. ### What I built - An extract endpoint that fetches the URL and has Claude return typed business data: name, industry, description, address, phone, suggested sections and style. - A generate endpoint that builds the prompt and has Claude (up to 8192 tokens) write a single-file HTML site. - Live preview in an iframe srcdoc and a one-click .html download. - A state-machine hook for the extract flow, a streaming skeleton and a global error boundary. ### Stack Next.js, TypeScript, Tailwind CSS, Framer Motion, Claude API ## Business Search Agent Canonical: https://www.shravanjois.in/work/lead-finder Track: Systems. Role: Independent build. A lead finder that searches Google Maps for businesses in a city with no website or a weak one, enriches and scores them, and writes a sales playbook and outreach sequence for each. ### Problem Find businesses in a city with no website or a weak one, enrich and score them, and draft the sales playbook and outreach for each. ### What I built - Google Places text search by city and category, batched across categories, deduplicated and paginated up to three pages. - A no-website filter that also catches auto-generated and social-only presences, then parallel enrichment of contacts, hours, ratings and social profiles. - Lead scoring from 0 to 100 on reviews, rating, digital gap, reachability and category. - A rule-based playbook and outreach sequence (cold email, two follow-ups, WhatsApp, call script), exported as a PDF dossier and CSV. ### Stack Python, FastAPI, React, Google Places API, SQLite # Web: the case studies in full ## Jeweller, Fürth Canonical: https://www.shravanjois.in/work/jeweller-ring Track: Web. Role: Design and build. A static trilingual site (German, Arabic, English) for a jeweller in Fürth, led by a live Three.js ring you can spin and a stone selector that swaps the gem in real time. ### Problem A jeweller's site has to feel as precise as the pieces, read properly in German, Arabic and English, and stay light: no heavy bundle, no third-party requests. ### What I built - Three.js ring hero: drag to rotate with inertia, idle sway, scroll rotation and cursor parallax, with three rotation modes. - Stone selector that swaps the gem in real time with a light burst and a snap to face-on. - Procedural PMREM studio lighting instead of an HDRI download; a still render shows until WebGL is ready, and the loop pauses offscreen. - Full RTL for Arabic: mirrored hero, numbers, phone and hours pinned LTR, Amiri and Cairo loaded with unicode-range. - A live open or closed badge computed in the visitor's timezone. - Removed EffectComposer after measuring double sRGB encoding and bloom alpha bugs; the glow is CSS mix-blend-mode: screen. ### Proof - Zero third-party requests - CSS 6.7 kB gzip; JS 109 kB initial plus 123 kB deferred for Three.js - Audited at 6 widths ### Stack React, Three.js, Motion, i18n ## Premium ice cream brand Canonical: https://www.shravanjois.in/work/ice-cream-scroll Track: Web. Role: Concept, design and build. A concept site for a small-batch ice cream brand told through scroll-scrubbed video: the hero cone tumbles into the first flavour card and a sundae builds itself scoop by scoop. ### Problem Video-heavy scroll stories break easily. A blocked CDN, a slow phone or a reduced-motion setting can leave a blank page. This one had to look rich and never fail empty. ### What I built - Vanilla HTML, CSS and JS with GSAP ScrollTrigger and Flip, and Lenis synced to the GSAP ticker. - Hero cone video autoplays for 2.8 s, then scroll-scrubs; on desktop a Flip hand-off lands it as flavour card 01. - Pinned horizontal pint gallery and a pinned build-your-box sequence where a sundae assembles, then melts. - Scrubbed videos re-encoded with a keyframe every 3 frames; the last frame is extracted as a hand-off still to avoid flicker. - Three layers of resilience: the intro lock is added by script only, a static fallback runs if GSAP is missing, and 6 s and 9 s watchdogs release the page. - gsap.matchMedia() tears pins down cleanly at 1024 px; reduced motion swaps everything for stills. ### Proof - Text contrast raised from 1.68:1 to 7.3:1 - 44 px targets under pointer: coarse ### Stack HTML, CSS, JavaScript, GSAP, Lenis, ffmpeg ## Burger house scroll story Canonical: https://www.shravanjois.in/work/burger-scroll Track: Web. Role: Concept, design and build. A concept site where a burger rotates, bursts apart and is rebuilt layer by layer as you scroll, followed by a full-screen menu with an animated add-to-cart. ### Problem A food site usually shows a photo and a menu. This one makes the build of the burger the story, without a framework or a build step. ### What I built - Pinned, reversible scroll-scrubbed assembly stage with GSAP ScrollTrigger and Lenis; the camera dives into a macro cheese melt past editorial quotes. - A Python pipeline (Pillow, numpy) that cuts seven layers from a single source image, with alpha crossfades, hue cleanup and reconstructed top faces. - Canvas particles for steam, sesame confetti and a rain of fries. - Menu with prices flying into the cart, a magnetic CTA and spring micro-interactions. - No build step and fully offline; a bundler script inlines everything into one HTML file. - Reduced motion shows the assembled burger with fades; minimap and menu work by keyboard, with Esc and focus restore. ### Stack HTML, CSS, JavaScript, GSAP, Lenis, Motion, Python ## Aparna Gold Buyers Canonical: https://www.shravanjois.in/work/gold-buyer-brand Track: Web. Role: Design and build. A static multi-page site for a gold buyer in J.P. Nagar, Bengaluru, built with Astro 5 islands. Every lead action is a phone call, a WhatsApp message or an email. ### Problem A multi-page site for a gold buyer in J.P. Nagar, Bengaluru, where every lead action goes to a phone call, WhatsApp or email. ### What I built - Astro 5 with React islands hydrated on load, when visible or when idle; three.js through React Three Fiber, dynamically imported for one hero moment. - A fixed wordmark with mix-blend-mode: difference, shown only between hero and footer, backed by a stacking-context audit. - Brand red derived from sampling 110,664 logo pixels; the hue shifts with lightness from wine to crimson across the token ramp. - A low-end device path that drops Lenis, particles, grain and the 3D coin. - LocalBusiness, FAQPage, HowTo and BreadcrumbList JSON-LD, AI-crawler robots rules and a build-time llms.txt. ### Proof - Scored 100 in Lighthouse accessibility, SEO and best practices on every page - Held layout shift at 0 and scrolling at a smooth 60 fps with the blend overlay (p95 frame 17 ms) - Checked all 444 links: every one works ### Stack Astro, React, three.js, React Three Fiber, Framer Motion, Lenis ## E-commerce platform Canonical: https://www.shravanjois.in/work/commerce-platform Track: Web. Role: Design and build. A production e-commerce template on Next.js 16: storefront, cart, real Stripe checkout, accounts and admin, all driven from one config file and runnable end to end with no API keys. ### Problem Most store templates stop at a nice product grid. This one had to get money, stock and security right before it looked good. ### What I built - The server re-prices every cart line from the database before creating the payment intent; one pricing engine, integer cents only. - Order lifecycle with an event timeline and an idempotent paid transition; status changes that cancel an order return stock. - Security: per-account lockout (5 per 15 minutes), per-IP ceiling, no user enumeration, bcrypt cost 12, CSRF origin checks, and two CSPs (nonce plus strict-dynamic on dynamic routes, a static policy on cacheable pages). - Catalogue moved from in-memory filtering to SQL with nine composite indexes; SQLite in WAL mode with busy_timeout. - The whole theme derives at runtime from two seed colours in OKLCH, including dark mode, focus rings and the OG image. - A business-model switch (physical, digital, subscription, services) reshapes the UI without component edits. ### Proof - Cut p95 response time by 24% (3685 ms to 2784 ms) under a 150-user load test with zero errors, by moving catalogue filtering into indexed SQL - Shipped with 101 unit tests plus Playwright end-to-end tests, which caught five real defects before release ### Stack Next.js, TypeScript, Tailwind CSS, Prisma, Auth.js, Stripe, Vitest, Playwright ## Bilingual café, Leipzig Canonical: https://www.shravanjois.in/work/bilingual-cafe Track: Web. Role: Concept, design and build. A German and English concept site for a café and cake shop in Leipzig, on Next.js 15 locale routing with a typed translation contract. ### Problem Two languages usually means two copies that drift apart. Here a missing translation fails the build instead of shipping. ### What I built - /[locale] routing with generateStaticParams, a redirect from / to /de, and hreflang with x-default. - 16 statically prerendered product pages for cakes and coffee. - Shared data (prices in cents, hours, address) split from German and English prose, typed with satisfies so a missing string fails the build. - Hours stored once and fed to both the contact section and the JSON-LD. - Eight sections with no two sharing a layout family, including a GSAP pinned horizontal pan. - Hero entrance in CSS so a failed bundle still paints; a hand-rolled euro formatter avoids a hydration mismatch. ### Proof - 16 statically prerendered detail pages ### Stack Next.js, React, TypeScript, Tailwind CSS, Motion, GSAP ## Hair atelier and day spa Canonical: https://www.shravanjois.in/work/hair-atelier Track: Web. Role: Concept, design and build. A concept site for a hair atelier and day spa with a WebGL aura in the hero, drawn by a bubble shader I wrote by hand after the stock material measured about 630 ms per frame. ### Problem The look called for a soft glass bubble. The off-the-shelf distort and transmission material made it, but too slowly to ship. ### What I built - Hand-written bubble shader: vertex wobble with finite-difference normals, fresnel rim, specular glints and a thin-film tint. - A useCanRender3D gate (at least 4 cores, 4 GB memory, wider than 900 px, motion allowed); the render loop stops offscreen. - Draggable before and after comparisons as role="slider" with arrow keys, and a focus-trapping lightbox. - WAI tabs pattern for four service houses, a pinned rituals column and portraits with 3D tilt. - Load-driven image reveals replaced scroll-driven ones after a third of them got stuck. ### Proof - Replaced a stock material that cost about 630 ms per frame with a bubble shader I wrote by hand ### Stack React, Vite, Tailwind CSS, Framer Motion, React Three Fiber, Lenis ## How this site is built Canonical: https://www.shravanjois.in/work/this-site Track: Web. Role: Design and build. Years: 2026. I designed and built this portfolio myself, as a hobby project: deep green and bone panels with one amber accent, a hero where you fly through my name into a film, type that swells toward the cursor, scroll-played stories and product mockups in HTML and CSS, on a Next.js App Router site. ### Problem 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. ### What I built - Forest 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. - The 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. - Living 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. - The 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. - Lenis 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). - Product 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. - Case 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. - Architecture diagrams are hand-authored inline SVG (rounded boxes, the key node in the accent), labelled for screen readers and drawn on scroll. - Enquiries 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. ### Proof - 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. ### Stack Next.js, React, TypeScript, GSAP ScrollTrigger, Lenis, Motion, Tailwind CSS, sharp # Products: the case studies in full ## ShopLive Canonical: https://www.shravanjois.in/work/shoplive Track: Products. Role: Product architecture and build. A social-commerce marketplace for India built around structured, real-time price negotiation between buyers and sellers: a Flutter app, an Express API and a React ops dashboard. ### Problem A marketplace whose differentiator is structured, real-time price negotiation between buyers and sellers over a personalised feed, across a mobile app, an API and an ops dashboard. ### What I built - A pure, fully unit-tested negotiation state machine owned by the server; DB CHECK constraints and a partial unique index allow one open negotiation per buyer and product. - Money as integer paise end to end, formatted in exactly one place in the API and one in the app. - Flutter app (Riverpod, GoRouter) with Firebase email magic-link sign-in, offers, Razorpay checkout, chat and orders. - Socket.IO gateway for negotiation events and chat; signature-verified Razorpay webhooks. - React ops dashboard with live tables, seller KYC verification and system health, served by Nginx with TLS. - GitLab CI: verify, build image, deploy to AWS Lightsail; images tagged by commit SHA for rollback, and the deploy fails if /health does not answer. ### Stack Flutter, Dart, Node.js, TypeScript, Express, Sequelize, PostgreSQL, Socket.IO, Razorpay, Firebase, React