Bootstrap

Utilizando Bootstrap para criar sua página de portfólio

Fernanda Amengual Tatsch

Aug 2, 2024 • 15 min read

Neste tutorial, detalharemos com um exemplo completo como você pode criar uma página de portfólio utilizando diversos recursos disponíveis no Bootstrap, um framework para desenvolvimento web baseado em HTML, CSS e Javascript. Para acompanhar os passos a seguir, sugerimos que você tenha um conhecimento básico sobre HTML, CSS e Javascript para que possa entender todas as etapas mais facilmente. Você também pode ter em mãos o nosso dicionário de tags HTML, que auxilia na busca mais rápida pelos marcadores.

O que é um portfólio?

O portfólio é, de forma bem geral, a vitrine de um profissional. É neste espaço que ele irá apresentar suas ideias postas em prática e projetos já concluídos para que outras pessoas, sejam elas recrutadoras ou não, possam ter acesso a informações sobre suas habilidades e conhecimentos. No geral, resume-se a uma página apenas, que pode conter objetos estáticos ou dinâmicos, com arquivos em diferentes formatos, sejam eles texto, imagem, gif, vídeo, pdfs ou animações.

Bootstrap

O Bootstrap, conforme definição do próprio site oficial da tecnologia, é “um kit de ferramentas de front-end poderoso e repleto de recursos”, que possibilita criar soluções em poucos minutos. Ele é um framework desenvolvido em 2010 pelo Twitter que combina CSS e Javascript e possibilita a criação de páginas completas com componentes responsivos. O site oficial é https://getbootstrap.com/ e, nas próximas etapas, detalharemos como você irá adicionar a ferramenta ao seu projeto.

Realizando a instalação

Há algumas possibilidades para baixar e adicionar o Bootstrap ao seu projeto. Neste tutorial, utilizaremos o terminal com o npm, gerenciador de pacotes do Node.js. Saiba mais sobre Node.js e sobre npm clicando nos links referenciados.

Após instalar o gerenciador de pacotes, abra o terminal e digite: npm install bootstrap@5.3.0. Agora, vamos à criação do projeto.

Layout de base

Para orientar o desenvolvimento da página e utilizarmos como inspiração, criamos um layout de base. Ao longo do projeto, detalharemos cada elemento com o devido código, mas você pode ter uma prévia de como ele poderá ficar ao final da produção deste artigo:

Importante: as imagens, inclusive da jovem, são do banco de imagens gratuito Pexels e todas as informações contidas neste modelo são fictícias.

Iniciando o projeto

Para criar nosso código, utilizaremos o editor Visual Studio Code (VS Code), que pode ser baixado neste link. Crie uma pasta e abre-a no editor indo em File e em Open Folder. Dentro da pasta, crie três arquivos: index.html, style.css e app.js.

index.html

O index.html é o arquivo que armazenará todo o nosso código HTML. Neste arquivo, insira o trecho abaixo para iniciar a página. Sendo o <!DOCTYPE html>, o tipo de elemento que informa ao navegador a versão do HTML; o <html>, o elemento raiz; o <meta>, os metadados, o <head>, local onde informamos os dados gerais sobre o documento; o <title>, que é o título da nossa página; e o <body>, que é onde estarão todos os elementos em HTML.

<!DOCTYPE html>

<head>

<title>Portfólio</title>

</head>

<body>

</body>

</html>

Agora, precisamos fazer o link entre os arquivos index.html e style.css, que acontecerá da seguinte forma, com as conexão feitas dentro do <head>.

<!DOCTYPE html>

<head>

<title>Portfólio</title>

</head>

Precisamos, ainda no nosso <head> fazer o link com o Bootstrap. Na própria documentação do Bootstrap, você pode copiar os endereços para adicionar ao código, conforme inserimos abaixo:

<!DOCTYPE html>

<head>

<title>Portfólio</title>

</head>

Repare que não realizamos o link com o nosso arquivo Javascript. O motivo é muito simples: ao inserirmos a linguagem de programação no <head>, o código da linguagem será renderizado antes do carregamento total da página, o que pode prejudicar a experiência do usuário, que poderá sentir a lentidão no processo. Ao inserir no final da página, após o <footer>, permitimos que todo o código HTML e CSS seja carregado e, posteriormente a isto, a parte lógica da nossa página.

