Hugo — Portfolio

Portfólio pessoal em React + TypeScript + Tailwind CSS v4 + GSAP + lucide-react, construído com Vite.

Correr o projeto

npm install
npm run dev

Build de produção:

npm run build
npm run preview

O que mudou em relação ao ficheiro original

O projeto que enviaste (gerado via Lovable) já usava exatamente as tecnologias pedidas — React, Tailwind CSS, GSAP e lucide-react — mas vinha embrulhado em TanStack Start (SSR, router de ficheiros, React Query) e trazia ~45 componentes UI do shadcn/Radix (accordion, carousel, sidebar, chart, etc.) que o portfólio nunca chega a usar. Não havia nada para "converter" — estava tudo lá — por isso troquei o meu esforço por limpar e afinar:

• Estrutura simplificada: Vite puro em vez de TanStack Start. Continua 100% React + Tailwind + GSAP + Lucide, só que sem SSR, sem router e sem React Query — coisas que um site de uma página não precisa. npm install e npm run dev chegam.
• Dependências: removidos todos os pacotes Radix/shadcn não usados (@radix-ui/*, cmdk, embla-carousel, recharts, sonner, vaul, zod, react-hook-form, etc.). Ficam só as que o portfólio de facto usa.

Animações e UI afinadas (sem mudança de identidade visual)

• Hero: entrada suave e orquestrada (fade + slide em cascata) ao carregar a página, em vez de tudo aparecer estático; paralaxe muito subtil na grelha de fundo ao mover o rato (desativado em touch); indicador "Available for work" com pulso animado; máquina de escrever com pequenas variações de velocidade (jitter) para parecer menos mecânica e cursor com fade suave em vez de blink abrupto.
• Navbar: agora com menu mobile funcional (o original só tinha um botão de Contact em mobile — não dava para chegar a Work/About/Skills sem fazer scroll manual) e scroll-spy: o link da secção atual fica destacado com um sublinhado animado.
• Projetos: a imagem revela-se com clip-path + leve zoom-out de brilho/saturação em vez de um simples fade, o que dá mais sensação de profundidade; timing entre texto/botões/imagem ligeiramente mais orgânico; pequeno zoom na imagem ao passar o rato; indicador lateral (01–04) ganhou uma barra de progresso equivalente em mobile (o original só existia em desktop); painel de "stack" abre com uma transição de altura suave em vez de aparecer/desaparecer bruscamente.
• About/Skills/Contact: ganharam um fade-in subtil ao entrarem na viewport (o original aparecia tudo instantaneamente), para dar continuidade ao ritmo de scroll criado na secção de projetos.
• Acessibilidade/detalhe: prefers-reduced-motion respeitado em todas as animações, :focus-visible visível em todo o site, aria-expanded nos botões toggle, scroll-margin-top nas secções para não ficarem escondidas atrás da navbar fixa.

Paleta e tokens mantidos exatamente como definiste:

Token	Cor
Background	#09090B
Surface	#111113
Border	#27272A
Text	#FAFAFA
Muted text	#A1A1AA
Accent	#3B82F6
Accent hover	#2563EB

Estrutura

src/
  components/
    Hero.tsx
    Nav.tsx
    Projects.tsx
    Sections.tsx      # About, Skills, Contact
  data/
    projects.ts        # edita aqui os teus projetos reais
  hooks/
    useTypewriter.ts
  lib/
    utils.ts
  assets/               # screenshots dos projetos (placeholders)
  styles.css
  App.tsx
  main.tsx

Por fazer (conteúdo, não código)

• Substituir os projetos placeholder em src/data/projects.ts pelos teus projetos reais e trocar as imagens em src/assets/.
• Trocar o email/links de GitHub/LinkedIn (procura por hugo@example.com, github.com, linkedin.com).
• Ajustar o texto de "About" em Sections.tsx para a tua história real.