Sezioni: hero personale, presentazione, portfolio, contatti

Ora che la struttura HTML esiste, possiamo rendere riconoscibili le sezioni principali del portfolio: hero, presentazione, progetti e contatti.

L’obiettivo non è aggiungere decorazioni casuali. Ogni stile deve aiutare l’utente a capire dove si trova, cosa può leggere e quale azione può compiere.

Hero personale

La hero è il primo blocco importante della pagina. Deve comunicare subito chi sei e cosa fai.

.hero {
  display: grid;
  gap: var(--spazio-lg);
  align-items: center;
  padding-block: var(--spazio-xl);
}

.hero-copy {
  max-width: 42rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1;
  margin-bottom: var(--spazio-md);
}

.hero p {
  color: var(--clr-testo-chiaro);
  font-size: 1.125rem;
  margin-bottom: var(--spazio-lg);
}

.hero-photo {
  width: min(100%, 22rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

@media (width >= 768px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  }
}

La foto usa aspect-ratio e object-fit, quindi resta stabile e non deforma il volto.

Presentazione

La sezione “Chi sono” deve essere leggibile. Non serve riempirla di effetti: testo chiaro, larghezza controllata e buona spaziatura.

.about {
  max-width: 48rem;
  padding-block: var(--spazio-xl);
}

.about h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--spazio-md);
}

.about p {
  color: var(--clr-testo-chiaro);
}

Portfolio

La griglia dei progetti usa CSS Grid. Ogni card deve avere dimensioni prevedibili, testo leggibile e link evidente.

.project-grid {
  display: grid;
  gap: var(--spazio-lg);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.card {
  background-color: var(--clr-card);
  border: 1px solid color-mix(in srgb, var(--clr-testo) 12%, transparent);
  border-radius: var(--raggio);
  overflow: hidden;
}

.card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.card-body {
  padding: var(--spazio-md);
}

.card-body h3 {
  margin-bottom: var(--spazio-sm);
}

.card-link {
  display: inline-block;
  margin-top: var(--spazio-md);
  font-weight: 700;
  color: var(--clr-brand);
}

Contatti

La sezione contatti deve rendere l’azione finale semplice. Se vuoi essere contattato, l’email deve essere un link reale.

.contact {
  padding-block: var(--spazio-xl);
}

.contact ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-md);
}

.contact a {
  color: var(--clr-brand);
  font-weight: 700;
}

Stati interattivi

I link e i bottoni devono reagire a hover e focus.

.btn,
.card-link,
.contact a {
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--clr-brand);
  outline-offset: 4px;
}

Evita transition: all: animare tutto può causare comportamenti imprevisti. Dichiara solo le proprietà che vuoi animare.

Esercizi

Base · facile

Rendi la foto della hero un cerchio stabile che non deforma il volto, indipendentemente dalle proporzioni del file.

.hero-photo {
  width: min(100%, 22rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

Intermedio · medio

Applica gli stili a tutte e quattro le sezioni e verifica: la hero resta leggibile su mobile, la griglia progetti passa da una a più colonne senza rompersi, ogni link/bottone mostra un focus visibile con :focus-visible. Evita transition: all.

Sfida · difficile

Rivedi la coerenza visiva dell’intero portfolio: spiega come le variabili di spaziatura e colore tengono unite le sezioni, perché clamp() sul titolo hero migliora la scalabilità, e come stati :hover/:focus-visible ben definiti contribuiscono sia all’estetica sia all’accessibilità. Indica un eccesso decorativo da evitare e perché.