Desta forma, adicionamos logo antes do fechamento da tag <body>, conforme você pode perceber no código abaixo:

</body>

</html>

Barra de rolagem

Antes de avançarmos para a criação do conteúdo completo do <body>, vamos adicionar um elemento muito importante na nossa página: a barra de rolagem. Sem essas configurações a seguir, só seria possível rolar a tela utilizando o mouse, puxando a barra para baixo. Com o trecho abaixo, essa ação se torna mais intuitiva.

No arquivo HTML, dentro do <body>, insira, antes de qualquer outro elemento, uma <div>. Só feche esta <div> no fim do seu código, após todo o conteúdo.

<body>

No arquivo CSS, estilize a tag content com os seguintes atributos:

.content {

overflow: auto;

padding: 10px;

}

.content::-webkit-scrollbar {

width: 10px;

}

.content::-webkit-scrollbar-track {

background: #f1f1f1;

}

.content::-webkit-scrollbar-thumb {

background: #888;

border-radius: 5px;

}

.content::-webkit-scrollbar-thumb:hover {

background: #555;

}

Pronto! A barra de rolagem está funcionando. No gif que adicionaremos ao fim deste tutorial, você poderá observar os efeitos desta configuração. Não esqueça de reparar na lateral direita da página.

O nosso próximo passo, é criar a estrutura da nossa página, adicionando algumas tags principais dentro do <body>:

<body>

</header>

</section>

</section>

</section>

</section>

</footer>

</body>

Você pode entender mais sobre as tags HTML acessando o Dicionário de Tags HTML publicado aqui mesmo na Revelo Community. Se você estiver lendo a versão em espanhol, acesse por este link.

Basicamente, separamos em um cabeçalho, quatro seções e um rodapé para que possamos organizar melhor o nosso código. Na próxima etapa, adicionaremos as classes e ids para que possamos referenciar no arquivo CSS.

<body>

</header>

</section>

</section>

</section>

</section>

</footer>

</body>

Neste momento, adicionaremos as demais estruturas no nosso código HTML. Vamos explicar cada uma delas a seguir.

Cabeçalho

No cabeçalho, adicionaremos o menu principal que, no caso da nossa página, conterá somente a âncora para o nosso formulário de contato. Para criar o menu, adicionaremos a tag <nav com o link na tag <a>. Repare que utilizamos o href para realizar a ancoragem com as informações localizadas no rodapé.

<a href="#rodape" class="menu-item" id="contato">CONTATO</a>

</nav>

</header>

Seção principal

Na primeira seção do nosso arquivo, adicionaremos as informações de identificação do criador do portfólio. Repare que adicionamos a tag <div>, que é um separador importante para que possamos organizar nossos containers, especialmente quando utilizamos o modelo Flexbox. Você pode ler mais sobre isto neste artigo que publicamos recentemente: https://community.revelo.com.br/aprenda-flexbox-de-uma-maneira-divertida/. No código abaixo, inserimos o texto com a tag <p> e a imagem com a tag <img>. Você pode notar que tem uma tag <br> no meio do texto. Ela serve para separar em parágrafos a nossa informação, dando um espaçamento entre as frases.

<p id="texto-identificacao">Oi, eu sou a <br><b>Eduarda</b>.</p>

<p id="texto-complementar">Social media formada pela<br> Universidade Federal e dedicada a<br> transformar o marketing do seu <br>negócio</p>

</div>

</div>

</section>

Seção de serviços

