Bagtyyar

Personal Engineering Portfolio

Active build

The portfolio you are viewing — a meta case study in delivery discipline. Next.js 16, TypeScript strict mode, Prisma, CI/CD, Docker, and private client rooms.

  • Next.js 16
  • TypeScript
  • Tailwind CSS v4
  • shadcn/ui
  • Prisma 7
  • PostgreSQL
  • Auth.js
  • Vitest
  • Playwright
  • Docker
  • GitHub Actions
  • Railway

Outcome

165 tests, 7 CI quality gates, WCAG 2.1 AA accessibility, Dockerized deployment, and private client rooms. The portfolio proves the engineering system it describes.

Context

This portfolio is not just a website — it is a working demonstration of the engineering system it describes. Every claim on the homepage links to evidence. The build quality is part of the product.

Engineering Decisions

  • Framework: Next.js 16 App Router with TypeScript strict mode. Server components by default, client boundaries only where needed.
  • Styling: Tailwind CSS v4 with OKLCH color space, custom design tokens, and shadcn/ui components. Editorial aesthetic — Instrument Serif headlines, IBM Plex Sans body, IBM Plex Mono metadata.
  • Database: PostgreSQL with Prisma 7. Content status and visibility are separate concerns (draft/published/archived × public/privateRoom/adminOnly).
  • Auth: Auth.js v5 beta with GitHub OAuth, owner-only access. No client accounts in v1.
  • Private Rooms: Signed, revocable, SHA256-hashed tokens for read-only client project views. No passwords, no registration friction.
  • Testing: 165 Vitest unit tests, Playwright E2E smoke tests, WCAG 2.1 AA accessibility scans, and Three.js render/fallback verification — all in CI.
  • CI/CD: GitHub Actions with 7 quality gates (install, Prisma validate, migration, seed, typecheck, unit tests, build + Docker). Parallel E2E, smoke, a11y, and Three.js gates.
  • Deployment: Multi-stage Dockerfile, Next.js standalone output, Railway container deployment.

Outcomes

  • 165 unit tests across 14 test files covering access tokens, publication policy, markdown safety, auth guards, validations, and design tokens.
  • Zero manual deploys — every push to main runs the full quality gate before Railway deploys.
  • Accessibility-first — automated axe-core scans on every PR, prefers-reduced-motion support, semantic HTML.
  • Transparent delivery — build log, milestone tracking, architecture decisions, and pipeline evidence all visible to visitors.