🖼️ blog listing styles updates

app/blog/layout.tsx

@@ -0,0 +1,15 @@
+import { Metadata } from 'next'
+import { getAllPosts } from '@/lib/markdown'
+import BlogPageClient from './page'
+
+export const metadata: Metadata = {
+  title: 'Blog',
+  description: 'Toate articolele din blog',
+}
+
+export default async function BlogLayout() {
+  const posts = await getAllPosts()
+  const allTags = Array.from(new Set(posts.flatMap((post) => post.frontmatter.tags))).sort()
+
+  return <BlogPageClient posts={posts} allTags={allTags} />
+}

app/blog/page.tsx

@@ -1,95 +1,180 @@
-import { Metadata } from 'next'
+'use client'
-import Link from 'next/link'
-import { getAllPosts } from '@/lib/markdown'
-import { formatDate } from '@/lib/utils'
 
-export const metadata: Metadata = {
+import { useMemo, useState } from 'react'
-  title: 'Blog',
+import { Post } from '@/lib/types/frontmatter'
-  description: 'Toate articolele din blog',
+import { BlogCard } from '@/components/blog/blog-card'
+import { SearchBar } from '@/components/blog/search-bar'
+import { SortDropdown } from '@/components/blog/sort-dropdown'
+import { TagFilter } from '@/components/blog/tag-filter'
+import { Navbar } from '@/components/blog/navbar'
+
+interface BlogPageClientProps {
+  posts: Post[]
+  allTags: string[]
 }
 
-function PostCard({ post }: { post: any }) {
+type SortOption = 'newest' | 'oldest' | 'title'
-  return (
-    <article className="border-b border-gray-200 dark:border-gray-700 pb-8 mb-8 last:border-0">
-      <div className="flex flex-col lg:flex-row gap-6">
-        {post.frontmatter.image && (
-          <div className="lg:w-1/3">
-            <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-48 lg:h-full object-cover rounded-lg" />
-          </div>
-        )}
-        <div className={post.frontmatter.image ? 'lg:w-2/3' : 'w-full'}>
-          <div className="flex items-center gap-4 text-sm text-gray-500 mb-2">
-            <time dateTime={post.frontmatter.date}>{formatDate(post.frontmatter.date)}</time>
-            <span>•</span>
-            <span>{post.readingTime} min citire</span>
-            <span>•</span>
-            <span>{post.frontmatter.author}</span>
-          </div>
-          <h2 className="text-2xl font-bold mb-3">
-            <Link href={`/blog/${post.slug}`} className="hover:text-primary-600 transition">
-              {post.frontmatter.title}
-            </Link>
-          </h2>
-          <p className="text-gray-600 dark:text-gray-400 mb-4">{post.frontmatter.description}</p>
-          {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
-            <div className="flex flex-wrap gap-2 mb-4">
-              {post.frontmatter.tags.map((tag: string) => (
-                <span key={tag} className="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-sm rounded-full">
-                  #{tag}
-                </span>
-              ))}
-            </div>
-          )}
-          <Link href={`/blog/${post.slug}`} className="inline-flex items-center text-primary-600 hover:text-primary-700 transition">
-            Citește articolul complet
-            <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </Link>
-        </div>
-      </div>
-    </article>
-  )
-}
 