Na próxima seção, apresentaremos um componente do Bootstrap chamado popover, que possibilita inserir informações adicionais quando clicamos em um elemento. No nosso caso, utilizamos apenas com elementos textuais, mas é possível inserir imagens e outros conteúdo dentro do popover facilmente. Você pode ler mais sobre todas as possibilidades de utilização nesta documentação do Bootstrap.

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Fazendo a diferença" data-bs-placement="bottom" data-bs-content="Realizo todo o planejamento estratégico do seu negócio baseado em resultados." data-bs-custom-class="custom-popover">PLANEJAMENTO</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Escrevendo a história" data-bs-placement="bottom" data-bs-content="Desenvolvo textos concisos e eficazes para divulgar a sua marca na imprensa e nas redes sociais" data-bs-custom-class="custom-popover">ESCRITA</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Criando memórias" data-bs-placement="bottom" data-bs-content="Seus clientes lembrarão de você ao associar a sua marca a alguma lembrança. Desenvolvo layouts personalizados com toda a identidade visual do seu negócio" data-bs-custom-class="custom-popover">CRIAÇÃO</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="Organizando a rotina" data-bs-placement="bottom"data-bs-content="A sua empresa precisa de um calendário editorial bem definido. Além de planejar, crio uma tabela com todos os conteúdos planejados para o mês, que ficará disponível para sua validaçãos" data-bs-custom-class="custom-popover">PROGRAMAÇÃO</button>

<button type="button" class="btn-danger" data-bs-toggle="popover" data-bs-title="O momento mais esperado" data-bs-placement="bottom" data-bs-content="Meu trabalho tem foco em resultados, portanto, desenvolvo relatórios completos para você acompanhar os efeitos do meu trabalho no seu negócio" data-bs-custom-class="custom-popover">RESULTADO</button>

</div>

</section>

Note que a estrutura de um componente do Bootstrap é bem simples, possuindo o type, que identifica o tipo do elemento; a class, que é a tag que utilizaremos para estilizar com o CSS; o data-bs-toggle é utilizado para controlar o comportamento do componente.

Neste caso, exibir ou ocultar o popover; o data-bs-title, que armazena a informação do título do componente; o data-bs-placement, que indica a posição na qual o popover deve ser expandido; o data-bs-content armazena o conteúdo que deverá ser exibido no componente abaixo do título; e o data-bs-custom-class serve, como o próprio nome diz, para criar uma classe customizada para o componente, de modo que seja possível alterar alguns atributos que já são predefinidos.

Grandes cases

Na sequência, adicionamos o título da próxima seção, que apresentará nossos cases de sucesso:

<div class="titulo-cases"><p id="texto-titulo-cases">GRANDES <b>CASES</b></p></div>

Seção de serviços

Neste espaço, utilizamos um novo componente do Bootstrap chamado de card. Você encontra mais detalhes nesta página da documentação oficial. No código abaixo, repare que a estrutura do componente já é conhecida, com <div> para separar os elementos, <img> para adicionar imagens e <p>para acrescentar textos, além das classes já compreendidas anteriormente. Contudo, há um detalhe. Observe que há um elemento a mais, que é o style="width: 18rem;". Este trecho apenas acrescenta uma estilização do CSS dentro do HTML, acrescentando a tag <style> e, posteriormente, o tipo de customização desejada. Neste caso, está definindo a largura do elemento.

<p class="card-text">Identidade visual criada para loja de roupas visando público feminino</p>

</div>

<p class="card-text">Planejamento, criação e posicionamento de marca em redes sociais estratégicas</p>

</div>

<p class="card-text">Criação de ação virtual exclusiva para rede de cinemas a fim de captar novos clientes</p>

</div>

</section>

Seção de conhecimentos e habilidades

Nesta seção, adicionamos um elemento simples com apenas conteúdo textual, que será customizado na nossa folha de estilo para que fique exatamente no modelo do layout apresentado anteriormente.

<div class="titulo-conhecimentos"><p>CONHECIMENTOS E HABILIDADES</p></div>

<p class="texto-conhecimentos">FIGMA</p>

<p class="texto-conhecimentos">PHOTOSHOP</p>

<p class="texto-conhecimentos">ILLUSTRATOR</p>

</div>

<p class="texto-conhecimentos">INDESIGN</p>

<p class="texto-conhecimentos">PREMIERE</p>

<p class="texto-conhecimentos">ADOBE XD</p>

</div>

<p class="texto-habilidades">DESIGN GRÁFICO</p>

<p class="texto-habilidades">REVISÃO</p>

<p class="texto-habilidades">EDITORAÇÃO</p>

