Skip to main content

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 Santiago Nieto portfolio is a production-grade personal site built with TanStack Start and React 19. Every piece of data you see on the page — profile information, repositories, contribution statistics, and activity events — is fetched live from the GitHub REST API and cached for one week via a dual-layer snapshot system. There are no static JSON files to keep in sync: when the cache is warm the site responds instantly; when it is cold a single parallel burst of GitHub API calls rebuilds the snapshot in the background before the page is returned to the browser.

​
Tech Stack

DependencyRole
TanStack StartFull-stack SSR framework; handles server entry, routing, and server functions
TanStack RouterFile-based, fully type-safe client/server router
TanStack QueryAsync data-fetching, caching, and dehydration/rehydration across the SSR boundary
React 19UI rendering with concurrent features and the new use() hook
TypeScriptEnd-to-end type safety across domain, infrastructure, and UI layers
Tailwind CSS v4Utility-first styling with the new CSS-first configuration format
shadcn/ui + Radix UIAccessible, unstyled component primitives styled with Tailwind
BunJavaScript runtime and package manager used for local development and CI
ViteDev server with HMR and optimised production bundling
VitestUnit and integration test runner co-located with the Vite config
NitroServer engine that compiles the app to Vercel or Cloudflare Workers via a preset flag

​
How Data Flows

The following describes the full request lifecycle from the moment a visitor’s browser makes a request to the moment a fully-rendered page arrives:
  1. Browser request — A visitor navigates to the portfolio. TanStack Router matches the / route and triggers SSR on the server.
  2. Server function — The route loader calls getPortfolio(), a TanStack Start server function defined in lib/portfolio.functions.ts, which in turn delegates to fetchPortfolio() in the infrastructure layer.
  3. Snapshot cache check — The infrastructure fetchPortfolio() function first queries the snapshot cache (Cloudflare Cache API when running on Workers, in-memory otherwise). If a valid PortfolioSnapshot exists and is younger than seven days, it is returned immediately.
  4. Cache miss → parallel GitHub API calls — On a cache miss, the infrastructure layer fires four parallel requests to the GitHub REST API:
    • GET /users/{username} — profile, bio, avatar, location, follower counts
    • GET /users/{username}/repos — full repository list with language and star data
    • GET /users/{username}/social_accounts — linked social platform URLs
    • GET /users/{username}/events/public — recent contribution events for the activity feed
  5. Snapshot assembly — The raw API responses are normalised and merged into a typed PortfolioSnapshot value in domain/github/types.ts.
  6. Cache write — The new snapshot is persisted to the cache layer with a one-week TTL so subsequent requests are served instantly.
  7. SSR render — TanStack Query dehydrates the snapshot into the HTML payload. React 19 renders the complete page on the server and streams it to the browser with no client-side loading states for the initial paint.

​
Project Structure

The src/ directory is organised into four top-level concerns:

​
components/portfolio/

Feature-specific React components that compose the visible portfolio page:
ComponentDescription
ProfileHeroAvatar, name, bio, location, and follower/following counts
StatsGridSummary tiles for total public repos, stars, forks, and releases
LanguageChartDoughnut chart of programming languages weighted by repository byte count
RepositoryExplorerFilterable, sortable card grid of all public repositories
ActivityFeedChronological list of recent public GitHub events
SiteHeaderTop navigation bar with theme toggle
SocialButtonsIcon-linked buttons for each detected social account
RepositoryCardIndividual card within the Repository Explorer
RepositoryFiltersLanguage and sort-order controls for the Repository Explorer

​
components/ui/

Low-level shadcn/ui primitives consumed by the portfolio components:
  • DropdownMenu — Radix-based accessible dropdown
  • Select — Radix-based accessible select input

​
domain/github/

Pure business-logic modules with no I/O dependencies:
  • types.ts — All TypeScript interfaces: GitHubUser, GitHubRepo, PortfolioSnapshot, etc.
  • language-colors.ts — Mapping of language names to their canonical GitHub colour hex codes
  • technology-detection.ts — Heuristic rules that infer the technologies used in a repository from its topics, language, and dependency file names

​
domain/portfolio/

  • repository-query.ts — Filter and sort predicates applied to the repository list inside the Repository Explorer

​
infrastructure/github/

All network I/O to the GitHub REST API is isolated here:
  • github-api.server.ts — Server-only module that constructs authenticated fetch calls with optional GITHUB_TOKEN bearer auth
  • github-api-types.ts — Raw API response shapes (separate from the domain types to preserve a clear anti-corruption layer)
  • snapshot-cache.ts — Cache read/write logic; uses the Cloudflare Cache API when available and falls back to an in-process Map

​
hooks/

Custom React hooks shared across components:
  • use-mobile.tsx — Detects whether the current viewport width is below the mobile breakpoint
  • use-relative-time.ts — Formats an ISO timestamp as a human-readable relative string (e.g. “3 days ago”)
  • use-theme.ts — Reads and toggles the active colour theme (light / dark / system)

​
lib/

Shared utilities and cross-cutting concerns:
  • constants.ts — Site-wide constants: GITHUB_USERNAME, GITHUB_PROFILE_URL, and CONTACT_EMAIL
  • portfolio.functions.ts — TanStack Start server function (getPortfolio) that delegates to the infrastructure layer to fetch and return the PortfolioSnapshot
  • portfolio.queries.ts — TanStack Query queryOptions factories consumed by route loaders
  • format.ts — Number and date formatting helpers
  • docs-url.ts — Helper that constructs absolute documentation links
  • utils.ts — Generic utility functions (cn class merger, etc.)

​
routes/

TanStack Router file-based routes:
  • index.tsx — Main portfolio page; prefetches PortfolioSnapshot in the loader and renders all section components
  • api/public/sync.ts — POST endpoint that manually triggers a cache refresh; protected by CRON_SECRET
  • sitemap[.]xml.ts — Generates a valid sitemap.xml using SITE_URL
The github-api.server.ts file uses the .server.ts filename convention enforced by TanStack Start and Nitro. Any module with .server. in its name is stripped from the client bundle at build time, ensuring that your GITHUB_TOKEN and raw API logic never ship to the browser.

​
Explore Further

Quickstart

Clone, configure, and run the portfolio locally in under five minutes.

Configuration

Environment variables, GitHub token scopes, and cron sync setup.

Architecture Overview

Deep dive into the SSR pipeline, snapshot cache, and technology-detection engine.

Features: Repositories

How the Repository Explorer filters, sorts, and displays your public repos.

Build docs developers (and LLMs) love

Get started for freeTalk to us