Portfólio — Pedro Graça

Portfólio pessoal de Pedro Henrique Graça de Assis Silva — Desenvolvedor Full-Stack. Construído do zero em HTML, CSS e JavaScript puro: zero dependências, zero build step.

---

🔗 Acesse

🌐 Site	pendente de deploy — será publicado na Vercel
🐙 GitHub	@pedrogrca
💼 LinkedIn	/in/pedrogrca
✉️ Email	pedrograaca@gmail.com

---

✨ Destaques

Interface & movimento

• Preloader com contador 000 → 100 e cortina de saída
• Cursor customizado (ponto rápido + anel com inércia)
• Tema claro/escuro com persistência e sem flash no carregamento
• Scroll reveal com stagger automático via IntersectionObserver
• Header inteligente: esconde ao descer, reaparece ao subir, com barra de progresso
• Botões magnéticos, cards com spotlight e tilt 3D nos projetos
• Contadores animados, timeline que preenche conforme o scroll e parallax discreto

Conteúdo

• Stack filtrável por categoria (front, back, banco, ferramentas, design, idiomas)
• Timeline de experiência profissional
• Projetos com screenshots clicáveis que levam ao deploy
• Terminal interativo de verdade — digite help, whoami, projects, skills, contact
• Conquistas em bento grid assimétrico, relógio local ao vivo e email copiável
• 🥚 Easter eggs discretos (tente o Konami Code, e olhe o console do navegador)

---

🧱 Decisões de arquitetura

Por que JavaScript puro em vez de React?

Um portfólio é a única página em que a performance faz parte do argumento de venda. Não há estado complexo, rotas nem dados dinâmicos aqui — então um framework só adicionaria peso.

Critério	Vanilla (escolhido)	React
Peso final	~45 KB	~180 KB+
Build step	nenhum	obrigatório
Deploy	qualquer host estático	precisa de build
Dependências para auditar	0	dezenas

Tudo que normalmente justificaria GSAP ou Framer Motion — scroll reveal, parallax, magnetismo, contadores, tilt 3D — foi resolvido com IntersectionObserver, requestAnimationFrame e CSS custom properties. Nenhuma requisição extra.

Organização

• CSS em 5 camadas, carregadas em paralelo via <link> (não @import, que serializaria os downloads): tokens → base → layout → components → sections
• Design tokens centralizados: cores, tipografia, espaçamento, raios e curvas de animação vivem só em tokens.css. Não existe valor "mágico" espalhado pelo código.
• JS modular: 11 módulos ES independentes, cada um exportando init(). O orquestrador (main.js) inicializa cada um dentro de try/catch — se um módulo falhar, o resto do site continua funcionando.
• Ícones autorais: sprite SVG inline desenhado à mão, sem bibliotecas de ícones.

---

📁 Estrutura de pastas

personal-portfolio/
├── index.html              markup semântico + SEO + JSON-LD + sprite de ícones
├── robots.txt              diretrizes de indexação
├── sitemap.xml             mapa do site
├── site.webmanifest        metadados PWA
└── assets/
    ├── css/
    │   ├── tokens.css      design tokens + definição dos temas
    │   ├── base.css        reset, tipografia, acessibilidade, textura
    │   ├── layout.css      container, fundo, header, nav, footer
    │   ├── components.css  botões, cards, chips, cursor, preloader, reveal
    │   └── sections.css    hero, sobre, stack, timeline, projetos, contato…
    ├── js/
    │   ├── main.js         orquestrador tolerante a falhas
    │   └── modules/
    │       ├── preloader.js    contador de carregamento + cortina
    │       ├── cursor.js       cursor customizado com inércia
    │       ├── nav.js          header, scroll spy, progresso, menu mobile
    │       ├── theme.js        alternância claro/escuro persistida
    │       ├── reveal.js       scroll reveal + preenchimento da timeline
    │       ├── magnetic.js     atração magnética + spotlight dos cards
    │       ├── counter.js      animação de números
    │       ├── tilt.js         inclinação 3D dos projetos
    │       ├── parallax.js     deslocamento sutil no scroll
    │       ├── terminal.js     console fake interativo
    │       └── easter.js       easter eggs
    ├── img/                screenshots dos projetos (WebP) + og-image
    └── docs/               currículo em PDF

---

🚀 Rodando localmente

O projeto é estático — não precisa de npm install. Só de um servidor local (por causa dos ES Modules, abrir o arquivo direto via file:// não funciona).

git clone https://github.com/pedrogrca/personal-portfolio.git

cd personal-portfolio

Suba um servidor com qualquer uma das opções abaixo:

python -m http.server 5500

npx serve -l 5500

Depois abra http://localhost:5500 no navegador.

---

♿ Acessibilidade & Performance

• prefers-reduced-motion totalmente respeitado — o preloader vira instantâneo, o cursor customizado desliga e os elementos aparecem já posicionados
• HTML semântico, hierarquia de headings correta, aria-label nos controles e link "pular para o conteúdo"
• Foco visível em todos os elementos interativos (nunca removido)
• Animações restritas a transform e opacity, para não disparar reflow
• Imagens com width/height declarados (evita layout shift) e loading="lazy"
• Screenshots em WebP — ~75% mais leves que os PNGs originais
• Cursor customizado e efeitos de hover desativados em telas touch

---

🔍 SEO

• Meta tags descritivas, canonical e theme-color por esquema de cor
• Open Graph + Twitter Card com imagem 1200×630 dedicada
• Schema.org (Person) em JSON-LD, incluindo formação, idiomas e stack
• robots.txt, sitemap.xml e web manifest

---

📋 Próximos passos

• Deploy na Vercel
• Trocar o domínio placeholder pelas URLs reais (canonical, Open Graph, JSON-LD, sitemap)
• Adicionar foto no hero (hoje exibe um placeholder)
• Estatísticas do GitHub ao vivo
• Auditoria Lighthouse

---

📬 Contato

Aberto a oportunidades de estágio e a novos clientes de desenvolvimento.

---

_{Projeto pessoal de Pedro Henrique Graça de Assis Silva · Natal, RN — Brasil}