From 6e02cb92aa0c9ed1da255a8df8e562650a9b6cbd Mon Sep 17 00:00:00 2001
From: NotXia <35894453+NotXia@users.noreply.github.com>
Date: Fri, 12 Jan 2024 21:04:42 +0100
Subject: [PATCH] Changed projects as tiles

---
 components/projects/ProjectCard.vue          | 22 +++++++------
 components/projects/cards/NotXiaGithubio.vue |  2 +-
 pages/projects.vue                           | 34 ++++++++------------
 3 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/components/projects/ProjectCard.vue b/components/projects/ProjectCard.vue
index 780e910..f1a537c 100644
--- a/components/projects/ProjectCard.vue
+++ b/components/projects/ProjectCard.vue
@@ -1,14 +1,18 @@
 <template>
-    <div class="border border-gray-500 dark:border-gray-300 rounded-md p-3 mx-auto w-full lg:w-2/3 xl:w-1/2">
-        <h3 class="text-2xl font-semibold text-center text-gray-900 dark:text-white">{{ props.title }}</h3>
-        <h4 v-if="props.subtitle" class="text font-semibold text-center text-gray-700 dark:text-gray-300">{{ props.subtitle }}</h4>
-        <div class="text-center mb-2">
-            <a v-for="link in props.links" :href="link.url" class="font-mono inline-block hover:underline mx-2">{{ link.label }}</a>
+    <div class="w-100 p-5 h-full">
+        <div class="border border-gray-500 dark:border-gray-300 rounded-md p-3 w-full h-full flex items-center justify-center">
+            <div class="w-full">
+                <h3 class="text-2xl font-semibold text-center text-gray-900 dark:text-white">{{ props.title }}</h3>
+                <h4 v-if="props.subtitle" class="text font-semibold text-center text-gray-700 dark:text-gray-300">{{ props.subtitle }}</h4>
+                <div class="text-center mb-2">
+                    <a v-for="link in props.links" :href="link.url" class="font-mono inline-block hover:underline mx-2">{{ link.label }}</a>
+                </div>
+                <p class="w-full text-lg whitespace-pre-wrap mb-2 text-gray-500 dark:text-gray-400">
+                    <slot></slot>
+                </p>
+                <img v-if="props.image" :src="props.image" alt="" class="max-w-full max-h-96 mx-auto">
+            </div>
         </div>
-        <p class="text-lg whitespace-pre-wrap mb-2 text-gray-500 dark:text-gray-400">
-            <slot></slot>
-        </p>
-        <img :src="props.image" alt="" class="max-w-full max-h-96 mx-auto">
     </div>
 </template>
 
diff --git a/components/projects/cards/NotXiaGithubio.vue b/components/projects/cards/NotXiaGithubio.vue
index be65065..af89dee 100644
--- a/components/projects/cards/NotXiaGithubio.vue
+++ b/components/projects/cards/NotXiaGithubio.vue
@@ -5,7 +5,7 @@
             { label: 'Repository', url: 'https://github.com/NotXia/notxia.github.io' },
         ]">
         
-        <p v-if="!show_recursive_message">{{ $t('notxia.github.io.description') }}</p>
+        <p v-if="!show_recursive_message" class="text-center">{{ $t('notxia.github.io.description') }}</p>
 
         <div class="w-full h-72 relative">
             <div role="status" v-if="!iframe_loaded && !show_recursive_message" class="absolute top-0 left-0 w-full h-full flex justify-center items-center">
diff --git a/pages/projects.vue b/pages/projects.vue
index 23a5cad..d8ca66a 100644
--- a/pages/projects.vue
+++ b/pages/projects.vue
@@ -4,26 +4,20 @@
     <main>
         <h1 class="text-5xl font-bold text-center mb-5">{{ $t("projects") }}</h1>
         
-        <h2 class="text-3xl text-center mt-10 mb-3">{{ $t("wip") }}</h2>
-        <div class="[&>*]:my-14 first:[&>*]:mt-8">
-            <NotXiaGithubio />
-        </div>
-        
-        
-        <h2 class="text-3xl text-center mt-10 mb-3">{{ $t("completed") }}</h2>
-        <div class="[&>*]:my-14 first:[&>*]:mt-8">
-            <TablutPlayer />
-            <BScThesis />
-            <WaveMap />
-            <Wirefilter />
-            <TweetAnalysis />
-            <AnimalHouse />
-            <PandOSplus />
-            <Imaging />
-            <MNKGame />
-            <Platform />
-            <PathfindingVisualizer />
-            <SortingVisualizer />
+        <div class="grid grid-flow-row-dense grid-cols-12 grid-rows-12 m-auto justify-center [&>*]:px-5 [&>*]:py-5">
+            <NotXiaGithubio             class="col-span-12" />
+            <TablutPlayer               class="lg:col-span-4 row-span-1 col-span-12" />
+            <BScThesis                  class="lg:col-span-8 row-span-1 col-span-12" />
+            <WaveMap                    class="lg:col-span-4 lg:row-span-2 col-span-12" />
+            <Wirefilter                 class="lg:col-span-4 row-span-1 col-span-12" />
+            <TweetAnalysis              class="lg:col-span-8 row-span-1 col-span-12" />
+            <AnimalHouse                class="lg:col-span-6 row-span-1 col-span-12" />
+            <PandOSplus                 class="lg:col-span-4 row-span-1 col-span-12" />
+            <Imaging                    class="lg:col-span-6 row-span-1 col-span-12" />
+            <MNKGame                    class="lg:col-span-4 row-span-1 col-span-12" />
+            <Platform                   class="lg:col-span-8 row-span-1 col-span-12" />
+            <PathfindingVisualizer      class="lg:col-span-6 row-span-1 col-span-12" />
+            <SortingVisualizer          class="lg:col-span-6 row-span-1 col-span-12" />
         </div>
     </main>
 </template>