added blog

app/blog/[slug]/page.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { use } from 'react'
+
+import { notFound } from 'next/navigation'
+import { useSharedData } from '@/app/context/ProjectContext';
+import { useMountTransition } from '@/hooks/useAnimations';
+import "../../../styles/markdown-container.css";
+import Link from 'next/link';
+import { BLOG_POSTS } from '@/data/content';
+import SimpleGallery from '@/components/SimpleGallery';
+
+export default function BlogPostPage({params}: { params: Promise<{ slug: string }> })
+{
+
+  const mounted = useMountTransition(50)
+  const { slug } = use(params);
+
+  const hasValidPost = BLOG_POSTS.find((v)=>v.slug == slug);
+  if (!slug || !hasValidPost) notFound();
+
+  const hasValidDetails = hasValidPost.details
+  const postDetails = useSharedData();
+
+  return (
+     <div 
+     id="blog-markdown-container" 
+     className={"markdown-container"}
+     style={{
+      opacity: mounted ? 1 : 0,
+      transition: "all 0.5s ease",
+      translate: mounted ? "0 2em" : "0 0"
+     }}
+      >          
+
+   {
+    hasValidDetails ? 
+    (
+    <main dangerouslySetInnerHTML={{ __html: postDetails }}>
+    </main>
+    ) : (
+      <p>No post details available.</p>
+      )
+    }
+
+    {hasValidPost.images && hasValidPost.images.length > 0 && (
+      <section className="project-details-gallery">
+        <h2>Gallery</h2>
+        <SimpleGallery images={hasValidPost.images} title={hasValidPost.title} gallerySize="large"/>
+      </section>
+    )}
+
+    
+    <div style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: "1em",
+      marginBottom: "2em"
+    }}>
+      <Link onClick={(e)=>{
+          window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: 'smooth'
+          });
+        }}
+        
+          className="expand-on-hover-button"
+          href={"#"}>Back To Top</Link>
+
+          <Link 
+          className="expand-on-hover-button"
+          href={"/blog"}>All Posts</Link>
+        </div>
+    </div>
+  );
+}