feat: add new projects

css/style.css

@@ -98,8 +98,7 @@ header {
   display: flex;
   justify-content: space-between;
   padding: 20px 25px;
-  background:
-    transparent linear-gradient(180deg, #f9f9f9 0%, #c3c0c0 100%) 0% 0% no-repeat
+  background: transparent linear-gradient(180deg, #f9f9f9 0%, #c3c0c0 100%) 0% 0% no-repeat
     padding-box;
   transition: transform 0.3s ease-in-out;
   transform: translateX(0%);
@@ -553,9 +552,9 @@ hr {
   border: 1px solid #ebecf0;
   box-shadow: 0 48px 48px rgba(37, 47, 137, 0.08);
   border-radius: 8px;
+  margin: auto;
+  width: 90vw;
   margin-top: 30px;
-  margin-left: 15vw;
-  width: 70vw;
   height: 90vh;
   overflow-y: scroll;
   overflow-x: hidden;

js/modalData.js

@@ -1,85 +1,103 @@
 const projectData = [
   {
-    snapshot: './assets/images/picture.png',
-    projectName: 'Pictury',
-    technologies: ['React', 'JavaScript', 'API', 'Tailwind CSS'],
-    live: 'https://pictury.netlify.app/',
-    source: '',
+    snapshot: "./assets/images/sn2.png",
+    projectName: "KSECI",
+    technologies: ["React", "JavaScript", "API", "Material UI"],
+    live: "https://knowledgest-ai.netlify.app/",
+    source: "",
     description:
-      'Pictury is a dynamic social media platform designed for seamless picture sharing and engaging interactions. It empowers users to effortlessly upload and download captivating images while fostering meaningful connections within a vibrant community of fellow photo enthusiasts.',
+      "Knowledgest is a knowledge sharing application with AI integration. With Knowledgest, groups or companies can share knowledge among their people through blogs, chats, forums, and so on.",
   },
   {
-    snapshot: './assets/images/math2.png',
-    desktopSnapshot: './assets/images/math1.png',
-    projectName: 'Math-Magician & QR Code Generator',
-    technologies: ['React', 'JavaScript', 'CSS', 'Linters'],
-    live: 'https://mathe-magic.netlify.app/',
-    source: 'https://github.com/kendoriddy/math-magicians',
+    snapshot: "./assets/images/sn4.png",
+    projectName: "Kanta",
+    technologies: ["Next.JS", "JavaScript", "API", "Tailwind CSS"],
+    live: "https://www.getkanta.com/",
+    source: "",
+    description:
+      "Kanta empowers simple retail businesses to take control of their operations. Revolutionize your bookkeeping, inventory and invoicing experience, ensuring a seamless and efficient operation.",
+  },
+  {
+    snapshot: "./assets/images/picture.png",
+    projectName: "Pictury",
+    technologies: ["React", "JavaScript", "API", "Tailwind CSS"],
+    live: "https://pictury.netlify.app/",
+    source: "",
+    description:
+      "Pictury is a dynamic social media platform designed for seamless picture sharing and engaging interactions. It empowers users to effortlessly upload and download captivating images while fostering meaningful connections within a vibrant community of fellow photo enthusiasts.",
+  },
+  {
+    snapshot: "./assets/images/math2.png",
+    desktopSnapshot: "./assets/images/math1.png",
+    projectName: "Math-Magician & QR Code Generator",
+    technologies: ["React", "JavaScript", "CSS", "Linters"],
+    live: "https://mathe-magic.netlify.app/",
+    source: "https://github.com/kendoriddy/math-magicians",
     description:
       '"Math-Magician" started as just a web app for all lovers of mathematics. It is a Single Page Application (SPA) that allows users to make simple calculations, generate and read random math-related quotes and also tweet the quote. But now, it is more than just a calculator, it has a roman numeral converter and a QR code generator.',
   },
   {
-    snapshot: './assets/images/asos.png',
-    projectName: 'ASOS Birthday Tracker',
-    technologies: ['React', 'JavaScript', 'Linters', 'CSS'],
-    live: 'https://asostracker.netlify.app/',
-    source: 'https://github.com/kendoriddy/asos-birthday-tracker',
-    description: 'I created a webapp that tracks the birthdays of my secondary school classmates.',
+    snapshot: "./assets/images/asos.png",
+    projectName: "ASOS Birthday Tracker",
+    technologies: ["React", "JavaScript", "Linters", "CSS"],
+    live: "https://asostracker.netlify.app/",
+    source: "https://github.com/kendoriddy/asos-birthday-tracker",
+    description: "I created a webapp that tracks the birthdays of my secondary school classmates.",
   },
   {
-    snapshot: './assets/images/pictury.png',
-    projectName: 'Picture World',
-    technologies: ['React', 'JavaScript', 'API', 'Tailwind CSS'],
-    live: 'https://pictureworld.netlify.app/',
-    source: 'https://github.com/kendoriddy/picture-world',
+    snapshot: "./assets/images/pictury.png",
+    projectName: "Picture World",
+    technologies: ["React", "JavaScript", "API", "Tailwind CSS"],
+    live: "https://pictureworld.netlify.app/",
+    source: "https://github.com/kendoriddy/picture-world",
     description:
-      'I built an image gallery app using the Pixabay API, by integrating Tailwind CSS with React.',
+      "I built an image gallery app using the Pixabay API, by integrating Tailwind CSS with React.",
   },
   {
-    snapshot: './assets/images/awesome.png',
-    projectName: 'Awesome Books',
-    technologies: ['HTML', 'JavaScript', 'Linters', 'CSS'],
-    live: 'https://kendoriddy.github.io/awesome-books-v2/',
-    source: 'https://github.com/kendoriddy/awesome-books-v2',
+    snapshot: "./assets/images/awesome.png",
+    projectName: "Awesome Books",
+    technologies: ["HTML", "JavaScript", "Linters", "CSS"],
+    live: "https://kendoriddy.github.io/awesome-books-v2/",
+    source: "https://github.com/kendoriddy/awesome-books-v2",
     description:
-      'This project is a website that displays a list of books that users have added.It allows you to add and remove books from that list also. The goal of this project is to build a simple multi-page responsive book website.',
+      "This project is a website that displays a list of books that users have added.It allows you to add and remove books from that list also. The goal of this project is to build a simple multi-page responsive book website.",
   },
   {
-    snapshot: './assets/images/travel.png',
-    projectName: 'Marvel Space Hub',
-    technologies: ['React', 'Redux', 'Rest API', 'Linters'],
-    live: 'https://marvel-space.netlify.app/',
-    source: 'https://github.com/kendoriddy/Space-Travelers-Hub',
+    snapshot: "./assets/images/travel.png",
+    projectName: "Marvel Space Hub",
+    technologies: ["React", "Redux", "Rest API", "Linters"],
+    live: "https://marvel-space.netlify.app/",
+    source: "https://github.com/kendoriddy/Space-Travelers-Hub",
     description:
-      'The Space Travelers is a a React, Redux application based on the SpaceX API. This app is built with HTML | CSS | JAVASCRIPT | React and Redux and JEST it uses multiple API to render rockets and missions and enable users to have reserve the reocket and also join the mission.',
+      "The Space Travelers is a a React, Redux application based on the SpaceX API. This app is built with HTML | CSS | JAVASCRIPT | React and Redux and JEST it uses multiple API to render rockets and missions and enable users to have reserve the reocket and also join the mission.",
   },
   {
-    snapshot: './assets/images/beef.png',
-    desktopSnapshot: './assets/images/math1.png',
-    projectName: 'BeefLand Eatery',
-    technologies: ['Webpack', 'JavaScript', 'CSS', 'HTML'],
-    live: 'https://kendoriddy.github.io/BeefLand-Eatery/',
-    source: 'https://github.com/kendoriddy/BeefLand-Eatery',
+    snapshot: "./assets/images/beef.png",
+    desktopSnapshot: "./assets/images/math1.png",
+    projectName: "BeefLand Eatery",
+    technologies: ["Webpack", "JavaScript", "CSS", "HTML"],
+    live: "https://kendoriddy.github.io/BeefLand-Eatery/",
+    source: "https://github.com/kendoriddy/BeefLand-Eatery",
     description:
-      'The BeefLand web application displays a list of meals that were provided by an external API. The users can like a meal, leave some comments or make a reservation, in these cases an involvement API was used. N.B. The reservation functions are not implemented because there are just two in the group.',
+      "The BeefLand web application displays a list of meals that were provided by an external API. The users can like a meal, leave some comments or make a reservation, in these cases an involvement API was used. N.B. The reservation functions are not implemented because there are just two in the group.",
   },
   {
-    snapshot: './assets/images/sc1.png',
-    projectName: 'Stuk Mart',
-    technologies: ['React', 'JavaScript', 'Redux', 'API'],
-    live: 'https://stuk-mart.netlify.app/',
-    source: 'https://github.com/kendoriddy/stuk-mart',
+    snapshot: "./assets/images/sc1.png",
+    projectName: "Stuk Mart",
+    technologies: ["React", "JavaScript", "Redux", "API"],
+    live: "https://stuk-mart.netlify.app/",
+    source: "https://github.com/kendoriddy/stuk-mart",
     description:
-      'Stuk-Mart is a web(mobile-focused) app for checking the companies listed on the stock exchange and see their live metrics. Its data is consumed from the Financial modelling API. It is built using React, Redux, and React-bootstrap, Skeleton Loader, Recharts.',
+      "Stuk-Mart is a web(mobile-focused) app for checking the companies listed on the stock exchange and see their live metrics. Its data is consumed from the Financial modelling API. It is built using React, Redux, and React-bootstrap, Skeleton Loader, Recharts.",
   },
   {
-    snapshot: './assets/images/app-img.png',
-    projectName: 'Book Store',
-    technologies: ['React', 'Redux', 'Rest API', 'Linters'],
-    live: 'https://a-bookstore.netlify.app/',
-    source: 'https://github.com/kendoriddy/Bookstore',
+    snapshot: "./assets/images/app-img.png",
+    projectName: "Book Store",
+    technologies: ["React", "Redux", "Rest API", "Linters"],
+    live: "https://a-bookstore.netlify.app/",
+    source: "https://github.com/kendoriddy/Bookstore",
     description:
-      'The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.',
+      "The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.",
   },
 ];