Skip to content
Kumar Chandrachooda Solutions architect
kc@kumarChandrachooda.com:~$ cd /design-system/resume-components && read --section="01 project-card" 0%
KC Design System — Classic / Sketch

Flow with it.
One system, every component.

The classic skin: Inter typography, ink-black 2px borders and the periwinkle accent, expressed as CSS custom properties in design-system.css. The resume and the blog are both built from these parts.

Design style
Colour set

Specimen

One card, re-inked and re-shaped by whatever the two columns say.

Primary chip

Set — Classic / Sketch

Resume components

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.
Architect

Document Generator

Built a centralised document-generation platform on Azure, validating policy data with InRule across products.

C# .NET Core 6 Azure Functions Terraform
Read the case study
Context
Multiple products each needed to generate documents from policy information, with no shared way to validate that data.
What I did
Spearheaded a new microservice and stood up the Azure environment with Terraform, centralising InRule validation.
Outcome
One service now serves document generation across products, with infrastructure reproducible from code.
Read the build log (3 articles)
Resume components

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.

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.

Stacked display: solid over outline

Discover
new place

On a dark surface the stroke flips light

Discover
new place

Resume components

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
Resume components

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.

Resume components

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
Hello

Short history

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

Resume components

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.

Resume components

Deck chrome

The homepage deck's identity pieces: the floating panel card, the rotated title rail, the “01 / 03” slide number and the pulsing indication arrow. The chrome only engages under ds-deck-on, so this demo is a static miniature rebuilt from the same tokens.
The deck in miniature: the floating panel card on the grey stage, the rotated title rail down the left edge, the “01 / 03” slide number and the pulsing indication arrow. On the homepage these are .ds-panel__card, .ds-panel__title, .ds-slidenum and .ds-indicator, styled only while the deck is engaged — this is a token-faithful approximation, not the live component.
Introduction

Hello! My name is…

Each panel of the homepage is one of these cards: content centred in a scrollable body, chrome pinned to the card's edges.