10 · DevOps & Infrastructure← All projects

Portfolio Hosting & CI/CD on Vercel

This portfolio — Next.js 15, TypeScript, Tailwind CSS v4 — deployed on Vercel with automatic preview deployments per pull request and production deploys on merge to main.

GitHub repository ↗5 tools · 4 measured outcomes

Problem

A portfolio is itself infrastructure. It needs a deployment pipeline, zero-downtime updates, branch preview environments, and a build that fails fast on type errors.

Approach

01
Built the site with Next.js 15 (App Router), TypeScript, Tailwind CSS v4, and React 19.
02
Connected the GitHub repo to Vercel for automatic deploys: every push to main triggers a production build.
03
Pull request branches get preview deployments at unique URLs — reviewable before merge.
04
Configured next.config.ts to enforce strict TypeScript and fail the build on type errors.
05
Set up custom domain routing and HTTPS through Vercel's edge network.
06
Added sitemap.ts and robots.ts for SEO coverage.

Results

Deploy on push to main: Automatic
PR preview environments: Per branch
Build failure on TS errors: Enforced
Time to production from merge: < 90 seconds

Code

next.config.ts — TypeScript and ESLint errors fail the build.

import type { NextConfig } from 'next';

const config: NextConfig = {
  typescript: {
    ignoreBuildErrors: false,
  },
  eslint: {
    ignoreDuringBuilds: false,
  },
};

export default config;

Stack

Next.js 15
TypeScript
Tailwind CSS v4
Vercel
React 19

Why it matters

— Every pull request gets a preview URL — changes are reviewable before they go live.
— TypeScript strict mode means broken builds surface at CI, not in production.
— Vercel edge network handles HTTPS, CDN, and routing with zero configuration.