Example Blog Post
This is an example blog card component with excerpt, tags, date, and read time.
DesignSystemUI
5 min read
Design System
Tokens, components, and patterns
Theme
Light and dark themes using Kent-inspired tokens. Toggle from the Navbar.
Light
Background + text
Primary text and secondary text use semantic tokens.
Badge
Card
Card uses surface token.
Dark
Background + text
Primary text and secondary text use semantic tokens.
Badge
Card
Card uses surface token.
Both columns use the same components; the right column is wrapped with class="dark" so dark tokens apply. Use the Navbar toggle to see the full site in each theme.
Color Palette
Design System Lite tokens. All UI uses these; no hardcoded colors.
Background
background
Foreground
foreground
Muted
muted
Border
border
Accent
accent
Aa
Accent FG
accent-foreground
Primary
primary
Secondary
secondary
Destructive
destructive
Accent Usage
Navbar
Auth placement:Sign in is not shown in the navbar (recruiter-friendly). Auth entry points appear only inside blog posts: "Sign in to comment" in the comments section and "Sign in to react" in the reactions block.
Hero & Scroll Arrow
Hero uses min-h-[65dvh] sm:min-h-[80dvh] for scroll affordance (smaller on mobile). ScrollArrow shows a down arrow with subtle bounce animation (hidden on mobile); it hides when the hero scrolls out of view (IntersectionObserver). Click scrolls to Featured Projects. Mobile: overflow-x-hidden, min-w-0 on flex children, viewport-fit=cover + env(safe-area-inset-top) for notch.
Egor Kruglov
Full-Stack Developer
Ibuildmodern,performantwebapplicationswithTypeScript,React,andNode.js.BasedinMunich,opentoremoteopportunities.
Mobile Navbar Overlay
Kent C. Dodds-style full-screen overlay on mobile. Resize to <768px or use device toolbar to test. The menu does not push page content; it opens as a fixed overlay.
Behavior
- Fixed overlay —
fixed inset-0; does not affect page layout - Scroll lock — Background page cannot scroll while menu is open
- Focus trap — Keyboard focus stays inside the menu
- Close — X button, click outside, Esc key, or click a nav link
- Thumb-friendly — Theme toggle and close in header (right); Download CV sticky at bottom
Bottom actions
Download CV is sticky at the bottom for easy thumb reach. Nav links use min 44px tap targets with bg-secondary for readability on the transparent overlay. Theme toggle is in the header (right side) for thumb reach.
Footer
Minimal footer: GitHub, LinkedIn, Email, Download CV. Subtle border top, consistent spacing. Optional Imprint/Privacy links can be added when pages exist.
Typography
H1 (heading-1)
The quick brown fox
H2 (heading-2)
The quick brown fox
H3 (heading-3)
The quick brown fox
H4 (heading-4)
The quick brown fox
Body
The quick brown fox jumps over the lazy dog
Small (body-sm)
The quick brown fox jumps over the lazy dog
Spacing Scale
Design System Lite tokens: 8px, 12px, 16px, 24px, 32px (ds-8, ds-12, ds-16, ds-24, ds-32)
ds-88px
ds-1212px
ds-1616px
ds-2424px
ds-3232px
Buttons
ProjectCard
Shows title, problem/solution summary, stack tags, and links. Modern hover/focus states (subtle border, shadow).
Example Project A
Problem: Manual workflow was time-consuming. Solution: Built an automated tool that reduces setup time.
Next.jsTypeScriptTailwind
Example Project B
Problem: Data scattered across multiple sources. Solution: Centralized dashboard with real-time sync.
ReactPostgreSQLPrisma
BlogCard
Shows title, excerpt, tags, date, and read time. Minimal card layout with hover states (subtle border, shadow). Used on /blog list and home Latest Articles.
ValueCard
Icon, title, and description. Used in the Values section.
✨
Value Card
This is an example value card component
TagBadge
Pills for tags and filters. Default (secondary), selected (primary), and accent variants. Used in BlogCard tags and /blog tag filters.
Default
ReactTypeScript
Selected (filter active)
Design
Accent variant
Featured
Reactions
Heart-fill reaction: subtle gradient fill from bottom. Tap-friendly (44px min), minimal scale/opacity transitions. Signed-in users see count; guests see inline prompt.
Be first
12
1.2K
Sign in to react
Post Layout
Editorial, content-first layout: centered hero, meta (date • read time • tags), comfortable reading width (720px), vertical rhythm, and after-content sections.
Example Blog Post Title
•5 min read•DesignSystem
This block demonstrates the blog prose styling: comfortable line-height (1.7), max-width 720px for optimal reading, and consistent typography. Headings use the design system scale; links use the accent color.
Section Heading
The quick brown fox jumps over the lazy dog. Body text uses the body token with line-height optimized for readability.
const example = "code block";Found this helpful?
A quick reaction helps others discover useful posts.
Form Elements
Search and text inputs use design tokens: bg-input, border-border, focus:ring-ring. Spacing: px-ds-16 py-ds-12.