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

Rough it out.
One system, every component.

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.

Specimen

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

Primary chip

Set — Sketch / 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.
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.