Deixe com cara profissional: estilizando o portfólio com CSS moderno

Aprenda a transformar a estrutura HTML do portfólio em uma página visualmente profissional usando CSS moderno, com cores, espaçamentos, cards, botões, layout responsivo inicial e organização de estilos.

Por Equipe Central Stack09/07/20269 minGuia prático

portfoliocsslayout cssfrontendprojetos práticosresponsividadeiniciantedesenvolvimento web

Envie este conteúdo para sua rede ou salve o link para publicar depois.

Trilha: Projeto Portfólio Profissional

Este conteúdo é a Parte 2 de 6 da trilha Projeto Portfólio Profissional. Acompanhe o hub da trilha: /projetos/criar-portfolio-profissional

Na Parte 1, você criou a estrutura HTML do portfólio. Agora vamos transformar essa base em uma página com aparência mais profissional usando CSS moderno, organizado e fácil de ajustar.

Introdução

HTML cria a estrutura da página, mas é o CSS que define a primeira impressão visual. Cores, espaçamentos, largura dos blocos, botões, cards e alinhamento ajudam o visitante a entender rapidamente o que é importante no seu portfólio.

Nesta etapa, o foco não é criar animações complexas nem responsividade completa. O objetivo é deixar a versão desktop bonita, organizada e pronta para receber ajustes de celular e tablet na próxima parte da trilha.

O CSS abaixo foi escrito para funcionar com a estrutura HTML criada na Parte 1. Use como base, teste no navegador e ajuste textos, cores e espaçamentos conforme sua identidade visual.

Criando o arquivo style.css

O primeiro passo é separar o estilo em um arquivo próprio. Isso deixa o HTML mais limpo e facilita a manutenção quando o projeto crescer.

estrutura

portfolio-profissional/
  index.html
  style.css
  script.js
  assets/
    foto-perfil.png

No index.html, o arquivo style.css deve estar conectado dentro do head. Se você seguiu a Parte 1, essa linha provavelmente já existe no seu projeto.

index.html

<link rel="stylesheet" href="style.css" />

Reset básico e variáveis de cor

Um reset simples evita diferenças estranhas entre navegadores. As variáveis em :root centralizam cores e valores importantes para você mudar o visual sem procurar a mesma cor em várias partes do arquivo.

style.css

/* Variáveis: troque aqui para mudar a identidade visual do projeto inteiro. */
:root {
  --bg: #080d1a;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f5f8ff;
  --muted: #9aa8c7;
  --accent: #2563eb;
  --accent-light: #60a5fa;
  --radius: 14px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

/* Reset: remove margens automáticas e deixa o cálculo de largura previsível. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base inicial: suaviza a rolagem e define uma fonte simples para o projeto. */
html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

Repare que cada comentário explica o bloco inteiro. Assim o estudante entende a intenção da parte sem perder a leitura do código linha por linha.

Estilizando o corpo da página

O body define o clima visual do portfólio. Aqui usamos fundo escuro, texto claro, boa altura de linha e uma proteção contra rolagem horizontal acidental.

style.css

/* Corpo da página: controla fundo, cor do texto e leitura geral. */
body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.2), transparent 34%),
    linear-gradient(180deg, #080d1a 0%, #0d1426 100%);
  color: var(--text);
  line-height: 1.7;
}

/* Elementos globais: deixam links e imagens mais fáceis de controlar no layout. */
a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* Espaçamento das seções: cria respiro vertical e lateral em cada bloco da página. */
section {
  padding: 72px 24px;
}

/* Container: centraliza o conteúdo e impede textos muito largos no desktop. */
.container {
  width: min(1100px, 100%);
  margin: 0 auto;
}

A classe .container limita a largura do conteúdo. Isso evita que textos e cards fiquem esticados demais em telas grandes.

Estilizando o menu

O menu precisa ser simples e previsível. Nesta etapa, vamos montar um topo fixo com logo à esquerda e links à direita. O menu mobile completo fica para a parte de responsividade e JavaScript.

style.css

/* Menu principal: fica no topo e cria uma separação visual do conteúdo. */
nav {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 13, 26, 0.86);
  backdrop-filter: blur(18px);
}

/* Área interna do menu: coloca logo e links na mesma linha. */
nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}

