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 profile section occupies the top of the portfolio page and is the first thing visitors see. All data it displays flows from a single Profile domain object that is populated server-side by fetching the authenticated user’s data from the GitHub REST API. Because the page is server-rendered with TanStack Start, the profile information is embedded in the initial HTML — no client-side fetch is needed before the avatar and bio appear.
ProfileHero component
Source: src/components/portfolio/profile-hero.tsx
ProfileHero accepts a single prop:
function ProfileHero({ profile }: { profile: Profile })
<img> tag pointing to profile.avatarUrl, which is always a URL on GitHub’s CDN (avatars.githubusercontent.com). It is loaded eagerly (loading="eager") because it is the largest contentful element on the page.
Identity block — Displays profile.name as an <h1>, followed by the GitHub username as @{profile.login} in a monospace style.
Bio — Rendered only when profile.bio is not null.
Fact chips — A <dl> grid of metadata chips, built from an array of Fact objects. Each entry that is non-null produces a chip:
| Field | Label | Notes |
|---|
profile.location | Ubicación | Omitted if null |
profile.company | Empresa | Omitted if null |
profile.publicRepos | Repositorios públicos | Formatted with formatNumber() |
profile.followers / profile.following | Seguidores | Shown as {followers} · sigue a {following} |
profile.createdAt | En GitHub desde | Formatted with formatDate() |
SocialButtons component (see below). The component receives profile.socials with all email kind entries replaced by a fixed Gmail compose link constructed from the CONTACT_EMAIL constant.
StatsGrid component
Source: src/components/portfolio/stats-grid.tsx
StatsGrid accepts a single prop:
function StatsGrid({ stats }: { stats: PortfolioStats })
grid-cols-2 → sm:grid-cols-3 → lg:grid-cols-6) of six metric cards:
| Metric | Field | Icon |
|---|
| Repositorios | stats.totalRepos | FolderGit2 |
| Estrellas | stats.totalStars | Star |
| Forks | stats.totalForks | GitFork |
| Con release | stats.totalReleases | Rocket |
| Activos | stats.activeRepos | Zap |
| Archivados | stats.archivedRepos | Archive |
formatNumber(item.value)), and a text label below it.
The section header also includes a chip showing “Sincronizado ”, where lastSynced is the result of calling useRelativeTime(stats.lastSyncedAt) — a client-side hook that turns the ISO timestamp into a human-readable relative string (e.g. “hace 2 minutos”).
SocialButtons component
Source: src/components/portfolio/social-buttons.tsx
SocialButtons accepts a single prop:
function SocialButtons({ links }: { links: SocialLink[] })
<ul> of anchor buttons, one per SocialLink. Each button shows a Lucide icon and the link’s label text. The icon is selected by mapping link.kind through the ICONS lookup table:
kind | Lucide icon |
|---|
github | Github |
linkedin | Linkedin |
x | Twitter |
instagram | Instagram |
facebook | Facebook |
youtube | Youtube |
website | Globe |
blog | Newspaper |
email | Mail |
kind is not found in the table, Globe is used as the fallback.
All links open in a new tab (target="_blank") except mailto: links, which omit the target attribute so the browser opens the mail client directly. Every anchor includes rel="noopener noreferrer me".
Profile domain type
The Profile interface is the canonical data contract shared between the server data-fetching layer and the UI components. It is defined in src/domain/github/types.ts:
interface Profile {
login: string;
name: string;
avatarUrl: string;
bio: string | null;
location: string | null;
company: string | null;
blog: string | null;
email: string | null;
publicRepos: number;
followers: number;
following: number;
createdAt: string;
htmlUrl: string;
socials: SocialLink[];
}
createdAt) are stored as ISO 8601 strings and formatted for display by the formatDate / useRelativeTime utilities.
SocialLink kinds
The SocialLink interface is also defined in src/domain/github/types.ts:
interface SocialLink {
kind:
| "github"
| "linkedin"
| "x"
| "instagram"
| "facebook"
| "youtube"
| "website"
| "blog"
| "email";
label: string;
url: string;
}
kind values: github, linkedin, x, instagram, facebook, youtube, website, blog, email.
Building links (server side) — The socialsFrom() helper in the GitHub API server module constructs the SocialLink[] array from three sources:
user.blog — If the field is a non-empty string, it is classified as website or blog depending on whether the URL matches a known blogging platform.user.twitter_username — If present, produces a kind: "x" link pointing to https://x.com/{username}./social_accounts endpoint — GitHub’s dedicated endpoint that returns typed social account objects (provider + url). Each entry is mapped to the closest matching kind (e.g. linkedin → linkedin, instagram → instagram).
Entries are deduplicated by URL before the final array is returned, so a user who has their GitHub profile URL in both blog and the social accounts list will not see it twice.