Aqui est\u00e1 uma demonstra\u00e7\u00e3o em tempo real do portf\u00f3lio de desenvolvedor<\/a> que voc\u00ea estar\u00e1 construindo com o Next.js.<\/p>\n Voc\u00ea pode acessar o reposit\u00f3rio do GitHub<\/a> deste projeto se quiser dar uma olhada mais detalhada, ou pode usar este modelo de projeto inicial para portf\u00f3lio<\/a> selecionando “Use this template<\/strong>” (Usar este modelo) > “Create a new repository<\/strong>” (Criar um novo reposit\u00f3rio) – isso ir\u00e1 copiar o c\u00f3digo inicial para um novo reposit\u00f3rio. O projeto inicial cont\u00e9m c\u00f3digos b\u00e1sicos como estilos, um link para a Font Awesome CDN, imagens e estrutura b\u00e1sica.<\/p>\n Ser\u00e1 mais f\u00e1cil para voc\u00ea codificar ao longo do tutorial se voc\u00ea tiver:<\/p>\n Next.js<\/a> \u00e9 um framework de biblioteca JavaScript<\/a> de c\u00f3digo aberto baseado em React que pode ser usado para uma ampla gama de projetos de desenvolvimento web, pois simplifica a constru\u00e7\u00e3o de aplicativos renderizados no lado do servidor e est\u00e1ticos. Ele otimiza o processo, aproveitando os melhores recursos do React e aprimorando o desempenho de renderiza\u00e7\u00e3o para melhorar a experi\u00eancia do usu\u00e1rio. Alguns dos casos de uso mais comuns para o Next.js incluem:<\/p>\n Para configurar um ambiente de desenvolvimento para o Next.js, primeiro instale o Node.js<\/a> em seu computador, pois voc\u00ea usar\u00e1 o comando Uma janela de prompt aparecer\u00e1, pedindo que voc\u00ea confirme algumas depend\u00eancias adicionais. Depois disso, voc\u00ea pode executar Ao criar um projeto Next.js usando o comando Outros diret\u00f3rios e arquivos tamb\u00e9m podem ser gerados dependendo da configura\u00e7\u00e3o e dos recursos espec\u00edficos, mas esses s\u00e3o os diret\u00f3rios principais de um projeto b\u00e1sico do Next.js.<\/p>\n Para este tutorial, tudo o que construirmos aparecer\u00e1 na p\u00e1gina inicial (nosso site de uma \u00fanica p\u00e1gina), e voc\u00ea incluir\u00e1 componentes para v\u00e1rias se\u00e7\u00f5es, como o hero, sobre, projetos e outros.<\/p>\n Um portf\u00f3lio \u00e9 geralmente composto de componentes como estes:<\/p>\n Os componentes Navbar e Rodap\u00e9 devem aparecer em todas as p\u00e1ginas, se o portf\u00f3lio tiver mais de uma p\u00e1gina. Isso pode ser alcan\u00e7ado no Next.js definindo um layout.<\/p>\n No Next.js, um layout \u00e9 uma maneira de definir uma estrutura consistente para os componentes que aparecem em cada p\u00e1gina de um site. O layout geralmente inclui elementos tais como cabe\u00e7alho, menu de navega\u00e7\u00e3o e rodap\u00e9 exibido em todas as p\u00e1ginas de um site.<\/p>\n Comece criando uma pasta de componentes no diret\u00f3rio src<\/strong> (fonte) do seu projeto Next.js. A seguir, crie os componentes Navbar e Footer que ser\u00e3o usados dentro do componente Layout.<\/p>\n Aqui est\u00e1 o componente Navbar no Navbar.jsx<\/strong>:<\/p>\n Aqui est\u00e1 o componente footer em Footer.jsx<\/strong>:<\/p>\n Nota:<\/strong> Para que a fonte Font Awesome funcione, voc\u00ea deve instalar a Font Awesome em seu projeto ou usar seu CDN. Voc\u00ea pode adicionar o link CDN ao seu arquivo _document.js<\/strong> assim:<\/p>\n Nota: <\/strong>Se voc\u00ea vincular uma vers\u00e3o diferente do Font Awesome via CDN, precisar\u00e1 substituir acima do hash Ap\u00f3s criar todos os componentes necess\u00e1rios para o layout, voc\u00ea pode criar o pr\u00f3prio componente Layout e adicion\u00e1-lo \u00e0s suas p\u00e1ginas, envolvendo o conte\u00fado da p\u00e1gina dentro dele.<\/p>\n O componente Layout aceitar\u00e1 uma propriedade <code>children<\/code>, permitindo que voc\u00ea acesse o conte\u00fado das suas p\u00e1ginas do Next.js.<\/p>\n Neste ponto, voc\u00ea criou com sucesso o componente Layout que cont\u00e9m o Navbar e o Footer juntamente com as propriedades children posicionadas corretamente. Agora voc\u00ea pode adicionar o componente Layout \u00e0s suas p\u00e1ginas, envolvendo o conte\u00fado da p\u00e1gina dentro dele. Isso ser\u00e1 feito no arquivo _app.js<\/strong>.<\/p>\n Agora voc\u00ea criou um layout para o seu portf\u00f3lio de desenvolvedor. Para este portf\u00f3lio, focamos mais no Next.js e como implantar seu site na Kinsta. Ent\u00e3o, voc\u00ea pode copiar os estilos no arquivo styles\/globals.css<\/a> para o seu pr\u00f3prio projeto. Se voc\u00ea iniciar seu site do portf\u00f3lio no modo de desenvolvimento, agora dever\u00e1 ver o layout do seu aplicativo.<\/p>\n Agora \u00e9 hora de dar ao seu site de portf\u00f3lio o conte\u00fado apropriado.<\/p>\n Agora voc\u00ea pode criar componentes individuais para cada se\u00e7\u00e3o do portf\u00f3lio de desenvolvedor. Todos esses componentes ser\u00e3o importados para a p\u00e1gina inicial do seu projeto Next.js, para poderem ser exibidos quando voc\u00ea iniciar o projeto com o O componente Hero \u00e9 a primeira se\u00e7\u00e3o abaixo do Navbar, cujo objetivo principal \u00e9 chamar a aten\u00e7\u00e3o do usu\u00e1rio e dar a ele uma ideia do que se trata o site ou aplicativo.<\/p>\n \u00a0<\/p>\n No c\u00f3digo acima, voc\u00ea notar\u00e1 que o componente Next.js Image<\/a> \u00e9 usado em vez da tag img HTML para adicionar a imagem, porque permite a otimiza\u00e7\u00e3o autom\u00e1tica da imagem, redimensionamento e muito mais.<\/p>\n No componente Sobre, voc\u00ea tamb\u00e9m notar\u00e1 que um simples par\u00e1grafo para dizer um pouco sobre o desenvolvedor foi adicionado com alguns \u00edcones de m\u00eddia social do Font Awesome para adicionar links sociais.<\/p>\n Assim deve ficar o componente Hero:<\/p>\n Voc\u00ea pode adicionar mais conte\u00fado ao componente Hero, ajustar os estilos no arquivo styles\/globals.css<\/strong> ou mesmo recriar esta se\u00e7\u00e3o da sua pr\u00f3pria maneira.<\/p>\n O componente about (sobre) visa fornecer mais informa\u00e7\u00f5es sobre voc\u00ea em quantos par\u00e1grafos desejar. Se voc\u00ea deseja falar mais sobre si mesmo, pode criar uma p\u00e1gina dedicada “Sobre mim” e adicionar um bot\u00e3o nesta se\u00e7\u00e3o para ler mais sobre voc\u00ea.<\/p>\n O c\u00f3digo acima cont\u00e9m dois par\u00e1grafos de texto sobre o desenvolvedor e uma imagem do desenvolvedor. Esta \u00e9 a apar\u00eancia que se espera da se\u00e7\u00e3o Sobre:<\/p>\n Voc\u00ea sempre pode ajustar os estilos para adicionar mais imagens e muito mais.<\/p>\n O componente skills (habilidades) tem o objetivo de mostrar algumas das tecnologias mais utilizadas pelo desenvolvedor ou tecnologias que o desenvolvedor usou no passado.<\/p>\n Voc\u00ea pode tornar isso mais f\u00e1cil de manter, criando uma array em um arquivo externo e, em seguida, importando para o componente de habilidades, para que voc\u00ea possa fazer um loop em vez de duplicar c\u00f3digo semelhante.<\/p>\n No c\u00f3digo acima, um cart\u00e3o \u00e9 criado para cada habilidade, e cada cart\u00e3o ir\u00e1 conter o \u00edcone de tecnologia do font-awesome e o nome da tecnologia. Voc\u00ea tamb\u00e9m pode adicionar mais estilos e ajustar o c\u00f3digo para torn\u00e1-lo mais atraente e \u00fanico.<\/p>\n O componente projects (projetos) \u00e9 uma das se\u00e7\u00f5es importantes do portf\u00f3lio de um desenvolvedor. Os projetos fornecem evid\u00eancias tang\u00edveis das habilidades e capacidades de um desenvolvedor e mostram sua capacidade de aplicar seus conhecimentos a problemas do mundo real.<\/p>\n Cada projeto incluir\u00e1 uma breve descri\u00e7\u00e3o do projeto, um link para o seu c\u00f3digo-fonte (estamos usando links do GitHub<\/a> aqui) e quaisquer outros detalhes que voc\u00ea desejar adicionar.<\/p>\n Voc\u00ea pode criar uma array para armazenar os detalhes de cada projeto e, em seguida, import\u00e1-la para o seu componente para evitar codific\u00e1-los.<\/p>\n Vamos criar um arquivo data.js<\/strong> para armazenar a array de dados do projeto. Voc\u00ea pode armazenar este arquivo na pasta de componentes ou na pasta pages\/api<\/strong>. Para esta demonstra\u00e7\u00e3o, vou armazen\u00e1-lo na pasta de componentes. Esta array conter\u00e1 um objeto para cada projeto, e o objeto conter\u00e1 o nome do projeto, descri\u00e7\u00e3o e link do GitHub.<\/p>\n Agora voc\u00ea pode criar um componente de projeto para utilizar esses dados, fazendo um loop facilmente. Voc\u00ea pode usar qualquer m\u00e9todo de itera\u00e7\u00e3o JavaScript, mas para este tutorial, pode usar o m\u00e9todo de array No c\u00f3digo acima, voc\u00ea evitou com sucesso a repeti\u00e7\u00e3o fazendo um loop pela array para produzir todos os projetos no componente de projetos, tornando-o f\u00e1cil de manter e adicionar mais projetos.<\/p>\n Uma raz\u00e3o para criar um portf\u00f3lio de desenvolvedor \u00e9 para que clientes em potencial possam chegar at\u00e9 voc\u00ea. Uma maneira seria as pessoas lhe enviarem um e-mail, o que vamos facilitar neste componente contact (contato).<\/p>\n Coloque seu endere\u00e7o de e-mail na tag Agora voc\u00ea criou com sucesso todos os componentes para o seu aplicativo de portf\u00f3lio. O pr\u00f3ximo passo seria adicion\u00e1-los \u00e0 sua p\u00e1gina inicial. Navegue at\u00e9 o arquivo pages\/index.js<\/strong> – criado por padr\u00e3o – e substitua seu c\u00f3digo pelo seguinte.<\/p>\n Quando voc\u00ea agora executar seu aplicativo, voc\u00ea notar\u00e1 que foi criado um site completo do portf\u00f3lio<\/a>. Finalmente, antes de implantar seu aplicativo, instalaremos uma depend\u00eancia. Uma vantagem de usar o Next.js \u00e9 as muitas funcionalidades que ele traz para a tabela, tais como roteamento baseado em arquivos, otimiza\u00e7\u00e3o de imagens e muito mais.<\/p>\n A otimiza\u00e7\u00e3o de imagens \u00e9 tratada com o componente Next.js Agora voc\u00ea pode implantar seu aplicativo, e as imagens funcionar\u00e3o corretamente com a otimiza\u00e7\u00e3o completa que o Next.js fornece.<\/p>\n Ap\u00f3s ficar satisfeito com seu portf\u00f3lio exibindo seu melhor trabalho de desenvolvimento e informa\u00e7\u00f5es-chave, voc\u00ea provavelmente desejar\u00e1 compartilh\u00e1-lo com outras pessoas, certo? Vamos ver como fazer isso usando o GitHub e a plataforma de Hospedagem de Aplicativos da Kinsta.<\/p>\n Existem v\u00e1rias maneiras de enviar c\u00f3digos para o GitHub, mas usaremos o Git para este tutorial. O Git \u00e9 amplamente utilizado no desenvolvimento de software<\/a> porque fornece uma maneira confi\u00e1vel e eficiente de gerenciar mudan\u00e7as de c\u00f3digo, colaborar em projetos e manter o hist\u00f3rico de vers\u00f5es.<\/p>\n Voc\u00ea pode enviar seu c\u00f3digo para o GitHub seguindo os seguintes passos:<\/p>\n Primeiro, crie um novo reposit\u00f3rio (como uma pasta local para armazenar seu c\u00f3digo). Voc\u00ea pode fazer isso fazendo login em sua conta do GitHub, clicando no bot\u00e3o +<\/strong> no canto superior direito da tela e selecionando Novo reposit\u00f3rio<\/strong> no menu suspenso, como visto na imagem abaixo.<\/p>\n O pr\u00f3ximo passo seria dar um nome ao seu reposit\u00f3rio, adicionar uma descri\u00e7\u00e3o (opcional), e selecionar se voc\u00ea quer que seu reposit\u00f3rio seja p\u00fablico ou privado. Ent\u00e3o clique em Create repository<\/strong>. Agora voc\u00ea pode enviar seu c\u00f3digo<\/a> para o novo reposit\u00f3rio do GitHub.<\/p>\n Tudo o que \u00e9 necess\u00e1rio para enviar seu c\u00f3digo com o Git \u00e9 a URL do reposit\u00f3rio, que voc\u00ea pode encontrar na p\u00e1gina principal do reposit\u00f3rio, abaixo do bot\u00e3o Clone ou download<\/strong>, ou nas etapas que aparecem ap\u00f3s a cria\u00e7\u00e3o de um reposit\u00f3rio.<\/p>\n Voc\u00ea pode se preparar para enviar seu c\u00f3digo abrindo seu terminal ou prompt de comando e navegando at\u00e9 o diret\u00f3rio que cont\u00e9m seu projeto. Use o seguinte comando para inicializar um reposit\u00f3rio Git local:<\/p>\n Agora adicione seu c\u00f3digo ao reposit\u00f3rio Git local usando o seguinte comando:<\/p>\n O comando acima adiciona todos os arquivos no diret\u00f3rio atual e seus subdiret\u00f3rios ao novo reposit\u00f3rio Git. Agora voc\u00ea pode submeter suas mudan\u00e7as usando o seguinte comando:<\/p>\n Nota: <\/strong>Voc\u00ea pode substituir “meu primeiro commit” por sua pr\u00f3pria mensagem breve descrevendo as altera\u00e7\u00f5es que voc\u00ea fez.<\/p>\n Por fim, envie seu c\u00f3digo para o GitHub usando os seguintes comandos:<\/p>\n Nota:<\/strong> Assegure-se de substituir “[URL do reposit\u00f3rio]” pela URL do seu pr\u00f3prio reposit\u00f3rio GitHub.<\/p>\n Uma vez que voc\u00ea tenha completado estes passos, seu c\u00f3digo ser\u00e1 enviado para o GitHub e acess\u00edvel atrav\u00e9s da URL do seu reposit\u00f3rio. Agora voc\u00ea pode implantar seu reposit\u00f3rio na Kinsta.<\/p>\n A implanta\u00e7\u00e3o na Kinsta acontece em apenas alguns minutos. Comece no painel My Kinsta<\/a> para fazer o login ou criar sua conta.<\/p>\n Em seguida, voc\u00ea autorizar\u00e1 Kinsta no GitHub<\/a> nestes r\u00e1pidos passos:<\/p>\n Um modal aparecer\u00e1 atrav\u00e9s do qual voc\u00ea pode selecionar o reposit\u00f3rio que voc\u00ea deseja implantar.<\/p>\n Se voc\u00ea tem m\u00faltiplas branches em seu reposit\u00f3rio, voc\u00ea pode selecionar aquela que voc\u00ea deseja implantar. Voc\u00ea tamb\u00e9m pode atribuir um nome a este aplicativo. Certifique-se de selecionar uma localiza\u00e7\u00e3o do centro de dados<\/a> entre os 24 dispon\u00edveis, e ent\u00e3o Kinsta detectar\u00e1 automaticamente um comando start.<\/p>\n Neste ponto, seu aplicativo come\u00e7ar\u00e1 a ser implantada. Dentro de alguns minutos, um link ser\u00e1 fornecido para acessar a vers\u00e3o implantada do seu aplicativo. Neste caso, ser\u00e1: https:\/\/kinsta-developer-portfolio-ir8w8.kinsta.app\/<\/strong><\/p>\n Nota:<\/strong> A implanta\u00e7\u00e3o autom\u00e1tica foi habilitada, ent\u00e3o Kinsta automaticamente reiniciar\u00e1 seu aplicativo sempre que voc\u00ea faz mudan\u00e7as na sua base de c\u00f3digo e a empurra para o GitHub.<\/p>\nRequisitos \/ Pr\u00e9-requisitos<\/h2>\n
\n
Por que Next.js?<\/h2>\n
\n
\n
\n
Como configurar seu ambiente de desenvolvimento Next.js<\/h2>\n
npx<\/code> para executar pacotes npm sem precisar instal\u00e1-los globalmente em seu sistema. Uma vez feito isso, voc\u00ea pode criar um projeto Next.js executando o seguinte comando:<\/p>\nnpx create-next-app@latest my-portfolio<\/code><\/pre>\nnpm run dev<\/code> para disponibilizar seu aplicativo em localhost:3000<\/strong>.<\/p>\n![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/nextjs-installation-with-options.jpg\")
npx<\/code>, ele automaticamente cria uma estrutura de pastas com os seguintes diret\u00f3rios principais:<\/p>\n\n
Como construir um portf\u00f3lio de desenvolvedor responsivo usando o Next.js<\/h2>\n
\n
Definindo layouts no Next.js<\/h3>\n
\/\/ components\/Navbar.jsx\n\nimport Link from \"next\/link\";\n\nconst Navbar = () => {\n return (\n <div className=\"nav-container\">\n <div className=\"logo\">\n <Link href=\"\/\">\n Joe's Portfolio\n <\/Link>\n <\/div>\n <a href=\"\" className=\"cta-btn\">Resume<\/a>\n <\/div>\n )\n}\n\nexport default Navbar;<\/code><\/pre>\n\/\/ components\/Footer.jsx\n\nconst Footer = () => {\n return (\n <>\n <hr\/>\n <div className=\"footer-container\">\n <p>\n © {new Date().getFullYear()} Joel's Portfolio\n <\/p>\n <div className=\"social_icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/>\n )\n}\n\nexport default Footer;<\/code><\/pre>\n\/\/ pages\/_document.js\n\nimport { Html, Head, Main, NextScript } from 'next\/document';\n\nexport default function Document() {\n return (\n <Html lang=\"en\">\n <Head>\n <meta charSet=\"utf-8\" \/>\n <link\n rel=\"stylesheet\"\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n crossorigin=\"anonymous\"\n referrerpolicy=\"no-referrer\"\n \/>\n <\/Head>\n <body>\n <Main \/>\n <NextScript \/>\n <\/body>\n <\/Html>\n );\n}<\/code><\/pre>\nintegrity<\/code> apropriado para essa vers\u00e3o.<\/p>\n\/\/ components\/Layout.jsx\n\nimport Navbar from '.\/navbar';\nimport Footer from '.\/footer';\n\nconst Layout = ({ children }) => {\n return (\n <>\n <Navbar \/>\n <main>{children}<\/main>\n <Footer \/>\n <\/>\n )\n}\n\nexport default Layout;<\/code><\/pre>\n\/\/ pages\/_app.js\n\nimport '@\/styles\/globals.css';\nimport Layout from '..\/components\/layout';\n\nexport default function App({ Component, pageProps }) {\n return (\n <Layout>\n <Component {...pageProps} \/>\n <\/Layout>\n );\n}<\/code><\/pre>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/layout-component.jpg\")
Construindo componentes do portf\u00f3lio<\/h3>\n
npm run dev<\/code>.<\/p>\nO componente Hero<\/h4>\n
\/\/ components\/Hero.jsx\n\nimport Image from \"next\/image\";\n\nconst Hero = () => {\n return (\n <div className=\"hero-container\">\n <Image src='\/images\/profile.jpeg' className=\"profile-img\" width={300} height={300} alt=\"Joe's personal headshot\" \/>\n <div className=\"hero-text\">\n <h1>Hey, I'm Joe \ud83d\udc4b<\/h1>\n <p>\n I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)\n exceptional websites, applications, and everything in between.\n <\/p>\n <div className=\"social-icons\">\n <a\n href=\"https:\/\/twitter.com\/olawanle_joel\"\n aria-label=\"Twitter\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-twitter\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/github.com\/olawanlejoel\"\n aria-label=\"GitHub\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-github\"><\/i>\n <\/a>\n <a\n href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n aria-label=\"LinkedIn\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <i className=\"fa-brands fa-linkedin\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Hero;<\/code><\/pre>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/hero-component.jpg\")
O componente about<\/h4>\n
\/\/ components\/About.jsx\n\nimport Image from \"next\/image\";\n\nconst About = () => {\n return (\n <div className=\"about-container\">\n <h2>About Me<\/h2>\n <div className=\"flex-about\">\n <div className=\"about-text\">\n <p>\n As a developer, I have always been passionate about creating elegant and effective solutions to\n complex problems. I have a strong foundation in software development, with a focus on web\n technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and\n back-end of applications, and I am always looking for ways to optimize performance, improve user\n experience, and ensure the highest level of code quality.\n <\/p>\n <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to\n complex enterprise-level applications. I am experienced in working with a variety of development\n tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager\n to learn and explore new technologies, and I am constantly seeking out opportunities to improve\n my skills and knowledge.<\/p>\n <\/div>\n <div className=\"about-img\">\n <Image src='\/images\/about.jpeg' className=\"profile-img\" width={300} height={500}\/>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default About;<\/code><\/pre>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-component.jpg\")
O componente skills<\/h4>\n
![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/skills-component.jpg\")
\/\/ components\/Skills.jsx\n\nconst Skills = () => {\n return (\n <div className=\"skills-container\">\n <h2>Skills<\/h2>\n <div className=\"grid-skills\">\n <div className=\"skill-card html\">\n <i className=\"fa-brands fa-html5 html-icon\"><\/i>\n <p>HTML<\/p>\n <\/div>\n <div className=\"skill-card css\">\n <i className=\"fa-brands fa-css3-alt css-icon\"><\/i>\n <p>CSS<\/p>\n <\/div>\n <div className=\"skill-card js\">\n <i className=\"fa-brands fa-js-square js-icon\"><\/i>\n <p>JavaScript<\/p>\n <\/div>\n <div className=\"skill-card react\">\n <i className=\"fa-brands fa-react react-icon\"><\/i>\n <p>React<\/p>\n <\/div>\n <div className=\"skill-card node\">\n <i className=\"fa-brands fa-node-js node-icon\"><\/i>\n <p>Node<\/p>\n <\/div>\n <div className=\"skill-card python\">\n <i className=\"fa-brands fa-python python-icon\"><\/i>\n <p>Python<\/p>\n <\/div>\n <\/div>\n <\/div>\n )\n}\n\nexport default Skills;<\/code><\/pre>\nO Componente projects<\/h4>\n
![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/projects-component.jpg\")
\/\/ components\/data.js\n\nexport const projectData = [\n {\n id: 1,\n title: 'Todo List App',\n description:\n 'A simple Todo List App built with JavaScript. All datas are stored in localstorage. It helps users check list out their plans and tick as they do them.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Todo-List-App',\n },\n {\n id: 2,\n title: 'Books Library App',\n description:\n 'A simple Book Library App built with JavaScript. It helps readers have a good list of books they are either currently reading or have finished reading.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Book-Library',\n },\n {\n id: 3,\n title: 'Quotes Generator',\n description:\n 'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/random-quote-generator',\n },\n {\n id: 4,\n title: 'Password Generator',\n description:\n 'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/Password-Generator',\n },\n {\n id: 5,\n title: 'Twitter UI Clone',\n description:\n 'Simple Twitter UI clone built with TailwindCSS and Vue Js. This covers only the homepage of Twitter UI. This is cool to get started with TailwindCSS as it helps understand basic concepts.',\n gitHubLink: 'https:\/\/github.com\/olawanlejoel\/TwitterUI-clone',\n },\n];<\/code><\/pre>\nmap()<\/code> do JavaScript para fazer um loop pela array de dados ap\u00f3s import\u00e1-la para o componente de projetos.<\/p>\n\/\/ components\/Projects.jsx\n\nimport { projectData } from '.\/data.js';\n\nconst Projects = () => {\n return (\n <div className=\"projects-container\">\n <h2>Projects<\/h2>\n <div className=\"projects-grid\">\n {projectData && projectData.map((project) => (\n <div className=\"project-card\" key={project.id}>\n <div className=\"project-header\">\n <i className=\"fa-regular fa-folder-open folder-icon\"><\/i>\n <div className=\"small-icons\">\n <a href={project.gitHubLink}><i className=\"fa-brands fa-github\"><\/i><\/a>\n <\/div>\n <\/div>\n <h3>{project.title}<\/h3>\n <p>{project.description}<\/p>\n <\/div>\n ))\n }\n <\/div>\n <\/div>\n )\n}\n\nexport default Projects;<\/code><\/pre>\nO Componente contact<\/h4>\n
\/\/ components\/Contact.jsx\n\nconst Contact = () => {\n return (\n <div className=\"contact-container\">\n <h2>Get In Touch<\/h2>\n <p>If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to say hi, I'll try my best to get back to you! Cheers!<\/p>\n <a href=\"mailto:example@kinsta.com\" className='cta-btn'>Say Hello<\/a>\n <\/div>\n )\n}\n\nexport default Contact;<\/code><\/pre>\na<\/code> para o bot\u00e3o abrir uma aplica\u00e7\u00e3o de e-mail com uma mensagem endere\u00e7ada a voc\u00ea.<\/p>\n![\"Componente](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/contact-component.jpg\")
\/\/ pages\/index.js\n\nimport Hero from '@\/components\/Hero';\nimport About from '@\/components\/About';\nimport Skills from '@\/components\/Skills';\nimport Projects from '@\/components\/Projects';\nimport Contact from '@\/components\/Contact';\n\nimport Head from 'next\/head';\n\nconst Home = () => {\n return (\n <>\n <Head>\n <title>Joel's Portfolio<\/title>\n <meta name=\"description\" content=\"Joel's Portfolio\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n <link rel=\"icon\" href=\"\/favicon.ico\" \/>\n <\/Head>\n <div>\n <Hero \/>\n <About \/>\n <Skills \/>\n <Projects \/>\n <Contact \/>\n <\/div>\n <\/>\n );\n};\n\nexport default Home;<\/code><\/pre>\nImage<\/code>. Antes de implantar um aplicativo em produ\u00e7\u00e3o que utilize o componente Next.js Image, \u00e9 fortemente recomendado que voc\u00ea instale o sharp<\/a>. Voc\u00ea pode fazer isso navegando at\u00e9 o seu terminal, assegurando que voc\u00ea est\u00e1 no diret\u00f3rio do seu projeto, e ent\u00e3o executando o seguinte comando:<\/p>\nnpm i sharp<\/code><\/pre>\nComo implantar um aplicativo Next.js na Kinsta<\/h2>\n
Envie seu c\u00f3digo para o GitHub<\/h3>\n
![\"Crie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub.jpg\")
![\"Acesse](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/how-to-get-repository-URL.jpg\")
git init<\/code><\/pre>\ngit add .<\/code><\/pre>\ngit commit -m \"my first commit\"<\/code><\/pre>\ngit remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\nImplante seu portf\u00f3lio na Kinsta<\/h3>\n
\n
![\"Crie](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/host-application-on-kinsta.jpg\")
![\"Comando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploying_application_to_kinsta.gif\")
![\"Link](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deployemnt-link-on-kinsta.jpg\")