/* Logo: nome curto do portfólio com mais peso visual. */
.logo {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Links do menu: ficam alinhados em linha e com espaçamento regular. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

/* Estado dos links: cor discreta no repouso e destaque no hover. */
.nav-links a {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--accent-light);
}

O backdrop-filter cria um efeito de vidro leve no topo. Use com moderação, porque exagerar nesse tipo de efeito pode deixar a leitura pesada.

Estilizando a seção inicial

A seção inicial, também chamada de hero, é onde o visitante entende quem você é e o que deve fazer em seguida. Vamos criar duas colunas: texto de apresentação e imagem/avatar genérico.

style.css

/* Hero: divide a primeira dobra em texto de apresentação e imagem. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  align-items: center;
  gap: 56px;
  min-height: calc(100vh - 72px);
  padding-top: 96px;
  padding-bottom: 96px;
}

/* Título do hero: grande, forte e com largura controlada. */
.hero-content h1 {
  max-width: 720px;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

/* Textos de apoio: função/cargo em destaque e descrição mais suave. */
.role {
  margin-top: 16px;
  color: var(--accent-light);
  font-size: 1.15rem;
  font-weight: 800;
}

.lead {
  max-width: 620px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1.08rem;
}

/* Botões do hero: ficam lado a lado e podem quebrar linha se faltar espaço. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Imagem do hero: cria uma moldura circular para foto ou avatar. */
.hero-image {
  justify-self: center;
  width: min(280px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(96, 165, 250, 0.08));
  box-shadow: 0 0 60px rgba(37, 99, 235, 0.28);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Mesmo usando uma imagem genérica no início, mantenha o alt descritivo no HTML. Acessibilidade também faz parte de um portfólio profissional.

Estilizando cards e seções

Cards ajudam a separar informações rápidas, habilidades e projetos. A ideia é criar uma aparência consistente para que o portfólio pareça um sistema único, não várias partes soltas.

style.css

/* Títulos e descrições: mantêm hierarquia visual e boa leitura. */
h2 {
  margin-bottom: 18px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
}

section > p,
.section-description {
  max-width: 760px;
  color: var(--muted);
}

/* Grids: organizam informações, habilidades e projetos em colunas. */
.info-cards,
.skills-grid,
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

/* Aparência dos cards: borda, fundo, sombra e arredondamento reutilizados. */
.card,
.skills-grid li,
.project-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card,
.project-card {
  padding: 22px;
}

/* Lista de habilidades: transforma cada item em um card pequeno. */
.skills-grid {
  list-style: none;
}

.skills-grid li {
  padding: 18px;
  color: var(--text);
  font-weight: 700;
}

/* Textos internos dos cards: título forte e descrição mais leve. */
.card strong,
.project-card h3 {
  color: var(--text);
}

.card p,
.project-card p {
  margin-top: 8px;
  color: var(--muted);
}

/* Interação dos projetos: hover leve para indicar que o card pode ser explorado. */
.project-card {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.45);
  background: var(--surface-hover);
}

O mesmo padrão visual aparece em cards, habilidades e projetos. Isso economiza CSS e deixa a interface mais coesa.

Estilizando botões e links

Botões precisam deixar clara a ação principal. Use um botão primário para a ação mais importante e um botão secundário quando a ação for complementar.

style.css

/* Botão principal: usado para a ação mais importante da seção. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.3);
  background: #1d4ed8;
}

/* Botão secundário: usado para uma ação complementar, com menos peso visual. */
.btn-outline {
  background: transparent;
  color: var(--accent-light);
  border-color: rgba(96, 165, 250, 0.45);
}

.btn-outline:hover {
  background: rgba(96, 165, 250, 0.1);
}

/* Links nos cards de projeto: ficam destacados sem parecer botão principal. */
.project-card a {
  color: var(--accent-light);
  font-weight: 800;
}

.project-card a:hover {
  text-decoration: underline;
}

No hero, o botão primário pode levar para projetos. O secundário pode levar para contato. Essa hierarquia visual ajuda o visitante a escolher o caminho mais importante.

Organização do CSS

Quando o CSS cresce sem ordem, qualquer manutenção vira caça ao tesouro. Uma organização simples já evita muita confusão.

Variáveis: cores, sombras, radius e valores repetidos.
Reset: box-sizing, margin, padding e regras globais.
Base: body, links, imagens, containers e seções.
Layout: menu, hero, grids e colunas principais.
Componentes: botões, cards, listas e elementos reutilizáveis.
Seções: ajustes específicos de sobre, habilidades, projetos e contato.
Responsividade futura: media queries para celular, tablet e desktop.

Nesta parte, vamos deixar a base pronta. Na Parte 3, a responsividade será trabalhada com mais calma usando media queries.

CSS completo desta etapa

Abaixo está uma versão organizada do style.css desta etapa. Ela mantém a ideia visual moderna, usa dados genéricos e combina com o HTML criado na Parte 1.

style.css

/* 1. Variáveis: controle central de cores, sombras e medidas repetidas. */
:root {
  --bg: #080d1a;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f5f8ff;
  --muted: #9aa8c7;
  --accent: #2563eb;
  --accent-light: #60a5fa;
  --radius: 14px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

/* 2. Reset e base: limpa padrões do navegador e define comportamento geral. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.2), transparent 34%),
    linear-gradient(180deg, #080d1a 0%, #0d1426 100%);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

section {
  padding: 72px 24px;
}

.container {
  width: min(1100px, 100%);
  margin: 0 auto;
}

/* 3. Menu: topo fixo, logo à esquerda e navegação à direita. */
nav {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 13, 26, 0.86);
  backdrop-filter: blur(18px);
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 24px;
}

.logo {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--accent-light);
}

