Add volunteer section

__tests__/CV/CVContent.test.tsx

@@ -4,6 +4,7 @@
 
 import React from "react";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import CVContent from "../../src/components/CV/CVContent.component";
 
 const mockCVData = {
@@ -24,10 +25,18 @@ const mockCVData = {
       description: "Studied various aspects of computer science",
     },
   ],
+  volunteerWork: [
+    {
+      period: "2023-2024",
+      organization: "AI Community",
+      role: "Technical Lead",
+      description: "Managing AI Discord community and developing bots",
+    },
+  ],
 };
 
 describe("CVContent", () => {
-  it("CVContent renders correctly with mock data", () => {
+  it("CVContent renders correctly with mock data", async () => {
     render(<CVContent cvData={mockCVData} />);
 
     // Check if the CV header is present
@@ -44,12 +53,26 @@ describe("CVContent", () => {
     });
     const experienceTab = screen.getByRole("tab", { name: /erfaring/i });
     const educationTab = screen.getByRole("tab", { name: /utdanning/i });
+    const volunteerWorkTab = screen.getByRole("tab", { name: /frivillig arbeid/i });
     expect(qualificationsTab).toBeInTheDocument();
     expect(experienceTab).toBeInTheDocument();
     expect(educationTab).toBeInTheDocument();
+    expect(volunteerWorkTab).toBeInTheDocument();
 
     // Check if mock data is rendered (you might need to click on tabs to see this content)
     const qualification = screen.getByText(/qualification 1/i);
     expect(qualification).toBeInTheDocument();
+
+    // Set up user event
+    const user = userEvent.setup();
+
+    // Click on volunteer work tab and check its content
+    await user.click(volunteerWorkTab);
+
+    // Check volunteer work content
+    const volunteerRole = await screen.findByText(/technical lead/i);
+    expect(volunteerRole).toBeInTheDocument();
+    const volunteerOrg = await screen.findByText(/ai community/i);
+    expect(volunteerOrg).toBeInTheDocument();
   });
 });

src/components/CV/CVContent.component.tsx

@@ -16,6 +16,12 @@ interface CVData {
     degree: string;
     description: string;
   }>;
+  volunteerWork: Array<{
+    period: string;
+    organization: string;
+    role: string;
+    description: string;
+  }>;
 }
 
 interface CVContentProps {
@@ -76,6 +82,23 @@ const CVContent: React.FC<CVContentProps> = ({ cvData }) => {
         </div>
       ),
     },
+    {
+      id: "volunteerWork",
+      label: "Frivillig arbeid",
+      content: (
+        <div className="text-slate-300/[0.9]">
+          {cvData.volunteerWork?.map((vol) => (
+            <div key={vol.description} className="mb-6">
+              <h3 className="font-semibold text-slate-100">
+                {vol.period} - {vol.organization}
+              </h3>
+              {vol.role && <p className="italic">{vol.role}</p>}
+              <p>{vol.description}</p>
+            </div>
+          ))}
+        </div>
+      ),
+    }
   ];
 
   return (
@@ -84,7 +107,7 @@ const CVContent: React.FC<CVContentProps> = ({ cvData }) => {
         <PageHeader>CV</PageHeader>
         <div className="px-4 lg:px-0 xl:px-0 md:px-0">
           <div className="container mx-auto bg-slate-700 rounded shadow sm:mb-4">
-            <div className="p-4 mx-auto md:h-full mt-4 flex flex-col justify-center items-center md:min-h-[540px] min-h-[350px]">
+            <div className="p-4 mx-auto md:h-full mt-4 flex flex-col justify-center items-center md:min-h-[600px] min-h-[400px]">
               <div className="p-4 text-lg rounded md:w-full">
                 <div className="md:flex md:justify-center hidden">
                   <Tabs tabs={tabs} />

src/components/UI/Tabs.component.tsx

@@ -37,7 +37,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, orientation = "vertical" }) => {
         className={`flex ${isVertical ? "flex-col sm:flex-row" : "flex-col"} bg-gray-800 rounded-lg h-[calc(75vh-2rem)] mt-4`}
       >
         <div
-          className={`${isVertical ? "sm:w-1/4 w-full" : "w-full"} bg-gray-700 ${isVertical ? "max-h-[135px] " : ""}`}
+          className={`${isVertical ? "sm:w-1/4 w-full" : "w-full"} bg-gray-700 ${isVertical ? "max-h-[181px] " : ""}`}
         >
           <div
             className={`flex ${isVertical ? "flex-row sm:flex-col" : "flex-row"}`}
@@ -63,7 +63,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, orientation = "vertical" }) => {
                 {activeTab === tab.id && (
                   <motion.div
                     layoutId="active-tab"
-                    className={`absolute ${isVertical ? "inset-y-0 left-0 w-1" : "inset-x-0 bottom-0 h-1"} bg-indigo-500`}
+                    className={`absolute ${isVertical ? "inset-y-0 left-0 w-1" : "inset-x-0 bottom-0 h-1"} bg-[var(--matrix-dark)]`}
                     initial={false}
                     transition={{ type: "spring", stiffness: 500, damping: 30 }}
                   />

src/lib/sanity/queries.ts

@@ -38,6 +38,12 @@ export const cvQuery = groq`
       institution,
       degree,
       description
+    },
+    volunteerWork[] {
+      period,
+      organization,
+      role,
+      description
     }
   }
 `;

studio/schemaTypes/documents/cv.ts

@@ -36,8 +36,18 @@ export default {
           type: 'object',
           fields: [
             {name: 'period', title: 'Period', type: 'string'},
-            {name: 'company', title: 'Company', type: 'string'},
-            {name: 'role', title: 'Role', type: 'string'},
+            {
+              name: 'company',
+              title: 'Company/Project',
+              type: 'string',
+              description: 'Company name or personal project/community name'
+            },
+            {
+              name: 'role',
+              title: 'Role',
+              type: 'string',
+              description: 'Job title or role in the project/community'
+            },
             {name: 'description', title: 'Description', type: 'text'},
           ],
         },
@@ -59,5 +69,36 @@ export default {
         },
       ],
     },
+    {
+      name: 'volunteerWork',
+      title: 'Volunteer work',
+      type: 'array',
+      of: [
+        {
+          type: 'object',
+          fields: [
+            {name: 'period', title: 'Period', type: 'string'},
+            {
+              name: 'organization',
+              title: 'Organization',
+              type: 'string',
+              description: 'Name of the community or organization'
+            },
+            {
+              name: 'role',
+              title: 'Role',
+              type: 'string',
+              description: 'Your role in the community'
+            },
+            {
+              name: 'description',
+              title: 'Description',
+              type: 'text',
+              description: 'Describe your contributions and impact'
+            },
+          ],
+        },
+      ],
+    },
   ],
 }