Um portfólio de desenvolvedor é uma coleção de amostras de trabalho e projetos que mostram suas habilidades e experiência. Um portfólio forte o diferencia dos outros candidatos quando procura por empregos. Mas não apenas isso: um portfólio também pode ser uma ferramenta valiosa para networking, manter o controle de seus aprendizados e se estabelecer como um especialista no assunto.
Neste tutorial, você aprenderá como construir um portfólio de desenvolvedor usando o Next.js e implantá-lo diretamente do seu repositório GitHub para a plataforma de Hospedagem de Aplicativos da Kinsta, que fornece um domínio gratuito .kinsta.app para colocar seu trabalho no ar rapidamente.
Aqui está uma demonstração em tempo real do portfólio de desenvolvedor que você estará construindo com o Next.js.
Você pode acessar o repositório do GitHub deste projeto se quiser dar uma olhada mais detalhada, ou pode usar este modelo de projeto inicial para portfólio selecionando “Use this template” (Usar este modelo) > “Create a new repository” (Criar um novo repositório) – isso irá copiar o código inicial para um novo repositório. O projeto inicial contém códigos básicos como estilos, um link para a Font Awesome CDN, imagens e estrutura básica.
Requisitos / Pré-requisitos
Será mais fácil para você codificar ao longo do tutorial se você tiver:
- Conhecimento básico de HTML, CSS, e JavaScript
- Um pouco de conhecimento do React e talvez do Next.js
- Node.js e npm (Node Package Manager) ou yarn instalados em seu computador.
Por que Next.js?
Next.js é um framework de biblioteca JavaScript de código aberto baseado em React que pode ser usado para uma ampla gama de projetos de desenvolvimento web, pois simplifica a construção de aplicativos renderizados no lado do servidor e estáticos. Ele otimiza o processo, aproveitando os melhores recursos do React e aprimorando o desempenho de renderização para melhorar a experiência do usuário. Alguns dos casos de uso mais comuns para o Next.js incluem:
- Construção de sites estáticos: O Next.js pode construir sites estáticos que são rápidos, fáceis de implantar e exigem manutenção mínima, como o site do portfólio de desenvolvedor que construiremos ao longo deste tutorial.
- Construção de sites dinâmicos: O Next.js permite que você crie sites dinâmicos que podem alterar o conteúdo com base em interações do usuário ou recuperação de dados no lado do servidor.
- Construção de sites de eCommerce: O Next.js é bem adequado para a construção de sites de eCommerce que requerem renderização no lado do servidor para melhorar o SEO e o desempenho.
- Construção de aplicativos da web progressivos (PWAs): O Next.js suporta a criação de PWAs, que são aplicativos da web que funcionam como aplicativos nativos e podem ser instalados no dispositivo do usuário.
Como configurar seu ambiente de desenvolvimento Next.js
Para configurar um ambiente de desenvolvimento para o Next.js, primeiro instale o Node.js em seu computador, pois você usará o comando npx para executar pacotes npm sem precisar instalá-los globalmente em seu sistema. Uma vez feito isso, você pode criar um projeto Next.js executando o seguinte comando:
npx create-next-app@latest my-portfolioUma janela de prompt aparecerá, pedindo que você confirme algumas dependências adicionais. Depois disso, você pode executar npm run dev para disponibilizar seu aplicativo em localhost:3000.
Ao criar um projeto Next.js usando o comando npx, ele automaticamente cria uma estrutura de pastas com os seguintes diretórios principais:
- pages: esta pasta contém as páginas do aplicativo, que são automaticamente roteadas com base no nome do arquivo. Por exemplo, pages/index.js seria a página inicial, enquanto pages/about.js seria a página “sobre”.
- public: esta pasta contém arquivos estáticos que podem ser servidos diretamente, como imagens, fontes e outros recursos.
- components: esta pasta é opcional e contém componentes de interface do usuário (UI) reutilizáveis que podem ser usados em todo o aplicativo.
- styles: esta pasta também é opcional e contém estilos globais que podem ser aplicados em todo o aplicativo.
Outros diretórios e arquivos também podem ser gerados dependendo da configuração e dos recursos específicos, mas esses são os diretórios principais de um projeto básico do Next.js.
Para este tutorial, tudo o que construirmos aparecerá na página inicial (nosso site de uma única página), e você incluirá componentes para várias seções, como o hero, sobre, projetos e outros.
Como construir um portfólio de desenvolvedor responsivo usando o Next.js
Um portfólio é geralmente composto de componentes como estes:
- Componente Navbar
- Componente Hero
- Componente Sobre
- Componente Habilidades
- Componente Projetos
- Componente Contato
- Componente Rodapé
Os componentes Navbar e Rodapé devem aparecer em todas as páginas, se o portfólio tiver mais de uma página. Isso pode ser alcançado no Next.js definindo um layout.
Definindo layouts no Next.js
No Next.js, um layout é uma maneira de definir uma estrutura consistente para os componentes que aparecem em cada página de um site. O layout geralmente inclui elementos tais como cabeçalho, menu de navegação e rodapé exibido em todas as páginas de um site.
Comece criando uma pasta de componentes no diretório src (fonte) do seu projeto Next.js. A seguir, crie os componentes Navbar e Footer que serão usados dentro do componente Layout.
Aqui está o componente Navbar no Navbar.jsx:
// components/Navbar.jsx
import Link from "next/link";
const Navbar = () => {
return (
<div className="nav-container">
<div className="logo">
<Link href="/">
Joe's Portfolio
</Link>
</div>
<a href="" className="cta-btn">Resume</a>
</div>
)
}
export default Navbar;Aqui está o componente footer em Footer.jsx:
// components/Footer.jsx
const Footer = () => {
return (
<>
<hr/>
<div className="footer-container">
<p>
© {new Date().getFullYear()} Joel's Portfolio
</p>
<div className="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</>
)
}
export default Footer;Nota: Para que a fonte Font Awesome funcione, você deve instalar a Font Awesome em seu projeto ou usar seu CDN. Você pode adicionar o link CDN ao seu arquivo _document.js assim:
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Nota: Se você vincular uma versão diferente do Font Awesome via CDN, precisará substituir acima do hash integrity apropriado para essa versão.
Após criar todos os componentes necessários para o layout, você pode criar o próprio componente Layout e adicioná-lo às suas páginas, envolvendo o conteúdo da página dentro dele.
O componente Layout aceitará uma propriedade <code>children</code>, permitindo que você acesse o conteúdo das suas páginas do Next.js.
// components/Layout.jsx
import Navbar from './navbar';
import Footer from './footer';
const Layout = ({ children }) => {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
export default Layout;Neste ponto, você criou com sucesso o componente Layout que contém o Navbar e o Footer juntamente com as propriedades children posicionadas corretamente. Agora você pode adicionar o componente Layout às suas páginas, envolvendo o conteúdo da página dentro dele. Isso será feito no arquivo _app.js.
// pages/_app.js
import '@/styles/globals.css';
import Layout from '../components/layout';
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}Agora você criou um layout para o seu portfólio de desenvolvedor. Para este portfólio, focamos mais no Next.js e como implantar seu site na Kinsta. Então, você pode copiar os estilos no arquivo styles/globals.css para o seu próprio projeto. Se você iniciar seu site do portfólio no modo de desenvolvimento, agora deverá ver o layout do seu aplicativo.
Agora é hora de dar ao seu site de portfólio o conteúdo apropriado.
Construindo componentes do portfólio
Agora você pode criar componentes individuais para cada seção do portfólio de desenvolvedor. Todos esses componentes serão importados para a página inicial do seu projeto Next.js, para poderem ser exibidos quando você iniciar o projeto com o npm run dev.
O componente Hero
O componente Hero é a primeira seção abaixo do Navbar, cujo objetivo principal é chamar a atenção do usuário e dar a ele uma ideia do que se trata o site ou aplicativo.
// components/Hero.jsx
import Image from "next/image";
const Hero = () => {
return (
<div className="hero-container">
<Image src='/images/profile.jpeg' className="profile-img" width={300} height={300} alt="Joe's personal headshot" />
<div className="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing)
exceptional websites, applications, and everything in between.
</p>
<div className="social-icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>
)
}
export default Hero;No código acima, você notará que o componente Next.js Image é usado em vez da tag img HTML para adicionar a imagem, porque permite a otimização automática da imagem, redimensionamento e muito mais.
No componente Sobre, você também notará que um simples parágrafo para dizer um pouco sobre o desenvolvedor foi adicionado com alguns ícones de mídia social do Font Awesome para adicionar links sociais.
Assim deve ficar o componente Hero:
Você pode adicionar mais conteúdo ao componente Hero, ajustar os estilos no arquivo styles/globals.css ou mesmo recriar esta seção da sua própria maneira.
O componente about
O componente about (sobre) visa fornecer mais informações sobre você em quantos parágrafos desejar. Se você deseja falar mais sobre si mesmo, pode criar uma página dedicada “Sobre mim” e adicionar um botão nesta seção para ler mais sobre você.
// components/About.jsx
import Image from "next/image";
const About = () => {
return (
<div className="about-container">
<h2>About Me</h2>
<div className="flex-about">
<div className="about-text">
<p>
As a developer, I have always been passionate about creating elegant and effective solutions to
complex problems. I have a strong foundation in software development, with a focus on web
technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and
back-end of applications, and I am always looking for ways to optimize performance, improve user
experience, and ensure the highest level of code quality.
</p>
<p>Throughout my career, I have worked on a wide range of projects, from simple static websites to
complex enterprise-level applications. I am experienced in working with a variety of development
tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager
to learn and explore new technologies, and I am constantly seeking out opportunities to improve
my skills and knowledge.</p>
</div>
<div className="about-img">
<Image src='/images/about.jpeg' className="profile-img" width={300} height={500}/>
</div>
</div>
</div>
)
}
export default About;O código acima contém dois parágrafos de texto sobre o desenvolvedor e uma imagem do desenvolvedor. Esta é a aparência que se espera da seção Sobre:
Você sempre pode ajustar os estilos para adicionar mais imagens e muito mais.
O componente skills
O componente skills (habilidades) tem o objetivo de mostrar algumas das tecnologias mais utilizadas pelo desenvolvedor ou tecnologias que o desenvolvedor usou no passado.
Você pode tornar isso mais fácil de manter, criando uma array em um arquivo externo e, em seguida, importando para o componente de habilidades, para que você possa fazer um loop em vez de duplicar código semelhante.
// components/Skills.jsx
const Skills = () => {
return (
<div className="skills-container">
<h2>Skills</h2>
<div className="grid-skills">
<div className="skill-card html">
<i className="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div className="skill-card css">
<i className="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div className="skill-card js">
<i className="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div className="skill-card react">
<i className="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div className="skill-card node">
<i className="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div className="skill-card python">
<i className="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>
)
}
export default Skills;No código acima, um cartão é criado para cada habilidade, e cada cartão irá conter o ícone de tecnologia do font-awesome e o nome da tecnologia. Você também pode adicionar mais estilos e ajustar o código para torná-lo mais atraente e único.
O Componente projects
O componente projects (projetos) é uma das seções importantes do portfólio de um desenvolvedor. Os projetos fornecem evidências tangíveis das habilidades e capacidades de um desenvolvedor e mostram sua capacidade de aplicar seus conhecimentos a problemas do mundo real.
Cada projeto incluirá uma breve descrição do projeto, um link para o seu código-fonte (estamos usando links do GitHub aqui) e quaisquer outros detalhes que você desejar adicionar.
Você pode criar uma array para armazenar os detalhes de cada projeto e, em seguida, importá-la para o seu componente para evitar codificá-los.
Vamos criar um arquivo data.js para armazenar a array de dados do projeto. Você pode armazenar este arquivo na pasta de componentes ou na pasta pages/api. Para esta demonstração, vou armazená-lo na pasta de componentes. Esta array conterá um objeto para cada projeto, e o objeto conterá o nome do projeto, descrição e link do GitHub.
// components/data.js
export const projectData = [
{
id: 1,
title: 'Todo List App',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App',
},
{
id: 2,
title: 'Books Library App',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/Book-Library',
},
{
id: 3,
title: 'Quotes Generator',
description:
'Helps you generate quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.',
gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator',
},
{
id: 4,
title: 'Password Generator',
description:
'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard.',
gitHubLink: 'https://github.com/olawanlejoel/Password-Generator',
},
{
id: 5,
title: 'Twitter UI Clone',
description:
'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.',
gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone',
},
];Agora você pode criar um componente de projeto para utilizar esses dados, fazendo um loop facilmente. Você pode usar qualquer método de iteração JavaScript, mas para este tutorial, pode usar o método de array map() do JavaScript para fazer um loop pela array de dados após importá-la para o componente de projetos.
// components/Projects.jsx
import { projectData } from './data.js';
const Projects = () => {
return (
<div className="projects-container">
<h2>Projects</h2>
<div className="projects-grid">
{projectData && projectData.map((project) => (
<div className="project-card" key={project.id}>
<div className="project-header">
<i className="fa-regular fa-folder-open folder-icon"></i>
<div className="small-icons">
<a href={project.gitHubLink}><i className="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{project.title}</h3>
<p>{project.description}</p>
</div>
))
}
</div>
</div>
)
}
export default Projects;No código acima, você evitou com sucesso a repetição fazendo um loop pela array para produzir todos os projetos no componente de projetos, tornando-o fácil de manter e adicionar mais projetos.
O Componente contact
Uma razão para criar um portfólio de desenvolvedor é para que clientes em potencial possam chegar até você. Uma maneira seria as pessoas lhe enviarem um e-mail, o que vamos facilitar neste componente contact (contato).
// components/Contact.jsx
const Contact = () => {
return (
<div className="contact-container">
<h2>Get In Touch</h2>
<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>
<a href="mailto:[email protected]" className='cta-btn'>Say Hello</a>
</div>
)
}
export default Contact;Coloque seu endereço de e-mail na tag a para o botão abrir uma aplicação de e-mail com uma mensagem endereçada a você.
Agora você criou com sucesso todos os componentes para o seu aplicativo de portfólio. O próximo passo seria adicioná-los à sua página inicial. Navegue até o arquivo pages/index.js – criado por padrão – e substitua seu código pelo seguinte.
// pages/index.js
import Hero from '@/components/Hero';
import About from '@/components/About';
import Skills from '@/components/Skills';
import Projects from '@/components/Projects';
import Contact from '@/components/Contact';
import Head from 'next/head';
const Home = () => {
return (
<>
<Head>
<title>Joel's Portfolio</title>
<meta name="description" content="Joel's Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<Hero />
<About />
<Skills />
<Projects />
<Contact />
</div>
</>
);
};
export default Home;Quando você agora executar seu aplicativo, você notará que foi criado um site completo do portfólio. Finalmente, antes de implantar seu aplicativo, instalaremos uma dependência. Uma vantagem de usar o Next.js é as muitas funcionalidades que ele traz para a tabela, tais como roteamento baseado em arquivos, otimização de imagens e muito mais.
A otimização de imagens é tratada com o componente Next.js Image. Antes de implantar um aplicativo em produção que utilize o componente Next.js Image, é fortemente recomendado que você instale o sharp. Você pode fazer isso navegando até o seu terminal, assegurando que você está no diretório do seu projeto, e então executando o seguinte comando:
npm i sharpAgora você pode implantar seu aplicativo, e as imagens funcionarão corretamente com a otimização completa que o Next.js fornece.
Como implantar um aplicativo Next.js na Kinsta
Após ficar satisfeito com seu portfólio exibindo seu melhor trabalho de desenvolvimento e informações-chave, você provavelmente desejará compartilhá-lo com outras pessoas, certo? Vamos ver como fazer isso usando o GitHub e a plataforma de Hospedagem de Aplicativos da Kinsta.
Envie seu código para o GitHub
Existem várias maneiras de enviar códigos para o GitHub, mas usaremos o Git para este tutorial. O Git é amplamente utilizado no desenvolvimento de software porque fornece uma maneira confiável e eficiente de gerenciar mudanças de código, colaborar em projetos e manter o histórico de versões.
Você pode enviar seu código para o GitHub seguindo os seguintes passos:
Primeiro, crie um novo repositório (como uma pasta local para armazenar seu código). Você pode fazer isso fazendo login em sua conta do GitHub, clicando no botão + no canto superior direito da tela e selecionando Novo repositório no menu suspenso, como visto na imagem abaixo.
O próximo passo seria dar um nome ao seu repositório, adicionar uma descrição (opcional), e selecionar se você quer que seu repositório seja público ou privado. Então clique em Create repository. Agora você pode enviar seu código para o novo repositório do GitHub.
Tudo o que é necessário para enviar seu código com o Git é a URL do repositório, que você pode encontrar na página principal do repositório, abaixo do botão Clone ou download, ou nas etapas que aparecem após a criação de um repositório.
Você pode se preparar para enviar seu código abrindo seu terminal ou prompt de comando e navegando até o diretório que contém seu projeto. Use o seguinte comando para inicializar um repositório Git local:
git initAgora adicione seu código ao repositório Git local usando o seguinte comando:
git add .O comando acima adiciona todos os arquivos no diretório atual e seus subdiretórios ao novo repositório Git. Agora você pode submeter suas mudanças usando o seguinte comando:
git commit -m "my first commit"Nota: Você pode substituir “meu primeiro commit” por sua própria mensagem breve descrevendo as alterações que você fez.
Por fim, envie seu código para o GitHub usando os seguintes comandos:
git remote add origin [repository URL]
git push -u origin masterNota: Assegure-se de substituir “[URL do repositório]” pela URL do seu próprio repositório GitHub.
Uma vez que você tenha completado estes passos, seu código será enviado para o GitHub e acessível através da URL do seu repositório. Agora você pode implantar seu repositório na Kinsta.
Implante seu portfólio na Kinsta
A implantação na Kinsta acontece em apenas alguns minutos. Comece no painel My Kinsta para fazer o login ou criar sua conta.
Em seguida, você autorizará Kinsta no GitHub nestes rápidos passos:
- Clique em Aplicativos na barra lateral esquerda
- Clique em Adicionar serviço
- No menu suspenso, clique em Aplicativos porque você deseja implantar um aplicativo Next.js na Kinsta.
Um modal aparecerá através do qual você pode selecionar o repositório que você deseja implantar.
Se você tem múltiplas branches em seu repositório, você pode selecionar aquela que você deseja implantar. Você também pode atribuir um nome a este aplicativo. Certifique-se de selecionar uma localização do centro de dados entre os 25 disponíveis, e então Kinsta detectará automaticamente um comando start.
Neste ponto, seu aplicativo começará a ser implantada. Dentro de alguns minutos, um link será fornecido para acessar a versão implantada do seu aplicativo. Neste caso, será: https://kinsta-developer-portfolio-ir8w8.kinsta.app/
Nota: A implantação automática foi habilitada, então Kinsta automaticamente reiniciará seu aplicativo sempre que você faz mudanças na sua base de código e a empurra para o GitHub.
Resumo
Existem várias razões pelas quais os desenvolvedores devem considerar o uso do Next.js em seus projetos web. Em primeiro lugar, ele fornece desempenho otimizado pronto para uso, com recursos como pré-busca e divisão de código que ajudam a reduzir os tempos de carregamento da página. Em segundo lugar, ele oferece uma experiência de desenvolvimento familiar para desenvolvedores React, suportando ferramentas populares como componentes estilizados e os recursos mais recentes do React.
A Kinsta oferece suporte para várias opções de implantação para o Next.js, incluindo hospedagem baseada em servidor tradicional e plataformas modernas sem servidor. Isso permite que os desenvolvedores escolham a opção de implantação que melhor atenda às suas necessidades, aproveitando as otimizações de desempenho e outros benefícios do framework.
Neste tutorial, você aprendeu passo a passo como construir um site de portfólio responsivo usando o Next.js e, em seguida, implantá-lo na Kinsta.
Você pode experimentar a Hospedagem de Aplicativos da Kinsta gratuitamente e, se gostar, opte pelo nosso plano Hobby Tier a partir de $7/mês.
Agora é sua vez de se desafiar: adicione mais recursos ao seu novo site de portfólio desenvolvido! Aqui estão algumas ideias para inspirá-lo: adicione mais páginas com informações detalhadas, integre um blog com MDX, implemente alguma animação. Compartilhe seus projetos e experiência nos comentários abaixo!
Deixe um comentário