Portfólio que escala

Um construtor de portfólio em Markdown.

O Portfoliable.js é um construtor de portfólios open source em JavaScript para quem precisa apresentar trabalhos complexos sem construir um sistema de publicação, apenas com o comando npm create portfoliable@latest no seu CLI.^[1]^[2]

Print da página principal do portfólio no celular utilizando o Portfoliable.

A oportunidade

Enquanto ferramentas como Behance e Wix priorizam a publicação de páginas, o Portfoliable.js trata um case como uma experiência narrativa completa: cada projeto combina Markdown versionado e metadados localizados para gerar uma leitura estruturada, responsiva e acessível, com suporte a múltiplos idiomas, mídia, compartilhamento e futuras edições.

Print de um portfólio usando o Portfoliable.js.

Da pasta vazia ao case publicável

O caminho mais rápido é deliberadamente prático para instalar o Portfoliable é via CLI:

npm create portfoliable@latest meu-portfolio
cd meu-portfolio
npm run portfoliable-create-case -- --name "Meu primeiro case"

A partir deste comando, o Portfoliable é instalado, o primeiro case é adicionado eo fluxo fica próximo do trabalho real de uma equipe:

Definir os metadados do case.
Adicionar/remover variações de idioma, como npm run add:language -- --code es --name Español --html-lang es-ES.
Escrever a narrativa em Markdown, com suporte a toda sintaxe.
Visualizar o app gerado localmente via npm run portfoliable.
Validar o conteúdo e buildar quando estiver pronto para publicar.

A CLI cria o trabalho repetível, enquanto o usuário foca apenas da redação do conteúdo para mostrar a pessoas recrutadoras ou stakeholders. A configuração do case continua explícita e fácil de revisar, como, por exemplo:

{
  "id": "checkout-revamp",
  "title": {
    "en": "Checkout Revamp",
    "pt": "Redesign do checkout"
  },
  "showSummary": true,
  "showToc": true,
  "showNavigator": true
}

Assim, existe uma fronteira útil entre conteúdo e comportamento: o Markdown explica o que aconteceu, enquanto a configuração declara como o case deve ser apresentado: com ou sem títulos, capas, Audioplayers e mais opções de customização.

Um sistema pequeno, com fronteiras claras

Por baixo da interface, o Portfoliable se organiza em algumas camadas focadas:

Camada	Responsabilidade
Markdown dos cases	Narrativa, seções localizadas e metadados específicos
Runtime	Rotas, parsing, leitura, mídia, compartilhamento e validação
CLI e templates	Scaffolding, comandos repetíveis e defaults seguros
Valence Design System	Componentes reutilizáveis, tokens e padrões de interação acessíveis

O Valence aparece aqui como uma camada habilitadora, não como protagonista: ele oferece ao runtime um vocabulário visual e de interação consistente. Assim, resumos, headers, thumbnails, players e controles podem evoluir sem que cada case invente sua própria interface.

flowchart TB subgraph CONTEUDO["Conteúdo"] direction TB cases["Cases em Markdown narrativa, metadados e idiomas"] assets["Mídia dos cases imagens, áudio e vídeo"] cases --> assets end subgraph INFRA["Infraestrutura"] direction TB parser["Parser Markdown renderização e validação"] normalized["Dados normalizados locale, ordem e opções de exibição"] parser --> normalized end subgraph INTERFACE["Interface"] direction TB runtime["Runtime rotas, locale, mídia e diagnósticos"] shell["App shell leitura, navegação e acessibilidade"] experience["Experiência de leitura resumo, índice, player e controles"] runtime --> shell --> experience end cli["CLI + templates scaffolding, comandos e defaults"] valence["Valence componentes, tokens e padrões de interação"] assets --> parser normalized --> runtime cli -. cria e configura .-> cases cli -. fornece a base .-> runtime valence -. habilita .-> shell valence -. padroniza .-> experience classDef content fill:#fff4df,stroke:#b7791f,color:#3d2b0b classDef infrastructure fill:#e8f1ff,stroke:#3b6ea8,color:#102a43 classDef interface fill:#e9f8ef,stroke:#2f855a,color:#143d27 classDef enabler fill:#f1e9ff,stroke:#805ad5,color:#2d1b4e class cases,assets content class parser,normalized,cli infrastructure class runtime,shell,experience interface class valence enabler

