§ Engineering — the code sideFig. 00 · Range

From DC motors to data clusters to the web.

I studied computer science with a focus on machine learning. My final-year college projects were in embedded systems and big data. Then I moved into the web, where I’ve built for the last seven years.

R1 · WEB SYSTEMS2018 — now

Platforms, plugins & integrations

Custom WordPress plugins, Shopify storefronts, PHP and JavaScript, REST APIs and CRM workflows for client businesses.

PHP · Laravel · JavaScript · React · REST · HubSpot
R2 · EMBEDDEDCollege · final year

Fault diagnosis for DC motors

An Arduino-based project diagnosing faults in DC motors, the kind that drive conveyor belts and other industrial equipment.

Arduino · C++ · DC motors
R3 · DATACollege · 2019

Big data & classical ML

Worked on data clusters using classical machine-learning models, as part of a computer science degree focused on machine learning.

Data clusters · Classical ML
Fig. 01 · How this site runs

Behind the build

  1. Visitor’s browserHTML first
  2. Astro pages + React islandsTypeScript
  3. Cloudflare Workers · static assetsEdge CDN
  4. GitHub → Workers BuildsCI/CD on every push

Pages ship as plain HTML. React loads only where something is interactive, like the Lab demos and the hero desk.

Fig. 02 · Real code from this site
import type { ReactNode } from 'react';

type DeviceScrollerProps = {
  label: string;          // industry only, never a client name
  height?: number;        // screen height in px
  children: ReactNode;    // the original concept page that scrolls inside
  locked?: boolean;       // NDA overlay on hover; the screen never opens or enlarges
};

// Laptop frame with an auto-scrolling screen. Motion is pure CSS
// (.mac-scroll), so it costs no JavaScript and stops for visitors
// who ask for reduced motion.
export default function DeviceScroller({ label, height = 300, children, locked = true }: DeviceScrollerProps) {
  return (
    <figure className="mac" aria-label={`${label}: original concept, client work under NDA`} style={{ margin: 0 }}>
      <div className="mac-frame">
        <div className="mac-screen" style={{ height }}>
          <div className="mac-scroll" aria-hidden="true">{children}</div>
          {locked && <LockOverlay />}
        </div>
      </div>
      <div className="mac-base" aria-hidden="true" />
      {locked && <span className="mac-badge" aria-hidden="true"><LockIcon size={10} />NDA</span>}
    </figure>
  );
}

function LockOverlay() {
  return (
    <div className="mac-lock">
      <LockIcon size={30} />
      <span style={{ fontSize: 16, fontWeight: 600 }}>Details locked under NDA</span>
      <span style={{ fontSize: 13, color: '#C8C9CE', maxWidth: 300 }}>This screen is an original concept. Client names, designs and code aren’t shown.</span>
    </div>
  );
}

function LockIcon({ size }: { size: number }) {
  return (
    <svg aria-hidden="true" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
      <rect x="5" y="11" width="14" height="9" rx="2" />
      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
    </svg>
  );
}

The laptop screens on the Work page: a typed React component with CSS-only scrolling (zero JavaScript in the browser) and an NDA overlay that never opens or enlarges.

Fig. 03 · Engineering standards on this site
S1

Typed end to end

Strict TypeScript across pages, components and data.

S2

Accessible by default

Real buttons and labels, keyboard paths, visible focus, reduced-motion support.

S3

Fast on a phone

Pages ship as HTML. React loads only for the interactive parts.

S4

Open source

The whole site is public on GitHub, so you can read every line.