Nordbor – Museiutställning

En interaktiv webbplats som presenterar museiobjekt från Nordbor-utställningen, organiserade efter sekel från 1500-talet till 2000-talet.

🎨 Funktioner

• Pinterest-inspirerad layout – Responsiv masonry-grid som anpassar sig efter skärmstorlek
• Sekelindelning – Varje århundrade har sin egen unika färgpalett
• Bildvisning – Klicka på valfri bild för att se den i fullskärm
• Keyboard navigation – Använd pil-tangenter för att navigera mellan bilder i lightbox
• Sticky navigation – Enkel navigering mellan olika århundraden
• Smooth scrolling – Mjuka övergångar när du byter sektion
• Scroll to top – Snabb återgång till toppen av sidan

🚀 Demo

Besök https://callestenfelt.github.io/nordbor-all/

📖 Användning

Navigering

• Använd menyn längst upp för att hoppa till olika århundraden
• Scrolla för att utforska alla objekt
• Klicka på "↑"-knappen för att snabbt komma tillbaka till toppen

Bildvisning

• Klicka på en bild för att öppna den i fullskärm
• Tryck Escape eller klicka utanför bilden för att stänga
• Använd vänster/höger piltangenter för att bläddra mellan bilder

🎨 Färgpaletter per sekel

• 1500-talet: Grön (#008018) med ljus text
• 1600-talet: Lila (#AA91FF) med mörk text
• 1700-talet: Mintgrön (#98CDB2) med blå text
• 1800-talet: Vinröd (#4B0A23) med orange-röd text
• 1900-talet: Olivgrön (#5A6950) med gul text
• 2000-talet: Rosa (#FFB9FF) med brun text

🛠️ Teknisk information

Webbplatsen är byggd med:

• Vanilla HTML, CSS och JavaScript (inga dependencies)
• CSS Grid columns för masonry-layout
• Modern ES6+ JavaScript
• Lazy loading för bilder
• Responsive design med CSS media queries

📁 Projektstruktur

nordbor/
├── index.html           # Huvudfil med all HTML, CSS och JavaScript
├── sorted_images/       # Bilder organiserade per sekel
│   ├── 1500/
│   ├── 1600/
│   ├── 1700/
│   ├── 1800/
│   ├── 1900/
│   └── 2000/
├── media/              # Original bildkatalog
└── README.md           # Denna fil

🚀 Deployment

Webbplatsen är deployad via GitHub Pages. För att uppdatera:

1. Gör dina ändringar i projektet
2. Commita och pusha till GitHub:

   git add .
   git commit -m "Uppdatering: beskrivning av ändring"
   git push origin main

3. GitHub Pages uppdateras automatiskt

📝 Licens

Detta projekt innehåller museiobjekt från Nordbor-utställningen. Kontakta museet för information om användning och rättigheter.

🙏 Tack

Tack till alla som bidragit till Nordbor-utställningen och digitaliseringen av dess objekt.

---

Skapad med Claude Code 🤖