Este é o repositório do meu portfólio pessoal, desenvolvido do zero para exibir a minha evolução contínua na Engenharia de Software. Mais do que uma montra de projetos, este portfólio é em si um projeto Full-Stack, com uma interface dinâmica no cliente e processos seguros a correr no servidor.
🖥️ O design foi inspirado num Terminal de Segurança (Command Center), proporcionando uma experiência imersiva e moderna. Entre as principais funcionalidades destacam-se:
- 📊 Monitor de Segurança (Dashboard): Integração com APIs do WakaTime e GitHub para exibição de linguagens mais utilizadas, horas de código e o streak de contribuições em tempo real.
- 💬 Sistema de Feedbacks: Base de dados NoSQL (Firebase Firestore) integrada para receber e exibir comentários de visitantes em tempo real.
- 🔒 Contacto Seguro (Serverless): Formulário de contacto blindado através de uma Serverless Function no Vercel (
/api/contact), que processa e envia os e-mails de forma oculta via EmailJS, protegendo totalmente as chaves de API. - 🌐 Suporte Multilíngue: Sistema nativo em JavaScript para alternar entre Português (PT-BR) e Inglês (EN) de forma fluida e sem recarregar a página.
- 🎬 Animações Avançadas: Utilização das bibliotecas GSAP (ScrollTrigger) e Anime.js para efeitos visuais, Matrix rain e transições suaves.
A versão online deste projeto está alojada na Vercel e pode ser acedida através do link abaixo:
- Frontend: HTML5, CSS3, JavaScript (Vanilla JS).
- Backend / API: Vercel Serverless Functions (Node.js).
- Base de Dados: Firebase (Firestore) para persistência dos feedbacks.
- Envio de E-mails: EmailJS (comunicando diretamente com o backend).
- Animações: GSAP (GreenSock) e Anime.js.
Para garantir a máxima segurança, este projeto não utiliza a biblioteca do EmailJS no frontend. O formulário envia um pedido POST para uma rota /api/contact criada através das Serverless Functions da Vercel.
- Crie uma conta no EmailJS.
- Adicione um Email Service (ex: Gmail).
- Crie um Template de e-mail e certifique-se de usar as mesmas variáveis definidas no backend (
{{from_name}},{{from_email}},{{subject}},{{message}}).
No painel do EmailJS, vá a Account -> Security:
- Ative a opção "Allow API requests from non-browser environments" (Isto é obrigatório, pois o pedido virá do servidor da Vercel).
- Copie a sua Private Key na aba "General".
Para que o ficheiro api/contact.js funcione, adicione as seguintes variáveis na secção Settings > Environment Variables do seu projeto na Vercel:
EMAILJS_SERVICE_ID: O ID do serviço de e-mail configurado.EMAILJS_TEMPLATE_ID: O ID do template criado.EMAILJS_PUBLIC_KEY: A sua chave pública.EMAILJS_PRIVATE_KEY: A sua chave privada (Necessária devido ao strict mode para pedidos de servidor).
O seu backend está configurado com regras de validação (Fail Fast) para impedir spam com campos vazios ou mensagens com mais de 2000 caracteres!
O sistema de "Feedbacks" utiliza o Firestore do Firebase para gravar e ler mensagens em tempo real.
- Vá à Consola do Firebase e crie um projeto.
- Adicione uma aplicação Web para obter as suas chaves de configuração.
- No menu lateral, aceda a Firestore Database e crie uma base de dados.
- Inicie uma coleção chamada
feedbacks.
Substitua as credenciais no ficheiro firebase.js na raiz da pasta Código:
const firebaseConfig = {
apiKey: "SUA_API_KEY",
authDomain: "SEU_DOMINIO.firebaseapp.com",
projectId: "SEU_PROJECT_ID",
storageBucket: "SEU_BUCKET.firebasestorage.app",
messagingSenderId: "SEU_SENDER_ID",
appId: "SEU_APP_ID"
};
(Nota: As chaves do Firebase para o frontend são públicas por natureza. A segurança é feita diretamente nas regras da base de dados).
Para evitar abusos ou apagamento de dados por terceiros, aplique as seguintes regras no separador Rules do seu Firestore Database:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /feedbacks/{document=**} {
// Qualquer um pode ler os feedbacks
allow read: if true;
// Qualquer um pode criar, mas as mensagens não podem ser vazias ou alteradas/apagadas depois
allow create: if request.resource.data.keys().hasAll(['name', 'message', 'date'])
&& request.resource.data.name is string
&& request.resource.data.message is string;
allow update, delete: if false;
}
}
}
Este projeto utiliza ferramentas open-source para gerar as imagens do seu "Monitor de Segurança":
- WakaTime: Registe-se no WakaTime, instale o plugin no seu VS Code/IDE, e certifique-se de marcar o seu código, linguagens e stats como públicos nas definições do WakaTime.
- Métricas do GitHub: As imagens são geradas dinamicamente usando projetos como o GitHub Readme Stats e o GitHub Profile Summary Cards. Basta alterar o parâmetro
?username=henriquegdcnos ficheiros HTML para o seu próprio utilizador.
Como o projeto utiliza Módulos ES6 (<script type="module" src="Portfolio.js"></script>), ele precisa de um servidor HTTP para correr localmente e contornar as políticas de CORS do navegador.
- Clone o repositório:
git clone https://github.com/henriquegdc/my-portfolio.git - Abra o projeto no VS Code.
- Utilize o Live Server:
Instale a extensão Live Server no VS Code. Clique com o botão direito no ficheiro
Código/index.htmle selecione "Open with Live Server".
Nota: O envio de e-mails do formulário de contacto só funcionará no ambiente de produção (após deploy na Vercel) ou se utilizar o Vercel CLI (vercel dev) localmente, pois necessita da Serverless Function (/api/contact.js) para processar o pedido.
- Vercel Serverless Functions: Documentação
- Firebase Firestore: Documentação
- EmailJS API: Documentação Oficial
- Anime.js: Documentação
- GSAP ScrollTrigger: Documentação
Este projeto é distribuído sob a Licença MIT.