Como montei a estrutura Front-End do meu Portfólio

Intradução

Tailwind CSS, HTML5, UI/UX, Portfólio, Front-end

Antes de partir para a lógica em JavaScript ou criar um tema customizado do zero, o primeiro passo fundamental de qualquer projeto web é definir uma estrutura Front-End sólida, semântica e organizada.

Neste post, vou abrir o código da página principal do meu portfólio (aqgoes.com). Vou mostrar como organizei os arquivos CSS/Tailwind e como estruturei cada seção HTML: do cabeçalho responsivo com Dark Mode à timeline de trajetória e cards de tecnologias.

Organização de Pastas e Configurações

Para manter o projeto escalável e fácil de dar manutenção, separei os arquivos de estilo e configurações em pastas dedicadas. Em vez de poluir a raiz do projeto, a estrutura de arquivos ficou organizada assim:

• assets/css/style.css: Arquivo compilado e diretivas globais do Tailwind.
• assets/css/tailwind.config.js: Definição de cores customizadas (como bg-bg,
• assets/css/tailwind.config.js: Definição de cores customizadas (como bg-bg,
• text-primary, bg-card) e gradientes do projeto.

Na tag <body>, utilizei classes utilitárias globais do Tailwind para garantir uma transição suave entre temas e tipografia fluida:

<body class="bg-bg text-text-primary font-sans antialiased scroll-smooth transition-colors duration-300">

Anatomia das Seções da Página

O layout foi dividido em blocos semânticos para facilitar a leitura dos motores de busca (SEO) e melhorar a experiência do usuário (UX).

1. Header Sticky e Menu Responsivo

O cabeçalho utiliza sticky top-0 com efeito backdrop-blur-md para fixar no topo sem cobrir visualmente o conteúdo. Ele conta com alternadores de tema escuro/claro e menu hambúrguer para dispositivos móveis.

<!-- Logo -->
<a href="index.html" class="text-2xl font-bold tracking-wider text-gradient z-20">AqGoEs</a>

<!-- Ações Mobile (Theme Toggle + Hambúrguer) -->
<div class="flex items-center gap-2 z-20 md:hidden">
  <button class="theme-toggle p-2 rounded-lg border border-custom text-text-primary hover:bg-bg-card transition-colors" aria-label="Alternar Tema">
    <span class="icon-moon text-lg">🌙</span>
    <span class="icon-sun text-lg hidden">☀️</span>
  </button>

  <button id="menu-btn" aria-label="Abrir Menu" aria-controls="menu" aria-expanded="false" class="text-text-primary hover:text-white focus:outline-none p-2">
    <svg id="icon-open" class="w-7 h-7 block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
    <svg id="icon-close" class="w-7 h-7 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- Navegação -->
<nav id="menu" class="flex flex-col absolute top-full left-0 w-full menu-backdrop backdrop-blur-lg border-b border-custom px-6 md:static md:flex-row md:items-center md:space-y-0 md:space-x-8 md:w-auto md:bg-transparent md:border-none md:p-0 z-10">
  <a href="#sobre" data-section="sobre" class="nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium">Sobre</a>
  <a href="#trajetoria" data-section="trajetoria" class="nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium">Trajetória</a>
  <a href="#tecnologias" data-section="tecnologias" class="nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium">Tecnologias</a>
  <a href="https://aqgoes.com/blog" class="nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium">Artigos</a>
</nav>

2. Seção Hero (Sobre)

Apresenta o perfil profissional utilizando um Grid de 12 colunas (grid md:grid-cols-12). Destaca a atuação como Desenvolvedor Full Stack e traz um avatar com moldura em gradiente (bg-grad-primary).

3. Trajetória Profissional em Timeline

Para exibir a experiência prática (como o trabalho de suporte e análise no Senado Federal), criei uma Timeline vertical usando bordas e posicionamento absoluto (border-l border-custom).

4. Cards de Tecnologias e CTA

Grid responsivo (grid md:grid-cols-4) exibindo as principais stacks (HTML, CSS, JS, Python) com pequenos efeitos de escala ao passar o mouse (hover:scale-[1.02]).

Resumo das Classes e Utilitários Customizados

Confira abaixo como as principais classes foram mapeadas no projeto:

Seção / Elemento	Classe Tailwind Aplicada	Função na Interface
Página (Body)	Cards de Stacks	Garante rolagem suave ao clicar nos links internos do menu (#sobre, #trajetoria).
Página (Body)	scroll-smooth	Mantém a navegação visível no topo sem quebrar a ordem do DOM.
Timeline	border-l border-custom	Cria a linha vertical que conecta os pontos da trajetória profissional.
Cards de Stacks	hover:scale-[1.02]	Aplica uma micro-interação tátil de elevação ao passar o cursor sobre os cards.

Dica Prática de Arquitetura Front-End

💡 Dica de Ouro: Quando for trabalhar com temas claros e escuros usando Tailwind CSS, evite fixar cores como bg-white ou bg-black diretamente nas tags HTML. Crie variáveis semânticas no seu arquivo de configuração (como bg-bg, bg-card e text-primary). Dessa forma, a troca de tema acontece alterando apenas uma classe no elemento pai, sem precisar duplicar código.

Conclusão

Com essa estrutura HTML5 bem organizada e estilizada via Tailwind CSS, o portfólio ganhou uma base visual limpa, acessível e totalmente responsiva.