Added datatjej

src/pages/Experience.jsx

@@ -57,9 +57,9 @@ function Experiance() {
           id="projects-heading"
           className="text-subTPhone md:text-subT font-headline mb-6"
         >
-          Projects<span className="text-highlight">.</span>
+          Projects and experience<span className="text-highlight">.</span>
         </h2>
-        <div className="py-4 flex flex-col md:flex-row gap-10" role="list">
+        <div className="py-4 grid grid-cols-1 md:grid-cols-2 gap-8" role="list">
           {experianceListUI}
         </div>
       </div>

src/pages/ExperienceDetail.jsx

@@ -58,8 +58,8 @@ function ExperianceDetail() {
           <Tags listOfTags={myProject.tags} />
         </div>
       </div>
-      <div className="flex flex-col md:flex-row gap-4">
+      <div className="flex flex-col md:flex-row gap-8">
-        <div className="flex-1">
+        <div className="w-full md:w-1/2">
           <ImageGallery
             showThumbnails={false}
             showBullets={true}
@@ -75,9 +75,10 @@ function ExperianceDetail() {
             )}
           />
         </div>
-        <div className="flex-1 text-base min-h-[300px] flex flex-col">
+        <div className="w-full md:w-1/2 flex flex-col min-h-[300px]">
           <div className="flex-1">
-            {myProject.info}
+            <h2 className="text-xl font-semibold mb-4">{myProject.subtitle}</h2>
+            <p className="text-base leading-relaxed">{myProject.description}</p>
           </div>
           <div className="drop-shadow-doublelight hover:drop-shadow-light my-2 text-end">
             {linkUI}

src/store.js

@@ -30,6 +30,16 @@ const experianceList = [
     link: "https://preview.letsfly.app/",
     previewImg: "/img/mockup_net0.png",
   },
+  {
+    id: 4,
+    title: "DataTjej",
+    subtitle: "Board Member & Web Developer",
+    info: "As a board member of DataTjej, I'm actively involved in shaping the future of this non-profit organization that supports women and non-binary individuals in tech. Currently leading the development of a new website using Next.js and Tailwind CSS, focusing on creating a modern, accessible platform. The project includes automating connections to various solutions like our podcast and event management systems, streamlining our digital presence and member engagement.",
+    img: ["/images/datatjej-placeholder.jpg"],
+    previewImg: "/images/datatjej-placeholder.jpg",
+    tags: ["Next.js", "Tailwind CSS", "Board Member", "Web Development", "Automation"],
+    link: "https://datatjej.se"
+  }
 ];
 
 export const projectsAtom = atom({ key: "projects", default: experianceList });