Cartão de perfil digital interativo com flip 3D, múltiplos temas e glassmorfismo
Cartão de apresentação profissional construído com React 19, TypeScript e Tailwind CSS. O card exibe informações de perfil na frente e habilidades técnicas no verso, com animação de flip 3D e suporte a três temas de cores.
Frente (perfil)
| Drácula | Claro | Escuro |
|---|---|---|
 |
 |
 |
Verso (skills)
| Drácula | Claro | Escuro |
|---|---|---|
 |
 |
 |
- Flip 3D — animação suave ao virar o cartão para revelar a grade de habilidades
- Glassmorfismo — efeito vidro com backdrop-filter e transparência
- 3 Temas — Claro, Escuro e Drácula alternados por um botão flutuante
- Ícones de Skills — 22+ tecnologias representadas visualmente com
react-icons - Responsivo — layout adaptável do mobile ao desktop
- Acessibilidade — navegação por teclado e elementos semânticos
- Deploy automatizado — publique no GitHub Pages com um único comando
| Tecnologia | Versão | Finalidade |
|---|---|---|
| React | 19 | Componentes e gerenciamento de estado |
| TypeScript | 5.9 | Tipagem estática |
| Tailwind CSS | 3.4 | Estilização utilitária |
| Vite | 7 | Dev server com HMR e build |
| React Icons | 5.5 | Ícones de tecnologias e redes sociais |
| gh-pages | 6.3 | Deploy no GitHub Pages |
Pré-requisitos: Node.js 18+.
git clone https://github.com/RFernandes10/card-apresentacao-react.git
cd card-apresentacao-react
npm installEste projeto não requer variáveis de ambiente. Todos os dados do perfil são definidos em src/App.tsx:
<ProfileCard
name="Seu Nome"
title="Seu Cargo"
bio="Sua descrição pessoal."
profileImage="./sua-foto.jpeg"
githubUrl="https://github.com/seu-usuario"
linkedinUrl="https://linkedin.com/in/seu-perfil"
skills={["React", "TypeScript", "Node.js"]}
/>Coloque sua foto na pasta public/ e atualize o caminho em profileImage. Para modificar as cores dos temas, ajuste as variáveis CSS em src/index.css.
| Comando | Descrição |
|---|---|
npm run dev |
Inicia servidor de desenvolvimento com HMR em http://localhost:5173 |
npm run build |
Executa type-check e gera build de produção em dist/ |
npm run preview |
Pré-visualiza a build de produção localmente |
npm run lint |
Executa ESLint em todo o código |
npm run deploy |
Build + deploy no GitHub Pages |
card-apresentacao-react/
├── .github/
│ └── assets/ # Assets de documentação (GIF, screenshots)
├── public/
│ ├── perfil.jpeg # Foto de perfil
│ └── programmer.png # Imagem auxiliar
├── src/
│ ├── components/
│ │ ├── ProfileCard.tsx # Card com flip 3D e grade de skills
│ │ └── ThemeSwitcher.tsx# Botão de alternância de tema
│ ├── contexts/
│ │ └── ThemeContext.tsx # Context API + hook useTheme
│ ├── App.tsx # Componente raiz; aplica data-theme no <html>
│ ├── main.tsx # Ponto de entrada da aplicação
│ └── index.css # Variáveis CSS, temas e utilitários 3D
├── index.html # HTML raiz (padrão Vite)
├── tailwind.config.js # Configuração do Tailwind com cores customizadas
├── vite.config.ts # Configuração do Vite (base path para GitHub Pages)
├── tsconfig.json # TypeScript project references
├── eslint.config.js # ESLint flat config
└── package.json
| Prop | Tipo | Descrição |
|---|---|---|
name |
string |
Nome exibido na frente do cartão |
title |
string |
Cargo ou título profissional |
bio |
string |
Breve descrição pessoal |
profileImage |
string |
Caminho para a foto de perfil |
githubUrl |
string |
URL do perfil no GitHub |
linkedinUrl |
string |
URL do perfil no LinkedIn |
skills |
string[] |
Lista de habilidades exibidas no verso |
- Frente: foto, nome, título, bio e links sociais
- Verso: grade 4 colunas com ícone + nome de cada skill, com animação escalonada ao virar
Botão posicionado no canto superior direito. Cicla os temas na ordem: dracula → light → dark → dracula.
Gerencia o estado global do tema via Context API. O tema é sincronizado com o atributo data-theme no <html>, que dispara as variáveis CSS correspondentes.
As cores de cada tema são definidas via variáveis CSS em src/index.css:
| Tema | Background | Card | Texto |
|---|---|---|---|
| Light | Cinza claro | Branco | Escuro |
| Dark | Cinza escuro | Vidro escuro | Claro |
| Dracula | Roxo escuro | Vidro roxo | Claro com detalhes verdes |
Para adicionar um novo tema, crie um seletor [data-theme="seu-tema"] com as variáveis --color-* correspondentes.
O projeto está configurado para GitHub Pages. O base no vite.config.ts já aponta para o nome do repositório.
npm run deployIsso executa npm run build e publica o conteúdo de dist/ na branch gh-pages.
Atenção: certifique-se de que o GitHub Pages está habilitado no repositório apontando para a branch
gh-pages.
A aplicação está disponível em: https://rfernandes10.github.io/card-apresentacao-react/
- Fork o repositório
- Crie uma branch:
git checkout -b feat/minha-feature - Commit suas alterações:
git commit -m 'feat: adiciona minha funcionalidade' - Push para a branch:
git push origin feat/minha-feature - Abra um Pull Request
Mantenha o código limpo, tipado e siga os padrões existentes.
Distribuído sob a licença MIT. Consulte o arquivo LICENSE para mais detalhes.
Feito com ❤️ e ☕ por Roberto Fernandes