O DevTree é uma vitrine pessoal one-page, no estilo Linktree, criada para apresentar minha foto, bio e links de redes sociais (GitHub e LinkedIn) em um só lugar.
O projeto conta com dark e light mode com persistência da preferência do usuário via localStorage, identidade visual própria (paleta de cores e tipografia customizadas) e é totalmente responsivo para desktop e mobile.
Dark Mode
Light Mode
O projeto tem como foco:
- Aprender e praticar Tailwind CSS
- Entender decisões de design, como paleta de cores, tipografia e hierarquia visual
- Manter uma identidade visual consistente com minha presença em outras redes
- Exibição de foto de perfil, nome e bio
- Links para GitHub e LinkedIn
- Dark mode
- Persistência para o tema
- React 19
- TypeScript 5.9
- Vite
- Tailwind CSS v4
- ESLint
- React-icons
- Git & GitHub
- Vercel (deploy)
Clone o repositório:
git clone https://github.com/[seu-nome]/devtreeInstale as dependências dentro do projeto:
npm install
Inicie o servidor de desenvolvimento:
npm run dev
- Aplicar classes utility-first
- Entender como o Tailwind lida com responsividade, valores customizáveis e dark mode
- Utilização de bibliotecas de icones
- Criação de interfaces para tipagem de props e icones
O projeto cumpriu seu objetivo de consolidar Tailwind CSS e fundamentos de design.
- Adicionar link do Instagram e portfólio completo
- Seção de projetos em destaque
- Animações e micro-interações
- Internacionalização (PT-BR / EN)
Feito com 💙 por Caio Lucas