CASE STUDY · WEBDESIGN

Fra Tom Mappe til Levende Hjemmeside: Historien om untruestories.dk

Sådan byggede jeg en professionel, sikker og SEO-optimeret hjemmeside til en Copenhagen-guide — fra første kodelinjen til live på nettet — uden et eneste CMS eller plugin.

Af S. V. Jensen

Screenshot af www.untruestories.dk — guided walking tours i København — **LIVE PÅ NETTET:** www.untruestories.dk — klik på billedet for at besøge siden.

Det startede med en simpel opgave: Susan er historiefortæller og guidede ture-leder i København — og hun manglede en hjemmeside, der afspejlede hendes personlighed og fik turister til at booke. Ingen standard-skabeloner. Ingen Wix eller Squarespace. Vi ville have noget, der var rigtigt hende.

Resultatet er www.untruestories.dk — en håndkodet hjemmeside i ren HTML, CSS og JavaScript. Her er hvad der ligger under motorhjelmen.

Teknologistakken

Hele siden er bygget med tre filer: index.html, style.css og script.js. Ingen frameworks, ingen build-tools, ingen afhængigheder der kan gå i stykker.

HTML5 CSS Custom Properties Vanilla JavaScript Schema.org JSON-LD Formspree reCAPTCHA v3 Google Fonts .webp billeder .htaccess sikkerhed

"Enkelt at vedligeholde, svært at hacke, og lynhurtigt at indlæse — det er præcis, hvad en lille virksomheds hjemmeside skal være."

Design: En Visuelt Stærk Identitet

Farvepaletten er skabt med CSS Custom Properties — det betyder, at hele sidens farver styres fra ét sted. #C8A97E (varm guld), #1A1A18 (næsten sort) og #F5F2ED (creme) skaber en historisk, elegant atmosfære.

/* Design-tokens — ét sted, alle steder */
:root {
  --cream:   #F5F2ED;
  --black:   #1A1A18;
  --accent:  #C8A97E;
  --ff-serif: 'Cormorant Garamond', Georgia, serif;
  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Hero-sektionens karikatur flyder op og ned i en blød CSS-animation, de antikke illustrationer (kompas, lommeur, briller, lak-segl) er spredt strategisk hen over baggrunden for at skabe dybde — alt dette uden et eneste billede-tungt bibliotek.

Admin-panel: Susan Opdaterer Selv

Et af de mest smarte tricks på siden: et skjult admin-panel, der åbnes med tastaturgenvejen Ctrl + Shift + A. Her kan Susan selv tilføje, redigere og slette ture — uden at røre en eneste linje kode. Alle ændringer gemmes i browserens localStorage.

// Åbn admin-panel med Ctrl+Shift+A
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'A') {
    adminPanel.classList.toggle('open');
  }
});

Turene renderes dynamisk fra et JavaScript-array — hvilket gør siden lynhurtig, da der ikke er database-kald, ingen server-side rendering og ingen ventetid.

SEO og Sikkerhed: Gjort Rigtigt Fra Start

Siden er udstyret med komplet Schema.org JSON-LD struktureret data — det fortæller Google præcis, hvad siden handler om: en turvirksomhed, en lokal forretning og en person. Det giver langt bedre synlighed i søgeresultaterne end simple meta-tags alene.

/* Udsnit af Schema.org JSON-LD */
{
  "@type": "TouristTrip",
  "name": "Untrue Stories – Guided Walking Tours",
  "availableLanguage": ["English", "Danish", "German"],
  "provider": { "@type": "LocalBusiness" }
}

På sikkerhedssiden er siden beskyttet med en nøje konfigureret .htaccess-fil med HTTP security headers: Content-Security-Policy, Strict-Transport-Security, X-Frame-Options og Referrer-Policy — en kombination, der giver en A+ på securityheaders.com.

Kontaktformularen er integreret med Formspree og beskyttet af Google reCAPTCHA v3, så Susan modtager kun rigtige henvendelser — ikke spam.

Resultatet

En professionel, hurtig og sikker hjemmeside — bygget fra bunden, fuldt tilpasset Susans brand og klar til at konvertere nysgerrige turister til betalende gæster. Ingen månedlige abonnements-gebyrer. Ingen bloatware. Bare kode.

Vil du have din virksomhed repræsenteret på nettet med samme omhu og håndværk? Du ved, hvad du skal gøre.

⟵ Tilbage til forsiden