Portfólio de Desenvolvedor no estilo visual do VSCode, baseado em um projeto do Desenvolvedor Nitin Ranganath
|| Conteúdo || Características || Stack || Instruções ||
|| Variáveis de Ambiente || Notas de versão || Autores || Contato || Licença ||
Um portfólio de artigos e projetos com o objetivo de exibir de uma maneira original e criativa os trabalhos mais recentes do desenvolvedor. Este projeto inclui melhorias funcionais e maior personalização, permitindo facilmente que qualquer desenvolvedor possa usá-lo com maior liberdade para exibir seus portfólios.
-
Personalização por um único arquivo: A utilização do arquivo de configuração para personalizar todo o projeto facilita e centraliza customizações que não envolvam estilizações estruturais nos componentes.
-
Maior responsividade: A responsividade de quase todos os componentes foi revisada, permitindo maior legibilidade e fluidez no design para dispositivos menores, bem como a integração parcial ao conceito "mobile first".
-
Tema adicional: Inclusão do Tema do VsCode Raimei Shadow 2064.
-
Remoção de inconsistências: Adoção de melhores práticas em estruturas de componentes e manipulação de variáveis.
-
Melhorias de Interface: Explorador de pastas mais semelhante ao VSCode, com diretórios expansíveis e arquivos com melhor comportamento visual, de acordo com as páginas configuradas.
- Linguagem Principal: Javascript
- Linguagem de Marcação: HTML
- Linguagem de Estilização: CSS
- Framework Principal: React
- Framework Backend: Node.js
- Plataforma de Publicação: Vercel
1 - Faça um git clone ou o download do repositório, da forma que preferir
git clone https://github.com/dexdevlab/portfolio-vscode.git
2 - Instale um gerenciador de pacotes (preferencialmente yarn) utilizando um terminal no diretório raiz do repositório clonado
yarn ou npm install
No diretório utils, configure o arquivo portfolioSettings.js conforme desejar. A seção abaixo apresenta descrições dos objetos contidos no arquivo.
| Propriedade | Descrição |
|---|---|
titleBarTag |
Texto exibido na barra de título da janela do VSCode. |
repoLocation |
Localização da sua cópia do repositório do Portfólio VSCode. |
useTitleTag |
Se definido para true, usará titleBarTag como título em todas as páginas acessadas no portfólio. Caso contrário, o nome da página do portfólio aparecerá no título da janela do VSCode. |
projectName |
Nome do projeto. É exibido como o nome da pasta raiz do Explorer. |
devName |
Nome a ser exibido como header na página de início do repositório (página home). |
devDescription |
Descrição do nome do desenvolvedor na página de início do repositório (página home). |
Esse objeto define personalizações a respeito da página github e seu conteúdo.
| Propriedade | Descrição |
|---|---|
enabled |
Se definido como false, remove da exibição a página github. |
limitRepos |
Organiza e limita a quantidade de repositórios a exibir na página github, baseado no número inteiro informado. |
showForkRepos |
Se definido como false, não serão exibidos repositórios que são forks de repositórios de outros usuários. |
calendarTheme |
Define o tema de cores a ser usado no calendário de atividade do Github. Aceita 5 níveis de cor (level0, level1, level2, level3 e level4) em hexadecimal. |
Esse objeto define personalizações a respeito da página projects e seu conteúdo.
| Propriedade | Descrição |
|---|---|
enabled |
Se definido como false, remove da exibição a página projects. |
projects |
Enumera os projetos, os quais serão exibidos como cards. Possui as seguintes propriedades: id - O ID do card; name - O nome do projeto; image - Imagem de miniatura como referência do projeto; tags - Tags para serem utilizadas como referências do projeto; source_code - Link para o repositório do código-fonte do projeto; demo - URL do endereço de teste em tempo real do projeto. |
Esse objeto define personalizações a respeito da página articles e seu conteúdo.
| Propriedade | Descrição |
|---|---|
enabled |
Se definido como false, remove da exibição a página articles. |
devToProfileUrl |
Link do perfil Dev.to para exibição. |
Esse objeto define personalizações a respeito da página contact e seu conteúdo.
| Propriedade | Descrição |
|---|---|
enabled |
Se definido como false, remove da exibição a página contact. |
showContactForm |
Se definido como false, remove da exibição o formulário de contato. |
socials |
Compreende a lista das formas de contato a serem exibidas. Possui as seguintes propriedades: social - nome da rede social ou forma de contato a ser exibido; link - descrição da rede social ou forma de contato; href - link href (onclick) a ser executado ao clicar na descrição da rede social ou forma de contato. |
Esse objeto define dados de metadata HTML para compor o site em produção. As informações são carregadas no Componente Head.jsx
| Propriedade | Descrição |
|---|---|
titleTag |
meta "title" |
description |
meta "description" |
keywords |
meta "keywords" |
Execute yarn dev ou npm run dev para executar o projeto. O site estará aberto em https://localhost:3000. Você pode alterar a porta padrão inserindo o argumento next dev -p XXXX, substituindo XXXX pelo número de porta desejado, em package.json, na propriedade "scripts".
Lembre-se de executar yarn build ou npm run build para buildar o projeto corretamente para ser utilizado em produção se necessário.
Você pode utilizar o Vercel e sua importação direta com o Github para publicar online seu projeto. Para mais informações, consulte a documentação do Vercel.
Para o funcionamento adequado do projeto, crie um arquivo chamado .env.local com as seguintes variáveis:
| Variável | Descrição |
|---|---|
NEXT_PUBLIC_API_URL |
Endereço de execução do servidor backend. Se em ambiente local, usará https://localhost:3000/api |
NEXT_PUBLIC_DEV_TO_API_KEY |
Chave API de conexão para a rede Dev.to, necessário para apresentar as informações da página "articles" |
NEXT_PUBLIC_GITHUB_API_KEY |
Chave API de conexão para a API de dados de repositório do Github, necessário para apresentar as informações da página "github" |
NEXT_PUBLIC_GITHUB_USERNAME |
Nome de usuário do perfil Github |
NEXT_PUBLIC_NOTION_API_TOKEN |
Chave API do Notion, necessário para utilizar formulários de contato da página "contact" |
NEXT_PUBLIC_NOTION_DATABASE_ID |
ID de Banco de Dados Notion, necessário para utilizar formulários de contato da página "contact" |
- Atualização de novos badges na página 'about'
- Alteração do layout de alguns badges
- Atualização da documentação
- Atualização do workflow
- Adicionado workflow
- Atualização da documentação
- Ajuste em alguns badges
- Ajuste de layout de projetos na página 'github'
- Adicionado badge de Webpack
- Melhorada responsividade da página Github
- Removido SVG da página Index
- Adicionada configuração que permite exibir ou não repositórios que são forks de outros
- Resolvido bug onde o Tema Github Dark não estava sendo aplicado
- Alterada a disposição e altura mínima dos cards de repositório
- Resolvido bug onde links desativados continuavam funcionando
- Conteúdo da página "about" agora inserido dentro do Componente de mesmo nome para melhor responsividade
- Criado componente de Badge para inserir badges do Github
- Validação das fontes para funcionamento no Vercel
- Criação de _document.js para inclusão de metadados HTML, incluindo as fontes
- Resolvido erro de layout da disposição de temas na página "settings"
- Adição da biblioteca sharp para otimização de imagens para o Next.js
- Criação do arquivo de configuração para personalização do projeto
- Criação de documentação para facilitar o uso do repositório
- Correção de bugs relacionados a componentização do React
- Modificação de componentização recursiva de certos elementos
- Implementação de boas práticas na elaboração de componentes
- Ajuste na responsividade e mudança de padrão de design para "mobile first"
Se você gostou desse projeto, nos dê uma estrela.
Para contato, envie um email a: [email protected]
Licenciado sob a MIT License.