feat: modified project tile and section to a column

Author: steadyfall

README.md

@@ -4,4 +4,4 @@ to-do:
 - [ ] check out about highlighting words
 - [ ] YAML file parser for experience, projects
 - [ ] skills, education section
-- [ ] projects in one column, instead of cards
+- [x] projects in one column, instead of cards

src/components/Projects.tsx

@@ -11,7 +11,7 @@ export function Projects({ arr }: ProjectProps) {
         <section id="projects" className="mb-12">
             <h2 className="text-2xl font-bold mb-4">Projects</h2>
             {projects && projects.length > 0 ? (
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-4">
                     {projects.map((project, index) => (
                         <ProjectTile key={index} {...project} />
                     ))}

src/components/Tiles/ProjectTile.tsx

@@ -1,22 +1,41 @@
-import { Github } from 'lucide-react'
+import { ArrowUpRight } from 'lucide-react'
+import { useMediaQuery } from '@/hooks/useMediaQuery'
 
 export type ProjectTileProps = {
   title: string
   description: string
   repo: boolean,
-  repoUrl: string
+  repoUrl?: string,
+  live: boolean,
+  liveUrl?: string,
 }
 
-export function ProjectTile({ title, description, repo, repoUrl }: ProjectTileProps) {
+export function ProjectTile({ title, description, repo, repoUrl, live, liveUrl }: ProjectTileProps) {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
   return (
-    <div className="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-md">
-      <div className="flex justify-between items-start mb-2">
+    <div className="items-center">
+      <div className="flex flex-col md:items-start justify-between sm:flex-row mb-2">
         <h3 className="text-xl font-semibold">{title}</h3>
-        {repo && (
-          <a href={repoUrl} target="_blank" rel="noopener noreferrer" aria-label={`GitHub repository for ${title}`}>
-            <Github className="w-6 h-6" />
-          </a>
-        )}
+        <div className="space-x-2 justify-end">
+          {repo && (
+            <a
+            href={repoUrl} target="_blank"
+            rel="noopener noreferrer" aria-label={`GitHub repository for ${title}`}
+            className="text-pink-500 inline-flex items-center hover:underline"
+            >
+              github <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
+            </a>
+          )}
+          {live && (
+            <a
+            href={liveUrl} target="_blank"
+            rel="noopener noreferrer" aria-label={`Live link for ${title}`}
+            className="text-midnight-blue-500 inline-flex items-center hover:underline"
+            >
+              link <ArrowUpRight className="w-4 h-4 md:w-5 md:h-5"/>
+            </a>
+          )}
+        </div>
       </div>
       <p className="text-gray-700 dark:text-gray-300">{description}</p>
     </div>