� Blog - Luan Rodrigues

Blog pessoal e portfólio, construído com Hugo.

Live: hardened.com.br

✨ Features

• 📒 Blog - Artigos técnicos sobre frontend, Go e engenharia
• 🧪 Lab - Repositórios e projets open source integrados via GitHub API
• 👤 About - Página de apresentação com stack e skills
• 🎨 Design minimalista - Tema claro/escuro com transições suaves
• 📱 Responsivo - Mobile-first
• ♿ Acessível - Skip link, aria-labels, reduced motion
• 🔍 SEO otimizado - Open Graph, Twitter Cards, JSON-LD
• ⚡ Performance - Syntax highlighting, reading progress
• 🔒 Seguro - Content Security Policy
• 📦 PWA Ready - Manifest + Favicons
• 🧩 Componentizado - Header/Footer como partials reutilizáveis

📁 Estrutura

blog/
├── hugo.toml              # Configuração do site
├── content/
│   ├── blog/              # Posts do blog
│   │   ├── _index.md
│   │   └── *.md          # Artigos
│   ├── about/            # Página sobre
│   │   └── _index.md
│   ├── lab/              # Projetos
│   │   └── _index.md
│   └── linktree/         # Landing page
│       └── _index.md
├── layouts/
│   ├── partials/
│   │   ├── header.html   # Header reutilizável
│   │   ├── footer.html   # Footer reutilizável
│   │   └── scripts.html  # Scripts comuns
│   ├── blog/
│   │   ├── list.html     # Lista de posts
│   │   └── single.html   # Post individual
│   ├── about/
│   │   └── list.html
│   ├── lab/
│   │   └── list.html
│   ├── linktree/
│   │   └── list.html
│   ├── index.html        # Homepage
│   └── 404.html
└── static/
    ├── css/main.css      # Estilos com design tokens
    ├── images/
    │   ├── profile.jpeg
    │   └── profile.webp
    └── site.webmanifest

🚀 Desenvolvimento

# Instalar Hugo
# https://gohugo.io/installation/

# Rodar localmente
hugo server -D

# Build para produção
hugo --minify

Criar novo post

# Criar post manualmente
touch content/blog/nome-do-post.md

Template do front matter:

---
title: "Título do Post"
date: 2026-02-16
description: "Descrição para SEO"
tags: ["tag1", "tag2"]
category: "Categoria"
draft: false
hideToc: false
disableComments: false
---

Conteúdo aqui...

⚙️ Configuração

Redes sociais

Edite hugo.toml:

[params.social]
  github = "meluansantos"
  linkedin = "meluansantos"
  mastodon = "https://mastodon.social/@usuario"

Repositórios no Lab

Configure repos específicos ou deixe vazio para mostrar todos:

[[params.lab.repos]]
  name = "nome-do-repo"
  demo = "https://demo-url.com"  # opcional

Partials reutilizáveis

O projeto usa partials do Hugo para evitar duplicação:

• layouts/partials/header.html - Header com logo e navegação
• layouts/partials/footer.html - Footer com copyright
• layouts/partials/scripts.html - Theme toggle e page transitions

Para usar em um layout:

{{ partial "header.html" . }}
<!-- conteúdo -->
{{ partial "scripts.html" . }}

🎨 Design

Logo

O logo é exibido no header com estilo dinâmico:

• Homepage: <span> não clicável
• Outras páginas: <a> que volta para home

luan | frontend developer
       └─ menor e estilizado

Tema Claro/Escuro

Troca automática via JavaScript com persistência em localStorage:

// Cores definidas em CSS com data-theme
[data-theme="light"] { /* ... */ }
[data-theme="dark"]  { /* ... */ }

Design Tokens

Variáveis CSS em static/css/main.css:

:root {
    --color-bg-primary: #050505;
    --color-accent: #00ff41;
    --color-text-primary: #f3f4f6;
    --font-family-mono: 'JetBrains Mono', monospace;
    /* ... */
}

Tecnologias

• Hugo - Static site generator
• HTML/CSS - Semântico e acessível
• JavaScript (Vanilla) - Theme toggle, page transitions, GitHub API
• Git - Workflow com feature branches
• GitHub Pages - Hospedagem

Licença

MIT