A free, open-source DevOps portfolio website template for Cloud Engineers, SREs, and DevOps professionals.
Built with React + TypeScript, featuring a cyber terminal design, interactive blog, case studies, and CI/CD-ready deployment on Vercel.
🔴 Live Demo • Quick Start • Customization • Deploy
If you are a DevOps engineer, Cloud Engineer, or SRE who:
- Wants a portfolio that looks like it belongs in a terminal — not a marketing agency
- Is targeting product-based companies, startups, or FAANG-adjacent roles
- Wants to stand out from generic Notion or Google Sites portfolios
- Needs a ready-to-deploy solution in under 10 minutes
This template is for you.
Recruiters spend an average of 6 seconds on a resume. A portfolio like this helps them quickly understand your technical depth and project experience — before they even read a word.
Live at → neeraj-devops.vercel.app
| Section | What You Get |
|---|---|
| 🏠 Home | Animated terminal hero, typewriter effect, neon aesthetic |
| 🛠️ Skills | Visual proficiency indicators for full DevOps toolchain |
| 📁 Projects | Filterable project cards with tech stack tags |
| 📊 Case Studies | Challenge → Solution → Impact breakdowns with metrics |
| 📝 Blog | Modal-based reading, view counts, category filters |
| 📬 Contact | Web3Forms-powered contact form, no backend required |
Fork → Customize → Deploy in under 10 minutes.
# Step 1 — Clone your fork
git clone https://github.com/YOUR_USERNAME/devops-portfolio.git
cd devops-portfolio
# Step 2 — Install dependencies
npm install
# Step 3 — Set up environment (required for contact form)
cp .env.example .env
# Open .env and add your Web3Forms key (free at web3forms.com)
# Step 4 — Run locally
npm run devThen open http://localhost:5173 — you should see the full site.
- Cyber Terminal Design — Electric neon green theme, monospace fonts, authentic command-line aesthetic
- 3D Animated Background — Dynamic grid powered by Three.js
- Typewriter & Glitch Effects — Smooth transitions powered by Framer Motion
- Fully Responsive — Optimized for desktop, tablet, and mobile
- Interactive Skill Explorer — Visual proficiency indicators for DevOps toolchain
- Project Filtering — Filter projects by technology stack
- Full article modal reading experience
- Real-time view count tracking
- Category filtering (DevOps, Cloud Infrastructure, Full-Stack)
- Search, sort by date / views / likes
- Featured article highlights
- Detailed challenge → solution → impact breakdowns
- Realistic performance metrics
- Before/after comparisons
- Full technology stack context per project
- Vercel auto-deployment on push to
main - SPA redirect rules pre-configured (
vercel.json) - Environment variable support for secrets
- Netlify-compatible with one config file
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Routing | React Router |
| 3D Effects | Three.js |
| Icons | Lucide React |
| Contact Form | Web3Forms (free, no backend) |
| Deployment | Vercel |
The contact form uses Web3Forms — a free service that delivers form submissions to your email. You must replace the API key with your own before deploying.
Go to web3forms.com → enter your email → copy your access key.
cp .env.example .envEdit .env:
VITE_WEB3FORMS_KEY=your_access_key_hereIn your Vercel project → Settings → Environment Variables:
| Key | Value | Environments |
|---|---|---|
VITE_WEB3FORMS_KEY |
your_access_key_here |
Production, Preview, Development |
After adding, redeploy the project (push a commit or use Vercel dashboard → Redeploy).
Never commit your
.envfile. It is already in.gitignore.
| What to change | File |
|---|---|
| Name, role, bio | src/data/portfolio.ts or src/pages/Home.tsx |
| Navigation links | src/components/Navbar.tsx |
| Footer links + socials | src/components/Footer.tsx |
| Skills & proficiency | src/pages/Skills.tsx |
| Contact details | src/data/portfolio.ts |
Edit the caseStudies array in:
src/components/case-studies/EnhancedCaseStudies.tsx
Each entry supports: title, problem statement, solution, tech stack, and before/after metrics.
Edit the blogPosts array in:
src/components/blog/EnhancedBlog.tsx
// tailwind.config.js — change the neon green to your preferred accent
colors: {
primary: {
500: '#00ff41', // ← your primary accent color
},
'bg-page': '#0a0a0a', // ← main background
'bg-surface': '#111111', // ← card background
}- Typography:
src/index.css - Animation config:
src/components/visual/VisualComponents.tsx
devops-portfolio/
├── src/
│ ├── components/
│ │ ├── blog/
│ │ │ └── EnhancedBlog.tsx # Blog with modal reading + metrics
│ │ ├── case-studies/
│ │ │ └── EnhancedCaseStudies.tsx # Case studies with impact data
│ │ ├── visual/
│ │ │ └── VisualComponents.tsx # Reusable animated UI components
│ │ ├── Navbar.tsx
│ │ └── Footer.tsx
│ ├── data/
│ │ └── portfolio.ts # ← your name, links, contact info
│ ├── pages/ # Route-level page components
│ ├── App.tsx
│ └── main.tsx
├── public/
├── .env.example # ← copy this to .env
├── .gitignore
├── vercel.json # SPA redirect rules
├── tailwind.config.js
└── vite.config.ts
- Fork this repo
- Go to vercel.com → Import your fork
- Add
VITE_WEB3FORMS_KEYin Settings → Environment Variables - Deploy — live in under 2 minutes
npm run build
# Upload the `dist/` folder to Netlify DropCreate a netlify.toml file in the project root:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200npm run dev # Start development server (localhost:5173)
npm run build # Production build → dist/
npm run preview # Preview production build locally
npm run lint # Run ESLint
npm run type-check # TypeScript type checkingContributions, issues, and feature requests are welcome!
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Commit changes:
git commit -m 'Add your feature' - Push to branch:
git push origin feature/your-feature - Open a Pull Request
Chrome, Firefox, Safari, Edge (latest versions) · iOS Safari · Chrome Mobile
MIT — free to use, fork, and deploy for personal and commercial use.
Originally built by Neeraj Chandra Nakka as a DevOps portfolio template for cloud, SRE, and infrastructure engineers.
This portfolio is designed for DevOps engineers who want something that looks like it belongs in a terminal — not a Wix page. If you're targeting product-based companies, a portfolio like this helps recruiters quickly understand your technical depth and project experience.
- Live Site: neeraj-devops.vercel.app
- GitHub: github.com/neerajnakka
- LinkedIn: linkedin.com/in/neerajchandran
If this template helped you land a job or get noticed, drop a ⭐ — it helps other DevOps engineers find it.
One click. It means a lot.