Näin uudistin sivustoni teeman

Jokavuotiseen tapaan päätin uudistaa oman portfoliosivustoni. Oma sivusto on elänyt vuosien varrella; joitain vuosia takaperin tyydyin käyttämään valmiita portfolioalustoja mutta nykyisin koko sivusto on rakennettu täysin itse WordPressillä. Into ja kyky koodata oma saitti on kasvanut sitä mukaa kun kokemus WordPressistä on vuosien varrella kasvanut. Tässä lyhyt yhteenveto, miten uudistin oman sivustoni tällä kertaa.

Design

Suunnittelin sivun peruspohjan Sketchissä. Layoutina sivusto on yksinkertainen one-pager, mutta peruselementit on silti helppoa ja nopeinta suunnitella Sketchissä. Tuunasin layoutia vain hieman viimekertaisesta lähinnä uudistamalla kuvat, vaihtamalla fontin ja jämäköittämällä tekstejä. Etusivun taustalle lisäsin tällä kertaa orgaanisen aaltomuoto, joka tuo kontrastia ja elävyyttä muutoin teräväkulmaiseen layoutiin.

WordPress & oma teema

Sivuston perusta pohjautuu löyhästi pari vuotta sitten Udemyn kautta katsomani WordPress tutoriaali-kurssin pohjaan. Kurssissa opetettiin rakentamaan WordPress-teema alusta asti; teemasta ei siis löydy mitään turhaa! Teeman rakenne on todella kevyt ja siinä käytetään moderneja standardityökaluja, kuten NPM ja Webpack. Tällaiselle suunnittelija-koodari hybridille teeman kehitys on todella helppoa.

PostCSS

Sivuston tyylit on tehty PostCSS:nä. Omat devipuolen hommani ovat lähteneet alkujaan CSS:n tyylittelystä. Olen tarkka sivustojen visuaalisten tyylien suhteen ja jatkuvien muutosten pyytäminen devaajilta tuntui tehottomalta työtavalta. Eipä aikaakaan kun sain projekteihin oman kehitysympäristön käyttöön, jossa pääsen muokkaamaan sivuston tyylejä. Todella kätevää! Myös tämän sivuston tyylittely on tehty SCSS:nä ja eri elementtien tyylitiedostot on jaettu omiin tiedostoihinsa.

ACF & muokattavat kentät

Viime aikoina olen töiden puolesta päässyt hyppäämään myös devauksen syvään päähän ja opettelemaan, miten teemasta tehdään oikeasti muokattava; myös tämän sivuston sisältöjä on mahdollista muokata WordPressin ylläpitonäkymässä Advanced Custom Fieldsin (ACF) avulla. Aikaisemmat versiot portfoliostani käyttivät suoraan teemaan kovakoodattuja WP-templateja ja kaikki sisällöt täytyi syöttää käsin suoraan teeman koodiin. Helppoa kun sivustoa päivitetään korkeintaan pari kertaa vuodessa mutta ei ideaalia, jos sisältöjä halutaan muuttaa jälkikäteen. Otin vihdoin asiakseni tehdä kentistä muokattavia. Pystyn muokkaamaan esittelytekstejä ja ACF on pitkään ollut WP-skenessä yleisin tapa tuoda lisäkenttiä ylläpitonäkymän puolelle.

Gsap & animaatiot

Oma portfolio ei tuntuisi viimeistellyltä ilman kevyitä animointeja. Viimeisen vuoden aikana olen hurahtanut Gsap työkaluun, jota käytetään todella monista näyttävästi animoiduista sivustoista. Gsapin avulla on mahdollista lisätä animointeja helposti, työkalu hoitaa monimutkaisen logiikan taustalla. Tällä sivustolla hyödynsin myös Gsapin uutta scroll trigger ominaisuutta, jonka avulla animointeja on mahdollista sitoa käyttäjän skrollaukseen. Tässä pieni Gsap-testidemo Codepenissä.

Haaveet jatkossa

Omalle sivustolle olisi mielenkiintoista tuoda WebGL-efektejä. Olen tutustunut tähän maailmaan Codropsin hyvien tutoriaalien kautta. Olen viime aikoina perehtynyt myös curtains.js-työkaluun, jolla on mahdollista tuoda webgl-efektejä tiettyyn kohtaan sivustoa. Tämän opettelu vaatii kuitenkin vielä tutustumista lisää aiheeseen. Ylipäätään webgl on tekniikka, jota haluaisin käyttää enemmän omassa suunnittelussani. Sen avulla layouteista on mahdollista tehdä vieläkin dynaamisempia. Nähtäväksi jää mitä kaikkea keksin portfolioni seuraavaan versioon.