</div>

<p class="texto-habilidades">INBOUND MARKETING</p>

<p class="texto-habilidades">MÍDIA</p>

<p class="texto-habilidades">EDIÇÃO DE VÍDEO</p>

</div>

</section>

Rodapé

O <footer>, ou apenas rodapé em português, possui as entradas de dados a partir dos inputs, os placeholders, que são as palavras que aparecem dentro do input para indicar o que precisa ser preenchido, e os textos complementares.

<p id="titulo-rodape">Curtiu?</p>

<p id="texto-rodape-contato">Entre em contato pelo formulário ou pelo e-mail abaixo<br> e vamos conversar!</p>

<p id="texto-rodape">eduarda@meuportfolio.com</p>

</div>

<button type="submit" class="btn-form">Enviar</button>

</form>

</footer>

style.css

Na próxima etapa do nosso projeto, adicionaremos à folha de estilo as classes e ids, que incluímos anteriormente no nosso código HTML, para customizar nossa página.

Como utilizamos uma fonte externa, precisamos importá-la no nosso projeto. A fonte escolhida foi a Montserrat, do Google Fonts.

@import url('<https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap>');

Agora, iremos “resetar” as configurações que, por padrão, já incorporam nossa página, além de adicionar nossa fonte principal que será utilizada em todo o projeto.

margin:0;

padding:0;

box-sizing: border-box;

text-decoration: none;

font-family: 'Montserrat', sans-serif;

}

Menu

A estilização do menu, que é bem simples e possui apenas um link ancorado no rodapé da nossa página, ficou desta forma:

.menu-item{

display: flex;

justify-content: right;

padding: 24px;

color: #254E70;

text-decoration: none;

padding-right: 5%;

font-weight: bold;

}

Seção principal

Neste trecho, customizamos a primeira seção do nosso projeto.

.textos-principal{

display: flex;

flex-direction: column;

color:#254E70;

}

#texto-identificacao{

background-color: #254E70;

color: #ffffff;

font-size: 35px;

border: 1px #254E70 solid;

padding: 10px 40px 10px 20px;

border-radius: 40px;

width: 270px;

}

#imagem-menina{

width: 24%;

}

Seção de serviços

A seção de serviços foi customizada da seguinte forma:

.servicos{

display: flex;

margin-top: 5%;

text-align: center;

gap: 30px;

place-content: center;

}

.btn-danger{

background-color: #C33C54;

padding: 25px;

border: none;

border-radius: 35px;

color: #ffffff;

}

.custom-popover, .popover-body{

color: #254E70;;

}

Seção de cases

Os título e os cards são personalizados no código abaixo:

.titulo-cases{

color: #C33C54;

font-size: 20px;

text-align: center;

}

.titulo-cases {

margin-top: 5%;

}

.cartoes{

display: flex;

place-content: center;

gap: 2%;

color: #254E70;

border-color: #254E70;

}

Seção de conhecimentos e habilidades

Este trecho do código contém a estilização dos elementos textuais adicionados na seção de conhecimentos e habilidades. Repare que tudo foi posicionado, alinhado, contornado e colorido com o uso do CSS.

.titulo-conhecimentos{

color: #C33C54;

font-size: 20px;

text-align: center;

margin-top: 1%;

}

.itens-conhecimentos{

margin-top: 2%;

display: flex;

gap: 13px;

justify-content: center;

}

.itens-conhecimentos-coluna-um, .itens-conhecimentos-coluna-dois, .itens-conhecimentos-coluna-tres, .itens-conhecimentos-coluna-quatro{

display: flex;

flex-direction: column;

}

.texto-conhecimentos, .texto-habilidades{

border: 1px solid;

padding: 10px;

border-radius: 30px;

text-align: center;

}

.texto-conhecimentos{

color:#254E70;

border-color: #254E70;

}

.texto-habilidades{

border-color: #C33C54;

color:#C33C54

}

Rodapé

Agora, estilizaremos o rodapé da nossa página, que é composto por texto e um componente de formulário:

#rodape{

display: flex;

gap: 110px;

padding: 120px 0 150px 0;