-function BlogFilters({ totalPosts }: { totalPosts: number }) {
+export default function BlogPageClient({ posts, allTags }: BlogPageClientProps) {
-  return (
+  const [searchQuery, setSearchQuery] = useState('')
-    <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-6 mb-8">
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
-      <div className="flex items-center justify-between">
+  const [sortBy, setSortBy] = useState<SortOption>('newest')
-        <div>
+  const [currentPage, setCurrentPage] = useState(1)
-          <h1 className="text-3xl font-bold mb-2">Articole Blog</h1>
+  const postsPerPage = 9
-          <p className="text-gray-600 dark:text-gray-400">
-            {totalPosts} {totalPosts === 1 ? 'articol' : 'articole'} publicate
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
 
-export default async function BlogPage() {
+  const filteredAndSortedPosts = useMemo(() => {
-  const posts = await getAllPosts()
+    let result = posts.filter((post) => {
+      const matchesSearch =
+        searchQuery === '' ||
+        post.frontmatter.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        post.frontmatter.description.toLowerCase().includes(searchQuery.toLowerCase())
 
-  if (posts.length === 0) {
+      const matchesTags =
-    return (
+        selectedTags.length === 0 ||
-      <div className="text-center py-12">
+        selectedTags.every((tag) => post.frontmatter.tags.includes(tag))
-        <h1 className="text-3xl font-bold mb-4">Blog</h1>
+
-        <p className="text-gray-600 dark:text-gray-400 mb-8">Nu există articole publicate încă.</p>
+      return matchesSearch && matchesTags
-        <Link href="/" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+    })
-          Înapoi la pagina principală
+
-        </Link>
+    result.sort((a, b) => {
-      </div>
+      switch (sortBy) {
+        case 'oldest':
+          return new Date(a.frontmatter.date).getTime() - new Date(b.frontmatter.date).getTime()
+        case 'title':
+          return a.frontmatter.title.localeCompare(b.frontmatter.title)
+        case 'newest':
+        default:
+          return new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime()
+      }
+    })
+
+    return result
+  }, [posts, searchQuery, selectedTags, sortBy])
+
+  const totalPages = Math.ceil(filteredAndSortedPosts.length / postsPerPage)
+  const paginatedPosts = filteredAndSortedPosts.slice(
+    (currentPage - 1) * postsPerPage,
+    currentPage * postsPerPage
   )
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags((prev) =>
+      prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    )
+    setCurrentPage(1)
   }
 
   return (
-    <div className="max-w-4xl mx-auto">
+    <div className="min-h-screen bg-zinc-900">
-      <BlogFilters totalPosts={posts.length} />
+      <Navbar />
-      <div>
+
-        {posts.map((post) => (
+      <div className="max-w-7xl mx-auto px-6 py-12">
-          <PostCard key={post.slug} post={post} />
+        {/* Header */}
+        <div className="border-l-4 border-cyan-400 pl-6 mb-12">
+          <p className="font-mono text-xs text-zinc-500 uppercase tracking-widest mb-2">
+            DATABASE QUERY // SEARCH RESULTS
+          </p>
+          <h1 className="text-4xl md:text-6xl font-mono font-bold text-zinc-100 uppercase tracking-tight">
+            &gt; BLOG ARCHIVE_
+          </h1>
+        </div>
+
+        {/* Search Bar */}
+        <div className="border-4 border-slate-700 bg-slate-900 p-6 mb-8">
+          <div className="flex flex-col lg:flex-row gap-4">
+            <SearchBar
+              searchQuery={searchQuery}
+              onSearchChange={(value) => {
+                setSearchQuery(value)
+                setCurrentPage(1)
+              }}
+            />
+            <SortDropdown
+              sortBy={sortBy}
+              onSortChange={setSortBy}
+            />
+          </div>
+        </div>
+
+        {/* Tag Filters */}
+        <TagFilter
+          allTags={allTags}
+          selectedTags={selectedTags}
+          onToggleTag={toggleTag}
+          onClearTags={() => {
+            setSelectedTags([])
+            setCurrentPage(1)
+          }}
+        />
+
+        {/* Results Count */}
+        <div className="mb-6">
+          <p className="font-mono text-sm text-zinc-500 uppercase">
+            FOUND {filteredAndSortedPosts.length} {filteredAndSortedPosts.length === 1 ? 'POST' : 'POSTS'}
+          </p>
+        </div>
+
+        {/* Blog Grid */}
+        {paginatedPosts.length > 0 ? (
+          <div className="grid gap-8 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 mb-12">
+            {paginatedPosts.map((post, index) => {
+              const hasImage = !!post.frontmatter.image
+              let variant: 'image-top' | 'image-side' | 'text-only'
+
+              if (!hasImage) {
+                variant = 'text-only'
+              } else {
+                variant = index % 3 === 1 ? 'image-side' : 'image-top'
+              }
+
+              return <BlogCard key={post.slug} post={post} variant={variant} />
+            })}
+          </div>
+        ) : (
+          <div className="border-4 border-slate-700 bg-slate-900 p-12 text-center">
+            <p className="font-mono text-lg text-zinc-400 uppercase">
+              NO POSTS FOUND // TRY DIFFERENT SEARCH TERMS
+            </p>
+          </div>
+        )}
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="border-4 border-slate-700 bg-slate-900 p-6">
+            <div className="flex items-center justify-between">
+              <button
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+                className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
+              >
+                &lt; PREV
+              </button>
+              <div className="flex items-center gap-2">
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                  <button
+                    key={page}
+                    onClick={() => setCurrentPage(page)}
+                    className={`w-12 h-12 font-mono text-sm border-2 transition-colors cursor-pointer ${
+                      currentPage === page
+                        ? 'bg-cyan-400 border-cyan-400 text-slate-900'
+                        : 'border-slate-700 text-zinc-400 hover:border-cyan-400 hover:text-cyan-400'
+                    }`}
+                  >
+                    {String(page).padStart(2, '0')}
+                  </button>
                 ))}
               </div>
+              <button
+                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+                className="px-6 py-3 font-mono text-sm uppercase border-2 border-slate-700 text-zinc-100 disabled:opacity-30 disabled:cursor-not-allowed hover:border-cyan-400 hover:text-cyan-400 transition-colors cursor-pointer"
+              >
+                NEXT &gt;
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

app/globals.css

@@ -17,6 +17,11 @@
     --text-muted: 100 116 139;
     --border-primary: 203 213 225;
     --border-subtle: 226 232 240;
+
+    --neon-pink: #8b4a5e;
+    --neon-cyan: #4a7b85;
+    --neon-purple: #6b5583;
+    --neon-magenta: #8b4a7e;
   }
 
   .dark {
@@ -29,6 +34,11 @@
     --text-muted: 100 116 139;
     --border-primary: 71 85 105;
     --border-subtle: 30 41 59;
+
+    --neon-pink: #9b5a6e;
+    --neon-cyan: #5a8b95;
+    --neon-purple: #7b6593;
+    --neon-magenta: #9b5a8e;
   }
 }
 
@@ -247,4 +257,70 @@
       filter: url('#noise');
     }
   }
+
+  /* SCP-style subtle flicker hover */
+  @keyframes scp-flicker {
+    0%, 100% {
+      border-color: rgb(71 85 105);
+      box-shadow: 0 0 0 rgba(90, 139, 149, 0);
+      transform: translate(0, 0);
+    }
+    20% {
+      border-color: var(--neon-cyan);
+      box-shadow: 0 0 3px rgba(90, 139, 149, 0.3);
+      transform: translate(-0.5px, 0);
+    }
+    40% {
+      border-color: rgb(71 85 105);
+      box-shadow: 0 0 0 rgba(90, 139, 149, 0);
+      transform: translate(0, 0);
+    }
+    60% {
+      border-color: var(--neon-cyan);
+      box-shadow: 0 0 2px rgba(90, 139, 149, 0.2);
+      transform: translate(0.5px, 0);
+    }
+  }
+
+  .cyber-glitch-hover {
+    transition: all 0.15s ease;
+    position: relative;
+  }
+
+  .cyber-glitch-hover:hover {
+    animation: scp-flicker 150ms ease-in-out 3;
+    border-color: var(--neon-cyan) !important;
+    box-shadow: 0 1px 4px rgba(90, 139, 149, 0.15), inset 0 0 8px rgba(90, 139, 149, 0.05);
+  }
+
+  /* Navbar hide on scroll */
+  .navbar-hidden {
+    transform: translateY(-100%);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .navbar-visible {
+    transform: translateY(0);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  /* Cyberpunk neon glow on focus - 80s style */
+  .cyber-focus:focus {
+    outline: none;
+    box-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);
+    border-color: var(--neon-cyan);
+  }
+
+  .cyber-focus-pink:focus {
+    outline: none;
+    box-shadow:
+      0 0 10px var(--neon-pink),
+      0 0 20px rgba(255, 0, 128, 0.5),
+      inset 0 0 10px rgba(255, 0, 128, 0.1);
+    border-color: var(--neon-pink);
+  }
 }
+

app/layout.tsx

@@ -43,18 +43,20 @@ export default function RootLayout({
           storageKey="blog-theme"
           disableTransitionOnChange={false}
         >
-          {children}
+          <div className="flex flex-col min-h-screen">
+            <div className="flex-1">{children}</div>
 
             {/* Footer - from worktree-agent-1 */}
-          <footer className="border-t-4 border-slate-300 dark:border-slate-800 bg-zinc-100 dark:bg-slate-900 transition-colors duration-300">
+            <footer className="mt-auto border-t-4 border-slate-300 dark:border-slate-800 bg-zinc-100 dark:bg-slate-900 transition-colors duration-300">
               <div className="container mx-auto px-4 py-8">
                 <div className="border-2 border-slate-300 dark:border-slate-800 p-6">
                   <p className="text-center text-slate-500 dark:text-slate-500 font-mono text-xs uppercase tracking-wider">
-                  © 2025 // BLOG & PORTOFOLIU // ALL RIGHTS RESERVED
+                    © 2025 <span style={{ color: 'var(--neon-cyan)' }}>//</span> BLOG & <span style={{ color: 'var(--neon-pink)' }}>PORTOFOLIU</span> <span style={{ color: 'var(--neon-cyan)' }}>//</span> ALL RIGHTS RESERVED
                   </p>
                 </div>
               </div>
             </footer>
+          </div>
         </ThemeProvider>
       </body>
     </html>

components/blog/blog-card.tsx

@@ -0,0 +1,125 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { Post } from '@/lib/types/frontmatter'
+import { formatDate } from '@/lib/utils'
+
+interface BlogCardProps {
+  post: Post
+  variant: 'image-top' | 'image-side' | 'text-only'
+}
+
+export function BlogCard({ post, variant }: BlogCardProps) {
+  const hasImage = !!post.frontmatter.image
+
+  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)' }}>
+            <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>
+          </div>
+          <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
+            {post.frontmatter.title}
+          </h3>
+          <p className="font-mono text-sm text-zinc-400 mb-4 leading-relaxed">
+            {post.frontmatter.description}
+          </p>
+          <div className="flex flex-wrap gap-2 mb-4">
+            {post.frontmatter.tags.map((tag) => (
+              <span key={tag} className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase">
+                #{tag}
+              </span>
+            ))}
+          </div>
+          <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
+            &gt; READ [{post.readingTime}MIN]
+          </span>
+        </article>
+      </Link>
+    )
+  }
+
+  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">
+          <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
+                src={post.frontmatter.image!}
+                alt={post.frontmatter.title}
+                fill
+                className="object-cover grayscale"
+              />
+              <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">
+                <span className="font-mono text-xs text-zinc-100 uppercase tracking-wider">
+                  {post.frontmatter.category} // {formatDate(post.frontmatter.date)}
+                </span>
+              </div>
+              <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
+                {post.frontmatter.title}
+              </h3>
+              <p className="font-mono text-sm text-zinc-400 mb-4 leading-relaxed">
+                {post.frontmatter.description}
+              </p>
+              <div className="flex flex-wrap gap-2 mb-4">
+                {post.frontmatter.tags.map((tag) => (
+                  <span key={tag} className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase">
+                    #{tag}
+                  </span>
+                ))}
+              </div>
+              <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
+                &gt; READ [{post.readingTime}MIN]
+              </span>
+            </div>
+          </div>
+        </article>
+      </Link>
+    )
+  }
+
+  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">
+        <div className="relative h-64 bg-zinc-900">
+          <Image
+            src={post.frontmatter.image!}
+            alt={post.frontmatter.title}
+            fill
+            className="object-cover grayscale"
+          />
+          <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)' }}>
+            <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>
+          </div>
+          <h3 className="font-mono text-xl font-bold text-zinc-100 uppercase mb-3">
+            {post.frontmatter.title}
+          </h3>
+          <p className="font-mono text-sm text-zinc-400 mb-4 leading-relaxed">
+            {post.frontmatter.description}
+          </p>
+          <div className="flex flex-wrap gap-2 mb-4">
+            {post.frontmatter.tags.map((tag) => (
+              <span key={tag} className="px-3 py-1 bg-zinc-800 border border-slate-700 text-cyan-400 font-mono text-xs uppercase">
+                #{tag}
+              </span>
+            ))}
+          </div>
+          <span className="inline-flex items-center font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors">
+            &gt; READ [{post.readingTime}MIN]
+          </span>
+        </div>
+      </article>
+    </Link>
+  )
+}

