Portfolionettisivu

Sivuston toteutuksesta

Tämä portfolionettisivu on tehty käyttäen HTML:ää, CSS:ää ja JavaScript:iä. Nettisivu on hostattu GitHubissa hyödyntäen GitHub Pages -palvelua.

Responsiivisuus

Sivusto on suunniteltu responsiiviseksi. Se mukautuu sulavasti eri kokoisiin näyttöihin ja pysyy selkeänä, eheänä ja visuaalisesti miellyttävänä niin tietokoneen kuin älypuhelimen näytöllä.

Saavutettavuus

Sivua kehitettäessä olen yrittänyt parhaani mukaan ottaa huomioon myös saavutettavuuden. Saavutettavuuteen liittyviä huomioita sivun kehittämisestä:

Olen pyrkinyt varmistamaan että tekstin ja taustan välillä on tarpeeksi suuri kontrasti.
Kuvat, jotka ovat osa sivuston sisältöä, on varustettu niiden sisältöä kuvaavilla alt-teksteillä.
Sivustolla on muutamia CSS-animaatioita. Animaatiot kuitenkin poistetaan käytöstä CSS:n prefers-reduced-motion-mediaqueryllä niiltä käyttäjiltä, jotka ovat asettaneet laitteensa näyttämään vähemmän animaatioita.
Olen pyrkinyt käyttämään HTML-elementtejä semanttisesti oikein. Yksi kehityksen kohde tähän liittyen olisi hyödyntää laajemmin HTML5:n semanttisia elementtejä: osan sivuston <div>-elementeistä voisi vaihtaa paremmin sisällön rakennetta kuvaaviin elementteihin.

Kielenvaihto-ominaisuus

Sivusto on toteutettu sekä suomeksi että englanniksi. Kielenvaihto-ominaisuus on kokonaan itse toteutettu. Toimintaperiaatteeltaan se on yksinkertainen: jokainen sivuston html-dokumentti sisältää kaiken sisällön sekä suomeksi että englanniksi, ja riippuen siitä, kumpi kieli on valittuna, toiset elementit piilotetaan ja toiset näytetään. Ominaisuus on toteutettu JavaScript-koodilla.

Ominaisuuden toteutuksessa on myös otettu huomioon, että joillain käyttäjillä voi olla selaimessaan päällä JavaScript-koodin esto. Tällaisessa tapauksessa sivusto näytetään englanninkielisenä.

Sivuston kieltä ohjataan sekä sivun osoitteen loppuun lisättävällä hakuparametrilla että selaimen LocalStorageen tallennettavalla muuttujalla. Hakuparametri mahdollistaa sivun linkkaamisen suoraan kumman tahansa kielisenä.

Lähdekoodia voi tutkailla GitHubissa. Toteutus ei tosin ole erityisen esittelykelpoinen tällä hetkellä: koodi on nopeasti kirjoitettua eikä sen toimintaa avaavia kommentteja ole.

Lähteet

Taustakuva: Joshua Woroniecki / Pixabay.
Lippukuvakkeet kielenvalintanapeissa: flag-icons / lipis.
Sivustolla käytetyt fontit ovat Google Fonts -palvelusta.

Back

Portfolio website

About the implementation of this site

This portfolio website is built using HTML, CSS and JavaScript. The site is hosted on GitHub using the GitHub Pages service.

Responsiveness

The site is designed to be fully responsive. It adapts to different viewport sizes and retains its visual clarity, cohesiveness and pleasant look on both desktop and mobile devices.

Accessibility

The page is develoepd with accessibility in mind. Here's some notes about the accessibility aspects of this website:

Attention has been paid to ensuring that there's enough contrast between background colors and text colors.
Images that are part of the content of the site (not merely decorative) have descriptive alt tags.
All CSS animations on the site are disabled for devices that are configured to prefer reduced motion, this is achieved with the prefers-reduced-motion CSS media query.
I've made a conscious attempt at ensuring that all HTML elements are used in their semantically correct contexts. Admittedly there is some room for improvement: currently the site only utilizes HTML5 semantic elements for some parts, where others are built using basic <div> elements.

Language selection feature

The website is available in two languages: Finnish and English. The language selection feature is entirely self-made. The operating principle is simple: all html documents contain all their contents in both languages and depending on the language chosen some elements are hidden and others shown. This is achieved with JavaScript.

The possibility of users having JavaScript blocked is accounted for, albeit with a slight caveat. Without JavaScript, the site falls back to displaying only the English version.

The language selection is controlled via two separate means. The first one is a search parameter appended to the website address and the other is a variable stored in the LocalStorage of the visitor's browser. The search parameter allows linking directly to either language version of the website.

The source code of the language selection feature can be viewed on GitHub. The implementation isn't very "proudly presentable" currently, though: the code is quite quickly hacked together and lacks any explanatory comments.

Credits

Background image by Joshua Woroniecki on Pixabay.
Flag icons used in the language selection buttons courtesy of flag-icons by lipis.
Fonts from Google Fonts.