From 0e11818cad519c410425d25d1f4f31cc264ddee1 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 15 Feb 2026 09:43:35 +0000 Subject: [PATCH] improve web typography with professional typographic principles Apply best practices from web typography guidelines: - Enable font kerning, ligatures, and antialiased rendering on body - Define Major Third (1.25) modular type scale as CSS custom properties - Add vertical rhythm unit (--rhythm) and prose measure (--measure: 66ch) - Constrain About summary to 66ch max-width for optimal readability - Add hanging-punctuation on paragraphs (progressive enhancement) - Use lining-nums on headings, lining-nums + tabular-nums on data - Replace hyphens with en-dashes in date ranges and separators - Enhance print styles with widows/orphans and page-break-after https://claude.ai/code/session_01UH4SYBfyZFWF6XEAz3AmRf --- public/cv.json | 8 +++---- src/components/About.astro | 1 + src/components/Certifications.astro | 4 ++-- src/components/Experience.astro | 4 ++-- src/styles/global.css | 37 ++++++++++++++++++++++++++--- 5 files changed, 43 insertions(+), 11 deletions(-) diff --git a/public/cv.json b/public/cv.json index 20c9d27..79426c3 100644 --- a/public/cv.json +++ b/public/cv.json @@ -16,14 +16,14 @@ { "company": "VITALY", "role": "AI/ML Developer", - "period": "May 2025 - Present", + "period": "May 2025 – Present", "summary": "Backend engineer applying AI to real products and internal tooling, combining backend, data, and automation.", "highlights": [ "Developed APIs and services in Python/FastAPI for data processing and system integration.", "Built ingestion and processing pipelines (documents, video) including transcription and validations.", "Implemented AI capabilities with LLMs: RAG, embeddings, and vector search integrated into production middleware.", "Evolution of AI assistants: managing memory/sessions, stability improvements, and post-deployment fine-tuning.", - "Automated RAG ingestion via n8n + Python (Sheets -> MongoDB + Pinecone) with hash dedupe; saved ~8-10 hours per setup.", + "Automated RAG ingestion via n8n + Python (Sheets -> MongoDB + Pinecone) with hash dedupe; saved ~8–10 hours per setup.", "Improved document validation pass rate from 70% to 90% using a GPT+Claude+Gemini ensemble and OCR tuning.", "Migrated chat to an agentic architecture (Google ADK) with LiteLLM; ~15% lower latency and ~35% lower infra cost.", "Stack: Python, FastAPI, n8n, GCP, MongoDB, BigQuery/Firestore, Pinecone, Docker, GitLab CI/CD, OpenTelemetry." @@ -32,7 +32,7 @@ { "company": "VITALY", "role": "Full-Stack Developer", - "period": "Jun 2021 - May 2025", + "period": "Jun 2021 – May 2025", "summary": "Focused on backend specialization (Java/Spring) while owning cloud/data integrations and frontend support.", "highlights": [ "Strategic Middleware APIs: Designed and developed Spring-based middleware to optimize frontend/external services communication.", @@ -45,7 +45,7 @@ { "company": "VITALY", "role": "Intern Developer", - "period": "Apr 2021 - Jun 2021", + "period": "Apr 2021 – Jun 2021", "summary": "Intensive training and first contact with professional web development environments.", "highlights": [ "Received intensive training in Java Spring, Angular, Docker, and Kubernetes.", diff --git a/src/components/About.astro b/src/components/About.astro index 957b2a1..bc502cd 100644 --- a/src/components/About.astro +++ b/src/components/About.astro @@ -21,6 +21,7 @@ const { basics } = Astro.props; .summary { margin: 0; + max-width: var(--measure); color: var(--secondary-text); font-size: 1rem; line-height: 1.75; diff --git a/src/components/Certifications.astro b/src/components/Certifications.astro index ac5d24a..059aa9b 100644 --- a/src/components/Certifications.astro +++ b/src/components/Certifications.astro @@ -28,7 +28,7 @@ const { certifications } = Astro.props;

{cert.issuer} - - + – {cert.date}

@@ -96,7 +96,7 @@ const { certifications } = Astro.props; margin: 0; font-size: 0.8rem; color: var(--tertiary-text); - font-variant-numeric: tabular-nums; + font-variant-numeric: lining-nums tabular-nums; } .cert-separator { diff --git a/src/components/Experience.astro b/src/components/Experience.astro index 4437302..4da606b 100644 --- a/src/components/Experience.astro +++ b/src/components/Experience.astro @@ -19,7 +19,7 @@ const MAX_HIGHLIGHTS = 3;

{role.role} - - + – {role.company}

{role.summary}

@@ -73,7 +73,7 @@ const MAX_HIGHLIGHTS = 3; text-transform: uppercase; color: var(--tertiary-text); padding-top: 0.25rem; - font-variant-numeric: tabular-nums; + font-variant-numeric: lining-nums tabular-nums; } .role-info { diff --git a/src/styles/global.css b/src/styles/global.css index 3a139fc..3fa353e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -32,6 +32,23 @@ /* Font Family */ --font-family-sans: "Geist Variable", system-ui, sans-serif; + + /* Typography — Modular Scale (Major Third, ratio 1.25) */ + --scale-ratio: 1.25; + --text-xs: 0.8rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-lg: 1.25rem; + --text-xl: 1.563rem; + --text-2xl: 1.953rem; + --text-3xl: 2.441rem; + + /* Vertical Rhythm */ + --base-lh: 1.5; + --rhythm: calc(1rem * var(--base-lh)); /* 1.5rem = 24px at 16px base */ + + /* Measure — ideal line length for prose readability */ + --measure: 66ch; } html { @@ -57,7 +74,12 @@ body { color: var(--primary-text); font-family: var(--font-family-sans); margin: 0; - line-height: 1.6; + line-height: var(--base-lh); + font-kerning: auto; + font-variant-ligatures: common-ligatures; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } a { @@ -186,15 +208,17 @@ h1, h2, h3 { text-wrap: balance; + font-variant-numeric: lining-nums; } p { text-wrap: pretty; + hanging-punctuation: first allow-end; } -/* Tabular numbers for dates and numeric data */ +/* Tabular lining numbers for dates and numeric data */ .tabular-nums { - font-variant-numeric: tabular-nums; + font-variant-numeric: lining-nums tabular-nums; } /* Print styles */ @@ -215,6 +239,7 @@ p { /* biome-ignore lint/complexity/noImportant: Print styles require overrides */ color: black !important; font-size: 12pt; + line-height: 1.4; } a { @@ -232,10 +257,16 @@ p { padding: 0 !important; } + p { + widows: 3; + orphans: 3; + } + article, section, h2, h3 { break-inside: avoid; + page-break-after: avoid; } }