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 • Edited on

31 2 2 2 2

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

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
 
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!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more