Githan/projects

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["biomejs.biome", "bradlc.vscode-tailwindcss"],
+  "unwantedRecommendations": []
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "cSpell.words": ["projectdetail"],
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true
+}

app/components/footer.tsx

@@ -1,10 +1,10 @@
-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 (
     <footer className="bg-black text-white py-6 px-4 mt-auto z-50">
-      <div className="container mx-auto flex flex-col md:flex-row justify-between items-center">
+      <div className="container mx-auto grid grid-cols-1 md:grid-cols-3 items-center gap-6">
         <div className="text-center md:text-left">
           <p className="font-semibold">echo Consulting</p>
           <a className="text-sm underline" href="mailto:consulting@echo.uib.no">
@@ -13,7 +13,7 @@ export function Footer() {
           <p className="text-sm">Thormøhlens gate 55, 5006 Bergen</p>
         </div>
 
-        <div className="mt-6 text-center flex flex-col items-center">
+        <div className="text-center flex flex-col items-center">
           <a
             href="https://echo.uib.no/"
             target="_blank"
@@ -25,9 +25,9 @@ export function Footer() {
           <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">
+        <div className="mt-4 md:mt-0 text-center md:text-right">
           <p className="font-semibold mb-1">Følg oss</p>
-          <div className="flex justify-center md:justify-start space-x-4 mt-1">
+          <div className="flex justify-center md:justify-end space-x-4 mt-1 ">
             <a
               href="https://www.linkedin.com/company/echo-consulting-uib"
               target="_blank"

app/components/hero.tsx

@@ -1,20 +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">
         {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

app/components/icons/consulting-logo.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from "react";
 
 type ConsultingLogoProps = HTMLAttributes<SVGSVGElement>;
 

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 (
@@ -13,12 +13,12 @@ export function Nav() {
         <Link to="/tjenester" className="nav-link">
           Tjenester
         </Link>
-        {/* <Link to="/prosjekter" className="nav-link">
+        <Link to="/prosjekter" className="nav-link">
           Prosjekter
-        </Link> */}
-        <Link to="/om-oss" className="nav-link">
-          Om oss
         </Link>
+        {/* <Link to="/om-oss" className="nav-link">
+          Om oss
+        </Link> */}
       </div>
     </nav>
   );

app/components/projectCard.tsx

@@ -0,0 +1,61 @@
+import { ArrowRight, Eye } from "lucide-react";
+
+type ProjectCardProps = {
+  imgUrl: string;
+  title: string;
+  description: string;
+  previewUrl: string;
+  prosjektSide: string;
+};
+
+const ProjectCard = ({
+  imgUrl,
+  title,
+  description,
+  previewUrl,
+  prosjektSide,
+}: ProjectCardProps) => {
+  return (
+    <div className="rounded-xl overflow-hidden shadow-lg flex flex-col h-full bg-[#010F1B]">
+      <div
+        className="h-52 md:h-60 rounded-t-xl relative group py-3"
+        style={{
+          background: `url(${imgUrl}) no-repeat center center `,
+          backgroundSize: "contain",
+          backgroundPosition: "center",
+          backgroundOrigin: "content-box",
+        }}
+      >
+        <div className="overlay flex items-center justify-center absolute inset-0 bg-[#011627] opacity-0 group-hover:opacity-80 transition-all duration-250 rounded-t-xl">
+          <a
+            href={previewUrl}
+            className="h-14 w-14 border-2 relative rounded-full border-[#ADB7BE] hover:border-white flex items-center justify-center"
+          >
+            <Eye className="h-10 w-10 text-[#ADB7BE] hover:text-white" />
+          </a>
+        </div>
+      </div>
+      <a
+        href={prosjektSide}
+        className="text-white rounded-b-xl bg-[#011627] py-6 px-4 flex flex-col justify-between flex-grow cursor-pointer group"
+        style={{ textDecoration: "none" }}
+      >
+        <h5 className="font-xl font-semibold mb-2">{title}</h5>
+        <p style={{ whiteSpace: "pre-line" }} className="text-[#ADB7BE] mb-4">
+          {description}
+        </p>
+        <span className="flex items-center gap-2 font-medium tracking-wider transition-colors duration-300 text-white group-hover:text-blue-400">
+          <span className="relative">
+            Les mer her
+            <span className="absolute left-0 -bottom-0.5 h-[2px] bg-blue-400 transition-all duration-300 w-+ group-hover:w-full" />
+          </span>
+          <span className="inline-flex transition-transform duration-300 translate-none group-hover:translate-x-(6px)">
+            <ArrowRight size={20} className="text-white group-hover:text-blue-400" />
+          </span>
+        </span>
+      </a>
+    </div>
+  );
+};
+
+export default ProjectCard;

app/components/projectDetail.tsx

@@ -0,0 +1,49 @@
+import { ArrowRight } from "lucide-react";
+
+type ProjectDetailProps = {
+  slug: string;
+  title: string;
+  desc: string;
+  small_img: string;
+  large_img: string;
+  link: string;
+};
+
+export default function ProjectDetail({ title, desc, large_img, link }: ProjectDetailProps) {
+  return (
+    <div>
+      <h1 className="text-4xl font-bold mb-6 text-center">{title}</h1>
+
+      <img
+        src={large_img}
+        alt={title}
+        className="w-full max-w-2xl mx-auto mb-6 rounded shadow-lg"
+      />
+
+      <p className="text-lg leading-relaxed">{desc}</p>
+
+      {link && (
+        <a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group flex justify-center items-center gap-2 font-medium tracking-wider mt-5"
+        >
+          <span className="relative">
+            <span className="transition-colors duration-300 group-hover:text-blue-400">
+              Link til siden
+            </span>
+            <span className="absolute left-0 -bottom-0.5 h-[2px] bg-blue-400 transition-all duration-300 w-0 group-hover:w-full" />
+          </span>
+
+          <span className="inline-flex transition-transform duration-300 group-hover:translate-x-1">
+            <ArrowRight
+              className="transition-colors duration-300 group-hover:text-blue-400"
+              size={24}
+            />
+          </span>
+        </a>
+      )}
+    </div>
+  );
+}

app/components/projects.tsx

@@ -1,23 +1,23 @@
-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",
   },
 ];
 
@@ -46,7 +46,7 @@ export default function Projects() {
               <span
                 className="inline-flex transition-transform duration-300"
                 style={{
-                  transform: hoveredCard === project.title ? 'translateX(6px)' : 'translateX(0)',
+                  transform: hoveredCard === project.title ? "translateX(6px)" : "translateX(0)",
                 }}
               >
                 <ArrowRight size={24} />

app/components/projectsSection.tsx

@@ -0,0 +1,52 @@
+import ProjectCard from "./projectCard";
+
+// Dette skal hentes fra Sanity etterhvert
+export const projectData = [
+  {
+    slug: "lffh",
+    title: "LFFH-nettsiden",
+    desc: "Funksjonell nettside for Linjeforeningen for Fiskehelse og Havbruk, med mulighet for blant annet innlogging, arrangementopprettelse og påmelding til arrangementer",
+    small_img: "/ProjectImages/lffh_logo_small.png",
+    large_img: "/ProjectImages/lffh_rectangle.png",
+    link: "https://www.lffh.no/",
+  },
+  {
+    slug: "integrerbar",
+    title: "Integrerbar-nettsiden (under utvikling)",
+    desc: "En nettside utviklet for Integrerbar, studentbaren tilknyttet Fakultet for naturvitenskap og teknologi ved Universitetet, med base i Realfagbygget.",
+    small_img: "/ProjectImages/integrerbar_logo_small.png",
+    large_img: "/ProjectImages/integrerbar_rectangle.jpeg",
+    link: "https://integrerbar-web.fly.dev",
+  },
+  {
+    slug: "nti",
+    title: "NTidrett-nettsiden (under utvikling)",
+    desc: "En nettside utviklet for NT Idrett, idrettsorganisasjonen tilknyttet Fakultet for naturvitenskap og teknologi ved universitetet.",
+    small_img: "/ProjectImages/nti_logo_small.png",
+    large_img: "/ProjectImages/nti_logo_white.jpeg",
+    link: "https://ntidrett.no/",
+  },
+];
+
+export default function ProjectsSection() {
+  return (
+    <>
+      <h2 className="text-center text-4xl font-bold text-white mt-4 mb-8 md:mb-12">Prosjekter</h2>
+
+      {/* Prosjekter */}
+      <div className="flex flex-wrap gap-8 items-stretch justify-center">
+        {projectData.map((project) => (
+          <div key={project.slug} className="w-full sm:w-[48%] lg:w-[31%] flex">
+            <ProjectCard
+              imgUrl={project.small_img}
+              title={project.title}
+              description={project.desc}
+              previewUrl={project.link}
+              prosjektSide={`prosjekter/${project.slug}`}
+            />
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

app/entry.server.tsx

@@ -1,7 +1,7 @@
-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,
@@ -11,7 +11,7 @@ export default async function handleRequest(
   _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} />,
@@ -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,