Skip to content
kc@kumarChandrachooda.com:~$ cd /design-system/portfolio && read --section="01 project-card" 0%
KC Design System — Sketch / Flow

Rough it out.
Resume components.

The sketch style redraws the system freehand in design-system-sketch.css: handwriting type, wobble borders, sticky-note labels and marker highlights, everything a degree or two off square. Same components, same markup — the notebook the classic skin was ruled up from.

Reading in an unnamed pair — sketch / flow Browse all 8 →

01

Project card

A compact case study (.ds-project): a scannable face — role pill, name, outcome headline, key stack — over a structured <details> deep-dive. Role is colour-coded so the filter row doubles as a legend: Architect ink, Lead accent, Developer accent outline, R&D violet. R&D cards can carry a “read the series” link to the matching blog tag.
skeleton — the real component carries a <details> deep-dive and the skeleton deletes it rather than disabling it: closed is the card's resting height anyway, so the collapsed face is the honest promise.
02

Headings, quotes & leads

The panel openers of the homepage deck: the accent-block heading, the 4px ink bar quote and the periwinkle-tinted lead paragraph that introduces a panel. Plus the stacked display heading — a solid line over hollow outline letters (.ds-text-outline) fronted by a thin title rule (.ds-title-rule) — for hero-scale statements. The stroke rides on --ds-outline-ink, so dark surfaces flip it to light automatically.
The panel's three text primitives: a heading that can carry an inline accent block, the 4px ink bar quote, and the periwinkle lead.

A heading with an accent block.

The 4px ink bar quote, used to set the tone of a slide.

The lead paragraph: periwinkle-tinted supporting copy that introduces a panel.

The display title, on both surfaces. Solid over outline, and the same markup again on ink — the stroke flips light through --ds-outline-ink rather than through a second rule, so anything that drifts between the two is a bug in the token.

Stacked display: solid over outline

Discover
new place

On a dark surface the stroke flips light

Discover
new place

03

Feature cards & stats

.ds-feature: a black circle scales from the corner to fill the card on hover, flipping the content white (origin: service-card-wrap). .ds-stat-row numbers count up when scrolled into view via data-count.

Problem solving

My compass for navigating the complexities of technology.

Design

Blending aesthetics and functionality into digital masterpieces.

6Years experience
15Projects
7Certifications
feature — in the real .ds-intro-grid. The body keeps its 3px accent border; the hover flood needs no neutralising, for the same reason the topic tile's wipe does not.
skill-group skeleton — keeps its meter tracks and drops their fills, which is the same trick as the continue shelf's.
04

Education & timeline

.ds-edu draws its border in from the centre on hover, the title underline growing with it (origin: eduction-card). .ds-timeline is the employment rail.

University of Leeds

MSc Advanced Computer Science
2022 – 2023

JSS Academy of Technical Education

B.Tech, Computer Science
2012 – 2016

  1. July 2021 – Aug 2022

    Accenture · Senior Platform Engineer

    Microservice architecture and cloud deployment.

  2. Dec 2017 – June 2021

    Imaginea · Senior Software Engineer

    Built and shipped web applications on the cloud.

skeleton — the timeline waiting, in the column the real rows sit in.
05

Info list & notecard

The about-panel pair: a .ds-info-list definition table and the violet .ds-notecard with its “Hello” tab.
Name
Kumar Chandrachooda
Location
United Kingdom
City
Leeds
title
A guest post about queues
slug
a-guest-post-about-queues
category
Architecture
author
Jo Tan jo-tan
Hello

Short history

A Cloud & Data Architect & Microsoft platform engineer. The notecard carries the biographical blurb on the about panel.

skeleton — the notecard is the one card with a coloured ground, and the one place the default block colour is wrong: #efefef is lighter than violet while the text it stands in for is much darker, so the card would read as punched full of holes rather than as waiting. It tints the ink instead. Its label tab stays solid, like the flagship's accent line — chrome, not content.
06

Certification card

.ds-cert: badge, title, date and an expandable <details> body. Used inside the certifications carousel.

Microsoft Certified: Azure Solutions Architect Expert

Azure Solutions Architect Expert

July 2021
About this certification

Expertise crafting cloud and hybrid solutions across Compute, Network, Storage, Monitoring and Security.

