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

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

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 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 ja CSS-verkkoliukuväri käsittelevät aihetta lisää.

.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;
}

Jos lisäät liikettä, animoi hitaasti, pidä sanat paikallaan ja huomioi prefers-reduced-motion. Vähennetty liike kertoo miten. Hieman rakeisuutta peittää suuren tumman liukuvärin sävyportaat. Katso CSS-kohinatekstuuri.

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.

.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;
}

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 kertoo kuvien luomisesta koontivaiheessa. Open Graph -kuvan koko kattaa rajaukset.

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 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.