From ef5892066d5e6d264ec6cb9b9b370df672533f4e Mon Sep 17 00:00:00 2001
From: Misol Goh <melancholy8914@gmail.com>
Date: Mon, 9 Nov 2020 16:21:24 +0000
Subject: [PATCH] fix: each project is shown using different card styles
 depending on the device

---
 src/app/pages/Projects/Project.tsx | 67 ++++++++++++++++++++----------
 1 file changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/app/pages/Projects/Project.tsx b/src/app/pages/Projects/Project.tsx
index d4f0422..cf9b39f 100644
--- a/src/app/pages/Projects/Project.tsx
+++ b/src/app/pages/Projects/Project.tsx
@@ -12,29 +12,52 @@ type ProjectProps = {
 function Project({ data: { title, url, image, descriptions } }: ProjectProps) {
   const { t } = useTranslation();
   return (
-    <div
-      className="shadow-xl p-4 rounded-3xl relative bg-cover"
-      style={{ backgroundImage: `url(${image})` }}
-    >
-      <div className="bg-white text-black lg:w-1/3 md:w-1/2 p-4 rounded-2xl opacity-75">
-        <Title>{t(title)}</Title>
-        {url && (
-          <a
-            href={url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="italic xl:text-xl lg:text-md break-all"
-          >
-            {url}
-          </a>
-        )}
-        <ul className="p-4 pr-0 list-disc">
-          {descriptions.map((desc) => (
-            <li key={desc}>{t(desc)}</li>
-          ))}
-        </ul>
+    <>
+      <div
+        className="hidden md:block shadow-xl p-4 rounded-3xl bg-cover"
+        style={{ backgroundImage: `url(${image})` }}
+      >
+        <div className="bg-white text-black lg:w-1/3 md:w-1/2 p-4 rounded-2xl opacity-75">
+          <Title>{t(title)}</Title>
+          {url && (
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="italic xl:text-xl lg:text-md break-all"
+            >
+              {url}
+            </a>
+          )}
+          <ul className="p-4 pr-0 list-disc">
+            {descriptions.map((desc) => (
+              <li key={desc}>{t(desc)}</li>
+            ))}
+          </ul>
+        </div>
       </div>
-    </div>
+      <div className="block md:hidden shadow-xl p-2 rounded-2xl">
+        <Title className="text-orange-300">{t(title)}</Title>
+        <img className="w-full" src={image} alt={title} />
+        <div className="mt-4">
+          {url && (
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="italic break-all font-bold"
+            >
+              {url}
+            </a>
+          )}
+          <ul className="p-4 pr-0 list-disc">
+            {descriptions.map((desc) => (
+              <li key={desc}>{t(desc)}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </>
   );
 }