Loading repository data…
xocoa23 / repository
Portfólio pessoal de Davi Reis - Estudante de ADS & Desenvolvedor. Next.js, TypeScript, Tailwind CSS, Framer Motion.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Um portfólio moderno, refatorado e otimizado desenvolvido com Next.js 14, TypeScript e Tailwind CSS, com sistema de tema dark/light e formulário de contato funcional.
prefers-reduced-motiongit clone https://github.com/davi/portfolio.git
cd portfolio
npm install
Dependências críticas:
npm install next-themes resend zod clsx tailwind-merge
Crie um arquivo .env.local na raiz do projeto:
# Resend API Key (obtenha em https://resend.com/api-keys)
RESEND_API_KEY=re_xxxxxxxxxxxxx
# Email onde receberá as mensagens do formulário
CONTACT_EMAIL=seu_email@exemplo.com
# URL do site (opcional)
NEXT_PUBLIC_SITE_URL=http://localhost:3000
Nota: Veja
.env.examplepara referência
Modo de desenvolvimento:
npm run dev
Build de produção:
npm run build
npm start
Abra http://localhost:3000 no seu navegador.
src/
├── app/ # Next.js App Router
│ ├── api/
│ │ └── contact/
│ │ └── route.ts # API route para formulário
│ ├── about/page.tsx # Página Sobre
│ ├── contact/page.tsx # Página Contato (refatorado)
│ ├── projects/page.tsx # Página Projetos
│ ├── globals.css # Estilos globais
│ ├── layout.tsx # Layout principal com ThemeProvider
│ └── page.tsx # Home (refatorado)
├── components/
│ ├── layout/ # Componentes de layout
│ │ ├── Header.tsx # Header com ThemeToggle
│ │ └── Footer.tsx # Footer
│ ├── ui/ # 🆕 Biblioteca de componentes UI
│ │ ├── Alert.tsx # Componente de alertas
│ │ ├── Badge.tsx # Badges/tags
│ │ ├── Button.tsx # Botão reutilizável
│ │ ├── Card.tsx # Cards
│ │ ├── Input.tsx # Input com validação
│ │ ├── Spinner.tsx # Loading spinner
│ │ ├── Textarea.tsx # Textarea com validação
│ │ ├── ThemeToggle.tsx # Toggle de tema
│ │ └── index.ts # Exports centralizados
│ ├── sections/ # 🆕 Componentes de seções
│ └── providers/ # 🆕 React providers
│ └── ThemeProvider.tsx # Provider de tema
├── hooks/ # 🆕 Custom React hooks
│ ├── useContactForm.ts # Hook do formulário
│ ├── useIntersectionObserver.ts
│ ├── useLocalStorage.ts
│ ├── useMediaQuery.ts
│ ├── useScrollPosition.ts
│ └── index.ts
├── data/ # 🆕 Dados centralizados
│ ├── contact.ts # Informações de contato
│ ├── experience.ts # Experiências profissionais
│ ├── projects.ts # Portfólio de projetos
│ ├── skills.ts # Habilidades técnicas
│ └── statistics.ts # Estatísticas
├── lib/ # 🆕 Bibliotecas e utilitários
│ ├── constants/
│ │ └── site.ts # Configurações do site
│ ├── utils/
│ │ └── index.ts # Funções utilitárias
│ └── validations/
│ └── contact.ts # Schema de validação
└── types/ # 🆕 TypeScript types
└── index.ts # Tipos centralizados
Edite o arquivo src/lib/constants/site.ts:
export const SITE_CONFIG = {
name: 'Seu Nome',
title: 'Seu Nome - Desenvolvedor Full Stack',
description: 'Sua descrição...',
author: {
name: 'Seu Nome',
email: 'seu@email.com',
phone: '+55 (11) 99999-9999',
github: 'https://github.com/seuusuario',
linkedin: 'https://linkedin.com/in/seuusuario',
whatsapp: 'https://wa.me/5511999999999',
}
}
Edite src/data/projects.ts:
export const projects: Project[] = [
{
id: 1,
title: 'Seu Projeto',
description: 'Descrição do projeto...',
category: 'fullstack',
technologies: ['React', 'Node.js', 'PostgreSQL'],
liveUrl: 'https://seuprojeto.com',
githubUrl: 'https://github.com/voce/projeto',
featured: true,
},
// ... mais projetos
]
src/data/skills.tssrc/data/experience.tssrc/data/statistics.tssrc/data/contact.tsEdite tailwind.config.js:
colors: {
primary: {
400: '#38bdf8', // Azul claro
500: '#0ea5e9', // Azul principal
600: '#0284c7', // Azul escuro
},
// ... outras cores
}
Execute estes testes para validar o projeto:
Execute o Lighthouse (Chrome DevTools):
# Build de produção primeiro
npm run build
npm start
# Depois:
# Chrome DevTools > Lighthouse > Gerar Relatório
Metas de Performance:
Problema: Tema não muda
next-themes: npm install next-themesProblema: Formulário não envia
.env.local com RESEND_API_KEYresend zod: npm install resend zodnpm run dev)Problema: Componentes não encontrados
npm install clsx tailwind-mergerm -rf .next && npm run devProblema: TypeScript errors
npm run lintConecte seu repositório
Configure variáveis de ambiente
RESEND_API_KEY=seu_api_key
CONTACT_EMAIL=seu_email@exemplo.com
Deploy automático
Crie conta em resend.com
Adicione domínio verificado
Obtenha API Key
Configure no Vercel/Netlify:
RESEND_API_KEY=re_xxxxxxxxxxxxx
Atualize o email "from" em src/app/api/contact/route.ts:
from: 'Portfolio <contato@seudominio.com>', // Seu domínio verificado
Netlify, Railway, Render:
npm run buildnpm startsrc/data/src/components/ui/Breakpoints do projeto:
npm run dev # Inicia servidor de desenvolvimento
npm run build # Build de produção
npm start # Inicia servidor de produção
npm run lint # Executa linter
Contribuições são bem-vindas! Para contribuir:
git checkout -b feature/MinhaFeature)git commit -m 'Adiciona MinhaFeature')git push origin feature/MinhaFeature)Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Melhorias futuras planejadas:
Desenvolvido com ❤️ usando Next.js 14, TypeScript e Tailwind CSS
Refatoração completa: Arquitetura modular, componentes reutilizáveis, performance otimizada e formulário funcional.
Selected from shared topics, language and repository description—not editorial ratings.
samuka7abr /
Portfólio pessoal desenvolvido com Typescript(React), Tailwind CSS e Framer Motion. Totalmente responsivo, com navegação suave e animações dinâmicas. Exibe projetos, experiências e habilidades de forma interativa.
50/100 healthsvitordev /
Meu portfólio pessoal desenvolvido com React, TypeScript e Vite! Este projeto tem como objetivo apresentar minhas habilidades, tecnologias que domino, projetos realizados e formas de contato.
8/100 healthAnaBeatrizBentoSilva /
Meu portfólio pessoal desenvolvido com React, TypeScript e Tailwind CSS. Aqui apresento minha trajetória, projetos, experiências e formas de contato.
28/100 healthrickferrdev /
Este repositório contém o código-fonte do meu portfólio pessoal, um projeto desenvolvido para demonstrar minhas habilidades em desenvolvimento front-end moderno, consumo de APIs e design de interface.
76/100 healthaureliodeboa /
Este repositório contém o código-fonte do meu site de portfólio pessoal, desenvolvido com Next.js, Tailwind CSS, React e TypeScript. O site é totalmente responsivo e conta com funcionalidades de troca de tema (dark mode e light mode) e internacionalização troca de idiomas.
63/100 healththaissyudamian /
Meu portfólio pessoal de projetos. React e TypeScript.
49/100 health