📝 Esittely
Tämä projekti oli ammattimainen portfolio- ja B2B-verkkosivusto “The Game Mechanics” studiolle. Asiakas on lautapelien suunnittelijatiimi, joka tarvitsi sivuston, joka esittelee heidän töitä ja palveluita muille yrityksille.
Minun roolini oli projektin koko tekninen toteutus: suunnittelu, kehitys ja julkaisu. Rakensin sivuston alusta loppuun asiakkaan tarpeiden pohjalta.
✨ Tärkeimmät ominaisuudet:
- 🎨 Helppo sisällönhallinta: Asiakas voi itse lisätä, muokata ja poistaa portfolioonsa kuuluvia pelejä helppokäyttöisen DecapCMS hallintapaneelin kautta.
- ⚡️ Nopea ja moderni: Sivusto on rakennettu Astro-teknologialla, mikä tekee siitä erittäin nopean ja suorituskykyisen.
- 🛡️ Turvallisuus: Sivustolla on vahvat turvallisuusasetukset (kuten CSP ja muut säännöt netlifyssä), jotka suojaavat sitä hyökkäyksiltä.
- 🔄 Dynaaminen portfolio: Pelien tiedot haetaan automaattisesti Markdown-tiedostoista, joten etusivun portfolio-ruudukko päivittyy itsestään, kun asiakas lisää uuden pelin.
🛠️ Käytetyt teknologiat:
- Frontend: Astro, Bootstrap, Bootstrap Icons
- Sisällönhallinta: Decap CMS
- Palvelin ja julkaisu: Netlify
- Tietoturva: HTTP Security Headers
🎯 Tarkoitus ja tavoite
Projektin tavoite oli luoda ammattimainen ja luotettava “käyntikortti” pelisuunnittelutiimille. Heidän piti pystyä esittelemään laajaa portfoliota helposti ja selkeästi mahdollisille uusille kumppaneille.
Tärkein vaatimus oli, että asiakkaan täytyy pystyä hallinnoimaan pelilistaustaan itse ilman, että heidän tarvitsee osata koodata. Tämän vuoksi helppokäyttöinen hallintapaneeli oli projektin ytimessä.
Tämän projektin “paras ominaisuus” on kahden asian yhdistelmä: Astro-teknologian tuoma nopeus ja Decap CMS:n tuoma helppo ylläpito asiakkaalle.
🔧 Tekniset haasteet ja ratkaisut:
😟 Haaste: Helppo ylläpito ilman hidastumista
Yleensä helppo sisällönhallinta (kuten WordPress) tekee sivustoista hitaampia. Tavoite oli pitää sivu staattisena ja huippunopeana, mutta antaa asiakkaalle silti täysi kontrolli sisältöön.
✅ Ratkaisu: Rakensin sivuston Astrolla, joka on staattinen sivugeneraattori:
Yhdistin siihen Decap CMS:n. Kun asiakas lisää uuden pelin, hän täyttää yksinkertaisen lomakkeen. Decap CMS luo tästä uuden Markdown-tiedoston. Astro huomaa tämän tiedoston, ja rakentaa koko sivuston uudelleen staattiseksi HTML-sivuksi. Lopputulos? Asiakas saa helpon napin painalluksen, ja käyttäjä saa huippunopean sivun.
😟 Haaste: Turvallisuus B2B-sivustolla
Koska sivusto on suunnattu yrityksille, sen on oltava erityisen luotettava ja turvallinen.
✅ Ratkaisu: Pelkän staattisen sivuston käyttö on jo itsessään turvallista (ei tietokantoja, joihin murtautua)
Lisäksi määritin netlify-palvelimessa tiukat turvallisuussäännöt (Content Security Policy, X-Frame-Options, jne.). Nämä säännöt estävät yleisimmät selainpohjaiset hyökkäykset ja varmistavat, että sivusto on ammattimainen ja turvallinen.
📊 Mittarit & Standardit
Tämä projekti on erinomainen esimerkki staattisen sivuston eduista. Se on optimoitu alusta asti olemaan nopea ja turvallinen.
🚀 Suorituskyky
- Sivusto on rakennettu Astrolla, mikä tarkoittaa, että sivut ovat valmiiksi rakennettua HTML:ää. Tämä takaa välittömät latausajat ilman tietokantaviiveitä.
- Kaikki kuvat käytetään modernissa WebP-muodossa, mikä pienentää tiedostokokoa huomattavasti laadusta tinkimättä.
- CSS ladataan kriittisenä ja JavaScript viivästetysti
defer, jotta sivun sisältö piirtyy käyttäjän ruudulle mahdollisimman nopeasti.
🔍 Hakukoneoptimointi
- Sivustolla on automaattisesti generoituva sivukartta (sitemap) ja robots.txt-tiedosto hakukoneita varten.
- Jokaisella sivulla on
astro-seo-metadata-komponentin avulla hallitut otsikot, kuvaukset ja Open Graph-tiedot sosiaalista mediaa varten. - Sivusto käyttää oikeita HTML5-elementtejä (
header, main, article), mikä auttaa hakukoneita ymmärtämään sisältöä paremmin.
🛡️ Tietoturva
Netlify.toml-tiedostossa on määritetty tiukat turvallisuussäännöt, kuten HSTS (pakotettu HTTPS), X-Frame-Options (estää sivuston upottamisen toiseen sivuun) ja CSP (Content Security Policy).- Koska sivusto ei käytä perinteistä tietokantaa, se on immuuni yleisimmille hyökkäyksille, kuten SQL-injektioille.
🤫 Yksityisyys
- Sivusto ei käytä seurantaevästeitä tai analytiikkaa, jotka keräisivät käyttäjätietoja ilman lupaa.
- Sivustolle on luotu selkeä tietosuojaseloste, joka kertoo avoimesti käytännöistä.
♿ Saavutettavuus
- Navigaatiossa ja linkeissä on käytetty
aria-label-attribuutteja, jotka auttavat ruudunlukijoita ymmärtämään painikkeiden tarkoituksen (esim. sosiaalisen median ikonit). - Sivusto on suunniteltu toimimaan kaikilla laitteilla mobiilista työpöytään.
- Kuvissa, jotka ovat vain koristeena, on
aria-hidden="true", jotta ne eivät häiritse ruudunlukijan käyttäjää.
🟢 Nykyinen tilanne
Sivusto on tällä hetkellä livenä ja aktiivisessa käytössä. Se toimii heidän pääasiallisena portfolionaan, kun he ovat yhteydessä uusiin julkaisijoihin ja kumppaneihin.
Asiakkaat ovat olleet erittäin tyytyväisiä siihen, miten helppoa uusien pelien lisääminen on ollut.
🎓 Opetukset
🤔 Ei-tekniset opit
Tämä projekti opetti paljon B2B-asiakkaiden kanssa työskentelystä. Heille tärkeintä on luotettavuus, ammattimaisuus ja ennen kaikkea helppokäyttöisyys. Selkeä ohjeistus on yhtä tärkeä kuin itse koodi.
🧑💻 Tekniset opit
Tämä projekti oli täydellinen esimerkki Astro + Decap CMS yhdistelmän voimasta. Se on ihanteellinen ratkaisu portfolio-sivustoille.
♿ Saavutettavuus
Bootstrap tarjoaa helppokäyttöisen kehyksen valmiille tyyleille, asettelutyökaluille ja interaktiivisille komponenteille, joiden avulla kehittäjät voivat luoda verkkosivustoja ja sovelluksia. Bootstrapilla on mahdollista luoda verkkosivustoja ja sovelluksia, jotka täyttävät WCAG 2.2 -standardin.