A localização também faz parte do modelo de conteúdo, em vez de ser uma segunda aplicação. Um único arquivo mantém seções paralelas enquanto o parser seleciona a versão correta em runtime:

<<-- lang: [codigo_do_idioma] -->>
## The outcome
The new flow reduced friction and made the decision easier to explain.

<<-- lang: [codigo_do_idioma] -->>
## O resultado
O novo fluxo reduziu atrito e tornou a decisão mais fácil de explicar.

Feito para ler, não apenas navegar

A experiência de leitura é onde as decisões técnicas ficam visíveis. Um case pode oferecer um resumo para quem tem trinta segundos, um índice para uma avaliação mais profunda e controles de navegação para passar de um projeto a outro. Rotas e metadados localizados mantêm o mesmo trabalho legível em diferentes idiomas, sem duplicar uma aplicação inteira.

A acessibilidade é tratada como requisito de produto: contraste e preferência de movimento, controles operáveis pelo teclado, largura confortável de leitura, headings semânticos e labels explícitos fazem parte do contrato do runtime. .

Print de um portfólio usando o Portfoliable.js com modo de acessibilidade.

Para quem está lendo tecnicamente, o ponto principal é que esses recursos são compostos, e não competem entre si:

const caseView = {
  content: parseMarkdown(caseFile),
  locale: resolveLocale(requestedLanguage),
  reader: {
    summary: true,
    tableOfContents: true,
    navigator: true
  }
};

Essa composição mantém a experiência consistente entre cases, sem impedir que cada projeto conte uma história diferente.

O que aprendi construindo

A decisão mais útil foi manter pequena a superfície de autoria e deixar o runtime cuidar da consistência. Markdown é acessível, Git torna as mudanças revisáveis e um bloco de configuração estruturado guarda o que não deveria ficar escondido na prosa.

O Portfoliable tem opiniões sobre estrutura, nomenclatura e defaults; ele não tenta ser um CMS universal. Em troca, um novo case nasce rápido, o conteúdo pode ser localizado sem uma segunda base de código e os mesmos padrões de leitura podem melhorar de forma centralizada.

O resultado

Um começo mais rápido: um comando cria o projeto e suas convenções.
Uma narrativa mais forte: os cases são estruturados para leitura rápida e aprofundamento.
Uma implementação sustentável: runtime, templates e documentação têm responsabilidades claras.
Um default mais inclusivo: idioma, acessibilidade e conforto de leitura entram desde a primeira renderização.

O Portfoliable é, ao mesmo tempo, uma ferramenta para publicar trabalho e um case sobre pensar em produto ao construir infraestrutura. Ele transforma o portfólio de uma página isolada em um pequeno produto versionado — sem exigir que a pessoa autora vire webmaster em tempo integral.

Conheça o site do Portfoliable ou o repositório open source.

Próximos passos

Avaliar a navegação agentica: explorar como agentes de IA podem navegar, compreender e recomendar cases sem comprometer a clareza da experiência de leitura humana.
Revisar os pesos do bundle e dos assets: auditar JavaScript, CSS, imagens, fontes e mídias para identificar o que pode ser reduzido, adiado ou carregado sob demanda.
Deixar o runtime mais leve: medir a performance em dispositivos e redes mais lentos e, em seguida, simplificar dependências e camadas de interação quando possível.
Melhorar validação e observabilidade: adicionar verificações mais claras para conteúdo localizado, acessibilidade, links quebrados e regressões de performance.

Projeto solo: Lio Schimanko atuou como UX Designer e Desenvolvedor. ↩︎
O Portfoliable evoluiu de uma versão pré-release até a versão 1.6.1, sua versão mais recente. ↩︎