place-content: center;

}

#inputText, #inputEmail, #inputSubject, #inputTextArea{

background-color: #254E70;

border: none;

padding: 0 0 5px 0;

font-weight: bold;

}

.form{

display: flex;

flex-direction: column;

gap: 5px;

width: 350px;

}

#titulo-rodape{

font-size: 20px;

font-weight: bold;

color: #254E70;

}

#texto-rodape-contato{

font-style: italic;

color: #254E70;

}

#texto-rodape-titulo-email{

font-weight: bold;

color: #254E70;

}

#texto-rodape{

color: #254E70;

margin-top: -20px;

}

::placeholder{

color: #ffffff;

font-size: 12px;

padding: 10px;

}

.btn-form{

background-color:#C33C54;

width: 120px;

margin-left: auto;

border-radius: 80px;

border: none;

color: #ffffff;

font-weight: bold;

}

Responsividade

Precisamos pensar na responsividade do nosso código, ou seja, a página precisa se adaptar a determinados tamanhos de tela e dispositivos. Para isto, utilizamos o media query (@media), que permite adicionar estilizações específicas certas condições.

Para dispositivos com largura de tela de, no máximo, 600px, as estilizações serão as seguintes:

@media (max-width: 600px){

.textos-principal{

display: flex;

flex-direction: column;

color:#254E70;

font-size: 11px;

padding-left: 10px;

}

#texto-identificacao{

background-color: #254E70;

color: #ffffff;

font-size: 20px;

border: 1px #254E70 solid;

padding: 10px 40px 10px 20px;

border-radius: 40px;

width: 200px;

}

#imagem-menina{

width: 30%;

}

.servicos{

display: flex;

margin-top: 5%;

text-align: center;

place-content: center;

gap: 1%;

}

.btn-danger{

background-color: #C33C54;

padding: 10px;

border: none;

border-radius: 35px;

color: #ffffff;

width: 100px;

font-size: 9px;

}

.texto-conhecimentos, .texto-habilidades{

border: 1px solid;

padding: 7px;

border-radius: 30px;

text-align: center;

font-size: 9px;

}

#rodape{

display: flex;

gap: 20px;

padding: 60px 40px 60px 40px;

place-content: center;

font-size: 12px;

}

Confira como ficou:

Para dispositivos maiores, com largura de tela de até 1000px, as estilizações ficaram as seguintes:

@media (min-width: 600px) and (max-width: 1000px){

.textos-principal{

display: flex;

flex-direction: column;

color:#254E70;

font-size: 15px;

padding-left: 10px;

}

#texto-identificacao{

background-color: #254E70;

color: #ffffff;

font-size: 30px;

border: 1px #254E70 solid;

padding: 10px 40px 10px 20px;

border-radius: 40px;

width: 250px;

}

#imagem-menina{

width: 40%;

}

.servicos{

display: flex;

margin-top: 5%;

text-align: center;

place-content: center;

gap: 1%;

}

.btn-danger{

background-color: #C33C54;

padding: 20px;

border: none;

border-radius: 35px;

color: #ffffff;

width: 150px;

font-size: 9px;

}

.texto-conhecimentos, .texto-habilidades{

border: 1px solid;

padding: 7px;

border-radius: 30px;

text-align: center;

font-size: 15px;

}

#rodape{

display: flex;

gap: 20px;

padding: 60px 40px 60px 40px;

place-content: center;

font-size: 12px;

}

Confira o resultado:

app.js

Para que nosso popover funcione, precisamos adicionar alguns comandos em Javascript. Estes estão descritos na própria documentação do componente e você pode conferir abaixo:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')

const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Neste trecho, buscamos os dados do nosso componente pelo atributo data-bs-toggle com o método document.querySelectorAll() e inicializamos um novo objeto Popover para cada um destes elementos usando a biblioteca do Bootstrap, armazenando-os na constante chamada popoverList.

Finalizamos nosso tutorial!

Neste artigo, você aprendeu como criar uma página de portfólio para apresentar os seus conhecimentos e habilidades, além de cases e serviços utilizando alguns componentes do Bootstrap.

💡

As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.