Portfólio de alta performance focado em UX/UI, acessibilidade e código limpo
Portfólio profissional desenvolvido com as melhores práticas de desenvolvimento front-end moderno. Aplicação otimizada para performance, SEO e acessibilidade, demonstrando domínio técnico em React e design de interfaces premium.
- 🎨 Design Premium: Interface moderna com glassmorphism, gradientes e micro-animações
- ⚡ Alta Performance: Lazy loading, code splitting e otimização de Core Web Vitals
- ♿ Acessibilidade: Conformidade WCAG AA, navegação por teclado e ARIA labels
- 📱 Responsivo: Mobile-first design com breakpoints otimizados
- 🌙 Dark Mode: Tema escuro profissional com paleta de cores semântica
- 🔍 SEO Otimizado: Meta tags, estrutura semântica e performance otimizada
- React 18.2 - Biblioteca UI com Hooks e componentização modular
- Vite 5.0 - Build tool ultrarrápido com HMR
- JavaScript ES6+ - Sintaxe moderna e clean code
- Tailwind CSS 3.4 - Utility-first CSS framework
- Ant Design 5.12 - Biblioteca de componentes enterprise
- Framer Motion 10.16 - Animações fluidas e performáticas
- React Icons 4.12 - Biblioteca de ícones otimizada
- React Router DOM 6.20 - Roteamento SPA
- ESLint - Linting e qualidade de código
- PostCSS & Autoprefixer - Compatibilidade cross-browser
Portfolio-main/
├── public/ # Arquivos estáticos
├── src/
│ ├── assets/ # Imagens e recursos
│ ├── components/ # Componentes React
│ │ ├── common/ # Componentes reutilizáveis
│ │ │ ├── Section.jsx
│ │ │ └── SkeletonLoading.jsx
│ │ ├── home/ # Seções da página inicial
│ │ │ ├── Hero.jsx
│ │ │ ├── About.jsx
│ │ │ ├── Skills.jsx
│ │ │ ├── Projects.jsx
│ │ │ ├── Experience.jsx
│ │ │ └── Contact.jsx
│ │ └── layout/ # Layout components
│ │ ├── Navbar.jsx
│ │ └── Footer.jsx
│ ├── data/ # Dados centralizados
│ │ └── portfolioData.js
│ ├── daos/ # Data Access Objects
│ ├── models/ # Modelos de dados
│ ├── pages/ # Páginas da aplicação
│ │ └── Home.jsx
│ ├── App.jsx # Componente raiz
│ ├── App.css # Estilos globais
│ ├── index.css # Estilos base e Tailwind
│ └── main.jsx # Entry point
├── .gitignore
├── eslint.config.js # Configuração ESLint
├── index.html # HTML template
├── package.json # Dependências
├── postcss.config.js # PostCSS config
├── tailwind.config.js # Tailwind config
├── vite.config.js # Vite config
└── README.md
- Node.js 16.x ou superior
- npm ou yarn
- Clone o repositório
git clone https://github.com/NicolasVitorP/Portfolio.git
cd Portfolio-main- Instale as dependências
npm install
# ou
yarn install- Inicie o servidor de desenvolvimento
npm run dev
# ou
yarn dev- Acesse no navegador
http://localhost:5173
| Comando | Descrição |
|---|---|
npm run dev |
Inicia servidor de desenvolvimento |
npm run build |
Cria build de produção otimizado |
npm run preview |
Preview do build de produção |
npm run lint |
Executa linting do código |
- ⚡ Lazy Loading: Componentes carregados sob demanda com React.lazy()
- 🔄 Code Splitting: Divisão automática de código pelo Vite
- 🖼️ Skeleton Loading: Estados de carregamento para melhor UX
- 📦 Bundle Otimizado: Build minificado e tree-shaking
- ♿ WCAG AA: Conformidade com diretrizes de acessibilidade
- ⌨️ Navegação por Teclado: Suporte completo para navegação
- 🏷️ ARIA Labels: Atributos semânticos para leitores de tela
- 🎨 Contraste: Paleta de cores com contraste adequado
- 📝 Meta Tags: Descrições e títulos otimizados
- 🏗️ HTML Semântico: Estrutura semântica adequada
- 🔍 Heading Hierarchy: Hierarquia de títulos correta
- ⚡ Core Web Vitals: Otimização para métricas do Google
// Paleta de Cores Semântica
{
primary: '#1976D2', // Ações principais
success: '#388E3C', // Feedback positivo
warning: '#F57C00', // Alertas
error: '#D32F2F', // Erros
background: '#121212', // Fundo dark mode
}Seção de apresentação com animações e gradientes dinâmicos.
Biografia profissional com foco em habilidades e diferenciais.
Exibição de habilidades técnicas com ícones
Showcase de projetos com cards interativos e links para repositórios.
Timeline de formação acadêmica e cursos.
Formulário de contato com validação e feedback visual.
- ✅ Componentização modular e reutilizável
- ✅ Separação de responsabilidades (SoC)
- ✅ DRY (Don't Repeat Yourself)
- ✅ Nomenclatura semântica e consistente
- ✅ Lazy loading de componentes
- ✅ Otimização de imagens
- ✅ Minimização de re-renders
- ✅ Code splitting automático
- ✅ Dados centralizados em
portfolioData.js - ✅ Configurações externalizadas
- ✅ Estrutura de pastas organizada
- ✅ Comentários e documentação
npm run buildO build otimizado será gerado na pasta dist/.
- Vercel - Deploy automático com GitHub
- Netlify - CI/CD integrado
- GitHub Pages - Hospedagem gratuita
- Cloudflare Pages - Performance global
# Instale a CLI do Vercel
npm i -g vercel
# Deploy
vercel| Métrica | Score |
|---|---|
| Performance | 95+ |
| Accessibility | 100 |
| Best Practices | 100 |
| SEO | 100 |
Medido com Lighthouse no modo produção
Personalize cores, fontes e animações em tailwind.config.js:
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#1976D2',
hover: '#1565C0',
light: '#42A5F5',
},
},
},
}Tema configurado em App.jsx:
<ConfigProvider
theme={{
algorithm: theme.darkAlgorithm,
token: {
colorPrimary: '#1976D2',
fontFamily: "'Inter', sans-serif",
},
}}
>Todos os dados são centralizados em portfolioData.js:
- ✏️ Informações pessoais
- 🛠️ Habilidades técnicas
- 💼 Experiência profissional
- 🚀 Projetos
- 🌍 Idiomas
Para atualizar o conteúdo, edite este arquivo.
Nicolas Vitor
- 💼 LinkedIn: @nicolasvitorfrontend
- 🐙 GitHub: @NicolasVitorP
- 📧 Email: [email protected]
- 📍 Localização: Brasília, DF - Brasil
Este projeto foi desenvolvido utilizando Antigravity by Google DeepMind, demonstrando proficiência no uso de ferramentas de IA modernas para desenvolvimento front-end de alta qualidade.
- 🚀 Produtividade Acelerada: Desenvolvimento ágil sem comprometer qualidade
- 🎯 Melhores Práticas: Código seguindo padrões da indústria desde o início
- 🔄 Aprendizado Contínuo: Estudo e compreensão profunda de cada implementação
- 🧑💻 Futuro da Engenharia: Alinhamento com as práticas modernas de desenvolvimento
💼 Nota Profissional: O uso de ferramentas de IA para desenvolvimento é uma habilidade valorizada na indústria tech moderna. Grandes empresas como Google, Microsoft e Meta incentivam seus engenheiros a utilizarem assistentes de IA para aumentar produtividade e qualidade de código.
- React - Biblioteca UI
- Vite - Build tool
- Tailwind CSS - Framework CSS
- Ant Design - Componentes UI
- Framer Motion - Animações
- Antigravity - AI-Powered Development
Desenvolvido com ❤️ e ☕ por Nicolas Vitor
⭐ Se este projeto foi útil, considere dar uma estrela!