Om megProsjekterBlogg

Noen utvalgte prosjekter

Kurt Lekanger og en Stormtrooper-modell i full størrelse.

Når jeg programmer er det vanligvis mest fordi jeg synes det er gøy, men også fordi jeg liker å lage noe som kan komme til nytte. Her er noe av det siste jeg har laget:

Nettsider til Boligsameiet Gartnerihagen

Da Boligsameiet Gartnerihagen i Askim trengte nye nettsider var det viktig at nettsidene skulle være enkle å vedlikeholde, og at det var mulig å ha deler av innholdet bak innlogging.

Jeg bygget nettsidene med noen av de nyeste web-teknologiene, som betyr at de er raske, sikre og funksjonelle. Dette er teknologistacken jeg valgte:

  • React og Gatsby.js. Gatsby sørger for at nettsidene er lynraske, siden de bygges statisk.
  • Typescript
  • Chakra UI – supert komponentbibliotek som gjør det enkelt å lage pene brukergrensesnitt uten å bruke mye tid på CSS-finpussing
  • Auth0 for autentisering/innlogging av brukere og begrensning av tilgang til deler av nettsidene.
  • Netlify for hosting
  • Contentful. Et headless CMS for alt innholdet.
Nettsidene til Boligsameiet Gartnerihagen.
Nettsidene til boligsameiet har et eget område for innloggede brukere.

Jeg skrev en liten artikkelserie om hvordan nettsidene ble laget, den kan du lese her: Slik bygget jeg nye nettsider til sameiet med Gatsby og Chakra UI

Artikkelserien ble også publisert på Kode24.

Her er kildekoden: https://github.com/klekanger/gartnerihagen

Nye personlige nettsider

Det er altså nettsidene du er inne på nå. De forrige nettsidene var laget i Gatsby og Sanity, basert på en ferdig mal fra Sanity – uten veldig mye tilpasning. Da disse nettsidene ble til for noen år siden var Gatsby på full fart opp og i hvert fall mitt soleklare valg når jeg skulle lage raske og moderne nettsider. Men i det siste har populariteten til Gatsby falt en del – samtidig som "alle" snakker om Next.js. I mellomtiden hadde jeg også lært veldig mye, og ønsket å lage nye nettsider helt fra "scratch", og i minst mulig grad basere meg på ferdige maler.

Mye av drivkraften bak mine hobbyprosjekter er at jeg vil lære noe nytt, og hva er vel en bedre anledning enn å lage nye nettsider fra bunnen av? Det viste seg at terskelen for å bygge noe i Next.js var ganske lav når jeg først hadde dreisen på Gatsby. I stedet for å bruke et ferdig komponentbibliotek som Chakra UI, ønsket jeg også å lære meg Tailwind CSS – siden dette er populært og mye brukt ute i "den virkelige verden". Etter å ha skisset opp nettsidene i Figma, begynte jeg å kode. Dette er teknologistacken:

  • Next.js - et fantastisk React-rammeverk som kan bygge både statiske og serverside-rendrede nettsider.
  • Typescript
  • Tailwind CSS
  • Sanity.io. De gamle nettsidene mine var basert på Sanity, som jeg liker innmari godt. Etter å ha vært en tur innom et par andre løsninger, som Contentful og Headless Wordpress, var egentlig Sanity et ganske enkelt valg.
  • Vercel for deploying av de ferdige nettsidene
  • GSAP for noen enkle scroll-animasjoner

Ved byggingen av neg har ettsidene har jeg forsøkt å bruke "best practice" hele veien – og visste jeg ikke hva som var best practice, så brukte jeg tid på research. Jeg har så mye som mulig forsøkt å lage gjenbrukbare komponenter for å gjøre jobben enklere for meg selv neste gang jeg skal lage en nettside. Ved å basere meg på temaer for CSS-styling og bruke CSS-variabler (custom properties) for farger etc. skal det gå raskt å bygge andre nettsider med denne som utgangspunkt. Det er i hvert fall det som er tanken.

Sanity Studio (for innholdsredigering) og nettsidene ligger i et monorepo basert på Turborepo. Dermed kan jeg dele komponenter, konfigurasjoner, Eslint-regler og annet mellom ulike prosjekter senere.

Kildekoden finner du her: https://github.com/klekanger/kurt-personal-web-2

I denne artikkelen kan du lese mer om hvordan jeg bygde de nye nettsidene.

Teflonhjerne

Dette er et ikke fullt så seriøst prosjekt. Det er et enkelt "memory game" laget i vanilla Javascript. Spillet ble til etter at jeg ville leke meg litt med vanilla Javascript igjen, etter å ha nesten utelukkende holdt på med React de siste tre-fire årene.

Teflonhjerne - et enkelt "memory game".
Teflonhjerne er et ganske enkelt spill, men med litt animasjoner, lydeffekter og forskjellig så ble sluttresultatet ganske underholdende.

Spillet er laget uten bruk av noen rammeverk eller biblioteker, men jeg valgte å bruke Vite som "build tool".

Reglene er enkle: Klikk en rute for å se hva som skjuler seg bak. Prøv å matche to og to like, og se hvor mange forsøk du trenger for å matche alle bildene på hele brettet.

Her kan du lese om hvordan jeg lagde spillet.

Du kan prøve spillet her: https://teflonhjerne.netlify.app/

Kildekoden finner du her: https://github.com/klekanger/teflonhjerne