Srikanth Kolli — Build Guide

How this network was built.

The brief this build was held to, the generative canvas technique that carries it, and the unedited log of every self-critique pass — what was found, what changed, what got added on purpose.

The Brief

Concept: THROUGHPUT.

Revision note. The first rebuild pursued a print-grade editorial direction — paper texture, serif type, margin annotations. Direct feedback: "boring... make it look graphical and out of the world." That called for a different brief, not another editorial pass. This page documents the rebuild that followed.

Throughput is the metric an OMS lives and dies by — orders processed per unit time through a network of systems. The concept made that metric visible: a live network of nodes and routes with light constantly moving through it, because the subject has spent twenty years building the systems that make that light move faster and more reliably.

Palette	Void #05070D AI — cyan #33E1FF E-commerce — magenta #FF3FA4 Supply chain — emerald #3CF2A6
Typefaces	Space Grotesk (display & body) paired with JetBrains Mono (system chrome — nav, labels, stats, tags). The same logic as a real ops dashboard: a clean display face for the narrative, a monospace face for the telemetry.
Signature technique	A hand-written, dependency-free 2D canvas network — nodes for the systems, edges for the routes, packets of light traveling those routes continuously. No Three.js, no WebGL.
The one thing it must prove	That this is a person who can make a system's internal motion — orders, packets, signals moving through a network — visible and beautiful, not just describe it in a bullet point.

Read the full BRIEF.md →

The Technique

A generative network, built in canvas.

No framework, no build step. Three real excerpts from this site's own source, as shipped.

1. Nodes, edges, packets

A force-relaxed layout places nodes across the hero, connects each to its nearest neighbors with soft curved edges, and travels small glowing packets along those edges on a continuous loop.

assets/network.js

for (var j = 0; j < this.edges.length; j++) {
  var edge = this.edges[j];
  var tp = (t * edge.speed + edge.offset) % 1;
  var p = bezierPoint(tp, edge.a.x, edge.a.y,
                       edge.cx, edge.cy, edge.b.x, edge.b.y);
  ctx.beginPath();
  ctx.arc(p.x, p.y, 1.8, 0, Math.PI * 2);
  ctx.fillStyle = edge.color;
  ctx.shadowColor = edge.color;
  ctx.shadowBlur = 8;
  ctx.fill();
}

2. The network reaches for you

Nodes within ~170px of the cursor drift toward it, dragging their connected edges along since the edges read the same live node objects — then ease back when the cursor leaves. Skipped entirely under reduced motion.

assets/network.js

NetworkField.prototype.updatePositions = function () {
  var radius = 170, strength = 20;
  for (var i = 0; i < this.nodes.length; i++) {
    var node = this.nodes[i];
    var dx = this.mouse.x - node.baseX;
    var dy = this.mouse.y - node.baseY;
    var dist = Math.sqrt(dx * dx + dy * dy);
    var targetX = node.baseX, targetY = node.baseY;
    if (dist < radius && dist > 0.01) {
      var pull = (1 - dist / radius) * strength;
      targetX += (dx / dist) * pull;
      targetY += (dy / dist) * pull;
    }
    node.x += (targetX - node.x) * 0.08;
    node.y += (targetY - node.y) * 0.08;
  }
};

3. Real accessibility, not a checkbox

The canvas is aria-hidden and purely decorative — the actual content sits in HTML on top of it. Every transition, animation, and canvas listener is gated on prefers-reduced-motion.

assets/site.css

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important; }
}

The Critique Log

Screenshots and scripts, not vibes.

Each pass rendered the served page at desktop and mobile via tools/shot.js, then got read as a hostile design review — plus, this round, a luminance script, an overflow probe, and a synthetic interaction test, because some bugs don't show up in a screenshot. Full log in CRITIQUE.md.

Pass 1

Console errors: 0 throughout

Found

Computed contrast instead of eyeballing: --text-faint measured 4.30:1 — fails AA. Same lesson as the previous build, new palette.
The same dead-zone problem as before, in graphical clothing: 300+px of empty void beside the Projects and FAQ intros.
Muddy letter-level color in the three-stop gradient headline text.

Fixed

Darkened --text-faint to 5.3:1, verified every pair with a script
Added a .lede-grid + .signal-card pattern — the empty column now carries a real stat
Added a colored glow behind gradient text; rewrote @media print to redefine CSS variables instead of patching selectors, since the dark theme was printing near-white text on white paper

Upgrade

The hero network is mouse-reactive — nodes drift toward the cursor and settle back, skipped entirely under reduced motion.

Pass 2

Console errors: 0 throughout

Found

Eight engagement tiles with zero color, sitting directly below a page that otherwise leans hard into a three-color signal system

Fixed

Added a cycling top accent bar in the three signal colors to every tile

Upgrade

The hero pillar chips (AI / E-Commerce / Supply Chain) now highlight the matching-colored nodes in the live network on hover or focus.

Pass 3

Console errors: 0 throughout

Found

A real constitution violation: portraits were JPG, one at 216KB — over the 200KB WebP limit, missed in both builds
A self-inflicted bug: a reducedMotion variable was read before it was declared due to script ordering, so a hover effect would have ignored the user's actual preference

Fixed

Converted both portraits to WebP via ffmpeg (32KB / 110KB)
Moved the variable declaration before its first use; verified with a synthetic mouse test under both normal and reduced motion

Upgrade

Magnetic hover on the primary CTA — it drifts toward the cursor and spring-returns, confirmed inert under reduced motion.