Infrastructure as Code: A Hardware Engineer's Approach to Web Dev

The “Hardware” Mindset in Web Architecture

As a microelectronic engineer focused on EDA and hardware architecture, I view traditional CMS platforms (like WordPress) the same way I view bloated, auto-generated Verilog: inefficient and unoptimized.

When building this technical portfolio, I applied the same strict resource constraints and optimization philosophies used in Digital IC design:

• Astro 6 — Analogous to strict RTL pruning; zero JavaScript is shipped by default.
• Three.js & WebGL — Bypassing the high-level DOM to directly manipulate the GPU buffer for the particle system.
• SSG (Static Site Generation) — Pre-computing states at “compile time” (build time) rather than burning cycles at “runtime”.

The Particle Effect: Memory Management

In the hero section, instead of relying on expensive DOM updates, I utilized contiguous memory blocks (Float32Array) to manage particle states, avoiding the JavaScript engine’s Garbage Collection (GC) overhead — a technique heavily inspired by low-level system programming.

// ~800 particles with boundary wrapping, utilizing Float32Array for zero-GC updates
useFrame((state) => {
  const pos = mesh.current.geometry.attributes.position.array;
  for (let i = 0; i < count; i++) {
    pos[i * 3] += velocities[i * 3];
    if (Math.abs(pos[i * 3]) > 5) velocities[i * 3] *= -1;
  }
  mesh.current.geometry.attributes.position.needsUpdate = true;
});

Docker: The Silicon Wafer of Deployment

The containerization strategy mirrors the concept of a silicon wafer: each container is a discrete, isolated die with strictly defined resource boundaries (--memory=256m --cpus=0.5). A multi-stage Docker build eliminates unnecessary layers, just like aggressive synthesis optimization removes redundant logic gates.

# Multi-stage: build in node, serve in nginx — no dead code survives
FROM node:22-alpine AS builder
# ... build steps ...
FROM nginx:1.27-alpine AS production
# Enforce non-root execution for container security
USER nginx

Nginx: The Timing Closure of Web Infrastructure

In ASIC design, timing closure ensures every signal arrives within its clock period. In web infrastructure, Nginx plays the same role — every request must be routed, buffered, and delivered within strict latency bounds.

# WebSocket proxy — like a clock domain crossing bridge
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

Performance Numbers

Metric	Score
Performance	100
Accessibility	100
Best Practices	100
SEO	100

Built with an obsession for detail. Just like a timing closure, every millisecond counts.