feat: made the grid responsive

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "clsx": "^1.1.1",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^6.1.1",

src/components/sections/ProjectCard.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import GitHubMark from "./GitHubMark";
+import PropTypes from "prop-types";
 
 const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
   const getLiveUrl = () => {
@@ -37,4 +38,11 @@ const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
     </div>
   );
 };
+
+ProjectCard.defaultProps = {
+  title: "Default Title",
+  liveUrl: "/",
+  gitUrl: "/",
+};
+
 export default ProjectCard;

src/components/sections/Projects.jsx

@@ -8,7 +8,7 @@ const Projects = () => {
         <h1 className="w-full text-7xl text-center font-display font-bold text-polar-night-400">
           Projects
         </h1>
-        <div className="w-full grid grid-cols-3 gap-4">
+        <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           <ProjectCard
             title="Real Tutor"
             liveUrl="https://realtutor.johncosta.tech/"
@@ -38,9 +38,16 @@ const Projects = () => {
             </p>
           </ProjectCard>
           <ProjectCard
-            title="Hello World"
-            description="Hello World again lol"
-          />
+            title="Restaurant ordering system"
+            liveUrl="https://www.youtube.com/watch?v=BZY2Le_Szgg&t=1s&ab_channel=JohnCosta"
+            gitUrl="https://github.com/JohnCosta27/"
+          >
+            <p className="text-xl text-snow-storm-100">
+              A revision tool which allows students to revise various subjects.
+              Year 2 Team Project, I was resposible for making the entire UI. I
+              cannot release the source code, but there is a video.
+            </p>
+          </ProjectCard>
           <ProjectCard
             title="Hello World"
             description="Hello World again lol"