Oman portfoliosivuston suunnittelu ja toteutus

Konteksti

Portfolioni oli aiemmin Notionissa. Sen osoite oli kuitenkin sekava. Halusin portfolion omalla nimelläni olevaan osoitteeseen ja kaikki langat omiin käsiini. Samalla halusin kokemusta oman sivuston tekemisestä – ja koska haen ensimmäistä työpaikkaani UX-alalta, itse sivustosta tuli yksi portfolion caseista.

Oma rooli ja prosessi

Työnjako oli selvä: minä tein päätökset, tekoäly (Claude) toteutti. Tein suunnittelupäätökset, kirjoitin sisällön, arvioin tulokset ja pyysin muutoksia – koodin kirjoitti tekoäly.

Aloitin vertailemalla vaihtoehtoja. Domainiksi valitsin roopepihlainen.fi:n ja välittäjän uusintahinnan perusteella, koska halpa ensimmäinen vuosi muuttuu usein kalliiksi uusittaessa. Alustaksi harkitsin Notionia omalla domainilla, Frameria ja omaa koodia. Valitsin oman koodin: Astro tuottaa nopeaa, valmista HTML:ää, ja Reactia käytetään vain siellä, missä tarvitaan vuorovaikutusta (teemanvaihto ja kuvagalleria). Sivusto julkaistaan Cloudflare Pagesissa, ja jokainen muutos päivittyy sivulle automaattisesti.

Ensimmäisen version jälkeen arvioin sivua kriittisesti: rakenne toimi, mutta sivu oli liian tekstipainotteinen – casekortit erottuivat toisistaan vain tekstin perusteella. Vertailin kolmea tyylisuuntaa (hiottu editoriaalinen, rohkea ja värikäs sekä minimalistinen ja tekninen) ja valitsin rohkean ja värikkään. Halusin erottua muista portfolioista, tyyli tuntuu omalta, leikkisyys sopii pelillistämiseen liittyvään taustaani, ja teksti kaipasi visuaalista vastapainoa. Uudistuksessa jokainen case sai oman värin ja piirretyn kansikuvan, case-sivuille tuli prosessikaavio, ja sisältö liukuu näkyviin vierittäessä.

Keskeiset löydökset

Mittaaminen paljasti asioita, joita silmällä ei huomannut. Lighthouse-mittaus näytti, että etusivun pääotsikko hyppäsi, kun fontti latautui (layout shift). Korjasimme sen esilataamalla fonttitiedostot, ja työpöytänäkymän suorituskykypisteet nousivat 91:stä 100:aan.

Saavutettavuus kannattaa rakentaa mukaan alusta asti eikä lisätä jälkikäteen. Sivustolla on näkyvä fokus, siirtymislinkki sisältöön, riittävän suuret kosketusalueet ja kontrastit molemmissa teemoissa, ja animaatiot ovat pois päältä, jos käyttäjä on pyytänyt laitteeltaan vähemmän liikettä. Jokainen muutos tarkistettiin axe-työkalulla (WCAG 2.1 AA).

Värit, fontit ja välit on määritelty design-tokeneina yhdessä paikassa. Siksi vaalea ja tumma teema syntyvät samasta järjestelmästä, ja koko ilmeen uudistus onnistui muuttamatta sisältöä.

Lopputulos ja oppi

Lopputuloksena on oma sivusto osoitteessa roopepihlainen.fi. Lighthouse-pisteet ovat saavutettavuudessa, parhaissa käytännöissä ja hakukoneoptimoinnissa 100 ja suorituskyvyssä 99–100, axe ei löydä virheitä, ja sivun koko on noin 200 kilotavua. Ylläpito maksaa vain domainin, noin 12 euroa vuodessa.

Opin, miten oma osoite hankitaan ja kytketään sivustoon nimipalvelimineen ja miten sivusto julkaistaan. Opin myös ohjaamaan tekoälyä ja arvioimaan sen tuloksia kriittisesti – tekoäly toteuttaa nopeasti, mutta päätökset, laadun arviointi ja vastuu sisällöstä pysyvät minulla. Lisäksi saavutettavuus ja design-järjestelmä muuttuivat teoriasta käytännöksi.