DEV Community

Gaurav Nayak
Gaurav Nayak

Posted on

How I Built My DevOps Portfolio Website from Scratch

#devops #portfolio #github #webdev

How I Built My DevOps Portfolio Website from Scratch

As a fresher DevOps Engineer from CDAC Pune, one of the
first things I realized was that having a live portfolio
website is more powerful than any certificate or resume PDF.
So I built one. From scratch. And deployed it live on the
internet the same day.

Here's exactly how I did it and how you can too.

Why I Built a Portfolio
I was applying for DevOps roles in Pune and kept getting
ignored. The problem wasn't my skills it was that nobody
could SEE my skills.
A resume says "I know Docker and Kubernetes."
A portfolio SHOWS it.

That difference is everything.

What I Built
A fully responsive dark-themed portfolio with:
Animated typewriter showing my DevOps roles
Live GitHub contribution graph (updates automatically)
Skills section with animated progress bars
Projects section with GitHub links
Auto-fetching blog posts from Dev.to
Download resume button
Terminal widget showing my skills
Contact section with all my links

Live site: https://gaurav2349.github.io/portfolio-/

Tech Stack
Version 1 — Plain HTML/CSS/JS
No framework needed
Single file deployment
Hosted free on GitHub Pages
Version 2 — React
Component-based architecture
GitHub API integration
Dev.to API for blog posts

Deployed via gh-pages

Step 1 — Setting Up GitHub Pages
GitHub Pages is completely free and perfect for
portfolio hosting.
Here's what I did:

# Create a new repo on GitHub
# Clone it locally
git clone https://github.com/Gaurav2349/portfolio-.git
cd portfolio-

# Add your index.html file
git add index.html
git commit -m "Add portfolio website"
git push origin main
Enter fullscreen mode Exit fullscreen mode

Then in GitHub:
Settings → Pages → Source → main branch → Save
Your site is live at:

https://yourusername.github.io/reponame

Step 2 — The Terminal Widget
The terminal widget was my favourite part to build.
It gives the portfolio that DevOps engineer aesthetic.

<div class="terminal">
  <div class="terminal-bar">
    <span class="dot red"></span>
    <span class="dot yellow"></span>
    <span class="dot green"></span>
  </div>
  <div class="terminal-body">
    <div>$ whoami</div>
    <div class="output">→ DevOps Engineer</div>
    <div>$ kubectl get skills</div>
    <div class="output">Docker    Running ✓</div>
    <div class="output">Kubernetes Running ✓</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 3 — Typewriter Animation
This was pure JavaScript — no library needed.

const roles = [
  'DevOps Engineer',
  'Linux Power User', 
  'CI/CD Pipeline Builder',
  'Cloud Administrator'
];

let roleIndex = 0;
let charIndex = 0;
let deleting = false;

function type() {
  const word = roles[roleIndex];

  if (!deleting) {
    // typing forward
    element.textContent = word.slice(0, charIndex++);
    if (charIndex > word.length) {
      deleting = true;
      setTimeout(type, 1800);
      return;
    }
  } else {
    // deleting backward
    element.textContent = word.slice(0, charIndex--);
    if (charIndex < 0) {
      deleting = false;
      roleIndex = (roleIndex + 1) % roles.length;
      charIndex = 0;
    }
  }
  setTimeout(type, deleting ? 45 : 85);
}
Enter fullscreen mode Exit fullscreen mode

Step 4 — GitHub Contribution Graph
I used ghchart.rshah.org — a free service that
generates your GitHub contribution graph as an image.

<img 
  src="https://ghchart.rshah.org/00d4ff/Gaurav2349"
  alt="GitHub contributions"
/>
Enter fullscreen mode Exit fullscreen mode

Replace Gaurav2349 with your GitHub username.
The color 00d4ff is the cyan accent color.

It updates automatically every day. Zero maintenance.

Step 5 — Deploying the React Version
For the React portfolio I used gh-pages package.

# Install gh-pages
npm install gh-pages --save-dev

# Add to package.json
"homepage": "https://gaurav2349.github.io/portfolio-",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

# Deploy with one command
npm run deploy
Enter fullscreen mode Exit fullscreen mode

Every time I make a change:

npm run deploy
Enter fullscreen mode Exit fullscreen mode

Site updates in 2 minutes. 🚀

Step 6 — Auto-fetching Dev.to Posts
This was the coolest dynamic feature. My portfolio
automatically shows my latest Dev.to posts using
their free API.

useEffect(() => {
  fetch('https://dev.to/api/articles?username=gauravnayak&per_page=3')
    .then(r => r.json())
    .then(data => setPosts(data));
}, []);
Enter fullscreen mode Exit fullscreen mode

Every time I publish a new post on Dev.to, it
automatically appears on my portfolio. No manual

update needed.

What I Learned

  1. HTML/CSS/JS is enough to build something impressive You don't need React for everything. My first version was a single HTML file and it looked amazing.
  2. GitHub Pages is genuinely free and powerful No server costs, no hosting fees, no configuration. Perfect for portfolios.
  3. A live URL beats a PDF resume every time I started including my portfolio link in every application. Response rate improved noticeably.
  4. Build in public Pushing code regularly, making open source contributions, writing blogs — all of this builds your online presence over time. --- Results Portfolio live at: https://gaurav2349.github.io/portfolio-/ GitHub: https://github.com/Gaurav2349 First open source PR merged on an 18k star repo Reliance job application submitted --- Your Turn If you're a fresher DevOps engineer reading this build your portfolio today. Not tomorrow. Today. It takes one afternoon and the results speak for themselves. All you need: A GitHub account (free) Basic HTML/CSS knowledge Your resume content If I could do it you can too. --- I'm Gaurav Nayak, a fresher DevOps Engineer from CDAC Pune actively looking for DevOps/Cloud/Linux Admin roles. Let's connect on LinkedIn or check out my GitHub.

Top comments (0)