skeleton — the real component carries a <details> deep-dive and the skeleton deletes it rather than disabling it: closed is the card's resting height anyway, so the collapsed face is the honest promise.
07

Deck chrome

The homepage deck, running: the floating panel card, the rotated title rail, the “01 / 03” slide number and the indication arrows. Not a miniature any more — the deck's rules moved off html.ds-deck-on onto the deck element, so a bounded stage runs the real component.
The live deck, bounded. The floating panel card on the grey stage, the rotated title rail, the “01 / 03” slide number and the pulsing indication arrows — all of them the real .ds-panel__card, .ds-panel__title and .ds-slidenum, paged by the same deck.js the homepage runs. Focus the stage and use the arrow keys, drag it, or use the controls beneath it. Below 992px the deck does not engage at all and the stage shows the flow document instead, which is what a phone gets.

Hello!
My name is

Kumar Chandrachooda

AWS & Azure Cloud and Data Architect
Agentic AI Engineering

I’m a forward deployed engineer and AI implementation lead, and I design and build cloud platforms that other teams and agents can rely on.

Kumar Chandrachooda 01/03

I deliver with agentic AI

I use agentic AI in day-to-day delivery: multi-agent spec-writing playbooks for data-pipeline, web and infrastructure work, with adversarial verification and an ADR loop; harness and context engineering; and agent-runnable tooling for Azure DevOps backlog sync and workspace setup. My knowledge base on AI engineering covers six disciplines: Prompt Craft, Context, Harness, Intent, Specification and Orchestration Engineering.

agents spec · verify · ADR Orchestration Prompt Context Specification Intent Harness Amazon Bedrock AgentCore runtime · memory · gateway · identity
Further reading: Amazon Bedrock AgentCore is generally available (AWS)

Claude Code

02/03

I am a Cloud & Data Architect & platform builder

Over eight years I’ve moved from .NET web applications and microservice migrations on Azure to leading AWS cloud and data architecture. My recent work includes CI/CD and reusable infrastructure modules, platform standards for APIs and caching, GDPR compliance, and an analytical data product on the medallion architecture.

CI/CD IaC modules bronze · raw silver · conformed gold · modelled data product API & caching GDPR AWS Azure
03/03
About me
Name
Kumar Chandrachooda
Location
United Kingdom
City
Leeds
Education
MSc Advanced Computer Science (Cloud Computing), University of Leeds, Distinction
Hello

Short history

I'm an AWS & Azure Cloud and Data Architect based in Leeds, United Kingdom, and today an Agentic AI Implementation engineer, Forward deploying AI solutions to business.

I design and build cloud platforms that other teams and agents can rely on. Over eight years I've moved from .NET web applications and microservice migrations on Azure to leading AWS cloud and data architecture. My recent work includes CI/CD and reusable infrastructure modules, platform standards for APIs and caching, GDPR compliance, and an analytical data product on the medallion architecture. I also use agentic AI in day-to-day delivery: multi-agent spec-writing playbooks for data-pipeline, web and infrastructure work, with adversarial verification and an ADR loop; harness and context engineering; agent-runnable tooling for Azure DevOps backlog sync and workspace setup; and a structured knowledge base on AI engineering disciplines.

Showing 2 of 7 panels, in the catalog's order, each at the staging ISlideLayoutCatalog currently resolves for it (home → base, about → base). 112 layouts are registered across 7 panels.

What each effect used to be. The original slideshow rebuilt natively — no jQuery, no owl-carousel, no AOS. Kept as a table rather than folded into prose because it is decision history: it records what was replaced, which is the only way to tell later whether a thing was designed or inherited. Two rows that used to sit here have gone to the sections that own them — the page loader to Page entrance, the scrolled header to Site header.
EffectHookRebuilt from
Transform-paged deck (vertical panels).ds-deck > .ds-deck__track > .ds-panelcd-slideshow
Horizontal sub-slides.ds-substrip > .ds-subcd-marginal-nav
Floating content card.ds-panel__card.content
Rotated vertical title rail.ds-panel__title.slide-title
Slide number.ds-slidenum.slide-number
Pulsing direction arrows.ds-indicator.cd-single-step
Letter-by-letter title.ds-lettersanime.js ml3
Two-ball cursorauto (fine pointer).cursor__ball

Markup

As rendered on the page behind this — captured, not transcribed.