Jatin Kumar - Portafolio.

Portafolio personal y sitio web profesional de Jatin Kumar, un ingeniero frontend con más de 8 años de experiencia en el desarrollo de aplicaciones web de alto rendimiento, escalables y centradas en el usuario.

Captura de pantalla del portafolio versión 1.

Esta es una versión anterior del mismo portafolio: utiliza Next.js 13 con el enrutador de páginas, React 18 y TypeScript, e incluye un elemento visual principal tridimensional iluminado físicamente, junto con un pequeño sistema de gestión de contenido (CMS) personalizado, en lugar de un sitio web estático tipo folleto.

El héroe es una escena iluminada visualmente, no un vídeo.

HeroSection3D es un lienzo de React Three Fiber — que utiliza @react-three/fiber, drei y @react-three/postprocessing — que muestra un "átomo" de vidrio animado mediante la función Float de drei, renderizado a través de MeshTransmissionMaterial/MeshRefractionMaterial para la refracción, con un EffectComposer + un efecto Bloom para que la luz realmente se irradie desde el objeto en lugar de ser simulada en un shader. El mismo componente se renderiza a dos escalas completamente diferentes a partir de una sola propiedad: un lienzo completo para la sección principal o un avatar de 48x48 para la barra lateral, ajustando la distancia de la cámara y el tamaño del lienzo a partir de una propiedad padre en lugar de utilizar dos componentes separados. @react-three/cannon también está presente en las dependencias, para añadir física al mismo escenario.

Un pequeño sistema de gestión de contenido antes de que existieran los sistemas de gestión de contenido.

admin.tsx, que se encuentra detrás de ProtectedLayout y un flujo de inicio de sesión, es un panel de administración creado manualmente. Los comentarios de los visitantes enviados en el sitio público se envían a través de un thunk asíncrono de Redux Toolkit (feedbackSubmit) utilizando Axios a una API REST, respaldada por modelos Mongoose/Typegoose en MongoDB. Los errores de validación de la API se devuelven al formulario mediante rejectWithValue en lugar de un mensaje de error genérico.

Context

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.

Pila.

Next.js 13 (enrutador de páginas), React 18 y TypeScript en la base; Redux Toolkit con redux-persist y redux-thunk para el estado; MUI (tanto la versión 4 como la 5) además de Emotion para la capa de componentes; el ecosistema de React Three Fiber, que incluye drei, cannon para la física, postprocesamiento, framer-motion-3d y lamina para materiales de sombreado, para el trabajo en 3D; locomotive-scroll para una experiencia de desplazamiento suave; next-translate para la internacionalización; y Mongoose/Typegoose sobre MongoDB para el backend de administración/retroalimentación, implementado con Vercel Analytics integrado.