feat: added odin card to projects

src/components/sections/ProjectCard.jsx

@@ -2,6 +2,23 @@ import React from "react";
 import GitHubMark from "./GitHubMark";
 
 const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
+  const getLiveUrl = () => {
+    if (liveUrl.length == 0) {
+      return (
+        <div className="w-full flex justify-center items-center h-12 rounded bg-aurora-green text-polar-night-200 transition-all text-xl">
+          Live
+        </div>
+      );
+    }
+    return (
+      <a
+        href={liveUrl}
+        className="w-full flex justify-center items-center h-12 rounded bg-aurora-green text-polar-night-200 hover:bg-aurora-orange transition-all text-xl"
+      >
+        Live
+      </a>
+    );
+  };
   return (
     <div className="min-h-[400px] w-full rounded-lg flex flex-col bg-polar-night-400 p-4 shadow-md justify-between">
       <div className="w-full flex flex-col gap-2">
@@ -9,10 +26,11 @@ const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
         {children}
       </div>
       <div className="w-full flex items-center gap-2 text-lg">
-        <a href={liveUrl} className="w-full flex justify-center items-center h-12 rounded bg-aurora-green text-polar-night-200 hover:bg-aurora-orange transition-all text-xl">
+        {getLiveUrl()}
-          Live
+        <a
-        </a>
+          href={gitUrl}
-        <a href={gitUrl} className="w-full flex justify-center items-center h-12 rounded bg-snow-storm-200 hover:bg-polar-night-100 transition-all">
+          className="w-full flex justify-center items-center h-12 rounded bg-snow-storm-200 hover:bg-polar-night-100 transition-all"
+        >
           <GitHubMark width="32" height="32" />
         </a>
       </div>

src/components/sections/Projects.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ProjectCard from './ProjectCard';
+import ProjectCard from "./ProjectCard";
 
 const Projects = () => {
   return (
@@ -9,13 +9,46 @@ const Projects = () => {
           Projects
         </h1>
         <div className="w-full grid grid-cols-3 gap-4">
-          <ProjectCard title="Real Tutor" liveUrl="/" gitUrl="/">
+          <ProjectCard
-            <p className="text-xl text-snow-storm-100">A lesson and progress management system which allowed tutors at my company to schedule lessons, add repots and keep track of students progress. Built using the MERN stack.</p>
+            title="Real Tutor"
+            liveUrl="https://realtutor.johncosta.tech/"
+            gitUrl="https://github.com/JohnCosta27/RealTutorMERN"
+          >
+            <p className="text-xl text-snow-storm-100">
+              A lesson and progress management system which allowed tutors at my
+              company to schedule lessons, add repots and keep track of students
+              progress. Built using the MERN stack.
+            </p>
+            <p className="text-xl text-snow-storm-100">
+              Use the following credentitals to play around:
+            </p>
+            <ul className="text-lg text-snow-storm-100">
+              <li>Username: 1@tutor.com</li>
+              <li>Password: SafePassword123.</li>
+            </ul>
           </ProjectCard>
-          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+          <ProjectCard
-          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+            title="Odin"
-          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+            liveUrl="https://odin.johncosta.tech/"
-          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+            gitUrl="https://github.com/JohnCosta27/Odin"
+          >
+            <p className="text-xl text-snow-storm-100">
+              A revision tool which allows students to revise various subjects.
+              Uses Auth0 for user sign ups.
+            </p>
+          </ProjectCard>
+          <ProjectCard
+            title="Hello World"
+            description="Hello World again lol"
+          />
+          <ProjectCard
+            title="Hello World"
+            description="Hello World again lol"
+          />
+          <ProjectCard
+            title="Hello World"
+            description="Hello World again lol"
+          />
         </div>
       </div>
     </div>