Exercício - Atualize um portfólio JavaScript com o GitHub Copilot

  • 5 minutos

Vamos explorar como você pode usar sugestões de código do GitHub Copilot. Neste exercício, você adiciona animações com sugestões dinâmicas e usa um prompt para personalizar o comportamento de rolagem de um repositório de modelos JavaScript já existente. Com o GitHub Copilot, você pode trabalhar rapidamente com uma situação JavaScript da vida real.

Portfólio JavaScript

Quer seja um estudante, um recém-licenciado ou um profissional experiente, o seu portefólio é o seu espaço pessoal para mostrar as suas competências e experiência.

Ter um portfólio dá credibilidade e notoriedade à experiência que você está mencionando em seu currículo ao se candidatar a empregos. Seja você um cientista de dados, UX Designer ou um desenvolvedor front-end. Uma forte presença online pode ajudá-lo a conseguir um emprego e a ser descoberto!

Nota

Para este exercício, use o Codespace com o ambiente pré-configurado em seu navegador.

Personalize seu portfólio JavaScript

Neste portfólio de modelos, temos um aplicativo Web baseado em React pronto para você personalizar e implantar facilmente usando apenas seu navegador da Web.

Antes de começar, você pode personalizar o portfólio com seus próprios links. Vá para src/App.jsx e atualize siteProps com suas informações. A siteProps variável é um objeto JavaScript que contém pares de valores de chave usados para personalizar o site, deve ter esta aparência:

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

Anime seus ícones de mídia social com um prompt

Uma animação pode tornar a seção de mídia social mais atraente. Peça a ajuda do Copilot para animar os ícones. Você pode usar o GitHub Copilot Chat para perguntar ao Copilot ou escrever o seguinte comentário no arquivo src/styles.css:

/* add an amazing animation to the social icons */

A sugestão do Copilot deve ser semelhante à seguinte:

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Aceite a sugestão pressionando a tecla tab. Se você não receber exatamente a mesma sugestão, então você pode experimentar com a sugestão fornecida ou continuar digitando o código CSS até que ele corresponda.

Seu site já deve estar em execução no seu Codespace, e a alteração será recarregada na página automaticamente. Para vê-los, passe o mouse sobre um dos ícones de suas redes sociais no rodapé para ver a magia!

Parabéns, através do exercício, você não só usou o Copilot para gerar código, mas também o fez de uma forma interativa e divertida! Você pode usar o GitHub Copilot não apenas para gerar código, mas escrever documentação, testar seus aplicativos e muito mais.

Quando terminar o exercício no GitHub, regresse aqui para:

  • Uma rápida verificação do conhecimento
  • Um resumo do que aprendeu
  • Um emblema para concluir este módulo