Back to portfolio

Portfolio as an editorial system

Charlles.dev

A multilingual portfolio connecting a cinematic identity, public projects and technical decisions without hiding the work behind the spectacle.

Role
Full-stack engineering, visual direction and content
Period
2026 — present
Status
Evolving
Open repositoryView project

The problem

Developer portfolios often become either context-free technology inventories or visual landings that prove little engineering.

Context

The site needed a memorable identity while remaining fast, crawlable, accessible and maintainable across three languages.

What was built

Charlles.dev

  1. 01

    Next.js App Router architecture with localized routes.

  2. 02

    Server-side public GitHub data with a curated fallback.

  3. 03

    Media system with posters, on-demand video and reduced-motion paths.

  4. 04

    Technical SEO, structured data, Open Graph and an automated quality gate.

Architecture in 60 seconds

Interface → Application → Data → Quality

  1. 01

    Interface

    React and localized editorial components

  2. 02

    Application

    Next.js App Router, metadata and static routes

  3. 03

    Data

    Public GitHub data with overrides and fallback snapshot

  4. 04

    Quality

    TypeScript, ESLint, Vitest and build checks

Decisions and trade-offs

Evidence before decoration

Evidence before decoration

Selected projects expose the problem and decision; character assets appear only when they support orientation, state or narrative.

Fallback is product work

A GitHub outage does not turn the page blank: a public snapshot preserves the experience and identifies its source.

Motion with a job

GSAP and video support continuity and presence, with equivalent touch and reduced-motion paths.

Verifiable result

  • A public, traceable base for presenting projects and decisions.
  • A localized experience in Portuguese, English and Spanish.
  • A quality pipeline validating code, tests, assets, routes and HTML before release.

Known limitations

  • Professional metrics depend on approved real data; none were invented.
  • Video quality still varies with codec, GPU, data-saving mode and browser.
  • English and Spanish require periodic native human review.