components/blog/navbar.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { ThemeToggle } from '@/components/theme-toggle'
+
+export function Navbar() {
+  const [isVisible, setIsVisible] = useState(true)
+  const [lastScrollY, setLastScrollY] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+
+      if (currentScrollY < 10) {
+        setIsVisible(true)
+      } else if (currentScrollY > lastScrollY) {
+        setIsVisible(false)
+      } else {
+        setIsVisible(true)
+      }
+
+      setLastScrollY(currentScrollY)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [lastScrollY])
+
+  return (
+    <nav className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}>
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <Link href="/" className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer" style={{ color: 'var(--neon-cyan)' }}>
+              &lt; HOME
+            </Link>
+            <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
+              // <span style={{ color: 'var(--neon-pink)' }}>BLOG</span> ARCHIVE
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <Link href="/about" className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer">
+              [ABOUT]
+            </Link>
+            <ThemeToggle />
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}

components/blog/search-bar.tsx

@@ -0,0 +1,19 @@
+interface SearchBarProps {
+  searchQuery: string
+  onSearchChange: (value: string) => void
+}
+
+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)]">
+      <span className="pl-4 pr-2 font-mono text-lg" style={{ color: 'var(--neon-cyan)' }}>&gt;</span>
+      <input
+        type="text"
+        placeholder="SEARCH POSTS..."
+        value={searchQuery}
+        onChange={(e) => onSearchChange(e.target.value)}
+        className="flex-1 bg-transparent font-mono text-zinc-100 dark:text-zinc-100 px-2 py-3 focus:outline-none placeholder:text-zinc-600 uppercase text-sm"
+      />
+    </div>
+  )
+}

