# Kehittäjän portfolio: sivusto, joka näyttää tyylitajusi

[Canonical HTML page](https://gradiently.design/fi/guide/developer-portfolio-design)

Kehittäjän portfoliota arvioidaan sekä linkittämäsi koodin että näkyvän huolellisuuden perusteella. Tässä toimiva rakenne, kopioitava hero-tausta, nopeasti luettavat projektikortit ja viimeistellyt linkkiesikatselut.

## The short version

- Hyvässä kehittäjän portfoliossa on neljä osaa: lyhyt aloitus, joka kertoo mitä rakennat, kolmesta kuuteen projektikorttia, lyhyt esittely ja helppo yhteydenottotapa.
- Kerroksittaisista CSS-liukuväreistä tehty hero-tausta latautuu heti ja näyttää tyylitajua ilman raskasta kuvaa.
- Projektikortin pitäisi kertoa ongelma, rakentamasi ratkaisu ja tulos sekä linkittää toimivaan projektiin ja koodiin.
- 1200×630-kokoinen Open Graph -kuva viimeistelee portfoliosi linkin hakemuksissa, keskusteluissa ja somejulkaisuissa.
- Muutama hyvin selitetty projekti tekee vahvemman portfolion kuin pitkä ruudukko tutoriaalitöitä.

Hyvä **kehittäjän portfolio** on pieni ja nopea sivusto, jossa on neljä osaa: yhdellä rivillä työsi kertova aloitus, kolmesta kuuteen projektikorttia ongelmasta ja omasta roolistasi sen ratkaisussa, lyhyt esittely ja yhteystiedot. Tyylitaju näkyy yksityiskohdissa: rauhallinen hero-tausta, yhtenäiset kortit, luettava teksti ja viimeistelty esikatselu, kun rekrytoija liittää osoitteesi rekrytointikanavalle. Tarvitset sivun, josta huolellisuus näkyy, et pelkkää kehysten esittelyä.

## Kehittäjän portfolion rakenne

| Osio | Tehtävä | Sopiva laajuus |
| --- | --- | --- |
| Hero-osio | Nimesi ja mitä rakennat | Yksi rivi ja yksi täydentävä lause |
| Projektit | Näyttö siitä, että saat valmista aikaan | Kolmesta kuuteen korttia |
| Esittely | Työtapasi ja mitä haluat seuraavaksi | Lyhyt kappale |
| Kirjoitukset tai puheet | Näyttää ajattelusi, valinnainen | Kolme linkkiä |
| Yhteystiedot | Helpottaa seuraavaa askelta | Sähköposti, GitHub, LinkedIn |

Yksi sivu riittää useimmille kehittäjille. Lisää projektisivuja vain töille, jotka ansaitsevat pidemmän tarinan.

Kerro mitä rakennat. ”Rakennan nopeita kassapolkuja verkkokaupoille” kertoo enemmän kuin ”Full stack -kehittäjä”. Uran alussa ”Rakennan saavutettavia verkkosovelluksia Reactilla ja Postgresilla” on rehellinen ja täsmällinen. [Hero-osion suunnittelu](https://gradiently.design/fi/guide/hero-section-design) auttaa ensimmäisen rivin kirjoittamisessa.

## Tyylitajua näyttävä hero-tausta

Moni portfolio käyttää joko tasaista valkoista sivua tai raskasta animoitua taustaa, joka viivästyttää kaikkea muuta. Kerroksittainen CSS-liukuväri on välimuoto: kaksi tai kolme pehmeää säteittäistä värialuetta tummalla tai vaalealla pohjalla. Muutama koodirivi ei vaadi verkkolatausta, mutta näyttää harkitulta. [Verkkosivun hero-tausta](https://gradiently.design/fi/guide/website-hero-background) ja [CSS-verkkoliukuväri](https://gradiently.design/fi/guide/css-mesh-gradient) käsittelevät aihetta lisää.

Syvä indigopohja hero-osiolle: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

Pohjakerros: yksi indigonsininen valoalue häipyy lähes mustaan. Riittävän rauhallinen valkoiselle tekstille kaikkialla.

```css
.hero {
  min-height: 70vh;
  color: #f4f4f8;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgb(56 189 248 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgb(124 58 237 / 0.45), transparent 70%),
    linear-gradient(180deg, #0e1020 0%, #07080f 100%);
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
}
```

Kahden valoalueen hero-tausta pelkällä CSS:llä. Pidä kirkkain alue otsikon ulkopuolella, jotta sanat säilyvät luettavina.

Jos lisäät liikettä, animoi hitaasti, pidä sanat paikallaan ja huomioi `prefers-reduced-motion`. [Vähennetty liike](https://gradiently.design/fi/guide/reduced-motion) kertoo miten. Hieman rakeisuutta peittää suuren tumman liukuvärin sävyportaat. Katso [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture).

## Projektikortit, jotka kertovat vaikutuksen

Projektikortilla on vain sekunteja perustella klikkaus. Anna jokaiselle samat neljä osaa: nimi, ongelma yhdellä lauseella, oma ratkaisusi ja tulos sekä linkit toimivaan projektiin ja koodiin. Tuloksen ei tarvitse olla suuri. ”30 hengen tiimimme käyttää tätä päivittäin” tai ”Sivun lataus nopeutui 4 sekunnista 1,2 sekuntiin” riittää, kun väite on tosi ja tulos omasi.

### Heikko kortti

- ”Sääsovellus” ja kuvakaappaus
- Kahdeksan teknologian luettelo
- Ei tietoa siitä, mitä teit itse
- Rikkinäinen demolinkki

### Vahva kortti

- ”Rota: vuorojen vaihto kahvilatiimille”
- Ongelma yhdellä lauseella
- Oma roolisi ja yksi mitattava tulos
- Toimiva linkki ja siisti koodivarasto

```css
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, #161a2e 0%, #0f1222 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}
```

Responsiivinen korttiruudukko. Kuvan kiinteä kuvasuhde pitää kortit samanmuotoisina, vaikka kuvakaappaukset vaihtelevat.

Kuvakaappaukset näyttävät viimeistellyiltä samalla taustalla. Aseta jokainen hero-taustan päälle pienin reunuksin erikokoisten raakakaappausten sijaan.

## Portfolion Open Graph -kuvat

Portfoliosi linkki päätyy hakemuksiin, rekrytoijien viesteihin, Slack-kanaviin ja somejulkaisuihin. Niissä näkyy **Open Graph -kuva**, kooltaan 1200×630 pikseliä. Tyhjä kortti tai rajattu kuvakaappaus heikentää sivustosi huolellista vaikutelmaa. Tee etusivulle kuva ja projektisivuille omat samalla asettelulla. [Dynaamiset OG-kuvat](https://gradiently.design/fi/guide/dynamic-og-images) kertoo kuvien luomisesta koontivaiheessa. [Open Graph -kuvan koko](https://gradiently.design/fi/guide/open-graph-image-size) kattaa rajaukset.

Kehittäjän portfolion vaakasuuntainen Open Graph -kuva, jossa on nimi ja yhden rivin kuvaus

Etusivun esikatselu: nimi ja yksi rivi, ei muuta.

Rota-portfolioprojektin vastaava Open Graph -kuva samalla liukuväritaustalla

Projektisivun esikatselu samalla asettelulla ja taustalla.

## Esittelyn ja yhteystietojen kirjoittaminen

Pidä esittely lyhyenä minä-muotoisena kappaleena: mitä rakennat mielelläsi, miten työskentelet ja mitä etsit seuraavaksi. Yksi lause elämästä koodin ulkopuolella sopii, kokonainen elämäkerta ei. Päätä sivu selkeään yhteydenottotapaan, yleensä kokonaan kirjoitettuun sähköpostiosoitteeseen sekä GitHubiin ja LinkedIniin. Lomake hidastaa rekrytoijaa, joka haluaa vain kopioida osoitteen viestiin. Jos haet muotoilua arvostavia tehtäviä, [henkilöbrändäys](https://gradiently.design/fi/guide/personal-branding) auttaa pitämään sivuston, CV:n ja profiilit yhtenäisinä.

## Pienet yksityiskohdat näyttävät tyylitajun

- **Yksi kirjasinperhe**, kaksi leikkausta. Hyvä päätteetön fontti kaikkeen, tasalevyinen vain koodiin.
- **Rivillä 60:stä 75:een merkkiä**, jotta leipätekstin kappaleet ovat mukavia lukea.
- **Todellinen kontrasti:** leipätekstin ja taustan pitäisi täyttää WCAG AA.
- **Favicon**, joka sopii hero-osion väreihin.
- **Nopea lataus:** neljä sekuntia avautuva kehittäjän portfolio kertoo jo itsessään jotain.
- **Tumma ja vaalea teema** vain, jos ylläpidät molempia kunnolla.

Jos et halua piirtää esikatselukuvia ja kuvakaappausten kehyksiä käsin, Gradiently tekee ne Markille. Sen elävä liukuväritausta pitää sanat luettavina. Prolla voit muuttaa yhden suunnitelman linkkiesikatseluksi, LinkedIn-julkaisuksi ja X-otsakekuvaksi yhdellä kertaa. Voit yhdistää Gradientlyn myös ChatGPT:hen ja Claudeen ja pyytää projektiesikatselusarjan samalla kun kirjoitat työn kuvauksia.

## FAQ

### Mitä kehittäjän portfolioon pitäisi sisällyttää?

Yhden rivin aloitus siitä, mitä rakennat, kolmesta kuuteen projektikorttia ongelmasta, ratkaisusta ja tuloksesta, lyhyt esittely ja yhteystiedot. Linkitä toimiviin projekteihin ja niiden koodiin.

### Kuinka monta projektia portfolioon kannattaa laittaa?

Kolmesta kuuteen hyvin selitettyä projektia on vahvempi kokonaisuus kuin pitkä ruudukko. Valitse töitä, jotka näyttävät millaista työtä haluat seuraavaksi.

### Minkä kokoinen portfolion Open Graph -kuva on?

1200×630 pikseliä. Pidä nimi ja yhden rivin kuvaus keskellä, jotta ne eivät rajaudu pois neliöesikatseluissa.

### Kannattaako kehittäjän portfoliossa käyttää animoitua taustaa?

Vain jos se on hillitty, ei hidasta sivua ja huomioi vähennetyn liikkeen asetuksen. Kerroksittainen CSS-liukuväri antaa vastaavan viimeistelyn lähes ilman suorituskykyhaittaa.