Markdown description, icon grid, fix overflow

package.json

@@ -9,16 +9,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "@heroicons/react": "^2.0.13",
     "@tanstack/react-query": "^4.16.0",
     "@trpc/client": "^10.0.0",
     "@trpc/next": "^10.0.0",
     "@trpc/react-query": "^10.0.0",
     "@trpc/server": "^10.0.0",
     "next": "13.0.2",
+    "plaiceholder": "^2.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.7.1",
+    "react-markdown": "^8.0.4",
     "sass": "^1.56.2",
+    "sharp": "^0.31.3",
     "superjson": "1.9.1",
     "usehooks-ts": "^2.9.1",
     "zod": "^3.18.0"

src/components/ItemCard.tsx

@@ -1,16 +1,19 @@
-import Image from "next/image";
-import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
 import React, {useRef} from "react";
 import {useOnClickOutside, useToggle} from "usehooks-ts";
 import {classNames, isHoverable} from "../utils/helpers";
+import DependentImage from "./DependentImage";
+import ReactMarkdown from 'react-markdown'
+
+import {AiFillGithub} from "react-icons/ai";
 
 type ItemCardProps = {
     banner: string;
-    title: React.ReactNode;
-    description: React.ReactNode;
+    bannerBlur: string;
+    title: string;
+    description: string;
 }
 
-const ItemCard = ({banner, title, description}: ItemCardProps) => {
+const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
     const itemRef = useRef<HTMLDivElement>(null);
     const [active, toggleActive, setActive] = useToggle()
 
@@ -18,21 +21,28 @@ const ItemCard = ({banner, title, description}: ItemCardProps) => {
         setActive(false);
     })
 
-    return <div onClick={() => {if (!isHoverable()) toggleActive();}}
+    return <div onClick={() => {
+        if (!isHoverable()) toggleActive();
+    }}
                 ref={itemRef} className={classNames("item", active ? "active" : null)}>
-        <Image fill src={banner}
-               alt={`Banner for ${title}`}
-               style={{objectFit: "cover"}}
+        <DependentImage fill src={banner} blurDataURL={bannerBlur}
+                        className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
+                        placeholder="blur"
+                        alt={`Banner for ${title}`}
         />
-        <div className="elements grid grid-cols-5 h-full">
-            <div className="col-span-4 md:col-span-3 z-30 drop-shadow-2xl p-0 md:p-3 pl-2 md:ml-4">
-                <div className="mt-1 text-xl md:mt-3 md:text-3xl">{title}</div>
-                <div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{description}</div>
+        <div className="elements grid grid-cols-12 h-full">
+            <div className="col-span-8 max-h-full md:col-span-7 drop-shadow-2xl md:p-3 pl-2 md:ml-4">
+                <div className="mt-1 text-lg md:mt-3 md:text-3xl">{title}</div>
+                <div className="mt-0 md:mt-1.5 md:text-xl overflow-hidden">
+                    <ReactMarkdown>{description}</ReactMarkdown>
+                </div>
             </div>
-            <div className="hidden md:block"/>
-            <div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
-                <ArrowLongRightIcon
-                    className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>
+            <div className="col-span-1 hidden md:block"/>
+            <div className="col-span-4 w-full flex justify-end max-h-full md:py-5">
+                <div
+                    className="grid grid-cols-2 grid-rows-2 mr-1 md:mr-5 gap-3 aspect-square max-w-full object-contain max-h-full icon-grid">
+                    <AiFillGithub/>
+                </div>
             </div>
         </div>
     </div>

src/pages/index.tsx

@@ -55,8 +55,8 @@ const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
                 <link rel="icon" href="/favicon.ico"/>
             </Head>
             <main
-                className="flex py-3 max-h-screen min-h-screen flex-row md:items-center justify-center bg-zinc-900 text-zinc-50">
-                <div className="h-full w-full max-w-[95%] 2xl:max-w-[70%] mx-auto">
+                className="flex py-3 min-h-screen flex-row md:items-center justify-center bg-zinc-900 text-zinc-50">
+                <div className="h-full w-full max-w-[95%] lg:max-w-[85%] xl:max-w-[70%] mx-auto">
                     <div className="flex h-full m-1 flex-col justify-start gap-y-4">
                         {
                             projects.map((project, index) =>

src/styles/globals.scss

@@ -12,13 +12,17 @@ html, body {
 }
 
 .item {
-  @apply w-full aspect-[7/2] sm:aspect-[5/3] sm:h-[14rem] md:h-[16rem] relative pointer-events-auto cursor-pointer overflow-hidden transition-all rounded;
+  @apply w-full aspect-[7/2] lg:aspect-[5/3] sm:h-[14rem] md:h-[16rem] relative pointer-events-auto cursor-pointer overflow-hidden transition-all rounded;
   > img {
     @apply rounded transition-all;
   }
 
   .elements {
     @apply hidden transition-all delay-100;
+    > * {
+      z-index: 30;
+      min-height: 0;
+    }
   }
 
   &:hover, &.active {
@@ -44,4 +48,15 @@ html, body {
       transition-delay: 0s;
     }
   }
+}
+
+.icon-grid {
+  direction: rtl;
+  grid-auto-flow: column;
+
+  > svg {
+    width: 75%;
+    height: 75%;
+    @apply transition-transform drop-shadow-md hover:scale-[120%] text-zinc-200 hover:text-zinc-50 m-auto aspect-square;
+  }
 }