Tutorial de uso do Template de Portfólio Digital
Olá pessoal, esse artigo foi desenvolvido para ensinar como utilizar o template do Portfólio Artístico criado por mim e disponível em: https://github.com/CinthiaKatiane/CinthiaKatiane.github.io
O objetivo desse projeto é ajudar jovens artistas que precisam de uma maneira simples e prática de criar seu portfólio e currículo artístico, mas também serve para diversas finalidades já que ele é de fácil customização. Esse projeto foi desenvolvido com Vue.js no front-end e a API do Flickr para armazenar as imagens, então antes de começar você precisa atender alguns requisitos:
Requisitos
- Criar uma conta no Flickr e no GitHub
- Fazer o upload no Flickr das fotos que você deseja que apareçam no seu portfólio;
- Solicitar uma API KEY seguindo as instruções do https://www.flickr.com/services/api/
No seu computador tenha instalado:
- O NodeJs e o Npm;
- O Git (Ou github desktop se você não tiver tanta familiaridade com git);
- Um editor de código (Recomendo o VSCode).
Os links abaixo poderão te ajudar
Agora sim vamos começar
O projeto do portfólio é um template, isso significa que você pode criar um novo repositório no sei github usando ele como base, e é exatamente isso que vamos fazer.
Criando o Repositório no GitHub
Logado na sua conta do github abra a o link do projeto: https://github.com/CinthiaKatiane/CinthiaKatiane.github.io e clique no botão verde “Use this template”
Em seguida preencha os campo “Repository name” com <Seu usuario do GH>.github.io e marque a opção “Include all branches”. Siga clicando em “Create repository from template”
Depois que o repositório foi criado, você pode abrir a página <Seu usuário do GH>.github.io no navegador e vai ver o meu portfólio lá. Ótimo, já funciona agora precisamos customizá-lo.
Nessa etapa precisaremos baixar o projeto para fazer as customizações, para isso você pode usar o git pelo terminal ou o https://desktop.github.com/, eu vou seguir mostrando os prints da versão desktop porque acredito que é mais amigável para pessoas que nunca usaram o Git ou o terminal, mas vou associar cada etapa com os respectivos comandos do terminal.
Baixando o projeto
No terminal:
git clone https://github.com/<Seu usuário do GH>/<Seu Usuário do GH>.github.io.git
No GitHub Desktop:
- Clique em “Clone a repository from the Internet”;
- Insira a URL do seu repositório;
- Clique em “Clone”
Na barra superior você consegue ver que está na branch master e nela é onde estão os arquivos que vão pra produção, ou seja os arquivos que são usados quando o site vai pro ar. Então não vamos editar esses arquivos diretamente, primeiro vamos mudar para a branch develop.
No terminal:
git checkout develop
No Dekstop:
<Foto da mudança de branch>
Chegou a hora da customização de verdade
Para deixar o portfólio com a sua cara exitem três arquivos que precisam ser alterados: .env, data.json, profile.jpg. Abra o seu editor de código e com ele abra a pasta do projeto. Na pasta você verá os arquivos .env_sample e data_sample.json, eles são uma base para as informações que devem estar contidas no .env e data.json. Renomeie removendo o ‘_sample’ e coloque as suas respectivas informações nos campos solicitados.
Os primeiro campos são informações gerais como seu nome e redes sociais , que são usados em vários locais do do site, se você não possuir alguma das redes sociais listadas você pode remove-la dessa lista, se quiser adicional uma rede social nova siga o mesmo padrão das que estão no arquivo, inserindo o ícone e a url da rede em questão. O icone você pode encontrar em https://cdn.materialdesignicons.com/5.4.55/
Em seguida vem as informações presentes no seu currículo artístico: o “Sobre mim” tem um campo onde você pode falar um pouco sobre quem você é, sua carreira, suas pretensões na arte, etc. Os demais campos são organizados em tópicos, você pode acrescentar e remover os tópicos usando a mesma estrutura. Se você preferir discorrer sobre esses pontos em forma de texto ao invés de tópicos, você pode remover os tópicos deixando apenas o primeiro e ele vai funcionar assim.
Para finalizar o currículo só falta a sua foto. Vá até a pasta do projeto > src > assets e troque a imagem profile.jpg por uma foto sua com o mesmo nome.
No fim do arquivo você vai encontrar as tags, esses são campos importante pois estão conectados com as tags que você atribuiu nas suas imagens do Flickr. Cada “título” vai aparecer como uma aba no portfólio e as tags vão ser o filtro das imagens mostradas em cada aba
Agora que está tudo no seu lugar, vamos executar o código e ver se está tudo certo.
Use o terminal do seu editor de código e digite os seguintes comandos:
- Comando de Instalar as dependências
npm i
2. Comando para executar o projeto
npm run serve
Se estiver tudo certo até agora você será capaz de ver o portfólio com as suas informações em http://localhost:8080/
Agora vamos salvar essas mudanças no seu GitHub
No termina:
git add .
git commit -m “Primeiras alterações no meu portfólio ❤”
git push
No Github Desktop:
Os arquivos editados aparecem na coluna esquerda, verifique se os arquivos estão selecionados, um titulo para a submissão (pode ser: “Primeiras alterações no meu portfólio ❤”) e clique em “Commit to master” e em seguida em “Push origin”
Lembrando que essas mudanças foram feitas na branch develop, por isso não vão para o ar imediatamente.
Chegou a hora de colocar seu portfólio no ar
Cenas dos pŕoximos capítulos: Em breve o artigo ensinando a fazer o deploy do seu site
Por favor deixem comentários, dúvidas, e sugestões. Esse projeto tem o intuito de ajudar pessoas então toda ajuda para construí-lo será bem vinda, através de um fork no GitHub ou um feedback por aqui.