/* 4. Hero: primeira dobra com apresentação, botões e imagem/avatar. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  align-items: center;
  gap: 56px;
  min-height: calc(100vh - 72px);
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero-content h1 {
  max-width: 720px;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.role {
  margin-top: 16px;
  color: var(--accent-light);
  font-size: 1.15rem;
  font-weight: 800;
}

.lead {
  max-width: 620px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-image {
  justify-self: center;
  width: min(280px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(96, 165, 250, 0.08));
  box-shadow: 0 0 60px rgba(37, 99, 235, 0.28);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5. Botões: ação principal preenchida e ação secundária vazada. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.3);
  background: #1d4ed8;
}

.btn-outline {
  background: transparent;
  color: var(--accent-light);
  border-color: rgba(96, 165, 250, 0.45);
}

.btn-outline:hover {
  background: rgba(96, 165, 250, 0.1);
}

/* 6. Seções e cards: grid, cards de informação, habilidades e projetos. */
h2 {
  margin-bottom: 18px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
}

section > p,
.section-description {
  max-width: 760px;
  color: var(--muted);
}

.info-cards,
.skills-grid,
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.card,
.skills-grid li,
.project-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card,
.project-card {
  padding: 22px;
}

.skills-grid {
  list-style: none;
}

.skills-grid li {
  padding: 18px;
  color: var(--text);
  font-weight: 700;
}

.card strong,
.project-card h3 {
  color: var(--text);
}

.card p,
.project-card p {
  margin-top: 8px;
  color: var(--muted);
}

.project-card {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.45);
  background: var(--surface-hover);
}

.project-card a {
  color: var(--accent-light);
  font-weight: 800;
}

.project-card a:hover {
  text-decoration: underline;
}

/* 7. Rodapé: fechamento simples e discreto da página. */
footer {
  border-top: 1px solid var(--border);
  padding: 28px 24px;
  color: var(--muted);
  text-align: center;
}

Próximo passo da trilha

Agora o portfólio já tem uma aparência profissional em desktop. A próxima parte será dedicada ao JavaScript: adicionar interações simples para melhorar a experiência do visitante.

A Parte 3 está disponível na URL /projetos/portfolio-javascript-interacoes. Nela, vamos criar menu mobile, fechamento automático, menu com rolagem, revelação de elementos e link ativo por seção.

Compartilhar

Trilha: Projeto Portfólio Profissional

Introdução

Criando o arquivo style.css

Reset básico e variáveis de cor

Estilizando o corpo da página

Estilizando o menu

Estilizando a seção inicial

Estilizando cards e seções

Estilizando botões e links

Organização do CSS

CSS completo desta etapa

Próximo passo da trilha

Fontes utilizadas