Demonstrar suas habilidades e visão de forma clara é crucial no mundo do desenvolvimento web. Cada linha de código no seu portfólio mostra o que você pode construir, como pensa, resolve problemas e se mantém atualizado com as práticas modernas de desenvolvimento web.
Um perfil no GitHub com muitas contribuições pode ser igualmente interessante, mas ter ambos significa maximizar sua visibilidade para potenciais empregadores. Este guia passo a passo vai te ajudar a construir um portfólio website com React profissional, usando Tailwind CSS e com o ButterCMS gerenciando seu conteúdo.
Ao final, você terá um portfólio em React que destaca seus projetos e habilidades, fácil de manter e atualizar.
O portfólio que vamos construir
Neste tutorial, vamos criar um portfólio website com React moderno, com seções essenciais que todo desenvolvedor precisa:
- Uma seção inicial e “sobre” para causar uma ótima primeira impressão.
- Um espaço para mostrar suas habilidades técnicas.
- Uma seção de projetos, destacando seus melhores trabalhos e contribuições no GitHub.
- Navegação suave entre as seções para uma experiência de usuário superior.
- Uma seção de contato para se conectar com potenciais empregadores.
Cada seção é construída como um componente React reutilizável, facilitando a manutenção e atualização do seu portfólio. Você pode encontrar o código completo neste repositório GitHub e acompanhar cada passo.
Ferramentas necessárias para criar seu portfólio React
Para seguir este tutorial, você precisa ter:
- Conhecimento básico de React e Tailwind CSS.
- Node.js e Git instalados no seu sistema.
- Um editor de código para escrever e editar seu código. Recomendo o VS Code.
Abaixo estão as ferramentas e plataformas que usaremos para construir e implementar nosso portfólio website:
- ButterCMS: Em vez de codificar seu conteúdo diretamente, usaremos este CMS headless para tornar o conteúdo dinâmico e fácil de atualizar. Com o Butter, você pode atualizar seus projetos sem tocar no código, gerenciar suas habilidades e experiência através de um painel amigável, e implementar mudanças de conteúdo instantaneamente.
- Tailwind CSS: Portfólios modernos precisam ter uma aparência profissional em todos os dispositivos. A abordagem “utility-first” do Tailwind nos ajuda a construir layouts responsivos rapidamente, manter um estilo consistente, criar efeitos de hover e transições suaves, e personalizar o design para combinar com sua marca pessoal.
- React-scroll: As primeiras impressões importam. A biblioteca react-scroll ajuda a criar rolagem suave entre as seções, dando ao seu portfólio uma sensação polida e profissional quando os visitantes navegam pelo seu trabalho.
- React Icons: Um portfólio precisa de elementos visuais para envolver os visitantes. React Icons nos dá acesso a ícones de redes sociais para seus perfis, ícones de tech stack para sua seção de habilidades e ícones de UI para navegação e interação.
- Axios: Axios é uma biblioteca bem conhecida, usada principalmente para enviar consultas HTTP assíncronas para REST endpoints. Ao realizar atividades CRUD, esta biblioteca é muito útil. Usando esta biblioteca, você pode se comunicar com o backend. Para manter seu portfólio dinâmico, usaremos Axios para buscar seu conteúdo mais recente do ButterCMS, manter os dados do seu portfólio atualizados e lidar com solicitações de API de forma eficiente.
Primeiros passos: Configurando seu ambiente React
Um repositório inicial no GitHub já foi criado, incluindo as imagens e dados necessários para este tutorial. Este repositório também contém dependências e configurações para Tailwind CSS e outras dependências como Axios, React Icons e React Scroll.
Clone o repositório do GitHub executando o seguinte no seu terminal:
git clone -b starter https://github.com/Tammibriggs/portfolio-butterCMS.git
Depois, navegue até o diretório do projeto com este comando:
cd portfolio-butterCMS
Abra o projeto no seu editor de código. Se estiver usando o Visual Studio Code, execute o comando code . no seu terminal. Você verá a seguinte estrutura de pastas do projeto:
└── PORTFOLIO-BUTTERCMS/
├── public
├── src
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
└── tailwind.config.js
Em seguida, abra seu terminal no diretório do projeto e execute o seguinte comando para instalar as dependências do projeto:
npm install
Após a instalação de todas as dependências do projeto, inicie o servidor de desenvolvimento com este comando:
npm start
Após executar este comando, seu projeto estará em execução no localhost e você receberá uma URL. Você pode visitar a URL no seu navegador para visualizar o projeto:
Crie uma estrutura básica de componente React para cada seção
Ao construir um projeto de portfólio React, começar com uma arquitetura limpa, baseada em componentes, prepara você para o sucesso. Pense nos componentes como blocos de construção: cada seção do seu portfólio (Início, Sobre, Habilidades, etc.) será uma peça independente que você pode desenvolver, estilizar e atualizar sem afetar as outras.
Primeiro, crie uma pasta de componentes no seu diretório src com estes arquivos:
└── src/
├── assets/
│ ├── code2.png
│ └── me.png
├── components/
│ ├── About.jsx
│ ├── Contact.jsx
│ ├── Home.jsx
│ ├── Navbar.jsx
│ ├── Skills.jsx
│ └── Works.jsx
├── App.js
├── index.css
└── index.js
Vamos criar uma estrutura básica de componente. Veja como configurar seu componente “Sobre” (os outros seguirão o mesmo padrão):
import React from 'react'
function About() {
return (
<div>About</div>
)
}
export default About
No componente “Sobre”, você está fazendo o seguinte:
- Importando a biblioteca React, necessária para escrever componentes React.
- Definindo uma função chamada
About(), que servirá como seu componente React que você usará como uma UI reutilizável. - Definindo o que o componente “Sobre” renderizará na tela em uma declaração
return. Por enquanto, ele simplesmente retorna um elementodivcom um texto “Sobre”. - Exportando o componente “Sobre” para outras partes da sua aplicação React.
Vamos aplicar a mesma abordagem para criar os outros componentes. No seu arquivo Navbar.jsx, adicione o seguinte código que define uma função Navbar() com um div, que exibe um texto “Navbar” e exporta seu componente “Navbar“:
import React from 'react'
function Navbar() {
return (
<div>Navbar</div>
)
}
export default Navbar
Crie componentes básicos similares para Navbar, Home, Skills, Works e Contact. Cada um deve importar React, definir um componente funcional e exportá-lo.
Assim:
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
Apenas mude o nome da função e a exportação para o componente que você está criando. Além disso, sinta-se à vontade para alterar o texto dentro do <div>.
Agora que temos nossa base modular, vamos montar esses componentes em App.js. A ordem dos componentes é importante tanto para a hierarquia visual quanto para o SEO:
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import Navbar from './components/Navbar';
import Skills from './components/Skills';
import Works from './components/Works';
function App() {
return (
<div >
<Navbar />
<Home />
<About />
<Skills />
<Works />
<Contact />
</div>
);
}
export default App;
Para estilizar, estamos usando uma combinação de utilitários Tailwind CSS e estilos personalizados. Os estilos base em index.css estabelecem a fundação do nosso portfólio:
Esta abordagem modular oferece diversos benefícios:
- Manutenibilidade: Cada componente pode ser atualizado independentemente.
- Reusabilidade: Componentes podem ser reutilizados em diferentes projetos.
- Organização: É mais fácil encontrar e corrigir problemas quando o código está separado.
- Colaboração: Diferentes membros da equipe podem trabalhar em diferentes componentes.
Para estilizar, estamos usando Tailwind CSS porque oferece:
- Protótipos rápidos com classes de utilidade.
- Sistema de design consistente.
- Design responsivo integrado.
- Sem troca de contexto entre arquivos.
Abordagens de estilização alternativas que você poderia considerar:
- CSS Modules para melhor escopo de CSS.
- Styled Components para CSS-in-JS.
- SASS para CSS mais estruturado.
- CSS Frameworks como Material UI ou Chakra UI.
Você pode encontrar a estilização completa no arquivo index.css do repositório GitHub. Pessoalmente, prefiro Tailwind para portfólios porque permite iterações rápidas e mantém a consistência entre os componentes, mas escolha o que melhor se adapta ao seu fluxo de trabalho.
Agora que cobrimos as opções de estilização, vamos percorrer a construção de um dos componentes mais importantes do seu portfólio: a barra de navegação.
Como construir a barra de navegação
Todo ótimo portfólio usando React precisa de uma navegação suave que simplesmente funcione. Como estamos construindo uma aplicação de página única, vamos criar uma barra de navegação responsiva que permita aos visitantes saltar entre as seções facilmente e inclua links rápidos para seus perfis profissionais.
Este código de navegação cria três elementos-chave:
- Um menu de desktop com links de seção de rolagem suave.
- Um menu hambúrguer compatível com dispositivos móveis que se expande em uma navegação de tela inteira.
- Uma barra lateral social com ícones para seus perfis profissionais.
O código usa o hook useState do React para alternar o menu e react-scroll para navegação suave, enquanto o Tailwind lida com o design responsivo e as animações. Você pode encontrar o código completo aqui:
//Navbar.jsx
// Import necessary dependencies
import React, { useState } from 'react';
// Import icons we'll use for our navbar
import {
FaBars,
FaTimes,
FaGithub,
FaLinkedin,
} from 'react-icons/fa';
import { HiOutlineMail } from 'react-icons/hi';
import { BsFillPersonLinesFill } from 'react-icons/bs';
// Import Link for smooth scrolling between sections
import { Link } from 'react-scroll';
const Navbar = () => {
// State to handle mobile menu toggle (open/closed)
const [nav, setNav] = useState(false);
const handleClick = () => setNav(!nav);
return (
// Main navbar container - fixed at top, full width
<div className='fixed w-full h-20 flex justify-between items-center px-4 bg-slate-900 text-gray-300'>
{/* Your logo or brand name */}
<div>
<h1 className='font-thin text-2xl italic font-serif'>TB</h1>
</div>
{/* Desktop Menu - hidden on mobile, flex on medium screens and up */}
<ul className='hidden md:flex gap-x-8'>
<li>
<Link to='home' smooth={true} duration={500}>
Home
</Link>
</li>
{/* ... other menu items ... */}
</ul>
{/* Hamburger Icon - visible only on mobile */}
<div onClick={handleClick} className='md:hidden z-10 cursor-pointer'>
{!nav ? <FaBars size={20} /> : <FaTimes size={20} />}
</div>
{/* Mobile Menu - full screen overlay */}
<ul className={!nav ? 'hidden' : 'absolute top-0 left-0 w-full h-screen bg-slate-900 flex flex-col justify-center items-center'}>
<li className='py-6 text-4xl'>
<Link onClick={handleClick} to='home' smooth={true} duration={500}>
Home
</Link>
</li>
{/* ... other mobile menu items ... */}
</ul>
{/* Social icons - hidden on smaller screens, shown on large screens */}
<div className='hidden lg:flex fixed flex-col top-[35%] left-0'>
<ul>
{/* LinkedIn - sliding animation on hover */}
<li className='w-40 h-14 flex justify-between items-center ml-[-100px] hover:ml-[-10px] duration-300 bg-blue-600'>
<a href="https://linkedin.com" className='flex justify-between items-center w-full text-gray-300 px-4'>
LinkedIn <FaLinkedin size={30} />
</a>
</li>
{/* ... other social links ... */}
</ul>
</div>
</div>
);
};
export default Navbar;
Como construir o componente Home
As primeiras impressões importam: seu componente Home é a seção de destaque que diz imediatamente aos visitantes quem você é e o que você faz.
O código abaixo cria uma página de destino responsiva com:
- Uma manchete e introdução atraentes.
- Sua foto profissional.
- Um botão “Sobre Mim” estiloso com animação de hover.
- Rolagem suave entre as seções.
Para personalizar seu componente Home, não se esqueça de:
- Substituir o texto do espaço reservado pela sua experiência real.
- Atualizar a importação da imagem com sua foto.
- Ajustar as cores do gradiente para combinar com sua marca.
Vá para o arquivo Home.jsx em src/components e implemente isto atualizando seu código com o seguinte:
//Home.jsx
// Import required components and assets
import React from 'react';
import { HiArrowNarrowRight } from 'react-icons/hi'; // Arrow icon for button
import me from '../assets/me.png'; // Your profile photo
import { Link } from "react-scroll"; // For smooth scrolling
const Home = () => {
return (
// Main container - full screen with dark background
<div name="home" className="h-screen w-full bg-[#0a192f]">