Divyansh's Portfolio Website

An interactive portfolio built to present my work, interests, and current focus through a strong visual identity and a lightweight, modern frontend stack.

This project is intentionally opinionated: it leans into a dark, terminal-inspired aesthetic, subtle motion, and focused section-based storytelling rather than a generic brochure layout.

What This Project Shows

• A personal portfolio experience centered on projects, skills, experience, and current work
• A custom visual system with animated transitions, themed surfaces, and a tailored cursor treatment
• A compact content structure designed to keep the presentation clear without exposing unnecessary implementation detail
• A private admin area (/admin) where all portfolio sections, site settings, contact inbox, and visibility are managed — backed by a Cloudflare D1 database
• Data-driven sections (certifications, projects, experience, research, blogs…) that render instantly from built-in seeds and stay in sync with admin edits
• Command palette (⌘K), guest terminal, live resume (/resume) and RSS (/rss.xml) generated from the same content

Tech Stack

• React 19
• TypeScript
• TanStack Start / TanStack Router / React Query
• Vite
• Tailwind CSS v4
• Motion (scroll reveals, springs, gestures)
• Cloudflare Workers / Wrangler
• Cloudflare D1 (portfolio content, site settings, admin data, contact inbox)
• Cloudflare R2 (optional media uploads) + Turnstile (contact captcha)
• Cloudflare Web Analytics (opt-in via admin token)
• Resend (contact form delivery, admin verification email)
• Self-hosted Inter + JetBrains Mono fonts via fontsource
• PWA manifest and install icons
• Radix UI (dialog) + Sonner (toasts)
• Lucide icons

Architecture Snapshot

flowchart LR
	Browser[Browser / Edge install] --> Router[TanStack Router]

	subgraph AppShell[App Shell]
		direction TB
		Root[src/routes/__root.tsx]
		Head[HeadContent + meta]
		Index[src/routes/index.tsx]
		Error[src/lib/error-page.ts]
		Root --> Head
		Root --> Index
		Root --> Error
	end

	subgraph Experience[Portfolio Experience]
		direction TB
		Portfolio[src/components/portfolio/*]
		Admin[src/routes/admin.tsx]
		UI[src/components/ui/*]
		Reveal[src/hooks/use-reveal.ts]
		Cursor[src/components/portfolio/Cursor.tsx]
		FX[src/components/portfolio/BackgroundFX.tsx]
		Portfolio --> UI
		Portfolio --> Reveal
		Portfolio --> Cursor
		Portfolio --> FX
	end

	subgraph Assets[Assets + Presentation]
		direction TB
		Styles[src/styles.css]
		Fonts[fontsource inter + jetbrains-mono local fonts]
		Manifest[public/manifest.json]
		Icons[public/favicon.ico, icon-192.png, icon-512.png, icon-maskable-*.png]
		Styles --> Fonts
		Head --> Manifest
		Head --> Icons
	end

	subgraph Runtime[Runtime]
		direction TB
  		Server[src/server.ts + src/start.ts + src/lib/error-page.ts]
  		Api[Api routes: robots.txt, sitemap.xml, rss.xml, contact, content, settings, status, media, admin]
  		Database[(Cloudflare D1 + migrations/)]
		Cloudflare[Cloudflare Workers / SSR]
		Server --> Api
		Server --> Database
		Server --> Cloudflare
	end

	Router --> Root
	Index --> Portfolio
	Root --> Styles
	Server --> Error
	Admin --> Database

Loading

The structure keeps the visible portfolio content separate from the shared shell, asset pipeline, and runtime wiring, which makes the project easier to evolve while preserving the public-facing experience. Content lives in the database with built-in seed fallbacks; the admin area edits it without code changes. Operational setup for the admin side lives in docs/ADMIN_SETUP.md.

Design Direction

The overall direction is modern, minimal, and technical:

• monochrome base palette with restrained accents
• terminal-like cursor and subtle hover responses
• layered glass and glow effects
• section-based narrative flow
• mobile-aware responsive layouts

Focus

This repository represents my profile and work. The emphasis is on presentation and clarity; the admin area and runtime setup are documented only to the extent needed to run the project.