Para quem ainda não conseguiu o primeiro emprego como desenvolvedor, uma grande dificuldade é como provar suas habilidades. Um portfólio resolve esse problema.

Portfólio são seus melhores projetos reunidos para impressionar em uma entrevista de trabalho. Através do portfólio conseguimos provar que somos programadores. E para quem ainda não desenvolveu profissionalmente, esses projetos podem ser aqueles desenvolvidos durante algum estudo.

Suas contribuições

Ter um portfólio dá a vantagem de demonstrar as habilidades, em lugar de apenas falar sobre elas.

Por que ter um portfólio?

No início de carreira, quando não se tem muita experiência, é fundamental ter um portfólio. Podemos até dizer que o portfólio é a nova carteira de trabalho para os desenvolvedores.

Imagine que alguém pergunta durante uma entrevista: "onde podemos ver o seus projetos?". Para o iniciante, que não possui experiência, cabe ao portfólio responder a essa pergunta.

Exemplo

Há uns anos precisei trocar de emprego. Eu tinha muita experiência em back-end e a vaga exigia bastante front-end, o que poderia me colocar em desvantagem.

Para não dar chance ao azar, preparei uma bela página de catálogo de e-commerce, subi em um domínio próprio e apresentei na entrevista no meu celular.

Eu aproveitei que na época a responsividade, fazer um site se adaptar ao tamanho da tela, era um assunto em alta.

site responsivo

Com isso pude demonstrar minhas habilidades com CSS, mesmo não tendo muita experiência no assunto.

Foi melhor demonstrar que eu podia fazer algo do que falar que faria se tivesse chance.

O que precisa ter em um portfólio?

O ideal é que o portfólio seja preparado para a vaga que se deseja disputar. Não ajuda muito ir para uma entrevista sobre Flutter levando material de React. Isso, na verdade, pode até fazer você parecer perdido.

Então, por mais que você possua muitos projetos usando diferentes coisas, tente separar entre eles os que melhor se adequarem a uma vaga em particular.

Esse pode até ser um exercício legal, porque se você não conseguir fazer isso pode ser que o seu portfólio não seja tão diverso ou não atenda a vaga em questão.

Com isso em mente, é importante conhecer as principais competências exigidas em cada vaga. Chamamos uma lista de competências de stack. Cada área do desenvolvimento de software possui a própria stack.

tecnologias

Por exemplo, no desenvolvimento web uma stack pode ser:

  • HTML
  • CSS
  • JavaScript/TypeScript
  • React

Às vezes, um item na stack pode ter a sua própria lista de competências. Por exemplo, dentro do JavaScript, saber usar fetch para realizar requisições pode ser uma competência importante.

Após conhecer a stack com a qual você desenvolverá o projeto, o próximo passo é pensar em como utilizá-la. Por exemplo, um site de leilões conectado com um back-end, pode empregar toda a stack vista até agora. Os exemplos são inúmeros, mas começar pequeno pode ajudar.

Prefira projetos pequenos

Já ouviu a frase feijão com arroz bem-feitinho? Pois lembre-se que o objetivo do portfólio é provar as suas habilidades, exigindo o mínimo de palavras possível.

É óbvio que quanto mais completo for um projeto, melhor ele provará que se dá conta do recado. Mas isso não significa que quanto maior o projeto, mais habilidades ele prova.

habilidades

Conforme nos tornamos mais experientes, descobrimos que muita coisa no desenvolvimento de software se repete. Por isso, um projeto muito grande às vezes só é muito redundante. Sem falar que provavelmente não vai dar tempo de apresentá-lo completamente em uma entrevista.

Por isso, escolha escopos menores. Projetos pequenos são mais fáceis de terminar e menos propensos a apresentarem erros durante a apresentação.

Aqui na plataforma DevMedia, por exemplo, uma das missões da carreira front-end é criar uma página estática que exibe informações sobre uma empresa, como mostra a Animação 1.

projeto pousada
Animação 1. Projeto front-end

Repare que esta página não possui um back-end e possui um nível baixo de dificuldade, porém com ela o aluno consegue demonstrar que é capaz de criar e comercializar páginas que trazem informações sobre uma empresa.

Resista a tentação do copy/paste

Às vezes, na pressa por concluir um projeto, o desenvolvedor acaba dando copy/paste (copiar/colar) em código da internet. Isso é normal. Tem coisas que fazemos todos os dias e mesmo assim precisamos de uma mãozinha para lembrar como fazer.

Um exemplo disso são as datas. Sempre me vejo em apuros quando o assunto é aritmética ou formatação de datas.

Não há problema em trazer um pouco de ajuda para o seu projeto. O problema é quando essa ajuda bloqueia o seu cérebro.

Não traga pro seu projeto nada que você não saiba como funciona!

não traga problemas

Com certeza durante uma entrevista vão te perguntar o que o seu código faz.

Imagina responder assim: "quando eu escrevi esse código eu e Deus sabíamos o que ele fazia. Agora só Deus sabe".

Essa resposta derruba qualquer candidato.

Outra coisa, mesmo ao fazer copy/paste, ajuste o código. Adapte-o ao seu estilo de escrita e formatação.

