Smarason.is Website Rebuild
Comprehensive rebuild of the smarason.is website with updated features, tech stack, and design system.
The project uses the most advanced technologies available, which proved to be a particularly interesting challenge since AI-powered assistant tools have not yet been trained on or gained knowledge of these systems. As a result, context and context management became critical in the development process, with MCP servers — such as Context7 — proving especially valuable.
In the coming weeks, the site will be expanded with additional information and useful content.
Technical Stack
- Next.js 15.3+ – performance and flexibility with the latest App Router features.
- Tailwind CSS v4 (alpha) – utility-first design with built-in accessibility and dark mode.
- Sanity CMS with MCP – structured, validated content.
- TypeScript 5.5+ – stability and precision in code.
- Framer Motion – smooth, purposeful animations.
- Playwright & Vitest – E2E and unit testing.
- Vercel – fast, reliable deployment with previews.
Internationalization
- Bilingual: Icelandic & English.
- SEO-ready with localized metadata and hreflang support.
Security & Performance
- Lighthouse 90+ target.
- LCP < 2.5s, INP < 200ms, CLS < 0.1.
- WCAG 2.1 AA accessibility standards.
- Optimized images (WebP/AVIF).
- No tracking or cookies.
MCP Advantage
- Enforces consistency, transparency, and quality across the development process.
Design System
- Colors: Emerald green, coal black, warm orange – blending Icelandic soul with a modern edge.
- Light and dark mode support.
Development Tools
Claude code CLI, Claude desktop, MCP for GitHub, Context7, Playwright, Sanity, Gemini, ChatGPT.
🧬 Philosophical Foundation
Technology in service of humanity, the web as a bridge between ideas and people, creating digital spaces that foster understanding.
🚀 Technical Stack
- Next.js 15.3+: Utilizes App Router and async params for lightning-fast SEO-optimized pages.
- Tailwind CSS v4 alpha: Embraces utility-first design with Icelandic inspiration.
- Sanity CMS + MCP: Provides automated content validation.
- TypeScript 5.5+: Ensures type safety.
- Framer Motion: Delivers smooth purposeful animations.
- Playwright E2E and Vitest/Testing Library: For comprehensive testing.
- Vercel: Enables instant deployments and previews.
🌍 Internationalization
Built for Iceland but ready for the world, following best practices in localization, exploring if we can build digital spaces that speak to people regardless of language and culture.
🛡️ Security, Performance and Accessibility
- Achieves 90+ Lighthouse scores.
- LCP < 2.5s, INP < 200ms, CLS < 0.1.
- Utilizes WebP/AVIF images with dynamic sizing from Sanity CDN.
- Complies with WCAG 2.1 AA, featuring keyboard navigation and strong focus styles.
- Zero tracking or cookies because privacy is not optional.
🧩 The MCP Secret
Model Context Protocol supports workflows that reduce errors and increase quality, building in transparency and stability instead of unpredictable behavior.
🎨 Design System
Features emerald green, coal black, and warm orange. Every color, movement, and letter spacing is a conscious choice, marrying Icelandic soul with a modern heart. Technology becomes invisible when it serves well.
🛠️ Tools and Challenges
Utilizes Claude code CLI, Claude desktop, MCP for GitHub, Context7, Playwright, Sanity, Gemini, and ChatGPT. The biggest challenge is working with tools newer than model knowledge bases.
🚀 What's Next
Live projects, podcasts, detailed content, and the bigger question: if we can build fast, beautiful, and secure digital homes, can we also build digital communities that are human, just, and sustainable?
Technology Stack
Tailwind CSS v4
Notagildismiðuð CSS rammi með íslenskum innblæstri / Utility-first CSS framework with Icelandic inspiration
Hreyfingar sem þjóna upplifun, ekki til sýnis / Animations that serve experience, not just for show
Sanity er "headless CMS" - það þýðir að það sér eingöngu um að geyma og stjórna efni, en birtir það ekki sjálft. Þú getur notað hvaða frontend tækni sem er til að sýna efnið (React, Vue, Next.js, Gatsby, o.s.frv.).