📝 Esittely
“Just Games” on helsinkiläinen peliyritys, joka tarvitsi uuden kodin peleilleen verkossa. Vanha sivusto ei enää palvellut heidän tarpeitaan.
Rakensin heille uuden sivuston alusta asti käyttäen modernia Astro-teknologiaa. Tavoitteena oli luoda sivu, joka on visuaalisesti “pelimäinen”, mutta teknisesti erittäin kevyt ja nopea.
✨ Tärkeimmät ominaisuudet:
- 🃏 Interaktiiviset pelikortit: Etusivulla pelit esitellään korteilla, jotka kääntyvät ympäri (flip-card), kun niitä klikkaa tai koskettaa.
- 📂 Press-Kit sivut: Jokaiselle pelille on oma lehdistösivu, josta toimittajat voivat ladata logot, kuvat ja tiedotteet helposti.
- 👥 Tiimisivu: Esittelee pelien tekijät tyylikkäästi.
- 🍪 Evästehallinta: Sisältää linkit tietosuojakäytäntöihin.
🛠️ Käytetyt teknologiat:
- Framework: Astro (v5)
- Tyylit: CSS3 (CSS Variables), responsiivinen design
- Hosting: Netlify
- Muuta: HTML-Validate (laadunvarmistus)
🎯 Tarkoitus ja tavoite
Asiakas halusi sivuston, jota on helppo ylläpitää, mutta joka ei ole sidottu kalliisiin tai hitaisiin valmispohjiin (kuten Wix). Tärkeää oli myös, että sivusto latautuu heti, sillä pelialalla visuaalisuus ja nopeus ovat valttia.
Tavoitteena oli myös varmistaa, että sivusto on teknisesti moitteeton (validi HTML) ja hakukoneystävällinen, jotta pelaajat löytävät studion pelit helposti.
Tämän projektin ydin on Astro-kehyksen hyödyntäminen. Astro mahdollistaa sen, että voin rakentaa sivun moderneilla komponenteilla (kuten Reactissa), mutta lopputulos on pelkkää kevyttä HTML:ää ilman raskasta JavaScript-kuormaa.
🔧 Tekniset haasteet ja ratkaisut:
Haaste: Näyttävät animaatiot ilman hidastelua.
Halusin etusivun pelikorteille hienon kääntöefektin (“flip effect”). Yleensä tähän käytetään JavaScript-kirjastoja, jotka hidastavat sivua.
✅ Ratkaisu: Toteutin kääntöefektin puhtaalla CSS:llä Tämä on selaimelle erittäin kevyttä piirtää. Kortit toimivat sulavasti myös vanhemmilla puhelimilla ilman yhtäkään riviä ylimääräistä JavaScriptiä.
Haaste: Tietoturva ja “iframe”-upotukset.
Sivustolla on YouTube- ja Vimeo-videoita. Niiden turvallinen upottaminen voi olla riski.
✅ Ratkaisu: Määritin netlify.toml-tiedostoon tiukat CSP-säännöt
Ne kertovat selaimelle tarkasti, mistä lähteistä (esim. vain youtube-nocookie.com) sisältöä saa ladata. Tämä estää haitalliset koodit, jos joku yrittäisi hyökätä sivustolle.
📊 Mittarit & Standardit
Just Games kotisivu on optimoitu erityisesti nopeutta ja hakukonenäkyvyyttä silmällä pitäen.
⚡ Suorituskyky (Performance):
- Astro rakentaa sivut valmiiksi HTML-tiedostoiksi palvelimella. Käyttäjän selain ei joudu tekemään raskasta työtä, joten sivu aukeaa välittömästi.
- Kuvat ladataan laiskasti (loading=“lazy”) ja modernissa WebP/AVIF-muodossa.
🔍 Hakukoneoptimointi (SEO):
- Jokaisella pelisivulla on yksilölliset meta-kuvaukset ja Open Graph-kuvat, joten ne näyttävät hyvältä, kun linkin jakaa somessa.
- Sitemap: Astro luo automaattisesti sitemap.xml-tiedoston, joka auttaa Googlea löytämään kaikki sivut.
🔒 Tietoturva (Security):
- Sivusto käyttää Netlifyn kautta HSTS- ja X-Frame-Options -asetuksia, jotka suojaavat käyttäjää ja estävät sivuston luvattoman upottamisen toisaalle.
♿ Saavutettavuus (Accessibility):
- Tekstin ja taustan värit on valittu niin, että ne ovat helppolukuisia (tumma teema).
- Pelikortit ja valikot toimivat myös pelkällä näppäimistöllä (Tab-näppäin), mikä on tärkeää apuvälineitä käyttäville.
🟢 Nykyinen tilanne
Sivusto on julkaistu ja se toimii Just Games Ltd:n virallisena kotisivuna. Asiakas pystyy itse päivittämään sisältöä README.md-tiedostossa olevien ohjeiden avulla (esim. lisäämään uuden pelin kopioimalla tiedoston).
🎓 Opetukset
Tekniset opit
Tämä projekti vahvisti, että Astro on paras valinta sisältöpainotteisille sivuille. Opin myös käyttämään html-validate työkalua osana kehitystä, jotta HTML-koodi pysyy standardien mukaisena ja virheettömänä.
Suunnittelu: Opin tekemään “Press Kit” sivuja. Ymmärsin, että toimittajat tarvitsevat faktat (julkaisupäivä, alustat, kontaktit) nopeasti ja selkeästi listattuna, ilman turhaa kikkailua.
