Noen utvalgte prosjekter

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.

Gjennom mitt firma Lekanger tekst og kode har jeg også laget nettsider for lokale bedrifter. Foreløpig som en liten "bigeskjeft" ved siden av "dagjobben".

Her er noe av det siste jeg har laget:

Nettsider til EkstraHjelp1 AS

EkstraHjelp1 er et bemanningsselskap i Rakkestad. Selskapet trengte nettsider, og i stedet for en "billig og dårlig" WordPress-side valgte de i stedet å få bygget nettsidene fra bunnen av.

Nettsidene er laget med:

• Next.js 14, React og TypeScript
• Sanity som headless CMS
• Tailwind CSS
• NextUI
• Resend for kontaktskjema/e-post
• Hostes hos Vercel

Jeg bidro også med design av logo, samt tekst til nettsidene.

Resultatet ble raske og funksjonelle nettsider, modulært bygget opp slik at de enkelt kan utvides med mer funksjonalitet senere.

For å gjøre oppdatering av sidene så enkel og brukervennlig som mulig, valgte jeg å embedde Sanity Studio på selve nettsiden.

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.

I disse dager holder jeg på å bygge en ny plattform for sameier og borettslag, Gartnerihagens nettsider vil etter hvert gå over på denne. Den nye løsningen er basert på Next.js, Sanity, Clerk og NextUI, og vil inneholde blant annet en forbedret løsning for brukeradministrasjon, et meldingssystem, osv.

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.

Attack of the Space Nerds

Jeg har mange hobbyprosjekter på gang. Hvis poenget med hobbyprosjektet først og fremst er å lære, er det fint å bygge noe helt fra bunnen av.

Etter å ha holdt på mye med blant annet React og Next.js hadde jeg lyst til å lage noe helt fra bunnen av i JavaScript eller TypeScript. Resultatet ble minispillet Attack of the Space Nerds.

Spillet er laget i TypeScript og bruker HTML Canvas, og er laget helt og holdent uten bruk av noen rammeverk.

Målet mitt var:

• Å bli flinkere til å kode i vanilla JavaScript og TypeScript
• Få litt mer erfaring med objektorientert programmering i JavaScript
• Lære meg litt om HTML Canvas

Du kan lese mer om hvordan spillet ble laget på denne siden eller prøvde det ut her: https://attack-of-the-space-nerds.netlify.app/

Her er en video av spillet:

Teflonhjerne

"Teflonhjerne" 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.

Også dette 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