Add logo at the work company

src/Components/WorkExperience/WorkItem.js

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 
-const WorkItem = ({ work,duration }) => {
+const WorkItem = ({ work, duration }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [needsExpansion, setNeedsExpansion] = useState(false);
   const contentRef = useRef(null);
@@ -25,20 +25,33 @@ const WorkItem = ({ work,duration }) => {
       <time className="mb-1 text-xs lg:text-sm font-normal leading-none text-red-500">
         {work.start_time} - {work.end_time} ({duration})
       </time>
-      <h3 className="text-base lg:text-lg font-semibold text-white">{work.title}</h3>
-      {work.location_url ? (
-        <a
-          href={work.location_url}
-          target="_blank"
-          rel="noreferrer"
-          className="italic underline decoration-red-600"
-        >
-          <h5 className="text-sm font-normal text-red-600">{work.location}</h5>
-        </a>
-      ) : (
-        <h5 className="text-sm font-normal text-red-600">{work.location}</h5>
-      )}
 
+      <h3 className="text-base lg:text-lg font-semibold text-white">
+        {work.title}
+      </h3>
+      <div className="flex items-center">
+        {work.logoimage && (
+          <img
+            src={work.logoimage}
+            alt={work.logoimage}
+            className="w-6 h-6 mr-1 rounded-full "
+          />
+        )}
+        {work.location_url ? (
+          <a
+            href={work.location_url}
+            target="_blank"
+            rel="noreferrer"
+            className="italic underline decoration-red-600"
+          >
+            <h5 className="text-sm font-normal text-red-600">
+              {work.location}
+            </h5>
+          </a>
+        ) : (
+          <h5 className="text-sm font-normal text-red-600">{work.location}</h5>
+        )}
+      </div>
       <ul
         ref={contentRef}
         className={`mb-2 text-xs lg:text-sm font-normal text-red-300 list-disc list-inside space-y-1 transition-all duration-300 ${

src/Components/WorkExperience/work_exper.js

@@ -1,3 +1,9 @@
+import libralogo from "../../img/work_exp/libra_logo.jpg";
+import pyrotechnica_logo from "../../img/work_exp/pyrotechnica_engineering_hellas___logo.jpg";
+import tedxntua_logo from "../../img/work_exp/tedxntua_logo.jpg";
+import blupry_logo from "../../img/work_exp/blupry_logo.jpg";
+
+
 export const work_experience_list = [
   {
     title: "Customer Service",
@@ -12,6 +18,7 @@ export const work_experience_list = [
     start_time: "Jun 2022",
     end_time: "Jul 2022",
     location: "LIBRA AI Technologies",
+    logoimage: libralogo,
     location_url: "https://www.libramli.ai/",
     description: `Assisted in React.js development, contributing to the creation of responsive front-end interfaces.\nSupported the architecture of C# back-end solutions, focusing on data management and system functionality.\nParticipated in Agile methodologies, gaining exposure to collaborative development practices.\nInvolved in the entire software development lifecycle, from requirements to deployment.\nWorked on RESTful API implementation to facilitate communication between front-end and back-end components.\nContributed to the development of the company website, gaining hands-on experience in web design and maintenance.`,
   },
@@ -30,6 +37,7 @@ export const work_experience_list = [
     start_time: "Apr 2024",
     end_time: "Oct 2024",
     location: "PYROTECHNICA ENGINEERING HELLAS ΜΟΝ. ΙΚΕ",
+    logoimage: pyrotechnica_logo,
     location_url: "https://pyrotechnica.gr/",
     description: `Website Maintenance and Enhancement: Maintain and improve the eShop website - https://pyrotechnica.gr/ - which is based on WordPress and utilizes WooCommerce and Elementor. Implement updates, troubleshoot issues, and optimize the site for better performance and user experience. Utilize PHP for scripting and CSS for styling to ensure smooth functionality and a visually appealing design.\ne-Storage Management: Manage the electronic storage system using the Atlantis ERP system, including the creation and management of invoices for customer orders.. Ensure accurate inventory tracking, streamline workflows, and enhance operational efficiency.\neShop Management and Support: Oversee the daily operations of the eShop, including assisting with packaging and shipping tasks to ensure timely order fulfillment.\nDigital Marketing Strategy: Develop and propose innovative digital marketing ideas to drive traffic and increase sales for the eShop.\nSupplies Assistant: Assist in the physical store with managing supplies, restocking shelves, and ensuring that the store is well-organized and inventory is up-to-date.`,
   },
@@ -38,6 +46,7 @@ export const work_experience_list = [
     title: "Organizer - IT TEAM",
     start_time: "Nov 2023",
     end_time: "Present",
+    logoimage: tedxntua_logo,
     location: "TEDxNTUA",
     location_url: "https://tedx-ntua.com/",
     description: `Collaborated with the IT team in the development of the archive site for TEDxNTUA. Αccessible at tedx-ntua.com.\nContributed to the creation of the official website for the 2024 TEDxNTUA event. Accessible at https://2024.tedxntua.com\nFacilitated coordination between various sub-teams to ensure the smooth organization of the TEDxNTUA 2024 event`,
@@ -47,6 +56,7 @@ export const work_experience_list = [
     title: "Web Developer",
     start_time: "Apr 2024",
     end_time: "Present",
+    logoimage: blupry_logo,
     location: "Blupry",
     location_url: "https://blupry.io/",
     description: `Developed HTML Templates and React Components: Created dynamic, reusable HTML and React components for the Framer.com platform, ensuring they were adaptable for no-code usage. Leveraged responsive CSS to ensure cross-device compatibility, providing a seamless experience across mobile, tablet, and desktop devices. Enhanced interactivity through JavaScript to deliver an engaging and user-friendly interface.\nVersion Control with Git: Utilized Git to manage source code efficiently, enabling collaboration with other developers, tracking project changes, and facilitating smooth version control throughout the project lifecycle. Leveraged Git branches to work on new features and bug fixes while maintaining the integrity of the main codebase.\nTesting and Debugging: Carried out comprehensive testing and debugging processes to identify and fix issues early in development. Employed both manual and automated testing techniques to ensure that components met functional and performance requirements. Consistently improved code quality through iterative testing cycles, reducing potential issues in production.`,