Voltar para os artigos

Rebuilding a Developer Portfolio from an Old Client Template

A quick write-up on turning an unrelated website into a more flexible developer portfolio with cleaner content structure, stronger visual direction, and better component boundaries.

This portfolio started as a completely different website with a different audience, tone, and structure. Instead of rebuilding everything from zero, I treated it like a refactor project: preserve the useful parts, remove the mismatched content, and give the interface a clearer point of view.

Step one: change the job of the site

The original version was made for another professional context, so the first task was not visual at all. It was editorial. Every headline, section, and blog post had to be rethought for a developer portfolio and blog.

That usually means answering a few practical questions first:

  • What should the homepage communicate in the first screen?
  • Which sections deserve to stay on the main route?
  • What content belongs in the blog instead of the landing page?
  • Which pieces of copy should become reusable data instead of hardcoded text?

Once those answers are clear, the UI becomes much easier to shape.

Step two: split the code where it helps

The project now has a cleaner separation between:

  • shared layout pieces such as the header, footer, metadata, and article cards
  • homepage sections with focused responsibilities
  • centralized portfolio data that can be updated without hunting through multiple components

That structure is not just nicer to read. It also makes redesigns much less painful because content, layout, and repeated UI patterns stop fighting each other.

Step three: give the design a stronger visual identity

I wanted the site to feel like space without becoming a generic sci-fi poster. So the direction became:

  • a deep void background for the base layer
  • nebula, cosmic, and aurora accents for glow and contrast
  • glassy surfaces with subtle borders instead of flat blocks
  • enough motion to feel alive, but not enough to distract from the content

The result is more atmospheric than the default clean portfolio look, while still keeping the text readable and the structure practical.

Step four: keep the blog part of the system

The blog is intentionally small right now, but it matters. A portfolio says what I can do. A blog shows how I think while doing it.

Even one post can help establish:

  • process
  • technical judgment
  • writing voice
  • care for details beyond the landing page

That is why I like keeping content collections and reusable article templates in place, even for a simple personal site.

What I like about projects like this

Refactors are interesting because they are not only about code quality. They are also about intent. A good rebuild gives the project a sharper purpose, a better internal structure, and a design language that finally feels like it belongs to the person behind it.

This portfolio is a small example of that idea: same project, very different identity.

Contato

Precisa desse nível de engenharia no seu time?

Ajudo empresas a desembaraçar bases de código complexas, arquitetar frontends escaláveis e criar a ponte entre design e infraestrutura robusta em nuvem.

Começar a conversa