Documentation Index
Fetch the complete documentation index at: https://mintlify.com/santiagonieto09/portafolio/llms.txt
Use this file to discover all available pages before exploring further.
The language chart aggregates byte counts from all repository language data and renders a visual breakdown using GitHub’s official per-language color assignments. It gives visitors an at-a-glance view of which languages dominate the codebase, weighted by actual code volume rather than a simple count of repositories.
LanguageChart component
Source: src/components/portfolio/language-chart.tsx
LanguageChart accepts a pre-computed list of language slices:
function LanguageChart({ languages }: { languages: LanguageSlice[] })
<circle> elements using stroke-dasharray and stroke-dashoffset to draw each language arc. Constants used:
| Constant | Value | Purpose |
|---|
SIZE | 220 px | SVG width / height |
RADIUS | 88 px | Circle radius |
STROKE | 30 px | Stroke width (donut thickness) |
CIRCUMFERENCE | 2 × π × 88 ≈ 552.9 | Full circle length in SVG units |
stroke-dasharray is {length} {CIRCUMFERENCE - length} where length = (percentage / 100) × CIRCUMFERENCE. Arcs are drawn sequentially using a running offset accumulator. The chart is rotated −90° so the first language starts at the 12 o’clock position. A muted background circle is drawn beneath all arcs.
The centre of the donut displays the top language’s percentage and name as SVG <text> elements.
Legend list — An accessible <ul> showing each language with a colored dot, the name, its percentage, and the repo count. A CSS <div> progress bar styled with backgroundColor: lang.color and width: Math.max(lang.percentage, 1.5)% provides a visual width indicator.
The component returns null when the languages array is empty.
LanguageSlice type
Defined in src/domain/github/types.ts:
interface LanguageSlice {
name: string;
bytes: number;
percentage: number; // rounded to 1 decimal place
repoCount: number;
color: string; // hex color from languageColor()
}
| Field | Description |
|---|
name | Language name as returned by the GitHub API (e.g. "TypeScript", "Java") |
bytes | Total bytes of this language summed across all repositories |
percentage | Share of the total byte count, rounded to one decimal place |
repoCount | Number of repositories in which this language appears |
color | Hex color string from languageColor(name) |
Computation
The computeLanguages() helper (called server-side in the GitHub API module) builds the LanguageSlice[] array from raw repository data:
- Aggregate bytes — Iterates over every repository and sums bytes per language across all
repo.languages records.
- Count repos — Simultaneously tracks how many repositories use each language.
- Compute percentage — For each language:
Math.round((bytes / total) * 1000) / 10, which gives one decimal place (e.g. 34.7).
- Sort descending — Orders languages by total bytes so the most-used language is first.
- Slice top 8 — Returns only the top 8 languages to keep the chart readable. All remaining bytes are effectively represented as unused space on the donut background circle.
Language colors
Source: src/domain/github/language-colors.ts
languageColor(name: string): string returns the official GitHub Linguist hex color for a given language name. The internal COLORS map covers the most common languages used in the portfolio:
| Language | Hex color |
|---|
| TypeScript | #3178c6 |
| JavaScript | #f1e05a |
| Python | #3572A5 |
| Java | #b07219 |
| Kotlin | #A97BFF |
| Dart | #00B4AB |
| PHP | #4F5D95 |
| HTML | #e34c26 |
| CSS | #563d7c |
| Go | #00ADD8 |
| Rust | #dea584 |
| Swift | #F05138 |
| Ruby | #701516 |
| Vue | #41b883 |
| Svelte | #ff3e00 |
| Dockerfile | #384d54 |
#6e7781, #8250df, #0969da, #1a7f37, #bf8700, #cf222e, #bc4c00). The same language name always produces the same fallback color, keeping the chart stable across re-renders.
The language data comes from the per-repo /repos/{owner}/{repo}/languages endpoint, which returns bytes of code per language — not line counts. This matches the same metric GitHub displays on repository pages, so the percentages shown in the portfolio will match what you see on GitHub.
