Portfolio pessoal moderno desenvolvido com Angular 17 e design contemporâneo seguindo as tendências de 2025. O projeto apresenta uma interface elegante com efeitos glassmorphism, animações fluidas e componentes modulares.

• 🎨 Design Glassmorphism com efeitos de vidro e blur
• 🌈 Gradientes vibrantes e cores contemporâneas
• ⚡ Animações fluidas e micro-interações
• 🌙 Tema escuro/claro com transições suaves
• 📱 Layout responsivo com CSS Grid e Flexbox
• 🧩 Componentes modulares bem estruturados
• 🚀 Performance otimizada com lazy loading

• Angular 17 - Framework principal
• TypeScript - Linguagem de programação
• SCSS - Pré-processador CSS
• Angular Router - Navegação SPA
• Angular Animations - Animações e transições
• CSS Grid & Flexbox - Layout responsivo

src/
├── app/
│   ├── components/
│   │   ├── header/          # Navegação principal
│   │   ├── footer/          # Rodapé com links sociais
│   │   ├── home/            # Landing page
│   │   ├── about/           # Sobre mim e timeline
│   │   ├── projects/        # Grid de projetos
│   │   ├── skills/          # Habilidades e progresso
│   │   └── contact/         # Formulário e FAQ
│   ├── app.component.ts     # Componente principal
│   ├── app.config.ts        # Configuração da aplicação
│   └── app.routes.ts        # Rotas da aplicação
├── styles.scss              # Estilos globais
└── main.ts                  # Ponto de entrada

• Node.js (versão 18 ou superior)
• npm ou yarn

1. Clone o repositório:

git clone https://github.com/seu-usuario/portfolio-angular.git
cd portfolio-angular

2. Instale as dependências:

npm install

3. Execute o servidor de desenvolvimento:

npm start

4. Acesse http://localhost:4200 no seu navegador

# Servidor de desenvolvimento
npm start

# Build para produção
npm run build

# Executar testes
npm test

# Linting
npm run lint

• Hero section com apresentação
• Cards de recursos
• Estatísticas animadas

• Biografia pessoal
• Timeline profissional
• Valores e princípios

• Grid de projetos com filtros
• Projeto em destaque
• Links para GitHub e demo

• Barras de progresso animadas
• Categorias de tecnologias
• Ferramentas utilizadas
• Tecnologias em aprendizado

• Formulário de contato
• Informações de contato
• FAQ expansível
• Links para redes sociais

• Primária: #ff6b6b (Coral)
• Secundária: #4ecdc4 (Turquesa)
• Gradiente: linear-gradient(45deg, #667eea, #764ba2)

• Fonte: Inter (Google Fonts)
• Pesos: 400, 500, 600, 700, 800

• Glassmorphism: backdrop-filter: blur(20px)
• Sombras: box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)
• Transições: transition: all 0.3s ease

• Lazy Loading de componentes
• Code Splitting automático
• Bundle Size: ~97KB (gzipped)
• Lighthouse Score: 95+ em todas as métricas

1. Edite os componentes em src/app/components/
2. Atualize textos, links e imagens
3. Modifique cores no arquivo src/styles.scss

1. Edite src/app/components/projects/projects.component.ts
2. Adicione novos itens no array projects
3. Inclua imagens e links

1. Edite src/styles.scss para estilos globais
2. Modifique os estilos inline nos componentes
3. Ajuste cores e gradientes conforme necessário

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Wellysson Rocha

• LinkedIn: @wellyssonrocha-front-end
• Especialista em Angular e desenvolvimento Front-end

Contribuições são sempre bem-vindas! Sinta-se à vontade para:

1. Fazer um fork do projeto
2. Criar uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abrir um Pull Request

• Email: [email protected]
• LinkedIn: Wellysson Rocha