Fica fácil saber quando um código não é da pessoa se ele está num idioma diferente, com quatro espaços em lugar de dois, essas coisas. Você não vai querer parecer um trapaceiro, vai?

Como criar um portfólio

Você deve se concentrar em duas coisas:

  1. Códigos
  2. Projetos

Códigos

O objetivo é demonstrar o conhecimento na tecnologia utilizada.

Por exemplo, podemos criar um projeto com boas práticas, bem documentado, sem trechos que se repetem entre arquivos e bem organizado em pastas. Assim, todos poderão ver que se está programando corretamente.

Projetos

Aqui a ideia é demonstrar habilidades em tarefas fundamentais da tecnologia, o que depende da vaga disputada.

projetos

Por exemplo, criar um dashboard em React usando CSS para animações ricas e inspiradoras ou enviar uma requisição para um servidor e trabalhar a resposta para montar uma página de catálogo de produtos.

Essa etapa depende um pouco da vaga que está sendo disputada ou da tecnologia escolhida, mas a ideia é reunir em um projeto tarefas fundamentais.

Onde criar, quais ferramentas usar?

Criar um portfólio requer foco em duas coisas: nada impressiona mais do que chegar em uma entrevista com um projeto pronto para ser usado. Além disso, quando se trata de deixar projetos no ar existem duas alternativas muito utilizadas:

  • Heroku
  • GitHub

Heroku

Heroku

Mais utilizado para back-end, com o Heroku você consegue por um projeto no ar gratuitamente, com algumas limitações.

Essa alternativa também é viável para iniciantes, porque o Heroku é fácil de usar.

Por exemplo, você pode subir uma aplicação Laravel ou Node.js no Heroku.

Ele atende não apenas ao back-end, mas também ao front-end como, por exemplo, você pode subir um site com apenas HTML e CSS e ainda uma aplicação Angular ou React no Heroku.

Existem ainda outras opções com baixo custo, às vezes sendo até gratuitas por um tempo.

Para citar duas, a AWS e o GCP oferecem créditos para quem quer começar. Mas nem tudo é coberto por esse crédito e depois o pagamento costuma ser em dólar.

GitHub

GitHub

É o maior repositório de código do mundo! Sério, o seu código precisa estar lá.

Se for pra chegar numa entrevista com um pendrive nem vai. Parece radical, mas é preciso ser claro aqui.

Existem duas formas de levar o seu código para uma entrevista:

  • Compartilhando a URL do seu GitHub
  • Compartilhando a URL da ferramenta que você usa no lugar do GitHub, como GitLab ou BitBucket.

Ir de GitHub é melhor, porque essa é a ferramenta mais utilizada em empresas.

Outra coisa, o GitHub tem boa integração com o Heroku. Toda vez que você enviar o seu código para o GitHub, o Heroku pode puxar esse código, atualizando sua aplicação no ar.

Esse é um recurso que poupa muito tempo de quem está tocando um projeto sozinho e justifica usar essas ferramentas em conjunto.

Ideias

Aqui vão algumas ideias de projetos, caso você esteja sem nenhuma :/

  • Dashboard (dificuldade Baixa)
    Dashboard é o novo Hello world. Com ele você pode apenas apresentar informações na tela, que podem ser estáticas, sem que isso pareça pouca coisa. É uma boa oportunidade de mostrar como você consegue tornar bonita uma interface, usando animações.
    Dashboard
  • Lista de compras (dificuldade Baixa)
    Permitir ao cliente incluir e excluir itens em uma lista e marcá-las como finalizadas. É uma boa oportunidade de customizar a página ou tela, demonstrando controle sobre o front-end web/mobile
    Lista de compras
  • Carrinho de compras (dificuldade Média)
    Entre outras coisas, pode demonstrar sua habilidade em navegar entre páginas, já que o cliente vai selecionar um item em um lugar e vê-lo apresentado em outro, além de persistência no cliente.
    ●   Carrinho de compras

Tenho dificuldades para criar um projeto, e agora?

Se você nunca criou um projeto ou já criou mas ainda não se familiarizou com esse processo, não se preocupe.

E se eu te disser que existe uma plataforma onde você consegue estudar e ao mesmo tempo criar projetos que podem ser utilizados no seu portfólio?

Isso mesmo, aqui na plataforma DevMedia além de fazer cursos e exercícios, nós vamos te ensinar como criar um projeto do zero como estes das Animações 2 e 3.

Projeto Front-end
Animação 2. Projeto Front-end
Projeto mobile
Animação 3. Projeto mobile

Através das missões das carreiras front-end, back-end e mobile você vai ter todo apoio dos nossos professores através do nosso suporte, para criar projetos que podem ser usados não só no seu portfólio mas também, como vimos anteriormente, para comercializar.

Curtiu a ideia? Então clique no link abaixo e faça seu cadastro.

Criar minha conta

Conclusão

Se tem uma frase que vale a pena guardar neste artigo é: mostrar é melhor do que contar. Qualquer um pode se sentar frente a frente com um entrevistador e dizer que faria algo se tivesse chance. Mas com um portfólio de projetos bem preparado você fará mais do que isso. Ao final da entrevista, suas habilidades estarão comprovadas e com isso suas chances de conseguir a vaga serão maiores do que as dos seus competidores.