add : logos

Author: vigneshsnaik

public/assets/logos/kvs.svg

@@ -4,18 +4,33 @@ const items = [
     institution: "Model Engineering College, Thrikkakara",
     degree: "B.Tech in Computer Science and Engineering",
     duration: "2021-2025",
+    logo: {
+      url: "https://www.mec.ac.in",
+      src: "/assets/logos/mec.png",
+      alt: "Model Engineering College logo",
+    },
   },
   {
     institution: "TD HSS, Thuravoor",
     degree: "Higher Secondary Education",
     duration: "2019-2021",
     percentage: "97.8%",
+    logo: {
+      url: "",
+      src: "/assets/logos/tdhss.png",
+      alt: "TD HSS Thuravoor logo",
+    },
   },
   {
     institution: "Kendriya Vidyalaya No.1, Kochi",
     degree: "Matriculation",
     duration: "2009-2019",
     percentage: "89.4%",
+    logo: {
+      url: "https://no1cochin.kvs.ac.in/",
+      src: "/assets/logos/kvs.svg",
+      alt: "Kendriya Vidyalaya No.1 Kochi logo",
+    },
   },
 ];
 ---
@@ -24,7 +39,16 @@ const items = [
   {
     items.map((item) => (
       <li>
-        <>
+        <a href={item.logo.url} target="_blank" rel="noopener noreferrer">
+          {item.logo.src && (
+            <img
+              src={item.logo.src}
+              alt={item.logo.alt}
+                style="width: 4em; height: 4em; object-fit: contain; margin-right: 1em; float: left;"
+            />
+          )}
+        </a>
+        <span>
           <b>
             {item.institution} <span class="duration">{item.duration}</span>
           </b>
@@ -36,15 +60,14 @@ const items = [
             ) : null}
             <br />
           </p>
-        </>
+        </span>
       </li>
     ))
   }
 </ul>
 
 <style>
   ul {
-    border-left: 2px solid var(--gray-300);
     padding: 0;
   }
 
@@ -64,19 +87,4 @@ const items = [
     padding: 0 0 0 1.5em;
     font-size: 0.75em;
   }
-
-  ul li:before {
-    display: inline-block;
-    width: 1.2em;
-    height: 1.2em;
-    margin: 0 0.5em 0 -0.65em;
-    border-radius: 50%;
-    content: " ";
-    text-align: center;
-    background: var(--gray-100);
-    border: 2px solid var(--gray-300);
-    color: var(--gray-500);
-    font-size: 0.8em;
-    line-height: 1.2em;
-  }
 </style>

public/assets/logos/macs.png

@@ -0,0 +1,60 @@
+---
+const items = [
+  {
+    organization: "redBus",
+    role: "Software Engineer",
+    duration: "January 2025 - Present",
+    logo: {
+      url: "https://redbus.in",
+      src: "https://s3.rdbuz.com/Images/rdc/rdc-redbus-logo.svg",
+      alt: "redBus India logo",
+    },
+  },
+];
+---
+
+<ul>
+  {
+    items.map((item) => (
+      <li>
+        <span>
+          <a href={item.logo.url} target="_blank" rel="noopener noreferrer">
+            <img
+              src={item.logo.src}
+              alt={item.logo.alt}
+              style="width: 50px; height: auto; margin-right: 1em; float: left;"
+            />
+          </a>
+          <b>
+            {item.organization} <span class="duration">{item.duration}</span>
+          </b>
+          <p>{item.role}</p>
+        </span>
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  ul {
+    padding: 0;
+  }
+
+  ul li {
+    list-style: none;
+    margin: 0 0 0.5em 0;
+    padding: 0;
+    font-size: 1em;
+  }
+
+  ul li .duration {
+    float: right;
+    margin-left: auto;
+  }
+  ul li p {
+    margin: 0;
+    padding: 0 0 0 1.5em;
+    font-size: 0.75em;
+  }
+
+</style>

public/assets/logos/mec.png

@@ -5,24 +5,44 @@ const items = [
     at: "TLE MEC",
     description: "The competitive coding and DSA club",
     duration: "2024-25",
-  },
-  {
-    position: "Competitive Programming Lead",
-    at: "TLE MEC",
-    description: "The competitive coding and DSA club",
-    duration: "2023-24",
+    logo: {
+      url: "https://tle.mec.ac.in",
+      src: "/assets/logos/tle.svg",
+      alt: "",
+    },
   },
   {
     position: "Web Admin",
     at: "MACS MEC",
     description: "The association of Computer Science Engineering students",
     duration: "2024-25",
+    logo: {
+      url: "https://mec.ac.in",
+      src: "/assets/logos/macs.png",
+      alt: "",
+    },
+  },
+  {
+    position: "Competitive Programming Lead",
+    at: "TLE MEC",
+    description: "The competitive coding and DSA club",
+    duration: "2023-24",
+    logo: {
+      url: "https://tle.mec.ac.in",
+      src: "/assets/logos/tle.svg",
+      alt: "",
+    },
   },
   {
     position: "Project Manager",
     at: "College Fresher Registration Portal",
     description: "A portal for registering freshers for the college",
     duration: "2023-24",
+    logo: {
+      url: "https://mec.ac.in",
+      src: "/assets/logos/mec.png",
+      alt: "",
+    },
   },
 ];
 ---
@@ -31,25 +51,32 @@ const items = [
   {
     items.map((item) => (
       <li>
-        <>
+        <span>
+          <a href={item.logo.url} target="_blank" rel="noopener noreferrer">
+            <img
+              src={item.logo.src}
+              alt={item.logo.alt}
+              style="width: 50px; height: auto; margin-right: 1em; float: left;"
+            />
+          </a>
           <b>
             {item.position}, <span class="duration">{item.duration}</span>
           </b>
           {item.at}
           <p>{item.description}</p>
-        </>
+        </span>
       </li>
     ))
   }
 </ul>
-
 <style>
   ul {
     padding: 0;
   }
 
   ul li {
-    margin: 0 0 1rem 0;
+    list-style: none;
+    margin: 0 0 0.5em 0;
     padding: 0;
     font-size: 1em;
   }

public/assets/logos/tdhss.png

@@ -3,6 +3,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 
 import CallToAction from "../components/CallToAction.astro";
 import Education from "../components/Education.astro";
+import Experience from "../components/Experience.astro";
 import Hero from "../components/Hero.astro";
 import Positions from "../components/Positions.astro";
 ---
@@ -40,6 +41,10 @@ import Positions from "../components/Positions.astro";
         </div>
       </section>
       <section>
+        <h2 class="section-title">Experience</h2>
+        <div class="content">
+          <Experience />
+        </div>
         <h2 class="section-title">Education</h2>
         <div class="content">
           <Education />