Freelance DevOps & Cloud Consulting — personal website of Deepak Sagar

Production-grade personal consulting website built with Next.js 15 App Router. Showcases DevOps & cloud engineering services, real case studies with architecture diagrams, and a direct booking flow via Calendly.

All brand configuration is driven by environment variables — no rebuild required to update contact details, social links, or copy.

• App Router with RSC — server components by default, "use client" only where required
• Environment-driven config — single src/lib/env.ts reads all NEXT_PUBLIC_* vars with typed fallbacks; no hardcoded values anywhere
• Architecture diagrams — Mermaid.js renders infrastructure diagrams per case study, loaded client-side to avoid SSR conflicts
• Dark mode by default — next-themes with class strategy; user preference persisted in localStorage
• SEO — per-page metadata, JSON-LD structured data, sitemap, robots.txt, Open Graph
• Scroll animations — Framer Motion whileInView reveals, scroll progress bar
• CI — GitHub Actions type-checks and builds on every push to main

cloudforgeops/
├── .github/
│   └── workflows/
│       └── ci.yml                  # GitHub Actions — type-check + build
├── content/
│   └── case-studies/               # Markdown files for each case study
├── public/                         # Static assets
├── src/
│   ├── app/                        # Next.js App Router pages and layouts
│   │   ├── page.tsx                # Homepage
│   │   ├── layout.tsx              # Root layout — ThemeProvider, Header, Footer
│   │   ├── services/
│   │   ├── about/
│   │   ├── case-studies/
│   │   │   └── [slug]/             # Dynamic case study page
│   │   ├── contact/
│   │   ├── free-review/
│   │   ├── sitemap.ts
│   │   └── robots.ts
│   ├── components/
│   │   ├── layout/                 # Header, Footer, PageWrapper, PageTransition
│   │   ├── sections/               # Hero, Services, WhyUs, CtaBanner, etc.
│   │   ├── ui/                     # Button, Card, Badge, MermaidDiagram, etc.
│   │   ├── seo/                    # JsonLd structured data component
│   │   └── theme/                  # ThemeProvider, ThemeToggle
│   ├── config/
│   │   ├── site.ts                 # App-wide siteConfig object (reads from env)
│   │   └── diagrams.ts             # Mermaid diagram definitions per case study slug
│   ├── lib/
│   │   ├── env.ts                  # Typed env reader — single source of truth
│   │   ├── mdx.ts                  # Markdown parsing utilities
│   │   └── utils.ts                # clsx/tailwind-merge helper
│   └── types/                      # Shared TypeScript interfaces
├── .env.example                    # All required env vars with placeholder values
├── .gitignore
├── next.config.ts
├── tsconfig.json
└── package.json

Copy .env.example to .env.local and fill in your values. No secrets are committed — .env.example contains only placeholder values.

cp .env.example .env.local

All variables are prefixed NEXT_PUBLIC_ — they are safe to expose in the browser. No API keys, tokens, or server-side secrets are used.

Requirements: Node.js 20+ and npm 9+

# 1. Clone
git clone https://github.com/sagarDeepakDevOps/cloudforgeops.git
cd cloudforgeops

# 2. Install dependencies
npm install

# 3. Set up environment
cp .env.example .env.local
# Edit .env.local with your values

# 4. Start dev server
npm run dev

Dev server runs at http://localhost:3000.

# Type-check
npx tsc --noEmit

# Production build
npm run build

# Start production server locally
npm start

1. Create content/case-studies/your-slug.md with frontmatter:

---
title: "Your Case Study Title"
excerpt: "One sentence summary."
date: "2026-01-01"
tags: ["AWS", "Kubernetes", "Terraform"]
---

Full markdown content here...

1. Optionally add a Mermaid diagram in src/config/diagrams.ts:

export const caseDiagrams: Record<string, string> = {
  "your-slug": `
    flowchart TD
      A[Entry] --> B[Service]
  `,
};

The case study page automatically renders the diagram when an entry for the slug exists.

1. Push to GitHub.
2. Import the repository at vercel.com/new.
3. Add all NEXT_PUBLIC_* variables in Settings → Environment Variables.
4. Deploy — Vercel detects Next.js automatically, no additional config needed.

For other platforms, run npm run build and serve with npm start or a process manager like PM2.

GitHub Actions runs on every push to main and on all pull requests:

• Type-check — npx tsc --noEmit fails on any TypeScript error
• Build — npm run build with placeholder env vars to catch config issues

See .github/workflows/ci.yml.

MIT © 2026 Deepak Sagar

Deepak Sagar — Freelance DevOps & Cloud Engineer

• Email: sagardeepak2002@gmail.com
• LinkedIn: linkedin.com/in/deepaksagar
• GitHub: github.com/sagarDeepakDevOps
• Book a free 30-min review: cloudforgeops.com/free-review