projects

src/components/Modal.jsx

@@ -3,14 +3,28 @@ import parser from 'html-react-parser';
 
 export default function Modal({ modalData }) {
   const { thumbUrl, details } = modalData;
-  const { title, description, type, langages, platform, country, url } =
+  const { title, description, type, languages, platform, country, url, devlog } =
     details;
+
+
   return (
     <div className="px-modal">
       <div className="single-project-box">
         <div className="row align-items-start">
           <div className="col-lg-7">
-            <img className="border" src={thumbUrl} title alt="Thumbnail" />
+            <img className="border" src={thumbUrl} alt="Thumbnail" />
+            <div className="mt-3">
+              {devlog && (
+                <a href={devlog} target="_blank" rel="noopener noreferrer" className="btn btn-primary me-2">
+                  View Devlog
+                </a>
+              )}
+              {url && (
+                <a href={url} target="_blank" rel="noopener noreferrer" className="btn btn-secondary">
+                  View Repo
+                </a>
+              )}
+            </div>
           </div>
           <div className="col-lg-5 pt-4 pt-lg-0">
             {title && <h4>{parser(title)}</h4>}
@@ -23,10 +37,10 @@ export default function Modal({ modalData }) {
                     <span>{type}</span>
                   </li>
                 )}
-                {langages && (
+                {languages && (
                   <li className="d-flex">
-                    <span className="col-4 col-lg-3">Langages:</span>
-                    <span>{langages}</span>
+                    <span className="col-4 col-lg-3">Languages:</span>
+                    <span>{languages}</span>
                   </li>
                 )}
                 {platform && (
@@ -44,7 +58,11 @@ export default function Modal({ modalData }) {
                 {url && (
                   <li className="d-flex">
                     <span className="col-4 col-lg-3">Live URL:</span>
-                    <span>{url}</span>
+                    <span>
+                      <a href={url} target="_blank" rel="noopener noreferrer">
+                        {url}
+                      </a>
+                    </span>
                   </li>
                 )}
               </ul>

src/data/HomePagdData.json

@@ -80,31 +80,32 @@
     },
     "allProjects": [
       {
-        "thumbUrl": "/images/popup-project-1.jpg",
+        "thumbUrl": "/images/car_controller_short.gif",
         "title": "Unity Car Controller",
         "subTitle": "Custom Car Controller built from scratch",
         "details": {
           "title": "Simple Car Controller for Unity",
-          "description": "https://github.com/Sewmina7/SimpleCarController <br /><br />This project was inspired by the lack of customization in unity's built-in wheel colliders. I wanted a fully functioning and flexible wheel physics. And of course I wanted to learn how real cars behave, So what's a better way to learn something other than implementing it on my own?<br /><br /><a>https://devlogofsewmina.blogspot.com/2022/10/simple-car-controller.html</a> (Devlog)",
+          "description": "https://github.com/Sewmina7/SimpleCarController <br /><br />This project was inspired by the lack of customization in unity's built-in wheel colliders. I wanted a fully functioning and flexible wheel physics. And of course I wanted to learn how real cars behave, So what's a better way to learn something other than implementing it on my own?<br /><br />",
           "type": "Game Development",
           "languages": "Unity, C#",
           "platform": "Unity",
 
-          "url": "https://github.com/Sewmina7/SimpleCarController"
+          "url": "https://github.com/Sewmina7/SimpleCarController",
+          "devlog": "https://devlogofsewmina.blogspot.com/2022/10/simple-car-controller.html"
         }
       },
       {
-        "thumbUrl": "/images/popup-project-2.jpg",
-        "title": "Website Design",
-        "subTitle": "Web Design, App Design",
+        "thumbUrl": "/images/cupid_thumbnail.png",
+        "title": "Cupid Matchmaker",
+        "subTitle": "Matchmaker for Unity + Mirror | Dedicated hosting",
         "details": {
-          "title": "Website Design for Marketing Agency Startup",
-          "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-          "type": "Website",
-          "langages": "PHP, HTML, CSS, JS",
-          "platform": "WordPress",
-          "country": "USA",
-          "url": "www.example.com"
+          "title": "Cupid Matchmaker for Unity + Mirror | Dedicated hosting",
+          "description": "Cupid is a Matchmaking backend that can open game instances on demand. Just like making rooms in a relay server, This will open Game instance for each room so the Rooms can be dedicated servers instead of making the players the host.<br/><br/>This consists of two parts, This is the server backend written in NodeJS. Client will communicate with this and this will manage rooms and game instances.",
+          "type": "Game Development + Server Backend Solution",
+          "langages": "C#, JS",
+          "platform": "Unity + NodeJS",
+          "url": "https://github.com/Sewmina7/CupidServer",
+          "devlog":"https://devlogofsewmina.blogspot.com/2024/02/cupid-matchmaker-for-unity-mirror.html"
         }
       },
       {