echo-consulting · omfj · Jan 23, 2026 · Jan 23, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,43 @@
+name: 💚 CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@v6
+
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9.12.3
+
+      - name: ⚙️ Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: "pnpm"
+
+      - name: 🔧 Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: 💅 Check formatting
+        run: pnpm run format:check
+
+      - name: 🧹 Check linting
+        run: pnpm run lint:check
+
+      - name: 🔍 Run type check
+        run: pnpm run typecheck
+
+      - name: 🏗️ Build
+        run: pnpm run build
diff --git a/app/app.css b/app/app.css
@@ -1,8 +1,9 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html,
@@ -15,6 +16,7 @@ body {
 }
 
 .nav-link:hover {
-  text-shadow: 0 0 40px rgba(255, 255, 255, 1),
+  text-shadow:
+    0 0 40px rgba(255, 255, 255, 1),
     0 0 80px rgba(255, 255, 255, 0.9);
 }
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -1,5 +1,5 @@
-import { FaInstagram, FaLinkedin } from "react-icons/fa";
-import echoLogo from "../assets/echo-logo.png";
+import { FaInstagram, FaLinkedin } from 'react-icons/fa';
+import echoLogo from '../assets/echo-logo.png';
 
 export function Footer() {
   return (
@@ -22,9 +22,7 @@ export function Footer() {
           >
             <img src={echoLogo} alt="echo logo" className="mb-2 w-20 h-auto" />
           </a>
-          <p className="text-sm">
-            En undergruppe av echo - Linjeforeningen for informatikk
-          </p>
+          <p className="text-sm">En undergruppe av echo - Linjeforeningen for informatikk</p>
         </div>
 
         <div className="mt-4 md:mt-0 text-center md:text-left">

diff --git a/app/components/hero.tsx b/app/components/hero.tsx
@@ -1,23 +1,20 @@
-import { Container, Title, Text, Box } from "@mantine/core";
-import { Typewriter } from "react-simple-typewriter";
-import { useState } from "react";
+import { Container, Title, Text, Box } from '@mantine/core';
+import { Typewriter } from 'react-simple-typewriter';
+import { useState } from 'react';
 
 export function Hero() {
   const [fin, setFin] = useState(false);
   return (
     <Container className="text-white text-left">
-      <Title
-        order={1}
-        className="text-5xl h-28 max-w-[25rem] font-bold pb-8 whitespace-pre-line"
-      >
+      <Title order={1} className="text-5xl h-28 max-w-[25rem] font-bold pb-8 whitespace-pre-line">
         {fin ? (
-          "Konsulenter som ikke koster skjorta."
+          'Konsulenter som ikke koster skjorta.'
         ) : (
           <Typewriter
             words={[
-              "echo\nConsulting",
-              "Konsulenter-tjenester som ikke koster skjorta.",
-              "echo\nConsulting",
+              'echo\nConsulting',
+              'Konsulenter-tjenester som ikke koster skjorta.',
+              'echo\nConsulting',
             ]}
             loop={1}
             cursor
@@ -28,9 +25,8 @@ export function Hero() {
       </Title>
       <Box className="max-w-lg pb-4 block">
         <Text size="lg">
-          Vi tilbyr profesjonelle konsulenttjenester til rimelige priser,
-          skreddersydd for dine behov. La oss hjelpe deg med å nå dine mål uten
-          å sprenge budsjettet!
+          Vi tilbyr profesjonelle konsulenttjenester til rimelige priser, skreddersydd for dine
+          behov. La oss hjelpe deg med å nå dine mål uten å sprenge budsjettet!
         </Text>
       </Box>
 

diff --git a/app/components/icons/consulting-logo.tsx b/app/components/icons/consulting-logo.tsx
@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import type { HTMLAttributes } from 'react';
 
 type ConsultingLogoProps = HTMLAttributes<SVGSVGElement>;
 
@@ -10,8 +10,11 @@ export const ConsultingLogo = (props: ConsultingLogoProps) => {
       viewBox="0 0 36 64"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Echo Consulting Logo"
       {...props}
     >
+      <title>Echo Consulting Logo</title>
       <path d="M0 0H36V64H0V0Z" fill="white" />
     </svg>
   );

diff --git a/app/components/nav.tsx b/app/components/nav.tsx
@@ -1,5 +1,5 @@
-import { Link } from "react-router";
-import { ConsultingLogo } from "./icons/consulting-logo";
+import { Link } from 'react-router';
+import { ConsultingLogo } from './icons/consulting-logo';
 
 export function Nav() {
   return (

diff --git a/app/components/projects.tsx b/app/components/projects.tsx
@@ -1,67 +1,58 @@
-import { Container, Title } from "@mantine/core";
-import { ArrowRight } from "lucide-react";
-import { useState } from "react";
+import { Container, Title } from '@mantine/core';
+import { ArrowRight } from 'lucide-react';
+import { useState } from 'react';
 
 // Dette skal hentes fra Sanity etterhvert
 const projectData = [
   {
-    title: "Prosjekt1",
-    desc: "bla bla",
-    image:
-      "https://www.alvdalmiv.no/wp-content/uploads/2017/04/Bilder_2017_Uke13_fgp-1024x576.jpg",
+    title: 'Prosjekt1',
+    desc: 'bla bla',
+    image: 'https://www.alvdalmiv.no/wp-content/uploads/2017/04/Bilder_2017_Uke13_fgp-1024x576.jpg',
   },
   {
-    title: "Prosjekt2",
-    desc: "bla bla",
-    image:
-      "https://www.visitjotunheimen.no/dmsimgs/Flaklypa_Grand_Prix_16x9_1966284657.jpg",
+    title: 'Prosjekt2',
+    desc: 'bla bla',
+    image: 'https://www.visitjotunheimen.no/dmsimgs/Flaklypa_Grand_Prix_16x9_1966284657.jpg',
   },
   {
-    title: "Prosjekt3",
-    desc: "bla bla",
-    image:
-      "https://gfx.nrk.no/rdq_-xdNXpQ-2cX_AyAI9gfbgoATLuCiMeTbC5etcQaQ.jpg",
+    title: 'Prosjekt3',
+    desc: 'bla bla',
+    image: 'https://gfx.nrk.no/rdq_-xdNXpQ-2cX_AyAI9gfbgoATLuCiMeTbC5etcQaQ.jpg',
   },
 ];
 
 export default function Projects() {
-  const [hoveredCard, setHoveredCard] = useState<number | null>(null);
+  const [hoveredCard, setHoveredCard] = useState<string | null>(null);
 
   return (
     <Container className="text-white">
       <Title className="text-5xl font-bold text-center">Prosjekter</Title>
       <div className="flex gap-4 mt-8">
-        {projectData.map((project, index) => (
-          <div
-            key={index}
-            className="p-4 rounded-lg transition-all duration-300 hover:bg-black/10"
-            onMouseEnter={() => setHoveredCard(index)}
+        {projectData.map((project) => (
+          <button
+            key={project.title}
+            type="button"
+            className="p-4 rounded-lg transition-all duration-300 hover:bg-black/10 text-left"
+            onMouseEnter={() => setHoveredCard(project.title)}
             onMouseLeave={() => setHoveredCard(null)}
           >
             <div className="w-64 h-64 mb-4 overflow-hidden relative">
-              <img
-                src={project.image}
-                alt={project.title}
-                className="h-full w-full object-cover"
-              />
+              <img src={project.image} alt={project.title} className="h-full w-full object-cover" />
             </div>
-            <h3 className="font-bold text-white tracking-widest">
-              {project.title}
-            </h3>
+            <h3 className="font-bold text-white tracking-widest">{project.title}</h3>
             <p className="text-[#CFCDCD] tracking-wider">{project.desc}</p>
             <h4 className="flex items-center gap-2 font-medium tracking-wider mt-2 group">
               Les mer her
               <span
                 className="inline-flex transition-transform duration-300"
                 style={{
-                  transform:
-                    hoveredCard === index ? "translateX(6px)" : "translateX(0)",
+                  transform: hoveredCard === project.title ? 'translateX(6px)' : 'translateX(0)',
                 }}
               >
                 <ArrowRight size={24} />
               </span>
             </h4>
-          </div>
+          </button>
         ))}
       </div>
     </Container>

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,17 +1,17 @@
-import type { AppLoadContext, EntryContext } from "react-router";
-import { ServerRouter } from "react-router";
-import { isbot } from "isbot";
-import { renderToReadableStream } from "react-dom/server";
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+import { isbot } from 'isbot';
+import { renderToReadableStream } from 'react-dom/server';
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   routerContext: EntryContext,
-  _loadContext: AppLoadContext
+  _loadContext: AppLoadContext,
 ) {
   let shellRendered = false;
-  const userAgent = request.headers.get("user-agent");
+  const userAgent = request.headers.get('user-agent');
 
   const body = await renderToReadableStream(
     <ServerRouter context={routerContext} url={request.url} />,
@@ -25,7 +25,7 @@ export default async function handleRequest(
           console.error(error);
         }
       },
-    }
+    },
   );
   shellRendered = true;
 
@@ -35,7 +35,7 @@ export default async function handleRequest(
     await body.allReady;
   }
 
-  responseHeaders.set("Content-Type", "text/html");
+  responseHeaders.set('Content-Type', 'text/html');
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,5 +1,5 @@
-import "@mantine/core/styles.css";
-import "./app.css";
+import '@mantine/core/styles.css';
+import './app.css';
 
 import {
   isRouteErrorResponse,
@@ -8,23 +8,23 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "react-router";
+} from 'react-router';
 
-import type { Route } from "./+types/root";
-import { BackgroundImage, MantineProvider } from "@mantine/core";
-import { Nav } from "./components/nav";
-import { Footer } from "./components/footer";
+import type { Route } from './+types/root';
+import { BackgroundImage, MantineProvider } from '@mantine/core';
+import { Nav } from './components/nav';
+import { Footer } from './components/footer';
 
 export const links: Route.LinksFunction = () => [
-  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
   {
-    rel: "preconnect",
-    href: "https://fonts.gstatic.com",
-    crossOrigin: "anonymous",
+    rel: 'preconnect',
+    href: 'https://fonts.gstatic.com',
+    crossOrigin: 'anonymous',
   },
   {
-    rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
   },
 ];
 
@@ -63,16 +63,14 @@ export default function App() {
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  let message = "Oops!";
-  let details = "An unexpected error occurred.";
+  let message = 'Oops!';
+  let details = 'An unexpected error occurred.';
   let stack: string | undefined;
 
   if (isRouteErrorResponse(error)) {
-    message = error.status === 404 ? "404" : "Error";
+    message = error.status === 404 ? '404' : 'Error';
     details =
-      error.status === 404
-        ? "The requested page could not be found."
-        : error.statusText || details;
+      error.status === 404 ? 'The requested page could not be found.' : error.statusText || details;
   } else if (import.meta.env.DEV && error && error instanceof Error) {
     details = error.message;
     stack = error.stack;

diff --git a/app/routes.ts b/app/routes.ts
@@ -1,7 +1,7 @@
-import { type RouteConfig, route, index } from "@react-router/dev/routes";
+import { type RouteConfig, route, index } from '@react-router/dev/routes';
 
 export default [
-  index("routes/home.tsx"),
-  route("/tjenester", "routes/tjenester.tsx"),
-  route("/om-oss", "routes/om-oss.tsx"),
+  index('routes/home.tsx'),
+  route('/tjenester', 'routes/tjenester.tsx'),
+  route('/om-oss', 'routes/om-oss.tsx'),
 ] satisfies RouteConfig;
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
@@ -1,12 +1,12 @@
-import { Hero } from "~/components/hero";
-import { Container } from "@mantine/core";
+import { Hero } from '~/components/hero';
+import { Container } from '@mantine/core';
 
 export function meta() {
   return [
-    { title: "echo Consulting" },
+    { title: 'echo Consulting' },
     {
-      name: "description",
-      content: "Konsulenttjenester som ikke koster skjorta.",
+      name: 'description',
+      content: 'Konsulenttjenester som ikke koster skjorta.',
     },
   ];
 }