Jatin Kumar — Portfolio
Personal portfolio and professional website of Jatin Kumar, a Frontend Engineer with 8+ years of experience building performant, scalable and user-focused web applications.
This is an earlier iteration of this same portfolio — Next.js 13 on the Pages Router, React 18, and TypeScript, with a physically-lit 3D hero and a small custom CMS behind it rather than a static brochure site.
The hero is a physically-lit scene, not a video
HeroSection3D is a React Three Fiber canvas — @react-three/fiber, drei, and @react-three/postprocessing — floating an animated glass "Atom" via drei's Float, rendered through MeshTransmissionMaterial/MeshRefractionMaterial for the refraction, with an EffectComposer + Bloom pass so the light genuinely blooms off it instead of being faked in a shader. The same component renders at two completely different scales from one prop: a full hero canvas, or a 48×48 sidebar avatar, by branching camera distance and canvas size off a parent prop rather than shipping two components. @react-three/cannon is in the dependency tree too, for physics on top of the same scene.
A small CMS before there was a CMS
admin.tsx, sitting behind ProtectedLayout and a Login flow, is a hand-built admin panel — visitor feedback submitted on the public site dispatches a Redux Toolkit async thunk (feedbackSubmit) through Axios to a REST API, backed by Mongoose/Typegoose models in MongoDB, with validation errors from the API forwarded back into the form via rejectWithValue rather than a generic failure message.
This repo predates the site you're reading this on. The live portfolio today replaced this custom MongoDB/Redux admin panel and feedback pipeline with Sanity — the same CMS this very project description is stored in.
Stack
Next.js 13 (Pages Router), React 18, and TypeScript underneath; Redux Toolkit with redux-persist and redux-thunk for state; MUI (both v4 and v5) plus Emotion for the component layer; the React Three Fiber ecosystem — drei, cannon for physics, postprocessing, framer-motion-3d, and lamina for shader materials — for the 3D work; locomotive-scroll for the smooth-scroll feel; next-translate for i18n; and Mongoose/Typegoose over MongoDB for the admin/feedback backend, deployed with Vercel Analytics wired in.