Loading repository data…
Loading repository data…
John-o-dev / repository
Portfólio pessoal criado usando o framework nextJS no qual apresento meus projetos, experiências, contatos e mídia sociais de maneira moderna, responsiva e multilíngue.
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.
Bem-vindo ao repositório do meu portfólio pessoal! Este projeto foi criado para apresentar meus projetos, experiências e formas de contato de maneira moderna, responsiva e multilíngue.
🌍 Site Multilíngue
Suporte para múltiplos idiomas, permitindo alcance global e navegação acessível.
💼 Integração com a API do GitHub
Exibe dinamicamente meus repositórios públicos diretamente da minha conta GitHub.
📬 Formulário de Contato via EmailJS
Permite que visitantes enviem mensagens diretamente do site, sem necessidade de backend.
📱 Responsividade Completa
Totalmente adaptado para diferentes tamanhos de tela: mobile, tablet e desktop.
⚙️ Desempenho e Acessibilidade
Estrutura otimizada para SEO, carregamento rápido e boas práticas de acessibilidade.
# Clone o repositório
git clone https://github.com/seu-usuario/seu-repo.git
cd seu-repo
# Instale as dependências
npm install
# Se quiser ver em prática a funcionalidade do emailJS será necessário criar um arquivo .env.local com suas chaves de API
cp .env.example .env.local
# Inicie o servidor de desenvolvimento
npm run dev
Abra http://localhost:3000 no navegador para ver o resultado.
🔐 Variáveis de Ambiente Crie um arquivo .env.local com as seguintes variáveis:
env
Copiar
Editar
NEXT_PUBLIC_EMAILJS_USER_ID=xxxxx
NEXT_PUBLIC_EMAILJS_SERVICE_ID=xxxxx
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=xxxxx
NEXT_PUBLIC_GITHUB_USERNAME=johnodev
⚠️ Será necessário criar um conta no site do EmailJS ⚠️ Nunca compartilhe essas chaves publicamente.
Este projeto está licenciado sob a MIT License.
Assim esta a estrutura de diretórios e arquivos do projeto:
content: aqui ficarão as pastas e os arquivos para a tradução do conteúdo do site (arquivos .md)
public: esta pasta é usada por padrão pelo Next.js para os arquivos públicos: imagens, ícones, etc. Dentro de src:
components: componentes do React.
contexts: "Contexto" para os idiomas. No React existem os chamados contextos, que são informações de estado que ficam disponíveis para toda a aplicação. Sem eles toda a informação tem de ser passada via propriedade para cada componente que a usa, o que pode atrapalhar o desenvolvimento caso existam muitos níveis. O ideal é que o idioma esteja disponível para todo o projeto, globalmente.
hooks: hook para tradução das páginas. Adicionamos o contexto de idiomas criado
lib: neste diretório ficará o script para a ler os arquivos *.md e que disponibiliza as informações para uso nas páginas.
pages: o Next.js utiliza esta pasta como as rotas para a aplicação. O arquivo teste.tsx fica disponível como http://localhost:3000/teste
styles: estilos globais para as página.
Dicionário: Termos para a tradução. Encare este arquivo como se fosse uma espécie de dicionário: basta fazer uma referência ao verbete para ter o significado. A mecânica é essa. /contexts/LanguageContext.tsx
No React existem os chamados contextos, que são informações de estado que ficam disponíveis para toda a aplicação. Sem eles toda a informação tem de ser passada via propriedade para cada componente que a usa, o que pode atrapalhar o desenvolvimento caso existam muitos níveis. O ideal é que o idioma esteja disponível para todo o projeto, globalmente.