components/blog/sort-dropdown.tsx

@@ -0,0 +1,20 @@
+type SortOption = 'newest' | 'oldest' | 'title'
+
+interface SortDropdownProps {
+  sortBy: SortOption
+  onSortChange: (value: SortOption) => void
+}
+
+export function SortDropdown({ sortBy, onSortChange }: SortDropdownProps) {
+  return (
+    <select
+      value={sortBy}
+      onChange={(e) => onSortChange(e.target.value as SortOption)}
+      className="border-2 border-slate-700 bg-zinc-900 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-100 font-mono px-6 py-3 uppercase text-sm cyber-focus-pink transition-all hover:border-cyan-400 cursor-pointer"
+    >
+      <option value="newest" className="bg-zinc-900 text-zinc-100" style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}>NEWEST FIRST</option>
+      <option value="oldest" className="bg-zinc-900 text-zinc-100" style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}>OLDEST FIRST</option>
+      <option value="title" className="bg-zinc-900 text-zinc-100" style={{ backgroundColor: '#18181b', color: '#f4f4f5' }}>BY TITLE</option>
+    </select>
+  )
+}

components/blog/tag-filter.tsx

@@ -0,0 +1,41 @@
+interface TagFilterProps {
+  allTags: string[]
+  selectedTags: string[]
+  onToggleTag: (tag: string) => void
+  onClearTags: () => void
+}
+
+export function TagFilter({ allTags, selectedTags, onToggleTag, onClearTags }: TagFilterProps) {
+  if (allTags.length === 0) return null
+
+  return (
+    <div className="border-4 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>
+      <div className="flex flex-wrap gap-3">
+        {allTags.map((tag) => (
+          <button
+            key={tag}
+            onClick={() => onToggleTag(tag)}
+            className={`px-4 py-2 font-mono text-xs uppercase border-2 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'
+            }`}
+          >
+            #{tag}
+          </button>
+        ))}
+      </div>
+      {selectedTags.length > 0 && (
+        <button
+          onClick={onClearTags}
+          className="mt-4 font-mono text-xs uppercase text-cyan-400 hover:text-cyan-300 transition-colors cursor-pointer"
+        >
+          &gt; CLEAR FILTERS
+        </button>
+      )}
+    </div>
+  )
+}

content/blog/test-complet.md

@@ -5,7 +5,7 @@ date: "2025-01-15"
 author: "Test Author"
 category: "Tutorial"
 tags: ["markdown", "test", "demo"]
-image: "/images/test.jpg"
+image: "/38636.jpg"
 draft: false
 ---
 

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.