Um site de portfólio pessoal moderno, divertido e criativo para um desenvolvedor junior, com design pop art, cores vibrantes e animações interativas!

• Home - Página inicial com apresentação pessoal, bio resumida e skills
• Projetos - Galeria de repositórios carregados dinamicamente do GitHub
• Contato - Formulário de contato funcional e informações de contato

• Estilo Pop Art - Cores neon vibrantes e abstratas

• Cores Vibrantes

  • Rosa Neon (#FF006E)
  • Cyan (#00D9FF)
  • Amarelo (#FFBE0B)
  • Roxo (#8338EC)
  • Azul Brilhante (#3A86FF)
  • Laranja (#FB5607)

• Elementos Visuais

  • Cantos arredondados em todos os componentes
  • Blobs animados e formas abstratas
  • Cartões flutuantes
  • Gradientes coloridos

• Animações ao passar o mouse (hover)
• Efeitos de flutuação
• Transformações de escala e rotação suave
• Animações de entrada ao rolar a página
• Partículas interativas (easter egg)
• Transitions fluidas e elegantes

• Design totalmente responsivo
• Mobile-first approach
• Menu hamburger para dispositivos pequenos
• Grid layout adaptável

• Carregamento de Projetos - Integração com GitHub API para exibir repositórios automaticamente
• Formulário de Contato - Validação de formulário e feedback visual
• Navegação Suave - Scroll smooth entre seções
• Menu Interativo - Navbar sticky com active states

´´´ portfolio/ ├── index.html # Página inicial ├── projects.html # Página de projetos ├── contact.html # Página de contato ├── css/ │ └── style.css # Estilos (CSS puro, sem preprocessador) ├── js/ │ └── script.js # Funcionalidades JavaScript └── README.md # Este arquivo ´´´

git clone https://github.com/shadowruge/portfolio.git cd portfolio

Basta abrir o arquivo index.html em um navegador moderno:

# Linux/Mac open index.html # Windows start index.html # Ou simplesmente arrastar o arquivo para o navegador

Para melhor experiência e funcionamento completo do formulário:

# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000 # Node.js (com http-server) npx http-server

Então acesse http://localhost:8000 no navegador.

O formulário está configurado para usar FormSubmit.co (serviço gratuito).

Para receber emails de contato:

1. Abra contact.html

2. Localize a linha com YOUR_EMAIL@example.com no arquivo js/script.js

3. Substitua pelo seu email real:

   const response = await fetch('https://formsubmit.co/ajax/SEU_EMAIL@example.com', {

4. Após o primeiro envio, confirme seu email no link que receberá

Alternativa: Use outro serviço como:

• Formspree
• Basin
• Netlify Forms
• Backend próprio

O site carrega automaticamente seus repositórios do GitHub usando a API pública:

https://api.github.com/users/shadowruge/repos

Para mudar o usuário:

1. Abra projects.html
2. Modifique o username na chamada da API em js/script.js

Edite as variáveis CSS em css/style.css:

:root { --primary-neon: #FF006E; /* Mude as cores aqui */ --secondary-neon: #00D9FF; --accent-yellow: #FFBE0B; /* ... etc */ }

Adicione novo HTML e use as classes utilitárias do CSS:

• .btn, .btn-primary, .btn-secondary para botões
• .section-title para títulos
• .container para container responsivo

Todos os textos estão no HTML das respectivas páginas. Basta editar os arquivos .html.

# Envie para um repositório public no GitHub git push origin main # Acesse: https://username.github.io/portfolio

• Arraste a pasta para netlify.com
• Ou conecte ao GitHub para deploy automático

• Similar ao Netlify
• Deploy automático com git push

• Suporta arquivos estáticos HTML/CSS/JS

• Lighthouse Score: Otimizado para performance
• Bundle Size: Mínimo (sem dependências externas)
• Compatibilidade: Chrome, Firefox, Safari, Edge (versões modernas)

• GitHub: https://github.com/shadowruge
• Repositórios: https://github.com/shadowruge?tab=repositories
• Perfil: https://github.com/shadowruge

• Use DevTools (F12) para inspecionar elementos
• Ajuste --spacing-* no CSS para mudar espaçamento
• Modifique --radius-* para mudar bordas arredondadas
• Use --transition para controlar velocidade de animações

• Dark mode toggle
• Multi-idioma (EN/PT)
• Blog/Articles section
• Visualizador de código 3D
• Integração com YouTube/Medium
• Analytics

Este projeto é open source e está disponível para uso pessoal e comercial.

Desenvolvido com ❤️ e muita criatividade por shadowruge (Izaias de Oliveira Elias)

link para testes