better design with selfmade shader

pages/project/[slug].tsx

@@ -16,16 +16,20 @@ export const ProjectArticle = ({
 }: MarkdownRenderingResult) => {
   return (
     <MainLayout>
-      <Link href="/projects">
-        <button className="flex flex-row items-center gap-2 text-primary hover:text-primary-dark dark:text-secondary dark:hover:text-secondary/50 transition-all ease-in duration-75">
-          <BackIcon />
-          <span>Go Back</span>
-        </button>
-      </Link>
+      <div className="rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 gap-4 bg-black bg-opacity-30 round">
+        <div className="mx-10 my-10">
+          <Link href="/projects">
+            <button className="flex flex-row items-center gap-2 text-primary hover:text-primary-dark dark:text-secondary dark:hover:text-secondary/50 transition-all ease-in duration-75">
+              <BackIcon />
+              <span>Go Back</span>
+            </button>
+          </Link>
 
-      <PostHeader frontMatter={frontMatter} estTime={readingTime(html)} />
+          <PostHeader frontMatter={frontMatter} estTime={readingTime(html)} />
 
-      <StyledMarkdown html={html} />
+          <StyledMarkdown html={html} />
+        </div>
+      </div>
     </MainLayout>
   );
 };