Amperium

Vad det är

En tvåspråkig (svenska/engelska) marknadsföringssajt för Amperium Elektriska, ett elektrikerföretag i Stockholm som grundades 2023. Sajten presenterar företagets tre tjänster (service & jour, elinstallation, projektledning), teamet och innehåller ett offertformulär för nya kunder. Jag designade och byggde sajten från grunden, solo, med React, TypeScript och Vite.

Min roll

Jag ägde hela projektet: struktur, design-implementation, tillgänglighet, i18n, SEO och testning. Jag utgick från mitt eget designsystem (tokens för färg, spacing, typografi) och anpassade värdena till varumärkets identitet.

Arkitektur och tekniska val

• Sidstruktur: Fyra sidor (Home, About, Services, Contact) via React Router, med en gemensam Layout-komponent (header/nav/footer) som app-skal.
• Komponentorganisation: Tydlig regel för var komponenter hör hemma — sidspecifika komponenter i pages/PageName/components/, generiska UI-primitiver i components/ui/ (Button, Input, Pill osv.), och delade men icke-generiska komponenter (t.ex. ServiceCard) på toppnivå. Den uppdelningen gjorde det enkelt att hitta rätt plats för ny kod utan att gissa.
• Styling: CSS Modules genomgående, inget CSS-in-JS. Designtokens som CSS-variabler i styles/tokens/, med ett separat lager av semantiska tokens (--color-action-primary istället för --color-orange-500) så att komponenter aldrig pekar direkt på primitiver — gör det möjligt att byta tema/varumärkesfärg utan att röra komponentkod.
• Responsivitet: Mobile-first med @custom-media-breakpoints (@media (--md)) via PostCSS.
• Routing på svenska: Slugs för tjänstesidorna är på svenska (inte engelska) — ett medvetet SEO-beslut för att matcha hur svenska kunder faktiskt söker.

Internationalisering (i18n)

All text ligger i två strukturellt identiska JSON-filer (sv/en) via react-i18next, med nästlade nycklar per sida/sektion. Språkväljare i navigationen, med automatisk detektering av webbläsarspråk och synk mot html-elementets lang-attribut.

Tillgänglighet

• Skip-link till huvudinnehåll för tangentbords- och skärmläsaranvändare.
• Kontrastjustering gjordes aktivt under projektet — bytte t.ex. en vit bakgrund mot svart/orange och mörkare grå för background-elevated specifikt för att förbättra kontrast (dokumenterat i min projektdagbok som ett medvetet a11y-beslut, inte bara estetik).
• Fokusstilar och testad tangentbordsnavigering i navigationskomponenten.

SEO

• Strukturerad data (JSON-LD, schema.org/Electrician) med adress, öppettider, telefon och områden som täcks — så att Google kan visa företagsinfo direkt i sökresultat.
• Open Graph-metadata, beskrivningar och en enda källa till sanning för telefonnummer/e-post (constants/contact.ts) som återanvänds i footer, nav och kontaktsida — med tydlig dokumentation (CONTENT_GUIDE.md) om att öppettider och telefonnummer finns på två ställen (kod + JSON-LD) som måste hållas i synk manuellt.

Testning

Vitest + Testing Library, med test co-located med varje komponent som har logik eller viktig markup (navigation, footer, formulär, hero, kontaktkort m.fl.).

Process

Jag inledde processen med att gå igenom företagets befintliga sajt och analysera vad som stilmässigt skulle behållas och vad som behövde uppgraderas. Utifrån den analysen tog jag fram ny design i Figma och stämde av ett par designbeslut tillsammans med Claude. Därefter satte jag upp projektstrukturen med en dev-branch och en main-branch för att hålla ett professionellt arbetsflöde, och skapade mindre feature-branches från dev för varje ny funktion. Jag byggde alla återanvändningsbara komponenter först — jag startade med navigering och routing, eftersom de utgör appens skal — innan jag gick vidare till sidspecifikt innehåll. Jag förde också en projektdagbok dag för dag genom hela bygget, som täcker allt från den initiala uppsättningen till formulär och SEO-finputs mot slutet.

Underhållbarhet

Skrev en separat CONTENT_GUIDE.md riktad till icke-utvecklare (t.ex. företagets ägare) med exakta steg för att uppdatera telefonnummer, öppettider, kontaktpersoner och text — utan att röra kodstrukturen. Det var ett medvetet val för att göra sajten möjlig att underhålla efter leverans, utan att jag behöver vara inblandad i varje litet innehållsbyte.