The Evolution of My Portfolios: 5 Distinct Builds Explored

1. The Philosophy of Building Portfolios

Every software engineer's portfolio is a timestamp of their current engineering standards, design taste, and technical focus. Over the past several years, I haven't just iterated on a single site—I've built 5 completely distinct portfolio systems, each tailored to a specific audience, platform, or aesthetic vision.

From an interactive terminal command-line interface for Linux hackers to a hand-drawn creative scrapbook portfolio and our flagship zero-framework Linux engineering portal, here is the complete breakdown of every portfolio I have designed and shipped.

2. Portfolio v4 (Current Engineering Flagship)

Design & Architectural Highlights:

• Zero Framework Overhead: No React/Vue/Tailwind build steps. Raw semantic HTML5, modular CSS3 variables, and vanilla JavaScript for 100/100 Lighthouse performance.
• Lenis + GSAP Motion Physics: Fluid inertial scrolling with a 5-card sticky flagship stack (Quantro, utgpt, Time Management, WishGift, clockApp) and horizontal pan gallery.
• Universal Word-by-Word Scroll Illumination: Text starts dimmed at opacity: 0.16 and illuminates as the reader scrolls down, functioning as an ambient eye guide.
• Interactive 53-Week GitHub Heatmap: Real-time SVG calendar with daily commit tooltips, all-time totals (4,506+ contributions), and multi-year filter tabs.

function scrubTokenize(el) {
  var walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
  var textNodes = [], node;
  while ((node = walker.nextNode())) {
    if (node.nodeValue.trim()) textNodes.push(node);
  }
  textNodes.forEach(function (tNode) {
    var words = tNode.nodeValue.trim().split(/\s+/);
    var group = document.createElement("span");
    group.className = "w-group";
    words.forEach(function (w, i) {
      var span = document.createElement("span");
      span.className = "w";
      span.textContent = w;
      group.appendChild(span);
      if (i < words.length - 1) group.appendChild(document.createTextNode(" "));
    });
    tNode.parentNode.replaceChild(group, tNode);
  });
}

3. Terminal Portfolio (Interactive CLI Simulator)

Design & Architectural Highlights:

• Keyboard-First Experience: Built for terminal lovers and Linux developers who prefer typing commands over scrolling.
• Custom Command Parser: Supports commands like help, whoami, projects, skills, sudo, clear, history, and interactive easter eggs.
• Tab-Autocompletion & History: Features bash-like Tab autocompletion and ↑/↓ command history navigation.

const COMMANDS = {
  whoami: () => "Suraj Yadav — Native Linux & Mobile Software Engineer",
  skills: () => "Qt/QML, Python, Flutter, C++, Lomiri, Linux Kernel Tooling",
  projects: () => "utgpt (On-device AI), Quantro (Finance), clockApp (GNOME)",
  sudo: () => "Permission denied: user 'suraj' is not in the sudoers file.",
  clear: () => null
};

function handleCommand(cmd, stdout) {
  const [name, ...args] = cmd.trim().toLowerCase().split(/\s+/);
  if (name in COMMANDS) {
    const res = COMMANDS[name](args);
    if (res !== null) stdout.push({ type: "output", text: res });
  } else {
    stdout.push({ type: "error", text: `command not found: ${name}. Try 'help'.` });
  }
}

4. Sanskriti Portfolio (Editorial Scrapbook & Stories)

Design & Architectural Highlights:

• Anti-Corporate Aesthetic: Moves completely away from standard tech grids in favor of an organic, hand-crafted paper journal feeling.
• Inline SVG Symbol Library: 40+ custom vector doodle symbols (butterflies, sunrays, notebook tape, polaroid frames) injected with zero HTTP overhead.
• Typography & Warm Color Palette: Warm cream, terracotta, and ochre color tokens paired with expressive editorial typography.

/* Warm paper grain filter applied to article backdrop */
.scrapbook-container {
  background-color: #FAF6EF;
  background-image: radial-gradient(#E6DFD3 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Hand-drawn SVG doodle rotation & paper tape accent */
.polaroid-frame {
  transform: rotate(calc(var(--tilt, 0) * 1deg));
  box-shadow: 0 10px 24px rgba(110, 80, 50, 0.14);
  border: 12px solid #FFFFFF;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

5. Portfolio v3 (The Ubuntu Touch & Lomiri Era)

Design & Architectural Highlights:

• Niche Platform Focus: Documented native builds for Ubuntu Touch (WhatsWeb, Money Manager UT, clockApp).
• Upstream Open Source Badges: Showcased 5 merged merge requests to Ubuntu Touch's convergent Dekko 2 email client.
• Quantitative Work Metrics: Highlighted a 70% decrease in wait time and 30% speed improvement during my Flutter development internship.

import QtQuick 2.9
import Lomiri.Components 1.3

Page {
  id: projectShowcasePage
  header: PageHeader {
    title: i18n.tr("Suraj Yadav · Projects")
    trailingActionBar.actions: [
      Action {
        iconName: "external-link"
        text: i18n.tr("OpenStore")
        onTriggered: Qt.openUrlExternally("https://open-store.io/app/ubtms")
      }
    ]
  }
}

6. Second Portfolio (v2) (Interactive Web & DSA Streak)

Design & Architectural Highlights:

• Clean Navigation & Sectioning: Fixed header navigation with smooth scrolling between About, Experience, Projects, and Contact.
• DSA Track Proof: Structured problem-solving stats demonstrating algorithmic discipline.
• The Foundation for Future Versions: Established the structured bento patterns and typography foundations that evolved into Portfolio v4.

:root {
  --bg-main: #0E1013;
  --text-primary: #F0F2F5;
  --accent-line: #E95420;
}

[data-theme="light"] {
  --bg-main: #FFFFFF;
  --text-primary: #0E1013;
  --accent-line: #D84315;
}

.portfolio-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

7. Comparative Analysis Matrix

A technical side-by-side comparison across all 5 portfolio systems:

8. 5 Key Takeaways from Building 5 Portfolios