Komal Singh — Cloud & DevOps Engineer Portfolio

Cloud & DevOps Engineer | Technical Trainer & SME

A personal portfolio site showcasing hands-on cloud/DevOps engineering work alongside professional experience in technical training and enablement — built with an honest, evidence-first approach: every project is clearly labeled as a personal project, hands-on lab, or professional/consulting engagement, and every claim is backed by a real GitHub repository, resume detail, or explicit placeholder.

---

Built with Claude. The frontend implementation, UI/UX design, and component architecture of this site were built in collaboration with Claude (Anthropic) — I'm a Cloud & DevOps engineer, not a frontend developer, and I used AI assistance the same way I'd use it on the job: to move faster on a skillset outside my core focus. All resume content, project details, certifications, and professional experience described on the site are my own and independently verifiable against my GitHub repos and resume.

---

✨ Overview

This site is built around a simple rule: nothing gets displayed that couldn't be defended in a technical interview. Content is organized into clearly-labeled tiers —

Label	Meaning
🧪 Personal Project	Self-directed engineering work, verified against its public GitHub repo
🔬 Hands-on Lab	Focused practice on a specific tool or pattern, not a full production system
💼 Professional / Consulting Engagement	Real client/employer work — summarized honestly without exposing proprietary source code
🎓 Technical Enablement	Training, curriculum development, and certification-aligned coaching experience

📸 Preview

🧱 Tech Stack

• React 19 + TypeScript — component architecture with strict typing
• Vite — build tooling and dev server
• Tailwind CSS — utility-first styling, dark engineering theme
• React Router — client-side routing for project case-study pages
• Lucide React — icon set
• @fontsource (IBM Plex Mono + Inter) — self-hosted fonts, no external font CDN

No backend, no database, no API keys required — it's a fully static site.

🚀 Getting Started

Prerequisites

• Node.js 20+
• npm (bundled with Node.js)

Installation

git clone https://github.com/KomalSingh21/DevOps-Cloud-Engineer-Portfolio.git
cd DevOps-Cloud-Engineer-Portfolio
npm install

Development

npm run dev

Starts the Vite dev server (default: http://localhost:5173) with hot module reload.

Production build

npm run build     # type-checks with tsc, then builds to dist/
npm run preview   # serve the production build locally to sanity-check it

Lint

npm run lint

🌐 Deployment

This project deploys cleanly to Vercel with zero configuration:

1. Push this repository to GitHub.
2. Import it in Vercel — the Vite framework preset is auto-detected.
3. Build command: npm run build · Output directory: dist (both are Vite defaults).
4. vercel.json is included with a SPA rewrite so deep links like /projects/:slug work correctly on page refresh, not just client-side navigation.

Any other static host (Netlify, GitHub Pages, Cloudflare Pages, S3 + CloudFront) works too — just make sure to configure an equivalent SPA fallback rewrite to index.html.

📂 Project Structure

├── public/
│   └── resume/                 Resume PDF served at /resume/Komal-Singh-Resume.pdf
├── src/
│   ├── components/             Navbar, Hero, About, Skills, Projects, ProjectCard,
│   │                           Experience, Certifications, Enablement, Labs,
│   │                           Documentation, GitHubSection, Contact, Footer,
│   │                           TroubleshootingCard, ui.tsx (shared primitives), icons.tsx
│   ├── data/                   All content as typed constants — see below
│   ├── pages/                  HomePage.tsx, ProjectDetailPage.tsx (case-study route)
│   ├── App.tsx                 Router + layout shell
│   ├── main.tsx                Entry point
│   └── index.css               Design tokens, fonts, global styles
├── vercel.json                 SPA rewrite config for deployment
└── vite.config.ts

Content architecture

All portfolio content lives in src/data/ as structured, typed TypeScript — not hardcoded inside components. To update the site's content, you generally only need to edit these files:

File	Contains
site.ts	Name, positioning, hero copy, contact info, resume path, SEO metadata
experience.ts	Employer, role, dates, responsibilities
skills.ts	Technical skills grouped by category
projects.ts	Personal projects, hands-on labs, and professional engagements (see ProjectKind)
certifications.ts	Certifications held, grouped by category — kept separate from certification-aligned training delivered
enablement.ts	Training/enablement stats and program highlights
labs.ts	Smaller hands-on lab cards
documentation.ts	Technical notes & documentation catalog
types.ts	Shared TypeScript interfaces for all of the above

Each Project in projects.ts has a kind: "personal" | "lab" | "professional" field that drives how it's labeled and displayed throughout the site — including whether a GitHub repository link or a "Professional engagement — source not public" note is shown.

♿ Accessibility & Responsiveness

• Semantic HTML with a logical heading hierarchy
• Visible focus states on all interactive elements
• Keyboard-navigable menus and links
• Responsive from 375px mobile up through 1920px desktop, no horizontal scroll
• Respects prefers-reduced-motion

📄 License

The source code in this repository is licensed under the MIT License.

The personal content — name, resume, biography, project descriptions, and any photos — is not covered by the code license and is not intended for reuse. If you're using this repo as a template for your own portfolio, please swap out the contents of src/data/ and public/resume/ with your own information.

📬 Contact

• GitHub: github.com/KomalSingh21
• LinkedIn: linkedin.com/in/comal
• Email: comalsingh12@gmail.com

---

_{Built with React, TypeScript, Vite, and Tailwind CSS. Not a template — every project, lab, and credential shown is backed by verifiable evidence.}