DEV Community

Cover image for O passo a passo de como criei meu portfólio e como você pode fazer o mesmo
Francielle Dellamora
Francielle Dellamora

Posted on • Updated on

O passo a passo de como criei meu portfólio e como você pode fazer o mesmo

Olá pessoal,

Sou desenvolvedora web e sei que ter um portfólio legal é super importante para mostrar suas habilidades e experiências profissionais. Sei também que não é raro sentir-se perdido e sem saber por onde começar, então decidi compartilhar algumas dicas e um pouco da minha experiência ao desenvolver a primeira versão do meu site.

Quer comprar um domínio mas não sabe como?

Não se sinta especial, eu também não fazia a mínima ideia de como comprar um domínio personalizado. Basicamente só sabia que existia como e por isso fiz o que todo dev faz de melhor, pesquisei no google e descobri que é bem fácil!

Aqui estão os passos básicos para você comprar o seu:

  1. Vá para o site do Google Domains

  2. Escolha um nome de domínio que você gostaria de usar para o seu site. Isso é como o endereço do seu site na internet, como por exemplo, "dellamora.dev".

  3. Verifique se o nome de domínio que você escolheu está disponível. Se estiver, você verá uma mensagem dizendo "Disponível".

  4. Adicione o nome de domínio à sua cesta de compras clicando no botão "Adicionar ao carrinho".

  5. Siga as etapas para finalizar a compra, incluindo inserir informações de pagamento.

Pronto! Agora você é dono de um novo domínio mas ainda precisa criar um site e publicá-lo (:

O que não pode ficar de fora do seu portfolio

Um site pessoal é como se fosse um cartão de visitas virtual para o mundo conhecer quem você é, quais conteúdos já produziu, suas experiencias profissionais e como entrar em contato com você. Portanto é essencial que seu site tenha uma seção dedicada a cada um desses assuntos.

Sou programadora e não designer, o que faço?

A minha sorte é que tenho diversos amigos na área e a primeira versão de tela quem produziu foi o meu amigo @TheLittleLuiz, você pode conferir abaixo que ela é bem diferente do resultado final.

First version of dellamora's site

Um fato importante que quero destacar é que durante o processo de criação, diversas mudanças vão acontecer e é natural você descartar e ressuscitar ideias.
No meu caso, após muitas pesquisas e descobertas finalmente achei um design que atendesse todas as minhas necessidades e caso você se sinta sem criatividade e precise de referências esses são os meus três sites favoritos para pesquisar templates e achar inspirações:

  1. Figma
  2. Dribble
  3. awwwards

O dilema: Escolher quais tecnologias usar

Escolher a stack é o desafio que todo programador tem ao iniciar um novo projeto, comigo não foi diferente e por isso sou extremamente grata ao @yungbzz que me auxiliou durante processo.

Após discutir quais seriam as melhores tecnologias do mercado, iniciar uma aplicação NextJS com TypeScript pareceu natural visto que são tecnologias que se complementam e eu poderia fazer o deploy de forma gratuita na Vercel.

Devido à simplicidade do projeto, decidi usar o Tailwind CSS, pois isso me permitiu concluir a lading page de forma mais ágil. Ademais, essa biblioteca oferece outros benefícios, como um design consistente e fácil de manter, graças ao uso de classes reutilizáveis em vez de estilos individuais.

Para criar as animações, utilizei o Framer Motion e a Intersection Observer API, que, quando combinados, são capazes de produzir efeitos incríveis. Caso queira saber mais sobre o assunto, recomendo a leitura do meu artigo"Framer Motion e Intersection Observer: Uma Dupla Poderosa para Animações no React".

A fim de implementar um carrossel na seção de artigos, optei pelo uso da biblioteca Swiper, que é amplamente reconhecida como uma das melhores opções disponíveis para essa finalidade. Além disso, para lidar com as requisições e gerenciar os dados de forma eficiente e confiável, utilizei o React Query, que se mostrou bastante útil para o projeto.

Okay, projeto finalizado, vamos desvendar o que é a Vercel e como fazer deploy

A Vercel é uma plataforma de hospedagem na nuvem que permite aos desenvolvedores publicarem seus projetos na Internet de forma rápida e fácil. Em resumo, ela oferece muitos recursos para otimizar a velocidade e o desempenho do seu projeto, e permite que você faça deploy seguindo o passo a passo a baixo:

  1. Crie uma conta na Vercel e faça o login no dashboard.

  2. Clique no botão "New Project" e selecione a opção "Import Git Repository".

  3. Escolha o repositório do seu projeto e a branch que deseja fazer deploy.

  4. A Vercel irá importar o projeto e criar uma pré-visualização. Verifique se está tudo correto e confirme a importação.

  5. Defina as configurações do projeto, como o nome, domínio, ambiente, etc.

  6. Se necessário, defina as variáveis de ambiente que o projeto necessita para funcionar corretamente.

  7. Selecione a opção "Deploy" para realizar o primeiro deploy do projeto.

  8. Aguarde alguns minutos enquanto a Vercel realiza o build do projeto e publica na internet.

  9. Verifique se o projeto foi publicado corretamente acessando a URL fornecida pela Vercel.

Pronto! Seu projeto está publicado e pode ser acessado por qualquer pessoa, agora só falta configurar o seu domínio personalizado e como existem formas diferentes a própria Vercel fornece um passo a passo para cada caso (:


Lembre-se de que a criação de um portfólio não é apenas sobre design e tecnologia, mas também sobre destacar suas habilidades e experiências profissionais. Com o tempo, o seu portfólio pode se tornar uma ferramenta valiosa para avançar na sua carreira de programador.

Top comments (9)

Collapse
 
beatrizoliveira profile image
Beatriz Oliveira

Parabéns!! O portfólio é com certeza uma das peças fundamentais para ter visibilidade profissionalmente. Leitura bem didática e irá ajudar muita gente o/

Collapse
 
dellamora profile image
Francielle Dellamora

Obrigada pelo apoio e feedback!! <3

Collapse
 
sergiomerces profile image
Sergio Merces

Que bacana ler sua experiência! Foi inspiradora!

Collapse
 
dellamora profile image
Francielle Dellamora

Fico muito feliz em saber que gostou (:

Collapse
 
vcwild profile image
Victor Wildner

parabens! belo artigo

Collapse
 
dellamora profile image
Francielle Dellamora

Fico feliz que tenha gostado!

Collapse
 
l2aelba profile image
l2aelba

English version also please :)

Collapse
 
hnrbs profile image
Henri Borges

Muito bom, parabéns!

Collapse
 
dellamora profile image
Francielle Dellamora

vlw man tmj!