🖼️ update blog post styles

components/blog/blog-card.tsx

@@ -14,8 +14,8 @@ export function BlogCard({ post, variant }: BlogCardProps) {
   if (!hasImage || variant === 'text-only') {
     return (
       <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
-        <article className="border-4 border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
-          <div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
+        <article className="border border-slate-700 bg-slate-900 p-6 h-full cyber-glitch-hover">
+          <div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
             <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
               {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
             </span>
@@ -44,7 +44,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
   if (variant === 'image-side') {
     return (
       <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
-        <article className="border-4 border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
+        <article className="border border-slate-700 bg-slate-900 overflow-hidden h-full cyber-glitch-hover">
           <div className="flex flex-col md:flex-row h-full">
             <div className="md:w-1/3 relative h-64 md:h-auto bg-zinc-900">
               <Image
@@ -56,7 +56,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
               <div className="absolute inset-0 bg-zinc-900/60" />
             </div>
             <div className="md:w-2/3 p-6">
-              <div className="border-l-4 border-cyan-400 pl-4 mb-4">
+              <div className="border-l-2 border-cyan-400 pl-4 mb-4">
                 <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
                   {post.frontmatter.category} // {formatDate(post.frontmatter.date)}
                 </span>
@@ -86,7 +86,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
 
   return (
     <Link href={`/blog/${post.slug}`} className="block cursor-pointer">
-      <article className="border-4 border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
+      <article className="border border-slate-700 bg-slate-900 overflow-hidden transition-all duration-300 cyber-glitch-hover h-full">
         <div className="relative h-64 bg-zinc-900">
           <Image
             src={post.frontmatter.image!}
@@ -97,7 +97,7 @@ export function BlogCard({ post, variant }: BlogCardProps) {
           <div className="absolute inset-0 bg-zinc-900/60" />
         </div>
         <div className="p-6">
-          <div className="border-l-4 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
+          <div className="border-l-2 pl-4 mb-4" style={{ borderColor: 'var(--neon-pink)' }}>
             <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
               {post.frontmatter.category} <span style={{ color: 'var(--neon-cyan)' }}>//</span> {formatDate(post.frontmatter.date)}
             </span>

components/blog/code-block.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { useState } from 'react'
+
+interface CodeBlockProps {
+  code: string
+  language: string
+  filename?: string
+  showLineNumbers?: boolean
+}
+
+export function CodeBlock({ code, language, filename, showLineNumbers = true }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="not-prose my-8 border-2 border-[var(--neon-purple)] bg-[rgb(var(--bg-primary))] dark:bg-black relative overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 bg-[rgb(var(--bg-secondary))] dark:bg-zinc-950 border-b-2 border-[var(--neon-purple)] relative">
+        <div className="flex items-center gap-3">
+          {filename && (
+            <span className="text-[var(--neon-cyan)] font-mono text-sm uppercase">&gt;&gt; {filename}</span>
+          )}
+          <span className="px-2 py-1 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase">
+            [{language}]
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleCopy}
+            className="px-3 py-1 bg-[rgb(var(--bg-primary))] dark:bg-black hover:bg-purple-900/30 border border-[var(--neon-purple)] text-[var(--neon-purple)] text-xs font-mono uppercase transition-all"
+          >
+            {copied ? '[COPIED✓]' : '[COPY]'}
+          </button>
+          <div className="flex gap-1">
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+            <div className="w-3 h-3 border border-[rgb(var(--border-primary))]" />
+          </div>
+        </div>
+      </div>
+
+      <div className="relative overflow-x-auto">
+        <pre className="p-6 text-sm leading-relaxed bg-[rgb(var(--bg-primary))] dark:bg-black text-[var(--neon-cyan)] font-mono">
+          <code>{code}</code>
+        </pre>
+      </div>
+    </div>
+  )
+}

components/blog/markdown-renderer.tsx

@@ -4,8 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import Image from 'next/image';
 import Link from 'next/link';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { CodeBlock } from './code-block';
 
 interface MarkdownRendererProps {
   content: string;
@@ -16,55 +15,33 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       components={{
-        h1: ({ children }) => (
-          <h1 className="text-4xl font-bold mt-8 mb-4">{children}</h1>
-        ),
-        h2: ({ children }) => (
-          <h2 className="text-3xl font-bold mt-6 mb-3">{children}</h2>
-        ),
-        h3: ({ children }) => (
-          <h3 className="text-2xl font-bold mt-4 mb-2">{children}</h3>
-        ),
-        h4: ({ children }) => (
-          <h4 className="text-xl font-bold mt-3 mb-2">{children}</h4>
-        ),
-        h5: ({ children }) => (
-          <h5 className="text-lg font-bold mt-2 mb-1">{children}</h5>
-        ),
-        h6: ({ children }) => (
-          <h6 className="text-base font-bold mt-2 mb-1">{children}</h6>
-        ),
-        p: ({ children }) => (
-          <p className="my-4 leading-7">{children}</p>
-        ),
-        ul: ({ children }) => (
-          <ul className="list-disc list-inside my-4 space-y-2">{children}</ul>
-        ),
-        ol: ({ children }) => (
-          <ol className="list-decimal list-inside my-4 space-y-2">{children}</ol>
-        ),
-        li: ({ children }) => (
-          <li className="ml-4">{children}</li>
-        ),
-        blockquote: ({ children }) => (
-          <blockquote className="border-l-4 border-gray-300 pl-4 my-4 italic text-gray-700">
-            {children}
-          </blockquote>
-        ),
+        h1: ({ children }) => {
+          const text = String(children);
+          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+          return <h1 id={id}>{children}</h1>;
+        },
+        h2: ({ children }) => {
+          const text = String(children);
+          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+          return <h2 id={id}>{children}</h2>;
+        },
+        h3: ({ children }) => {
+          const text = String(children);
+          const id = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+          return <h3 id={id}>{children}</h3>;
+        },
         code: ({ inline, className, children, ...props }: any) => {
           const match = /language-(\w+)/.exec(className || '');
-          return !inline && match ? (
-            <SyntaxHighlighter
-              style={vscDarkPlus}
-              language={match[1]}
-              PreTag="div"
-              className="my-4 rounded-lg"
-              {...props}
-            >
-              {String(children).replace(/\n$/, '')}
-            </SyntaxHighlighter>
-          ) : (
-            <code className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
+          if (!inline && match) {
+            return (
+              <CodeBlock
+                code={String(children).replace(/\n$/, '')}
+                language={match[1]}
+              />
+            );
+          }
+          return (
+            <code {...props}>
               {children}
             </code>
           );
@@ -78,19 +55,18 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
               <img
                 src={src}
                 alt={alt || ''}
-                className="my-4 rounded-lg max-w-full h-auto"
+                className="w-full h-auto"
               />
             );
           }
 
           return (
-            <div className="my-4 relative w-full h-auto">
+            <div className="relative w-full h-auto">
               <Image
                 src={src}
                 alt={alt || ''}
                 width={800}
                 height={600}
-                className="rounded-lg"
                 style={{ width: '100%', height: 'auto' }}
               />
             </div>
@@ -106,7 +82,6 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
                 href={href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-600 hover:underline"
               >
                 {children}
               </a>
@@ -114,35 +89,11 @@ export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
           }
 
           return (
-            <Link href={href} className="text-blue-600 hover:underline">
+            <Link href={href}>
               {children}
             </Link>
           );
         },
-        table: ({ children }) => (
-          <div className="overflow-x-auto my-4">
-            <table className="min-w-full border-collapse border border-gray-300">
-              {children}
-            </table>
-          </div>
-        ),
-        thead: ({ children }) => (
-          <thead className="bg-gray-100">{children}</thead>
-        ),
-        tbody: ({ children }) => (
-          <tbody>{children}</tbody>
-        ),
-        tr: ({ children }) => (
-          <tr className="border-b border-gray-300">{children}</tr>
-        ),
-        th: ({ children }) => (
-          <th className="border border-gray-300 px-4 py-2 text-left font-bold">
-            {children}
-          </th>
-        ),
-        td: ({ children }) => (
-          <td className="border border-gray-300 px-4 py-2">{children}</td>
-        ),
       }}
     >
       {content}

components/blog/reading-progress.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function ReadingProgress() {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercent = (scrollTop / docHeight) * 100
+      setProgress(Math.min(scrollPercent, 100))
+    }
+
+    window.addEventListener('scroll', updateProgress, { passive: true })
+    updateProgress()
+    return () => window.removeEventListener('scroll', updateProgress)
+  }, [])
+
+  return (
+    <>
+      <div className="fixed top-0 left-0 right-0 h-1.5 bg-[rgb(var(--bg-secondary))] dark:bg-black z-50 border-b-2 border-[rgb(var(--border-primary))]">
+        <div
+          className="h-full bg-gradient-to-r from-[var(--neon-cyan)] via-[var(--neon-magenta)] to-[var(--neon-pink)] transition-all duration-150"
+          style={{
+            width: `${progress}%`,
+            boxShadow: progress > 0 ? '0 0 8px var(--neon-cyan)' : 'none'
+          }}
+        />
+      </div>
+
+      <div className="fixed top-4 right-4 z-50 px-3 py-1.5 bg-[rgb(var(--bg-primary))] border-2 border-[var(--neon-cyan)] text-xs font-mono font-bold text-[var(--neon-cyan)] relative">
+        <span className="relative z-10">
+          [{Math.round(progress)}%]
+        </span>
+      </div>
+    </>
+  )
+}

components/blog/search-bar.tsx

@@ -5,7 +5,7 @@ interface SearchBarProps {
 
 export function SearchBar({ searchQuery, onSearchChange }: SearchBarProps) {
   return (
-    <div className="flex-1 flex items-center border-2 border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_10px_var(--neon-cyan),0_0_20px_rgba(0,255,255,0.5),inset_0_0_10px_rgba(0,255,255,0.1)]">
+    <div className="flex-1 flex items-center border border-slate-700 bg-zinc-900 transition-all focus-within:border-[var(--neon-cyan)] focus-within:shadow-[0_0_6px_rgba(0,255,255,0.4),inset_0_0_6px_rgba(0,255,255,0.05)]">
       <span className="pl-4 pr-2 font-mono text-lg" style={{ color: 'var(--neon-cyan)' }}>&gt;</span>
       <input
         type="text"

components/blog/sticky-footer.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface StickyFooterProps {
+  url: string
+  title: string
+}
+
+export function StickyFooter({ url, title }: StickyFooterProps) {
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      setIsVisible(currentScrollY < lastScrollY || currentScrollY < 100)
+      setLastScrollY(currentScrollY)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [lastScrollY])
+
+  const shareLinks = {
+    twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${url}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  }
+
+  const handleCopyLink = async () => {
+    await navigator.clipboard.writeText(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <footer
+      className={`
+        fixed bottom-0 left-0 right-0 z-40
+        bg-black/98 backdrop-blur-sm
+        border-t-4 border-[var(--neon-magenta)]
+        transition-transform duration-200 ease-in-out
+        ${isVisible ? 'translate-y-0' : 'translate-y-full'}
+      `}
+      style={{
+        boxShadow: isVisible ? '0 -8px 30px rgba(155,90,142,0.5), inset 0 4px 20px rgba(155,90,142,0.1)' : 'none'
+      }}
+    >
+      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--neon-magenta)] to-transparent opacity-70" />
+
+      <div className="max-w-7xl mx-auto px-6 py-4 relative">
+        <div className="flex items-center justify-between">
+          <div className="hidden md:flex items-center gap-3">
+            <div className="flex gap-1.5">
+              <div className="w-2 h-2 bg-[var(--neon-cyan)] shadow-[0_0_6px_rgba(90,139,149,1)]" />
+              <div className="w-2 h-2 bg-[var(--neon-pink)] shadow-[0_0_6px_rgba(155,90,110,1)]" />
+            </div>
+            <span className="text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider" style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}>
+              &gt;&gt; SHARE:
+            </span>
+          </div>
+
+          <div className="flex items-center gap-3 mx-auto md:mx-0">
+            <a
+              href={shareLinks.twitter}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-cyan-400 text-cyan-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(29,161,242,0.8)] hover:bg-cyan-900/20"
+              style={{ textShadow: '0 0 8px rgba(56,189,248,0.6)' }}
+            >
+              [X]
+            </a>
+
+            <a
+              href={shareLinks.linkedin}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-blue-400 text-blue-400 font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(10,102,194,0.8)] hover:bg-blue-900/20"
+              style={{ textShadow: '0 0 8px rgba(96,165,250,0.6)' }}
+            >
+              [IN]
+            </a>
+
+            <button
+              onClick={handleCopyLink}
+              className="flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-pink)] text-[var(--neon-pink)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(155,90,110,0.8)] hover:bg-pink-900/20"
+              style={{ textShadow: copied ? '0 0 10px rgba(155,90,110,1)' : '0 0 8px rgba(155,90,110,0.6)' }}
+            >
+              {copied ? '[✓ COPIED]' : '[COPY]'}
+            </button>
+          </div>
+
+          <button
+            onClick={scrollToTop}
+            className="hidden md:flex items-center gap-2 px-4 py-2 bg-black border-4 border-[var(--neon-cyan)] text-[var(--neon-cyan)] font-mono text-xs uppercase tracking-wider transition-all hover:shadow-[0_0_25px_rgba(90,139,149,0.8)] hover:bg-cyan-900/20"
+            style={{ textShadow: '0 0 8px rgba(90,139,149,0.6)' }}
+          >
+            [↑ TOP]
+          </button>
+        </div>
+      </div>
+    </footer>
+  )
+}

components/blog/table-of-contents.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+interface Heading {
+  id: string
+  text: string
+  level: number
+}
+
+interface TOCProps {
+  headings: Heading[]
+}
+
+export function TableOfContents({ headings }: TOCProps) {
+  const [activeId, setActiveId] = useState('')
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: '-100px 0px -66%' }
+    )
+
+    headings.forEach(({ id }) => {
+      const element = document.getElementById(id)
+      if (element) observer.observe(element)
+    })
+
+    return () => observer.disconnect()
+  }, [headings])
+
+  return (
+    <aside className="hidden lg:block sticky top-24 w-64 h-fit">
+      <div className="bg-black border border-[var(--neon-cyan)] p-6 relative overflow-hidden shadow-[0_0_15px_rgba(90,139,149,0.3),inset_0_0_15px_rgba(90,139,149,0.05)]">
+        <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-magenta-500/3 to-transparent pointer-events-none" />
+        <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-cyan)] to-transparent opacity-50" />
+
+        <div className="border-b border-[var(--neon-magenta)] pb-3 mb-4 relative">
+          <div className="flex gap-1.5 mb-2 justify-end">
+            <div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Minimize" />
+            <div className="w-3 h-3 border border-[var(--neon-cyan)]/40 hover:bg-[var(--neon-cyan)]/10 transition-colors cursor-pointer" title="Maximize" />
+            <div className="w-3 h-3 border border-[var(--neon-pink)]/40 hover:bg-[var(--neon-pink)]/10 transition-colors cursor-pointer" title="Close" />
+          </div>
+          <h3 className="text-xs font-mono font-bold text-[var(--neon-cyan)] uppercase tracking-wider" style={{ textShadow: '0 0 6px rgba(90,139,149,0.5)' }}>
+            &gt;&gt; NAVIGATION
+          </h3>
+        </div>
+
+        <nav className="space-y-1 relative">
+          {headings.map((heading) => (
+            <a
+              key={heading.id}
+              href={`#${heading.id}`}
+              className={`
+                block text-sm font-mono py-2 border-l-2 transition-all duration-150
+                ${heading.level === 2 ? 'pl-3' : 'pl-6'}
+                ${activeId === heading.id
+                  ? 'text-[var(--neon-cyan)] border-[var(--neon-cyan)] bg-cyan-500/5 shadow-[0_0_8px_rgba(90,139,149,0.3)]'
+                  : 'text-zinc-500 border-zinc-900 hover:border-[var(--neon-magenta)] hover:text-[var(--neon-magenta)] hover:bg-magenta-500/3 hover:shadow-[0_0_4px_rgba(155,90,142,0.2)]'
+                }
+              `}
+              style={activeId === heading.id ? { textShadow: '0 0 4px rgba(90,139,149,0.5)' } : {}}
+            >
+              <span className="inline-block">{activeId === heading.id ? '▶ ' : '◆ '}</span>{heading.text}
+            </a>
+          ))}
+        </nav>
+
+        <div className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-[var(--neon-purple)] to-transparent opacity-40" />
+      </div>
+    </aside>
+  )
+}

components/blog/tag-filter.tsx

@@ -9,7 +9,7 @@ export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: T
   if (allTags.length === 0) return null
 
   return (
-    <div className="border-4 border-slate-700 bg-slate-900 p-6 mb-12">
+    <div className="border border-slate-700 bg-slate-900 p-6 mb-12">
       <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-4">
         FILTER BY TAG
       </p>
@@ -18,7 +18,7 @@ export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: T
           <button
             key={tag}
             onClick={() => onToggleTag(tag)}
-            className={`px-4 py-2 font-mono text-xs uppercase border-2 transition-colors cursor-pointer ${
+            className={`px-4 py-2 font-mono text-xs uppercase border transition-colors cursor-pointer ${
               selectedTags.includes(tag)
                 ? 'bg-cyan-400 border-cyan-400 text-slate-900'
                 : 'bg-zinc-900 border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'