A high-performance personal engineering portfolio and content management system built with TanStack Start, React 19, Rsbuild, Tailwind CSS v4, Drizzle ORM, Neon PostgreSQL, and Better-Auth.
Live Site: atul.ople.in
- Modern Obsidian & Glassmorphism Design: High-contrast, dark-mode-first aesthetic with refined dot patterns, glow borders, and fluid animations powered by Motion.
- Certifications & Verification System:
- Public hub at
/certificationswith instant search, issuer filters (AWS, Google, Meta, freeCodeCamp, etc.), direct verification links, single-click credential ID copying, and in-browser certificate previews (image & PDF). - Admin management at
/admin/certificationswith Cloudinary upload integration, inline publish/draft toggles, and metadata controls.
- Public hub at
- Categorized Skills Matrix: Industry-standard matrix replacing progress bars with skill depth categories (Languages, Frontend, Backend, Databases, Cloud & DevOps, Tools).
- Interactive Project Showcase: Live demo and source links, responsive filter tags, rich markdown case studies, and image carousels.
- Revamped Admin Panel: Command center with KPI metrics, fast quick-actions, sidebar glow indicators, and protected routes.
- Fast SSR & Client Prefetching: TanStack Start server-side rendering combined with warm client-side caching for instant zero-flicker transitions.
For a comprehensive breakdown of the technical design, data flows, database schemas, and future roadmap, refer to: 👉 docs/ARCHITECTURE.md
- Bun (recommended) or Node.js v20+
- PostgreSQL database (or Neon Serverless PostgreSQL)
- Cloudinary account for certificate and project media
git clone https://github.com/HeyAtulVerma/Portfolio.git
cd Portfolio
bun installCopy .env.example to .env and fill in your credentials:
cp .env.example .envDATABASE_URL="postgresql://user:password@host/dbname?sslmode=require"
BETTER_AUTH_SECRET="your-secure-random-secret-key-at-least-32-chars"
BETTER_AUTH_URL="http://localhost:3000"
CLOUDINARY_CLOUD_NAME="your-cloud-name"
CLOUDINARY_UPLOAD_PRESET="portfolio"
CLOUDINARY_API_KEY="your-api-key"
CLOUDINARY_API_SECRET="your-api-secret"Run the migration script to ensure all tables (including the certifications table) are created:
bun run src/db/migrate.tsbun run devVisit http://localhost:3000. On first run, go to http://localhost:3000/setup to initialize your admin user.
# Build optimized client and server bundles with Rsbuild
bun run build
# Start the production SSR server
bun run start| Layer | Tool |
|---|---|
| Framework | TanStack Start + TanStack Router |
| UI & Styling | React 19 + Tailwind CSS v4 + Motion |
| Bundler | Rsbuild (Rspack Rust engine) |
| Database & ORM | Neon PostgreSQL + Drizzle ORM |
| Authentication | Better-Auth |
| Media Storage | Cloudinary |