Anuhas Dissanayake - Portfolio Website V3

A modern, full-stack personal brand operating system built as a Turborepo monorepo. Features a dark glassmorphism design system, database-driven MDX content, admin dashboard, and case study showcase.

Website: https://anuhas.dev

Tech Stack

Frontend

Next.js 16 - React 19 with App Router and Turbopack
TypeScript - Type-safe development
Tailwind CSS 4 - Utility-first styling with custom glassmorphism utilities
shadcn/ui - Component library (new-york style)
Framer Motion - Page transitions and animations
GSAP - Advanced scroll-driven animations
Lenis - Smooth scrolling
HugeIcons - Icon library

Backend

Next.js API Routes - Server actions and API endpoints
PostgreSQL - Relational database (hosted on Neon)
Prisma - ORM with repository pattern
Better Auth - Authentication (GitHub + Google OAuth)
Cloudflare R2 - S3-compatible asset storage
Resend - Transactional email delivery

Monorepo

Turborepo - Build orchestration
pnpm - Package manager

Monorepo Structure

apps/web/             # Next.js 16 app (App Router, React 19)
packages/
  db/                 # Prisma client, repository pattern, Zod schemas
  auth/               # BetterAuth config (server + client exports)
  email/              # Resend + React Email templates
  ui/                 # shadcn/ui components + animated block components
  config-eslint/      # Shared ESLint config
  config-typescript/  # Shared tsconfig bases

Features

Public Pages

Hero with spotlight effect, text generation animation, and animated tiles
Case Studies showcase with MDX-rendered detail pages and custom components
Blog with syntax-highlighted code blocks, view counts, and read time
Contact form with email notifications
Responsive design optimized for all devices

Admin Dashboard

Blog management - Create, edit, and publish posts with MDX editor and SEO metadata
Case study management - Full CRUD with rich MDX content and custom components
Messages inbox - View and manage contact form submissions
Subscribers - Newsletter subscriber management
Analytics - Page view tracking and metrics

Design System

Dark glassmorphism theme with steel blue accent
Plus Jakarta Sans (headings/body) + JetBrains Mono (code/technical labels)
Glass overlay utilities (.glass, .glass-dark, .glass-hover)
Tonal surface layering instead of borders (the "No-Line" rule)
Custom scrollbar with steel blue gradient

Getting Started

Prerequisites

Node.js 20+
pnpm 10+
PostgreSQL database (or a Neon account)
GitHub OAuth App
Google OAuth App (optional)

Setup

Clone the repository:

git clone https://github.com/DevAnuhas/anuhas-dev-v3.git
cd anuhas-dev-v3

Install dependencies:
```
pnpm install
```

Set environment variables:

Copy .env.example to .env.local at the repo root and fill in the values:

# Database (PostgreSQL)
DATABASE_URL=postgresql://user:password@host:5432/dbname
 
# Authentication (Better Auth)
BETTER_AUTH_SECRET=your_secret
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
ADMIN_GITHUB_USERNAME=your_github_username
 
# Email (Resend)
RESEND_API_KEY=your_resend_api_key
 
# Storage (Cloudflare R2)
R2_ACCOUNT_ID=your_account_id
R2_ACCESS_KEY_ID=your_access_key
R2_SECRET_ACCESS_KEY=your_secret_key
R2_BUCKET_NAME=your_bucket
R2_PUBLIC_URL=https://your-cdn-url.com
 
# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

Set up the database:
```
pnpm db:push
```
Run the development server:
```
pnpm dev
```
Open http://localhost:3000 to view the app.

Commands

pnpm dev          # Start dev server (Turbopack)
pnpm build        # Production build
pnpm lint         # Lint all packages
pnpm db:migrate   # Run Prisma migrations
pnpm db:push      # Push schema without migration

Deployment

Deployed on Vercel with the root directory set to apps/web. Environment variables are configured in the Vercel dashboard.

License

Author

Anuhas Dissanayake

Website: anuhas.dev
GitHub: @DevAnuhas
LinkedIn: profile-anuhas
Email: contact@anuhas.dev

Testing Blog