{"id":171,"date":"2026-09-15T19:24:09","date_gmt":"2026-09-15T22:24:09","guid":{"rendered":"https:\/\/aqgoes.com\/blog\/?p=171"},"modified":"2026-09-17T19:27:22","modified_gmt":"2026-09-17T22:27:22","slug":"como-montei-a-estrutura-front-end-do-meu-portfolio","status":"publish","type":"post","link":"https:\/\/aqgoes.com\/blog\/como-montei-a-estrutura-front-end-do-meu-portfolio\/","title":{"rendered":"Como montei a estrutura Front-End do meu Portf\u00f3lio"},"content":{"rendered":"\n

Intradu\u00e7\u00e3o<\/h3>\n\n\n\n
\n

Tailwind CSS, HTML5, UI\/UX, Portf\u00f3lio, Front-end<\/h3>\n\n\n\n

Antes de partir para a l\u00f3gica em JavaScript ou criar um tema customizado do zero, o primeiro passo fundamental de qualquer projeto web \u00e9 definir uma estrutura Front-End s\u00f3lida, sem\u00e2ntica e organizada<\/strong>.<\/p>\n\n\n\n

Neste post, vou abrir o c\u00f3digo da p\u00e1gina principal do meu portf\u00f3lio (aqgoes.com<\/strong>). Vou mostrar como organizei os arquivos CSS\/Tailwind e como estruturei cada se\u00e7\u00e3o HTML: do cabe\u00e7alho responsivo com Dark Mode \u00e0 timeline de trajet\u00f3ria e cards de tecnologias.<\/p>\n<\/blockquote>\n\n\n\n

Organiza\u00e7\u00e3o de Pastas e Configura\u00e7\u00f5es<\/h2>\n\n\n\n

Para manter o projeto escal\u00e1vel e f\u00e1cil de dar manuten\u00e7\u00e3o, separei os arquivos de estilo e configura\u00e7\u00f5es em pastas dedicadas. Em vez de poluir a raiz do projeto, a estrutura de arquivos ficou organizada assim:<\/p>\n\n\n\n

    \n
  • assets\/css\/style.css<\/code>: Arquivo compilado e diretivas globais do Tailwind.<\/li>\n\n\n\n
  • assets\/css\/tailwind.config.js<\/code>: Defini\u00e7\u00e3o de cores customizadas (como bg-bg<\/code>,<\/li>\n\n\n\n
  • assets\/css\/tailwind.config.js<\/code>: Defini\u00e7\u00e3o de cores customizadas (como bg-bg<\/code>,<\/li>\n\n\n\n
  • text-primary<\/code>, bg-card<\/code>) e gradientes do projeto.<\/li>\n<\/ul>\n\n\n\n

    Na tag <body><\/code>, utilizei classes utilit\u00e1rias globais do Tailwind para garantir uma transi\u00e7\u00e3o suave entre temas e tipografia fluida:<\/p>\n\n\n\n

    <body class=\"bg-bg text-text-primary font-sans antialiased scroll-smooth transition-colors duration-300\"><\/code><\/pre>\n\n\n\n
    Anatomia das Se\u00e7\u00f5es da P\u00e1gina<\/h2>\n\n\n\n
    O layout foi dividido em blocos sem\u00e2nticos para facilitar a leitura dos motores de busca (SEO) e melhorar a experi\u00eancia do usu\u00e1rio (UX).<\/p>\n\n\n\n
    1. Header Sticky e Menu Responsivo<\/h3>\n\n\n\n
    O cabe\u00e7alho utiliza sticky top-0<\/code> com efeito backdrop-blur-md<\/code> para fixar no topo sem cobrir visualmente o conte\u00fado. Ele conta com alternadores de tema escuro\/claro e menu hamb\u00farguer para dispositivos m\u00f3veis.<\/p>\n\n\n\n
    <\/code><\/pre>\n\n\n\n
    <!-- Logo -->\n<a href=\"index.html\" class=\"text-2xl font-bold tracking-wider text-gradient z-20\">AqGoEs<\/a>\n\n<!-- A\u00e7\u00f5es Mobile (Theme Toggle + Hamb\u00farguer) -->\n<div class=\"flex items-center gap-2 z-20 md:hidden\">\n  <button class=\"theme-toggle p-2 rounded-lg border border-custom text-text-primary hover:bg-bg-card transition-colors\" aria-label=\"Alternar Tema\">\n    <span class=\"icon-moon text-lg\">\ud83c\udf19<\/span>\n    <span class=\"icon-sun text-lg hidden\">\u2600\ufe0f<\/span>\n  <\/button>\n\n  <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\">\n    <svg id=\"icon-open\" class=\"w-7 h-7 block\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"><\/path>\n    <\/svg>\n    <svg id=\"icon-close\" class=\"w-7 h-7 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"><\/path>\n    <\/svg>\n  <\/button>\n<\/div>\n\n<!-- Navega\u00e7\u00e3o -->\n<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\">\n  <a href=\"#sobre\" data-section=\"sobre\" class=\"nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium\">Sobre<\/a>\n  <a href=\"#trajetoria\" data-section=\"trajetoria\" class=\"nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium\">Trajet\u00f3ria<\/a>\n  <a href=\"#tecnologias\" data-section=\"tecnologias\" class=\"nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium\">Tecnologias<\/a>\n  <a href=\"https:\/\/aqgoes.com\/blog\" class=\"nav-link hover:text-gradient transition-colors block py-2 md:py-0 font-medium\">Artigos<\/a>\n<\/nav><\/code><\/pre>\n\n\n\n
    2. Se\u00e7\u00e3o Hero (Sobre)<\/h3>\n\n\n\n
    Apresenta o perfil profissional utilizando um Grid de 12 colunas (grid md:grid-cols-12<\/code>). Destaca a atua\u00e7\u00e3o como Desenvolvedor Full Stack e traz um avatar com moldura em gradiente (bg-grad-primary<\/code>).<\/p>\n\n\n\n
    3. Trajet\u00f3ria Profissional em Timeline<\/h3>\n\n\n\n
    Para exibir a experi\u00eancia pr\u00e1tica (como o trabalho de suporte e an\u00e1lise no Senado Federal), criei uma Timeline vertical<\/strong> usando bordas e posicionamento absoluto (border-l border-custom<\/code>).<\/p>\n\n\n\n
    4. Cards de Tecnologias e CTA<\/h2>\n\n\n\n
    Grid responsivo (grid md:grid-cols-4<\/code>) exibindo as principais stacks (HTML, CSS, JS, Python) com pequenos efeitos de escala ao passar o mouse (hover:scale-[1.02]<\/code>).<\/p>\n\n\n\n
    Resumo das Classes e Utilit\u00e1rios Customizados<\/h2>\n\n\n\n
    Confira abaixo como as principais classes foram mapeadas no projeto:<\/p>\n\n\n\n
    Se\u00e7\u00e3o \/ Elemento<\/strong><\/td>Classe Tailwind Aplicada<\/strong><\/td>Fun\u00e7\u00e3o na Interface<\/strong><\/td><\/tr>
    P\u00e1gina (Body)<\/strong><\/td>Cards de Stacks<\/code><\/td>Garante rolagem suave ao clicar nos links internos do menu (#sobre<\/code>, #trajetoria<\/code>).<\/td><\/tr>
    P\u00e1gina (Body)<\/strong><\/td>scroll-smooth<\/code><\/td>Mant\u00e9m a navega\u00e7\u00e3o vis\u00edvel no topo sem quebrar a ordem do DOM.<\/td><\/tr>
    Timeline<\/strong><\/td>border-l border-custom<\/code><\/td>Cria a linha vertical que conecta os pontos da trajet\u00f3ria profissional.<\/td><\/tr>
    Cards de Stacks<\/strong><\/td>hover:scale-[1.02]<\/code><\/td>Aplica uma micro-intera\u00e7\u00e3o t\u00e1til de eleva\u00e7\u00e3o ao passar o cursor sobre os cards.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Dica Pr\u00e1tica de Arquitetura Front-End<\/h2>\n\n\n\n
    \n
    \n
    \ud83d\udca1 Dica de Ouro:<\/strong> Quando for trabalhar com temas claros e escuros usando Tailwind CSS, evite fixar cores como bg-white<\/code> ou bg-black<\/code> diretamente nas tags HTML. Crie vari\u00e1veis sem\u00e2nticas no seu arquivo de configura\u00e7\u00e3o (como bg-bg<\/code>, bg-card<\/code> e text-primary<\/code>). Dessa forma, a troca de tema acontece alterando apenas uma classe no elemento pai, sem precisar duplicar c\u00f3digo.<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n
    Conclus\u00e3o<\/h2>\n\n\n\n
    Com essa estrutura HTML5 bem organizada e estilizada via Tailwind CSS, o portf\u00f3lio ganhou uma base visual limpa, acess\u00edvel e totalmente responsiva.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Intradu\u00e7\u00e3o Tailwind CSS, HTML5, UI\/UX, Portf\u00f3lio, Front-end Antes de partir para a l\u00f3gica em JavaScript ou criar um tema customizado do zero, o primeiro passo fundamental de qualquer projeto web \u00e9 definir uma estrutura Front-End s\u00f3lida, sem\u00e2ntica e organizada. Neste post, vou abrir o c\u00f3digo da p\u00e1gina principal do meu portf\u00f3lio (aqgoes.com). Vou mostrar como […]<\/p>\n","protected":false},"author":2,"featured_media":172,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73],"tags":[19,59,74,30,61],"class_list":["post-171","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-front-end","tag-html5","tag-portfolio","tag-tailwind-css","tag-ui-ux"],"_links":{"self":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":7,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions\/183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media\/172"}],"wp:attachment":[{"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aqgoes.com\/blog\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}