JK
Proyectos
JK
>CARGANDO // CARGANDO
INICIALIZANDO VISTA
Creado y diseñado porJK
JK
>CARGANDO // PROJECT DETAILS
PARSING ARCHITECTURE, DIAGRAMS & API ENDPOINTS
Volver a proyectos
Demo en vivoVer en GitHub
Portafolio Jitin K
Completednextjsreacttypescripttailwind

Portafolio Jitin K

Portafolio de desarrollador full-stack que presenta arquitecturas de microservicios, sistemas distribuidos y desarrollo frontend moderno.

Problema y solución

Crear una experiencia visual impactante con animaciones fluidas, internacionalización completa y métricas óptimas de Core Web Vitals.

Características

  • Next.js App Router con next-intl en 9 idiomas
  • Diagramas de arquitectura interactivos con React Flow
  • Tipografía cinética y preloader inmersivo
  • API de contacto segura con limitación de tasa y envío SMTP
  • Visor interactivo de estructura de proyectos

Stack tecnológico

TecnologíaVersiónPropósitoPor qué se eligió
Next.js^16.1.6App Router frameworkServer Components, file-based routing, API routes, image optimization
React^19.2.4UI libraryServer Components and concurrent rendering
TypeScript^5Type safetyTyped project content catches slug/data mismatches at compile time
Tailwind CSS^4Utility-first stylingCSS-first config with @theme/oklch tokens, no JS config file
Framer Motion^12AnimationsStagger/fade/hover primitives with useInView and useReducedMotion
@xyflow/react + dagre^12.11.5 / ^0.8.5Architecture diagramsData-driven interactive graphs with automatic layout
Nodemailer^7.0.11Contact email deliverySimple Gmail SMTP transport from a single API route
@upstash/ratelimit + @vercel/kv^2.1.0 / ^3.0.0Distributed rate limitingShared sliding-window counter across serverless instances
Radix UI + shadcn/uiprimitives + copied sourceAccessible UI primitivesAccessible tooltips/labels with full style control via copied components
Vercel—Hosting & analyticsZero-config Next.js deploys, CDN, Web Analytics

Arquitectura

Browser

Next.js Client

RootLayout: Navbar + Footer + Providers

InteractiveHexagonBg

SVG + rAF

Home: Profile + Projects + Techstack

/projects

ProjectCard grid

/projects/[slug]

Server

lib/projects

typed static data

ReactFlowDiagram + FolderTree

/contact

Client Form

POST /api/contact

Upstash Ratelimit / Memory Map

Nodemailer → Gmail SMTP

Vercel CDN + Analytics

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

App Router Pages

  • Root layout (server): fonts, metadata, Providers, Navbar, Footer, hexagon background
  • Home (server): composes Profile, Recent Projects (first 4), Techstack, About sections
  • /projects (client): stagger-animated grid of all ProjectCards
  • /projects/[slug] (server): joins projects[] + projectDetails[] by slug at request time
  • /about, /contact (client) and styled not-found page

Component Layer

  • components/projects/: Project, ProjectCard, ReactFlowDiagram, FolderTree, MermaidDiagram
  • components/animation/: Framer Motion wrappers (stagger, fade-up, hover glow, border trail)
  • components/pattern/: InteractiveHexagonBg (rAF-optimized SVG grid), CssPattern, AnimatedHero
  • components/ui/: shadcn/ui primitives (Badge, Button, Input, Label, Textarea, Tooltip)
  • components/terminal/: Terminal typing preview component

Data & API Layer

  • lib/projects/*.ts: one file per project exporting ProjectType + ProjectDetailType
  • lib/projects/index.ts: aggregates projects[] and projectDetails[] arrays
  • lib/types.ts: TECH_ICONS registry, PROFILE_DATA, and all content type definitions
  • POST /api/contact: server-side validation, rate limiting, Nodemailer → Gmail SMTP

Estructura del proyecto

app
about
, app
contact
api
contact
projects
[slug]
components
animation
navbar
, components
footer
, components
profile
, components
theme
pattern
projects
terminal
ui
lib
projects
types.tsTECH_ICONS, PROFILE_DATA, ProjectType, ProjectDetailType
utils.tscn() classname utility
public

Endpoints de API

Portfolio API (puerto 3000)

MétodoRutaPropósito
POST/api/contactValidate contact form input, rate-limit by IP, send email via Gmail SMTP

Decisiones de diseño clave

Static TypeScript Data Instead of CMS

Decisión: Store all project content as typed constants in lib/projects/*.ts joined by slug

Motivo: Type safety, zero runtime fetch cost, no database or CMS dependency

Beneficios: Compile-time checks, ships with bundle, server-renderable, free hosting footprint

Compensaciones: Content changes require code changes and redeployment

Server/Client Component Split

Decisión: Detail pages and layout are server components; lists, diagrams, and forms are client components

Motivo: Minimize client JS while keeping interactive features

Beneficios: Smaller bundle, faster first paint, SEO-friendly detail pages

Compensaciones: Mental overhead of the serialization boundary

Tailwind CSS v4 CSS-First Config

Decisión: Configure theme via @theme directives in globals.css instead of tailwind.config.js

Motivo: Tailwind v4 removes the JS config in favor of CSS-native tokens

Beneficios: One file for design tokens, oklch dark/light variables, simpler setup

Compensaciones: Different from v3 muscle memory

React Flow + Dagre for Diagrams

Decisión: Derive architecture diagrams from data (nodes/edges) with Dagre auto-layout

Motivo: Diagrams stay consistent with content and render interactively

Beneficios: No hand-drawn images, zoom/pan, themable, ER table nodes supported

Compensaciones: Client bundle cost on pages that render diagrams

Layered Contact API Protection

Decisión: Validate + HTML-escape inputs, then rate-limit via Upstash sliding window with in-memory fallback

Motivo: Serverless instances don't share memory; shared KV store gives consistent limits

Beneficios: XSS-safe output, 5 req/min/IP abuse protection, graceful degradation

Compensaciones: Requires KV env vars for full protection; no CSRF token yet

Gmail SMTP via Nodemailer

Decisión: Send contact emails through an existing Gmail account

Motivo: Simplest delivery path for a personal portfolio with no backend infra

Beneficios: One route handler, no third-party email SaaS

Compensaciones: App password rotation, self-email only, SMTP rate limits

Pruebas

None configured•0 pruebas unitarias

Qué se prueba

    Cobertura faltante

    • Unit tests for contact API validation and escapeHtml()
    • Unit tests for slug join logic between projects[] and projectDetails[]
    • Component tests for ProjectCard and detail page sections
    • E2E tests for contact form and project navigation flows
    • CI pipeline with lint, typecheck, and build gates (GitHub Actions)

    Desafíos clave

    • Mantener cero desajustes de hidratación en modo oscuro y multi-idioma
    • Lograr animaciones fluidas respetando las preferencias de movimiento reducido

    Aprendizajes clave

    • Arquitectura de internacionalización moderna en Next.js App Router
    • Optimización de rendimiento y buenas prácticas recomendadas por Vercel