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.

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.