Personal Portfolio : Kartik Jindal
The Architecture
Most developer portfolios are templates with names swapped. This one started with a brief: what does it feel like to work with an engineer who cares equally about architecture and aesthetics? The answer had to be felt before it was read.
The technical foundation is Next.js App Router with TypeScript — the same stack used across client production work, which means the portfolio itself is a live demonstration of capability, not just a claim of it. Tailwind CSS handles the design system, and the constraint of utility-first styling forced every visual decision to be intentional rather than inherited from a component library.
The content architecture is fully dynamic — the projects archive, journal (blog), and experience timeline are all data-driven, not hardcoded pages. The admin panel (visible in the Project Lab interface) powers the entire content layer, meaning new projects and blog posts are published without touching the codebase. This was a deliberate product decision: a portfolio that requires a code push to update is a portfolio that goes stale.
Performance was a first-class concern throughout. Images are served via Next.js Image with custom CDN delivery . The Vercel deployment uses edge caching and ISR for the dynamic content routes — keeping perceived load near-instant even on content-heavy pages.
Motion and microinteractions were designed to reward attention without demanding it — subtle scroll-triggered reveals, precision hover states, and a progress indicator that gives the site a sense of spatial depth. None of it ships with a heavy animation library; it's CSS and native browser APIs.
The site is also built as its own SEO and AEO entity — structured JSON-LD on every page, OpenGraph metadata, and a blog (Journal) that generates genuine long-form content indexed by search engines and readable by AI answer engines.
Strategic Methodology
Design-in-code from the start — no Figma mockup, no wireframe. The visual language was developed directly in the browser, iterating on spacing, type scale, and motion until the feel was right. Content architecture was planned before UI — knowing the data shape (projects, journal, experience) determined the component hierarchy and routing structure upfront.
Engineering Challenges
- Building a fully dynamic content layer — projects, blog posts, and experience — that non-technical collaborators (or future me) can update via admin UI without touching the codebase or triggering a redeploy.
- Achieving cinematic motion and microinteractions purely with CSS and native browser APIs — no GSAP, no Framer Motion — while maintaining a Lighthouse performance score that doesn't embarrass a performance-focused engineer.
- Designing a visual identity from scratch that communicates both engineering rigor and design sensibility — avoiding the two failure modes of developer portfolios: too sterile (looks like a resume) or too decorative (looks like a distraction).
- CDN-delivered asset architecture — separating media assets to assets.kartikjindal.site for independent cache control and bandwidth optimization, without complicating the Next.js Image pipeline.
Project Impact
" The hardest client I've ever worked for — myself. Every architectural decision, motion detail, and word on this site is a direct expression of how I think about building digital products."
Core Arsenal
Technical Log.
A high-fidelity breakdown of the build's architectural achievements and performance markers.
Synthesis
"A self-designed and self-engineered portfolio website — Next.js App Router, TypeScript, Tailwind CSS, Vercel deployment — with a dynamic admin-powered content layer, ISR, CDN asset delivery, and structured SEO/JSON-LD on every page. Built to be both a product and a proof of work."
Hard Evidence
No templates, no component libraries — every UI element designed and built from scratch as a deliberate expression of engineering and design intent.
Fully dynamic content layer via admin panel — projects and journal posts publishable without touching the codebase or triggering a redeploy.
Performance-first motion design — cinematic microinteractions delivered entirely via CSS and native browser APIs, zero animation library dependencies.
CDN-separated asset architecture — media served from assets.kartikjindal.site with independent cache control and Next.js Image optimization.
SEO and AEO engineered as a first-class feature — JSON-LD entity graphs, OpenGraph metadata, and a long-form Journal that generates indexable, AI-readable content.