🖼️ blog listing styles updates

Reviewed-on: http://192.168.1.53:3000/raresj/mypage/pulls/2

.gitignore

@@ -0,0 +1,18 @@
+node_modules
+.next
+dist
+out
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.DS_Store
+*.pem
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+.vercel
+*.tsbuildinfo
+next-env.d.ts

app/@breadcrumbs/about/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+
+export default function AboutBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Despre',
+          href: '/about',
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/@breadcrumbs/blog/[...slug]/page.tsx

@@ -0,0 +1,53 @@
+import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+import { getPostBySlug } from '@/lib/markdown';
+
+interface BreadcrumbItem {
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+function formatDirectoryName(name: string): string {
+  const directoryNames: { [key: string]: string } = {
+    tech: 'Tehnologie',
+    design: 'Design',
+    tutorial: 'Tutoriale',
+  };
+
+  return directoryNames[name] || name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+export default async function BlogPostBreadcrumb({
+  params,
+}: {
+  params: Promise<{ slug: string[] }>;
+}) {
+  const { slug } = await params;
+  const slugPath = slug.join('/');
+  const post = getPostBySlug(slugPath);
+
+  const items: BreadcrumbItem[] = [
+    {
+      label: 'Blog',
+      href: '/blog',
+    },
+  ];
+
+  if (slug.length > 1) {
+    for (let i = 0; i < slug.length - 1; i++) {
+      const segmentPath = slug.slice(0, i + 1).join('/');
+      items.push({
+        label: formatDirectoryName(slug[i]),
+        href: `/blog/${segmentPath}`,
+      });
+    }
+  }
+
+  items.push({
+    label: post ? post.frontmatter.title : slug[slug.length - 1],
+    href: `/blog/${slugPath}`,
+    current: true,
+  });
+
+  return <Breadcrumbs items={items} />;
+}

app/@breadcrumbs/blog/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+
+export default function BlogBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Blog',
+          href: '/blog',
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/@breadcrumbs/default.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+
+export default function DefaultBreadcrumb() {
+  return <Breadcrumbs />;
+}

app/@breadcrumbs/tags/[tag]/page.tsx

@@ -0,0 +1,29 @@
+import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+
+export default async function TagBreadcrumb({
+  params,
+}: {
+  params: Promise<{ tag: string }>;
+}) {
+  const { tag } = await params;
+  const tagName = tag
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Tag-uri',
+          href: '/tags',
+        },
+        {
+          label: tagName,
+          href: `/tags/${tag}`,
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/@breadcrumbs/tags/page.tsx

@@ -0,0 +1,15 @@
+import { Breadcrumbs } from '@/components/layout/breadcrumbs';
+
+export default function TagsBreadcrumb() {
+  return (
+    <Breadcrumbs
+      items={[
+        {
+          label: 'Tag-uri',
+          href: '/tags',
+          current: true,
+        },
+      ]}
+    />
+  );
+}

app/about/page.tsx

@@ -0,0 +1,47 @@
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Despre',
+  description: 'Află mai multe despre mine și acest blog',
+}
+
+export default function AboutPage() {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-4xl font-bold mb-8">Despre Mine</h1>
+
+      <div className="prose dark:prose-invert max-w-none">
+        <p className="text-lg leading-relaxed mb-6">
+          Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie,
+          specializat în dezvoltarea web modernă cu Next.js, React și TypeScript.
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Ce vei găsi aici</h2>
+        <ul className="space-y-2">
+          <li>Tutoriale despre dezvoltare web</li>
+          <li>Ghiduri practice pentru Next.js și React</li>
+          <li>Sfaturi despre design și UX</li>
+          <li>Experiențe din proiecte reale</li>
+        </ul>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Tehnologii folosite</h2>
+        <p>Acest blog este construit cu:</p>
+        <ul className="space-y-2">
+          <li><strong>Next.js 15</strong> - Framework React pentru producție</li>
+          <li><strong>TypeScript</strong> - Pentru type safety</li>
+          <li><strong>Tailwind CSS</strong> - Pentru stilizare rapidă</li>
+          <li><strong>Markdown</strong> - Pentru conținut</li>
+        </ul>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2>
+        <p>
+          Mă poți contacta pe{' '}
+          <a href="mailto:email@example.com" className="text-primary-600 hover:text-primary-700">
+            email@example.com
+          </a>{' '}
+          sau mă poți găsi pe rețelele sociale.
+        </p>
+      </div>
+    </div>
+  )
+}

app/blog/[...slug]/not-found.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-6xl font-bold text-gray-300 dark:text-gray-700 mb-4">404</h1>
+        <h2 className="text-2xl font-semibold mb-4">Articolul nu a fost găsit</h2>
+        <p className="text-gray-600 dark:text-gray-400 mb-8">
+          Ne pare rău, dar articolul pe care îl cauți nu există sau a fost mutat.
+        </p>
+        <div className="space-x-4">
+          <Link href="/blog" className="inline-block px-6 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">
+            Vezi toate articolele
+          </Link>
+          <Link href="/" className="inline-block px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
+            Pagina principală
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/blog/[...slug]/page.tsx

@@ -0,0 +1,129 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { getAllPosts, getPostBySlug, getRelatedPosts } from '@/lib/markdown'
+import { formatDate, formatRelativeDate } from '@/lib/utils'
+
+export async function generateStaticParams() {
+  const posts = await getAllPosts()
+  return posts.map((post) => ({ slug: post.slug.split('/') }))
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string[] }> }): Promise<Metadata> {
+  const { slug } = await params
+  const slugPath = slug.join('/')
+  const post = getPostBySlug(slugPath)
+
+  if (!post) {
+    return { title: 'Articol negăsit' }
+  }
+
+  return {
+    title: post.frontmatter.title,
+    description: post.frontmatter.description,
+    authors: [{ name: post.frontmatter.author }],
+    openGraph: {
+      title: post.frontmatter.title,
+      description: post.frontmatter.description,
+      type: 'article',
+      publishedTime: post.frontmatter.date,
+      authors: [post.frontmatter.author],
+      images: post.frontmatter.image ? [post.frontmatter.image] : [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.frontmatter.title,
+      description: post.frontmatter.description,
+      images: post.frontmatter.image ? [post.frontmatter.image] : [],
+    },
+  }
+}
+
+function AuthorInfo({ author, date }: { author: string; date: string }) {
+  return (
+    <div className="flex items-center space-x-4 py-6 border-y border-gray-200 dark:border-gray-700">
+      <div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
+        <span className="text-xl font-bold text-primary-600 dark:text-primary-400">
+          {author.charAt(0).toUpperCase()}
+        </span>
+      </div>
+      <div>
+        <p className="font-semibold">{author}</p>
+        <p className="text-sm text-gray-500">
+          Publicat {formatRelativeDate(date)} • {formatDate(date)}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function RelatedPosts({ posts }: { posts: any[] }) {
+  if (posts.length === 0) return null
+
+  return (
+    <section className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
+      <h2 className="text-2xl font-bold mb-6">Articole similare</h2>
+      <div className="grid gap-6 md:grid-cols-3">
+        {posts.map((post) => (
+          <Link key={post.slug} href={`/blog/${post.slug}`} className="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-lg transition">
+            <h3 className="font-semibold mb-2 line-clamp-2">{post.frontmatter.title}</h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">{post.frontmatter.description}</p>
+            <p className="text-xs text-gray-500 mt-2">{formatDate(post.frontmatter.date)}</p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default async function BlogPostPage({ params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = await params
+  const slugPath = slug.join('/')
+  const post = getPostBySlug(slugPath)
+
+  if (!post) {
+    notFound()
+  }
+
+  const relatedPosts = await getRelatedPosts(slugPath)
+
+  return (
+    <article className="max-w-4xl mx-auto">
+      <header className="mb-8">
+        {post.frontmatter.image && (
+          <img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full h-64 md:h-96 object-cover rounded-lg mb-8" />
+        )}
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">{post.frontmatter.title}</h1>
+        <p className="text-xl text-gray-600 dark:text-gray-400 mb-6">{post.frontmatter.description}</p>
+        {post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-6">
+            {post.frontmatter.tags.map((tag: string) => (
+              <Link key={tag} href={`/tags/${tag.toLowerCase().replace(/\s+/g, '-')}`} className="px-3 py-1 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 rounded-full text-sm hover:bg-primary-200 dark:hover:bg-primary-800 transition">
+                #{tag}
+              </Link>
+            ))}
+          </div>
+        )}
+        <AuthorInfo author={post.frontmatter.author} date={post.frontmatter.date} />
+      </header>
+
+      <div className="prose dark:prose-invert max-w-none">
+        <div className="flex items-center justify-between text-sm text-gray-500 mb-6">
+          <span>Timp estimat de citire: {post.readingTime} minute</span>
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: post.content }} />
+      </div>
+
+      <nav className="flex justify-between items-center mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
+        <Link href="/blog" className="flex items-center text-primary-600 hover:text-primary-700 transition">
+          <svg className="mr-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+          Înapoi la blog
+        </Link>
+      </nav>
+
+      <RelatedPosts posts={relatedPosts} />
+    </article>
+  )
+}

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

@@ -0,0 +1,180 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Post } from '@/lib/types/frontmatter'
+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[]
+}
+
+type SortOption = 'newest' | 'oldest' | 'title'
+
+export default function BlogPageClient({ posts, allTags }: BlogPageClientProps) {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [sortBy, setSortBy] = useState<SortOption>('newest')
+  const [currentPage, setCurrentPage] = useState(1)
+  const postsPerPage = 9
+
+  const filteredAndSortedPosts = useMemo(() => {
+    let result = posts.filter((post) => {
+      const matchesSearch =
+        searchQuery === '' ||
+        post.frontmatter.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        post.frontmatter.description.toLowerCase().includes(searchQuery.toLowerCase())
+
+      const matchesTags =
+        selectedTags.length === 0 ||
+        selectedTags.every((tag) => post.frontmatter.tags.includes(tag))
+
+      return matchesSearch && matchesTags
+    })
+
+    result.sort((a, b) => {
+      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="min-h-screen bg-zinc-900">
+      <Navbar />
+
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        {/* 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

@@ -0,0 +1,326 @@
+@import "tailwindcss";
+
+@theme {
+  --color-*: initial;
+}
+
+@variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  :root {
+    /* Light mode colors */
+    --bg-primary: 241 245 249;
+    --bg-secondary: 226 232 240;
+    --bg-tertiary: 203 213 225;
+    --text-primary: 15 23 42;
+    --text-secondary: 51 65 85;
+    --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 {
+    /* Dark mode colors - INDUSTRIAL */
+    --bg-primary: 24 24 27;
+    --bg-secondary: 15 23 42;
+    --bg-tertiary: 30 41 59;
+    --text-primary: 241 245 249;
+    --text-secondary: 203 213 225;
+    --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;
+  }
+}
+
+@layer utilities {
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Industrial/Terminal aesthetic utilities */
+  .grid-bg {
+    background-image:
+      linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  /* Noise texture */
+  .noise-bg {
+    background-image: url('/noise.svg');
+    opacity: 0.03;
+    pointer-events: none;
+  }
+
+  /* Scanline effect */
+  .scanline {
+    background: linear-gradient(
+      0deg,
+      transparent 0%,
+      rgba(6, 182, 212, 0.1) 50%,
+      transparent 100%
+    );
+    background-size: 100% 3px;
+    pointer-events: none;
+  }
+
+  .scanline::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(6, 182, 212, 0.05) 50%,
+      transparent 100%
+    );
+    animation: scanline 8s linear infinite;
+    pointer-events: none;
+  }
+
+  /* CRT screen curvature effect */
+  .crt-effect {
+    animation: flicker 0.15s infinite;
+  }
+
+  /* Glitch text effect */
+  .glitch-text {
+    position: relative;
+  }
+
+  .glitch-text::before,
+  .glitch-text::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  .glitch-text.active::before {
+    color: #06b6d4;
+    animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+    transform: translate(-2px, -2px);
+    opacity: 0.8;
+  }
+
+  .glitch-text.active::after {
+    color: #10b981;
+    animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+    transform: translate(2px, 2px);
+    opacity: 0.8;
+  }
+
+  @keyframes glitch-1 {
+    0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
+    20% { clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%); }
+    40% { clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%); }
+    60% { clip-path: polygon(0 5%, 100% 5%, 100% 60%, 0 60%); }
+    80% { clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
+  }
+
+  @keyframes glitch-2 {
+    0%, 100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
+    20% { clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
+    40% { clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%); }
+    60% { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
+    80% { clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%); }
+  }
+
+  /* Grayscale filter with instant toggle */
+  .grayscale {
+    filter: grayscale(100%);
+  }
+
+  .grayscale-0 {
+    filter: grayscale(0%);
+  }
+
+  /* Cyberpunk Glitch Effect for Button */
+  .glitch-btn {
+    position: relative;
+    animation: glitch 300ms cubic-bezier(.25, .46, .45, .94);
+  }
+
+  .glitch-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+  }
+
+  .glitch-layer:first-of-type {
+    animation: glitch-1 300ms cubic-bezier(.25, .46, .45, .94);
+    color: rgb(6 182 212); /* cyan-500 */
+    transform: translate(-2px, 0);
+    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
+  }
+
+  .glitch-layer:last-of-type {
+    animation: glitch-2 300ms cubic-bezier(.25, .46, .45, .94);
+    color: rgb(16 185 129); /* emerald-500 */
+    transform: translate(2px, 0);
+    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
+  }
+
+  @keyframes glitch-1 {
+    0%, 100% {
+      transform: translate(0, 0);
+      clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
+    }
+    25% {
+      transform: translate(-3px, 2px);
+      clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
+    }
+    50% {
+      transform: translate(3px, -2px);
+      clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
+    }
+    75% {
+      transform: translate(-2px, -1px);
+      clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);
+    }
+  }
+
+  @keyframes glitch-2 {
+    0%, 100% {
+      transform: translate(0, 0);
+      clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
+    }
+    25% {
+      transform: translate(3px, -2px);
+      clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%);
+    }
+    50% {
+      transform: translate(-3px, 2px);
+      clip-path: polygon(0 45%, 100% 45%, 100% 80%, 0 80%);
+    }
+    75% {
+      transform: translate(2px, 1px);
+      clip-path: polygon(0 60%, 100% 60%, 100% 95%, 0 95%);
+    }
+  }
+
+  /* Border Pulse Animation */
+  .border-pulse {
+    animation: pulse-border 2s ease-in-out infinite;
+  }
+
+  /* Screen Flicker Effect */
+  body.screen-flicker {
+    animation: flicker 150ms ease-in-out;
+  }
+
+  body.screen-flicker::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(6, 182, 212, 0.1);
+    pointer-events: none;
+    z-index: 9999;
+    animation: flicker 150ms ease-in-out;
+  }
+
+  /* CRT Noise Texture */
+  @supports (filter: url('#noise')) {
+    .noise-bg {
+      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

@@ -0,0 +1,64 @@
+import type { Metadata } from 'next'
+import { JetBrains_Mono } from 'next/font/google'
+import './globals.css'
+import { ThemeProvider } from '@/providers/providers'
+
+const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' })
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s | Terminal Blog',
+    default: 'Terminal Blog - Build. Write. Share.',
+  },
+  description: 'Explorează idei despre dezvoltare, design și tehnologie',
+  metadataBase: new URL('http://localhost:3000'),
+  authors: [{ name: 'Terminal User' }],
+  keywords: ['blog', 'dezvoltare web', 'nextjs', 'react', 'typescript', 'terminal'],
+  openGraph: {
+    type: 'website',
+    locale: 'ro_RO',
+    siteName: 'Terminal Blog',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+  icons: {
+    icon: '/favicon.ico',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="ro" suppressHydrationWarning className={jetbrainsMono.variable}>
+      <body className="font-mono bg-zinc-50 text-slate-900 dark:bg-zinc-900 dark:text-slate-100 transition-colors duration-300">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={false}
+          storageKey="blog-theme"
+          disableTransitionOnChange={false}
+        >
+          <div className="flex flex-col min-h-screen">
+            <div className="flex-1">{children}</div>
+
+            {/* Footer - from worktree-agent-1 */}
+            <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 <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>
+  )
+}

app/page.tsx

@@ -0,0 +1,209 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import { getAllPosts } from '@/lib/markdown'
+import { formatDate } from '@/lib/utils'
+import { ThemeToggle } from '@/components/theme-toggle'
+
+export default async function HomePage() {
+  const allPosts = await getAllPosts()
+  const featuredPosts = allPosts.slice(0, 6)
+
+  return (
+    <main className="min-h-screen bg-zinc-50 dark:bg-zinc-900 transition-colors duration-300">
+      {/* Hero Section - from worktree-agent-2 */}
+      <section className="relative min-h-screen flex items-center justify-center bg-zinc-100 dark:bg-zinc-900 overflow-hidden transition-colors duration-300">
+        <div className="absolute inset-0 grid-bg opacity-10"></div>
+        <div className="absolute inset-0 scanline"></div>
+        <div className="absolute inset-0 noise-bg"></div>
+
+        <div className="relative z-10 max-w-5xl mx-auto px-6 w-full">
+          <div className="border-4 border-slate-300 dark:border-slate-700 bg-white/80 dark:bg-slate-900/80 p-8 md:p-12 transition-colors duration-300">
+            {/* Logo */}
+            <div className="mb-8 flex items-center justify-between border-b-2 border-slate-300 dark:border-slate-800 pb-4">
+              <div className="flex items-center gap-3">
+                <Image src="/logo.png" alt="Logo" width={32} height={32} className="opacity-80" />
+                <span className="font-mono text-xs text-slate-500 uppercase tracking-widest">TERMINAL:// V2.0</span>
+              </div>
+              <div className="flex gap-4 items-center">
+                <Link href="/blog" className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400">[BLOG]</Link>
+                <Link href="/about" className="font-mono text-xs text-slate-600 dark:text-slate-400 uppercase tracking-wider hover:text-cyan-600 dark:hover:text-cyan-400">[ABOUT]</Link>
+                <ThemeToggle />
+              </div>
+            </div>
+
+            <div className="border-l-4 border-cyan-700 dark:border-cyan-900 pl-6 mb-8">
+              <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">DOCUMENT LEVEL-1 // CLASSIFIED</p>
+              <h1 className="text-4xl md:text-6xl lg:text-7xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight mb-6">
+                BUILD. WRITE.<br/>SHARE.
+              </h1>
+              <p className="text-base md:text-lg lg:text-xl text-slate-700 dark:text-slate-400 font-mono leading-relaxed max-w-2xl">
+                &gt; Explorează idei despre dezvoltare, design și tehnologie_
+              </p>
+            </div>
+
+            <div className="flex gap-4 flex-wrap mt-12">
+              <Link href="/blog" className="px-6 md:px-8 py-3 md:py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 border-2 border-cyan-600 dark:border-cyan-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 hover:border-cyan-500 dark:hover:border-cyan-600 rounded-none transition-colors duration-200">
+                [EXPLOREAZĂ BLOG]
+              </Link>
+              <Link href="/about" className="px-6 md:px-8 py-3 md:py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-xs md:text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 rounded-none transition-colors duration-200">
+                [DESPRE MINE]
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured Posts Grid - from worktree-agent-1 */}
+      <section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-6 mb-12">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
+              ARCHIVE ACCESS // RECENT ENTRIES
+            </p>
+            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
+              &gt; POSTĂRI RECENTE_
+            </h2>
+          </div>
+
+          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            {featuredPosts.map((post, index) => (
+              <article
+                key={post.slug}
+                className="group relative bg-white dark:bg-slate-900 border-4 border-slate-300 dark:border-slate-700 overflow-hidden hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-300"
+              >
+                <div className="aspect-video relative overflow-hidden bg-zinc-200 dark:bg-zinc-900">
+                  {post.frontmatter.image ? (
+                    <Image
+                      src={post.frontmatter.image}
+                      alt={post.frontmatter.title}
+                      fill
+                      className="object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-zinc-300 dark:bg-zinc-800 flex items-center justify-center">
+                      <span className="font-mono text-6xl text-slate-400 dark:text-slate-700">#{String(index + 1).padStart(2, '0')}</span>
+                    </div>
+                  )}
+                  <div className="absolute inset-0 bg-zinc-100/60 dark:bg-zinc-900/60"></div>
+                  <div className="absolute top-0 left-0 right-0 bg-white/90 dark:bg-slate-900 border-b-2 border-slate-300 dark:border-slate-700 px-4 py-2">
+                    <span className="font-mono text-xs text-cyan-600 dark:text-cyan-400 uppercase tracking-wider">
+                      FILE#{String(index + 1).padStart(3, '0')} // {post.frontmatter.category}
+                    </span>
+                  </div>
+                </div>
+                <div className="p-6 border-t-4 border-slate-300 dark:border-slate-800">
+                  <div className="border-l-4 border-emerald-700 dark:border-emerald-900 pl-4">
+                    <h3 className="text-xl font-mono font-bold text-slate-900 dark:text-slate-100 mb-3 uppercase tracking-tight">
+                      {post.frontmatter.title}
+                    </h3>
+                    <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-4 font-mono">
+                      {post.frontmatter.description}
+                    </p>
+                    <div className="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-500 font-mono mb-4">
+                      <span>{formatDate(post.frontmatter.date)}</span>
+                      <span>//</span>
+                      <span>{post.readingTime} MIN</span>
+                    </div>
+                  </div>
+                  <Link
+                    href={`/blog/${post.slug}`}
+                    className="inline-flex items-center text-cyan-600 dark:text-cyan-400 font-mono text-xs font-bold uppercase tracking-wider hover:text-cyan-500 dark:hover:text-cyan-300 border-2 border-slate-400 dark:border-slate-700 px-4 py-2 hover:border-cyan-700 dark:hover:border-cyan-900 transition-colors duration-200"
+                  >
+                    [ACCESEAZĂ] &gt;&gt;
+                  </Link>
+                </div>
+              </article>
+            ))}
+          </div>
+
+          {allPosts.length > 6 && (
+            <div className="mt-12 text-center">
+              <Link
+                href="/blog"
+                className="inline-flex items-center px-8 py-4 bg-transparent text-slate-700 dark:text-slate-300 border-2 border-slate-400 dark:border-slate-700 font-mono font-bold uppercase text-sm tracking-wider hover:bg-slate-200 dark:hover:bg-slate-800 hover:border-slate-500 dark:hover:border-slate-600 transition-colors duration-200"
+              >
+                [VEZI TOATE ARTICOLELE] &gt;&gt;
+              </Link>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Stats Section - from worktree-agent-1 */}
+      <section className="py-24 bg-zinc-50 dark:bg-zinc-900 border-y-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="border-l-4 border-teal-700 dark:border-teal-900 pl-6 mb-12">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
+              SYSTEM STATISTICS // DATABASE METRICS
+            </p>
+            <h2 className="text-3xl md:text-5xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase tracking-tight">
+              &gt; METRICI_
+            </h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
+              <div className="text-6xl font-mono font-bold text-cyan-600 dark:text-cyan-400 mb-4">
+                {allPosts.length}+
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
+                ARTICOLE PUBLICATE
+              </p>
+            </div>
+
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
+              <div className="text-6xl font-mono font-bold text-emerald-600 dark:text-emerald-400 mb-4">
+                50K+
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
+                CITITORI LUNARI
+              </p>
+            </div>
+
+            <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 p-8 text-center transition-colors duration-300">
+              <div className="text-6xl font-mono font-bold text-teal-600 dark:text-teal-400 mb-4">
+                99%
+              </div>
+              <p className="text-slate-600 dark:text-slate-400 font-mono text-sm uppercase tracking-wider border-t-2 border-slate-300 dark:border-slate-800 pt-4">
+                SATISFACȚIE
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Newsletter CTA - from worktree-agent-1 */}
+      <section className="py-24 bg-zinc-100 dark:bg-slate-900 border-t-4 border-slate-300 dark:border-slate-800 transition-colors duration-300">
+        <div className="max-w-3xl mx-auto px-6">
+          <div className="border-4 border-slate-300 dark:border-slate-700 bg-white dark:bg-zinc-900 p-12 transition-colors duration-300">
+            <p className="font-mono text-xs text-slate-500 dark:text-slate-500 uppercase tracking-widest mb-2">
+              NEWSLETTER SUBSCRIPTION
+            </p>
+            <h2 className="text-3xl font-mono font-bold text-slate-900 dark:text-slate-100 uppercase mb-4">
+              &gt; RĂMÂI LA CURENT_
+            </h2>
+            <p className="text-slate-700 dark:text-slate-400 font-mono text-sm mb-8 border-l-2 border-cyan-700 dark:border-cyan-900 pl-4">
+              Primește cele mai noi articole direct în inbox
+            </p>
+            <form className="flex gap-0 flex-col sm:flex-row border-2 border-slate-400 dark:border-slate-700">
+              <input
+                type="email"
+                placeholder="email@exemplu.com"
+                className="flex-1 px-6 py-4 bg-zinc-100 dark:bg-slate-800 text-slate-900 dark:text-white font-mono border-b-2 sm:border-b-0 sm:border-r-2 border-slate-400 dark:border-slate-700 focus:bg-zinc-200 dark:focus:bg-slate-750 focus:outline-none placeholder:text-slate-400 dark:placeholder:text-slate-600 transition-colors duration-200"
+              />
+              <button
+                type="submit"
+                className="px-8 py-4 bg-cyan-700 dark:bg-cyan-900 text-white dark:text-slate-100 font-mono font-bold uppercase text-sm tracking-wider hover:bg-cyan-600 dark:hover:bg-cyan-800 whitespace-nowrap border-t-2 sm:border-t-0 sm:border-l-2 border-cyan-600 dark:border-cyan-700 transition-colors duration-200"
+              >
+                [ABONEAZĂ-TE]
+              </button>
+            </form>
+            <p className="text-slate-500 dark:text-slate-600 font-mono text-xs mt-4 uppercase">
+              // Fără spam. Dezabonare oricând.
+            </p>
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

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/markdown-renderer.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+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';
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  return (
+    <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>
+        ),
+        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}>
+              {children}
+            </code>
+          );
+        },
+        img: ({ src, alt }) => {
+          if (!src || typeof src !== 'string') return null;
+          const isExternal = src.startsWith('http://') || src.startsWith('https://');
+
+          if (isExternal) {
+            return (
+              <img
+                src={src}
+                alt={alt || ''}
+                className="my-4 rounded-lg max-w-full h-auto"
+              />
+            );
+          }
+
+          return (
+            <div className="my-4 relative w-full h-auto">
+              <Image
+                src={src}
+                alt={alt || ''}
+                width={800}
+                height={600}
+                className="rounded-lg"
+                style={{ width: '100%', height: 'auto' }}
+              />
+            </div>
+          );
+        },
+        a: ({ href, children }) => {
+          if (!href) return <>{children}</>;
+          const isExternal = href.startsWith('http://') || href.startsWith('https://');
+
+          if (isExternal) {
+            return (
+              <a
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
+                {children}
+              </a>
+            );
+          }
+
+          return (
+            <Link href={href} className="text-blue-600 hover:underline">
+              {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}
+    </ReactMarkdown>
+  );
+}

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>
+  )
+}

components/layout/Breadcrumbs.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Fragment } from 'react';
+import { BreadcrumbsSchema } from './breadcrumbs-schema';
+
+interface BreadcrumbItem {
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+function HomeIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+      />
+    </svg>
+  );
+}
+
+function ChevronIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 5l7 7-7 7"
+      />
+    </svg>
+  );
+}
+
+function formatSegmentLabel(segment: string): string {
+  const specialCases: { [key: string]: string } = {
+    blog: 'Blog',
+    tags: 'Tag-uri',
+    about: 'Despre',
+  };
+
+  if (specialCases[segment]) {
+    return specialCases[segment];
+  }
+
+  return segment
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+}
+
+export function Breadcrumbs({ items }: { items?: BreadcrumbItem[] }) {
+  const pathname = usePathname();
+
+  let breadcrumbs: BreadcrumbItem[] = items || [];
+
+  if (!items) {
+    const segments = pathname.split('/').filter(Boolean);
+    breadcrumbs = segments.map((segment, index) => {
+      const href = '/' + segments.slice(0, index + 1).join('/');
+      const label = formatSegmentLabel(segment);
+      const current = index === segments.length - 1;
+
+      return { label, href, current };
+    });
+  }
+
+  if (pathname === '/') {
+    return null;
+  }
+
+  const schemaItems = [
+    { position: 1, name: 'Acasă', item: '/' },
+    ...breadcrumbs.map((item, index) => ({
+      position: index + 2,
+      name: item.label,
+      item: item.href,
+    })),
+  ];
+
+  return (
+    <>
+      <nav
+        aria-label="Breadcrumb"
+        className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+      >
+        <div className="container mx-auto px-4 py-3">
+          <ol className="flex items-center space-x-2 text-sm overflow-x-auto scrollbar-hide">
+            <li className="flex-shrink-0">
+              <Link
+                href="/"
+                className="flex items-center text-gray-500 hover:text-primary-600 transition"
+                aria-label="Acasă"
+              >
+                <HomeIcon className="w-4 h-4" />
+              </Link>
+            </li>
+
+            {breadcrumbs.map((item) => (
+              <Fragment key={item.href}>
+                <li className="text-gray-400 flex-shrink-0">
+                  <ChevronIcon className="w-4 h-4" />
+                </li>
+                <li className="flex-shrink-0">
+                  {item.current ? (
+                    <span
+                      className="font-medium text-gray-700 dark:text-gray-300 truncate max-w-[150px] sm:max-w-none block"
+                      aria-current="page"
+                    >
+                      {item.label}
+                    </span>
+                  ) : (
+                    <Link
+                      href={item.href}
+                      className="text-gray-500 hover:text-primary-600 transition truncate max-w-[150px] sm:max-w-none block"
+                    >
+                      {item.label}
+                    </Link>
+                  )}
+                </li>
+              </Fragment>
+            ))}
+          </ol>
+        </div>
+      </nav>
+      <BreadcrumbsSchema items={schemaItems} />
+    </>
+  );
+}

components/layout/breadcrumbs-schema.tsx

@@ -0,0 +1,25 @@
+interface BreadcrumbSchemaItem {
+  position: number;
+  name: string;
+  item: string;
+}
+
+export function BreadcrumbsSchema({ items }: { items: BreadcrumbSchemaItem[] }) {
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: items.map((item) => ({
+      '@type': 'ListItem',
+      position: item.position,
+      name: item.name,
+      item: `http://localhost:3000${item.item}`,
+    })),
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+    />
+  );
+}

components/theme-toggle.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+
+export function ThemeToggle() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+  const [isGlitching, setIsGlitching] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const toggleTheme = () => {
+    // Trigger glitch animation
+    setIsGlitching(true)
+
+    // Trigger screen flicker
+    document.body.classList.add('screen-flicker')
+
+    // Toggle theme
+    setTheme(theme === 'dark' ? 'light' : 'dark')
+
+    // Remove effects after animation
+    setTimeout(() => {
+      setIsGlitching(false)
+      document.body.classList.remove('screen-flicker')
+    }, 300)
+  }
+
+  if (!mounted) {
+    return (
+      <button className="font-mono text-xs text-slate-400 uppercase tracking-wider px-3 py-1 border-2 border-slate-700">
+        [...]
+      </button>
+    )
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className={`
+        relative font-mono text-xs uppercase tracking-wider
+        px-3 py-1 border-2 transition-all duration-300
+        ${theme === 'dark'
+          ? 'text-cyan-400 border-cyan-900 hover:border-cyan-700 bg-cyan-950/20'
+          : 'text-emerald-600 border-emerald-700 hover:border-emerald-500 bg-emerald-50/50'
+        }
+        ${isGlitching ? 'glitch-btn' : ''}
+        border-pulse overflow-hidden
+      `}
+      aria-label="Toggle theme"
+    >
+      <span className="relative z-10">
+        {theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}
+      </span>
+      {isGlitching && (
+        <>
+          <span className="glitch-layer" aria-hidden="true">
+            {theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}
+          </span>
+          <span className="glitch-layer" aria-hidden="true">
+            {theme === 'dark' ? '[DARK MODE]' : '[LIGHT MODE]'}
+          </span>
+        </>
+      )}
+    </button>
+  )
+}

content/blog/example.md

@@ -0,0 +1,30 @@
+---
+title: "Getting Started with Next.js 15"
+description: "Learn how to build modern web applications with Next.js 15 and TypeScript."
+date: "2025-01-07"
+author: "John Doe"
+category: "Tutorial"
+tags: ["nextjs", "typescript", "tutorial"]
+---
+
+# Getting Started with Next.js 15
+
+Welcome to this example blog post! This post demonstrates how markdown content is rendered.
+
+## Features
+
+- Server Components by default
+- Improved performance
+- Better TypeScript support
+
+## Code Example
+
+```typescript
+export default function Page() {
+  return <h1>Hello, Next.js 15!</h1>
+}
+```
+
+## Conclusion
+
+Next.js 15 brings many improvements for building modern web applications.

content/blog/tech/articol-tehnic.md

@@ -0,0 +1,41 @@
+---
+title: "Articol Tehnic din Subdirector"
+description: "Test pentru subdirectoare și organizare ierarhică"
+date: "2025-01-10"
+author: "Tech Writer"
+category: "Tehnologie"
+tags: ["nextjs", "react", "typescript"]
+draft: false
+---
+
+# Articol Tehnic
+
+Acesta este un articol stocat într-un subdirector pentru a testa funcționalitatea de organizare ierarhică.
+
+## Next.js și React
+
+Next.js este un framework React puternic care oferă:
+
+- Server-side rendering (SSR)
+- Static site generation (SSG)
+- API routes
+- File-based routing
+
+## Exemplu de cod TypeScript
+
+```typescript
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+async function fetchUser(id: number): Promise<User> {
+  const response = await fetch(`/api/users/${id}`);
+  return response.json();
+}
+```
+
+## Concluzie
+
+Subdirectoarele funcționează perfect pentru organizarea conținutului!

content/blog/test-complet.md

@@ -0,0 +1,109 @@
+---
+title: "Test Complet Markdown"
+description: "Un articol de test care demonstrează toate elementele markdown suportate"
+date: "2025-01-15"
+author: "Test Author"
+category: "Tutorial"
+tags: ["markdown", "test", "demo"]
+image: "/38636.jpg"
+draft: false
+---
+
+# Heading 1
+
+Acesta este un paragraf normal cu **text bold** și *text italic*. Putem combina ***bold și italic***.
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+## Liste
+
+### Listă neordonată
+
+- Item 1
+- Item 2
+  - Subitem 2.1
+  - Subitem 2.2
+- Item 3
+
+### Listă ordonată
+
+1. Primul item
+2. Al doilea item
+3. Al treilea item
+
+## Cod
+
+Cod inline: `const x = 42;`
+
+Bloc de cod JavaScript:
+
+```javascript
+function greet(name) {
+  console.log(`Hello, ${name}!`);
+  return true;
+}
+
+greet("World");
+```
+
+Bloc de cod Python:
+
+```python
+def calculate_sum(a, b):
+    """Calculate sum of two numbers"""
+    return a + b
+
+result = calculate_sum(5, 10)
+print(f"Result: {result}")
+```
+
+## Blockquote
+
+> Acesta este un blockquote.
+> Poate avea multiple linii.
+>
+> Și paragrafe separate.
+
+## Link-uri
+
+[Link intern](/blog/alt-articol)
+
+[Link extern](https://example.com)
+
+## Imagini
+
+![Alt text pentru imagine](/images/sample.jpg)
+
+## Tabele
+
+| Coloana 1 | Coloana 2 | Coloana 3 |
+|-----------|-----------|-----------|
+| Celula 1  | Celula 2  | Celula 3  |
+| Date 1    | Date 2    | Date 3    |
+| Info 1    | Info 2    | Info 3    |
+
+## Linie orizontală
+
+---
+
+## Task List (GFM)
+
+- [x] Task completat
+- [ ] Task incomplet
+- [ ] Alt task
+
+## Strikethrough
+
+~~Text șters~~
+
+## Concluzie
+
+Acesta este sfârșitul articolului de test.

lib/markdown.ts

@@ -0,0 +1,154 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { FrontMatter, Post } from './types/frontmatter';
+import { generateExcerpt } from './utils';
+
+const POSTS_PATH = path.join(process.cwd(), 'content', 'blog');
+
+export function sanitizePath(inputPath: string): string {
+  const normalized = path.normalize(inputPath).replace(/^(\.\.[\/\\])+/, '');
+  if (normalized.includes('..') || path.isAbsolute(normalized)) {
+    throw new Error('Invalid path');
+  }
+  return normalized;
+}
+
+export function calculateReadingTime(content: string): number {
+  const wordsPerMinute = 200;
+  const words = content.trim().split(/\s+/).length;
+  return Math.ceil(words / wordsPerMinute);
+}
+
+export function validateFrontmatter(data: any): FrontMatter {
+  if (!data.title || typeof data.title !== 'string') {
+    throw new Error('Invalid title');
+  }
+  if (!data.description || typeof data.description !== 'string') {
+    throw new Error('Invalid description');
+  }
+  if (!data.date || typeof data.date !== 'string') {
+    throw new Error('Invalid date');
+  }
+  if (!data.author || typeof data.author !== 'string') {
+    throw new Error('Invalid author');
+  }
+  if (!data.category || typeof data.category !== 'string') {
+    throw new Error('Invalid category');
+  }
+  if (!Array.isArray(data.tags) || data.tags.length === 0 || data.tags.length > 3) {
+    throw new Error('Tags must be array with 1-3 items');
+  }
+
+  return {
+    title: data.title,
+    description: data.description,
+    date: data.date,
+    author: data.author,
+    category: data.category,
+    tags: data.tags,
+    image: data.image,
+    draft: data.draft || false,
+  };
+}
+
+export function getPostBySlug(slug: string | string[]): Post | null {
+  const slugArray = Array.isArray(slug) ? slug : [slug];
+  const sanitized = slugArray.map(s => sanitizePath(s));
+  const fullPath = path.join(POSTS_PATH, ...sanitized) + '.md';
+
+  if (!fs.existsSync(fullPath)) {
+    return null;
+  }
+
+  const fileContents = fs.readFileSync(fullPath, 'utf8');
+  const { data, content } = matter(fileContents);
+  const frontmatter = validateFrontmatter(data);
+
+  return {
+    slug: sanitized.join('/'),
+    frontmatter,
+    content,
+    readingTime: calculateReadingTime(content),
+    excerpt: generateExcerpt(content),
+  };
+}
+
+export function getAllPosts(includeContent = false): Post[] {
+  const posts: Post[] = [];
+
+  function walkDir(dir: string, prefix = ''): void {
+    const files = fs.readdirSync(dir);
+
+    for (const file of files) {
+      const filePath = path.join(dir, file);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory()) {
+        walkDir(filePath, prefix ? `${prefix}/${file}` : file);
+      } else if (file.endsWith('.md')) {
+        const slug = prefix ? `${prefix}/${file.replace(/\.md$/, '')}` : file.replace(/\.md$/, '');
+        try {
+          const post = getPostBySlug(slug.split('/'));
+          if (post && !post.frontmatter.draft) {
+            posts.push(includeContent ? post : { ...post, content: '' });
+          }
+        } catch (error) {
+          console.error(`Error loading post ${slug}:`, error);
+        }
+      }
+    }
+  }
+
+  if (fs.existsSync(POSTS_PATH)) {
+    walkDir(POSTS_PATH);
+  }
+
+  return posts.sort((a, b) => new Date(b.frontmatter.date).getTime() - new Date(a.frontmatter.date).getTime());
+}
+
+export async function getRelatedPosts(currentSlug: string, limit = 3): Promise<Post[]> {
+  const currentPost = getPostBySlug(currentSlug);
+  if (!currentPost) return [];
+
+  const allPosts = getAllPosts(false);
+  const { category, tags } = currentPost.frontmatter;
+
+  const scored = allPosts
+    .filter(post => post.slug !== currentSlug)
+    .map(post => {
+      let score = 0;
+      if (post.frontmatter.category === category) score += 3;
+      score += post.frontmatter.tags.filter(tag => tags.includes(tag)).length * 2;
+      return { post, score };
+    })
+    .filter(({ score }) => score > 0)
+    .sort((a, b) => b.score - a.score);
+
+  return scored.slice(0, limit).map(({ post }) => post);
+}
+
+export function getAllPostSlugs(): string[][] {
+  const slugs: string[][] = [];
+
+  function walkDir(dir: string, prefix: string[] = []): void {
+    const files = fs.readdirSync(dir);
+
+    for (const file of files) {
+      const filePath = path.join(dir, file);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory()) {
+        walkDir(filePath, [...prefix, file]);
+      } else if (file.endsWith('.md')) {
+        slugs.push([...prefix, file.replace(/\.md$/, '')]);
+      }
+    }
+  }
+
+  if (fs.existsSync(POSTS_PATH)) {
+    walkDir(POSTS_PATH);
+  }
+
+  return slugs;
+}

lib/seo.ts

@@ -0,0 +1,33 @@
+export interface SEOData {
+  title: string
+  description: string
+  url: string
+  image?: string
+  type?: 'website' | 'article'
+  author?: string
+  publishedTime?: string
+}
+
+export function generateStructuredData(data: SEOData) {
+  const structuredData: any = {
+    '@context': 'https://schema.org',
+    '@type': data.type === 'article' ? 'BlogPosting' : 'WebSite',
+    headline: data.title,
+    description: data.description,
+    url: data.url,
+  }
+
+  if (data.image) {
+    structuredData.image = data.image
+  }
+
+  if (data.type === 'article') {
+    structuredData.author = {
+      '@type': 'Person',
+      name: data.author || 'Unknown',
+    }
+    structuredData.datePublished = data.publishedTime
+  }
+
+  return JSON.stringify(structuredData)
+}

lib/types/frontmatter.ts

@@ -0,0 +1,22 @@
+export interface FrontMatter {
+  title: string;
+  description: string;
+  date: string;
+  author: string;
+  category: string;
+  tags: string[];
+  image?: string;
+  draft?: boolean;
+}
+
+export interface Post {
+  slug: string;
+  frontmatter: FrontMatter;
+  content: string;
+  readingTime: number;
+  excerpt: string;
+}
+
+export interface BlogParams {
+  slug: string[];
+}

lib/utils.ts

@@ -0,0 +1,53 @@
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const months = [
+    'ianuarie', 'februarie', 'martie', 'aprilie', 'mai', 'iunie',
+    'iulie', 'august', 'septembrie', 'octombrie', 'noiembrie', 'decembrie'
+  ];
+
+  return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
+}
+
+export function formatRelativeDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffTime = Math.abs(now.getTime() - date.getTime());
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return 'astăzi';
+  if (diffDays === 1) return 'ieri';
+  if (diffDays < 7) return `acum ${diffDays} zile`;
+  if (diffDays < 30) return `acum ${Math.floor(diffDays / 7)} săptămâni`;
+  if (diffDays < 365) return `acum ${Math.floor(diffDays / 30)} luni`;
+  return `acum ${Math.floor(diffDays / 365)} ani`;
+}
+
+export function generateExcerpt(content: string, maxLength = 160): string {
+  const text = content
+    .replace(/^---[\s\S]*?---/, '')
+    .replace(/!\[.*?\]\(.*?\)/g, '')
+    .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+    .replace(/[#*`]/g, '')
+    .trim();
+
+  if (text.length <= maxLength) return text;
+
+  const truncated = text.slice(0, maxLength);
+  const lastSpace = truncated.lastIndexOf(' ');
+  return truncated.slice(0, lastSpace) + '...';
+}
+
+export function generateSlug(title: string): string {
+  const romanianMap: Record<string, string> = {
+    'ă': 'a', 'â': 'a', 'î': 'i', 'ș': 's', 'ț': 't',
+    'Ă': 'a', 'Â': 'a', 'Î': 'i', 'Ș': 's', 'Ț': 't'
+  };
+
+  return title
+    .split('')
+    .map(char => romanianMap[char] || char)
+    .join('')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+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.

next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  },
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "mypage",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next dev -p 3030",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "validate-posts": "node scripts/validate-posts.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@192.168.1.53:2222/raresj/mypage.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "autoprefixer": "^10.4.21",
+    "gray-matter": "^4.0.3",
+    "next": "^16.0.1",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

providers/providers.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ThemeProviderProps } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

public/grid.svg

@@ -0,0 +1,8 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(148, 163, 184, 0.1)" stroke-width="1"/>
+    </pattern>
+  </defs>
+  <rect width="100" height="100" fill="url(#grid)"/>
+</svg>

public/noise.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="noiseFilter">
+    <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/>
+  </filter>
+  <rect width="100%" height="100%" filter="url(#noiseFilter)" opacity="0.05"/>
+</svg>

tailwind.config.js

@@ -0,0 +1,87 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+        'dark-primary': '#18181b',
+        'dark-secondary': '#0f172a',
+        'dark-tertiary': '#1e293b',
+        'accent': {
+          DEFAULT: '#164e63',
+          hover: '#155e75',
+          light: '#0e7490',
+        },
+        'accent-emerald': {
+          DEFAULT: '#064e3b',
+          hover: '#065f46',
+        },
+        'accent-teal': {
+          DEFAULT: '#134e4a',
+          hover: '#115e59',
+        },
+      },
+      animation: {
+        'glitch': 'glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both',
+        'flicker': 'flicker 0.15s infinite',
+        'scanline': 'scanline 8s linear infinite',
+        'noise': 'noise 0.2s infinite',
+      },
+      keyframes: {
+        glitch: {
+          '0%': { transform: 'translate(0)' },
+          '20%': { transform: 'translate(-2px, 2px)' },
+          '40%': { transform: 'translate(-2px, -2px)' },
+          '60%': { transform: 'translate(2px, 2px)' },
+          '80%': { transform: 'translate(2px, -2px)' },
+          '100%': { transform: 'translate(0)' },
+        },
+        flicker: {
+          '0%, 100%': { opacity: '1' },
+          '41.99%': { opacity: '1' },
+          '42%': { opacity: '0' },
+          '43%': { opacity: '0' },
+          '43.01%': { opacity: '1' },
+          '47.99%': { opacity: '1' },
+          '48%': { opacity: '0' },
+          '49%': { opacity: '0' },
+          '49.01%': { opacity: '1' },
+        },
+        scanline: {
+          '0%': { transform: 'translateY(-100%)' },
+          '100%': { transform: 'translateY(100%)' },
+        },
+        noise: {
+          '0%, 100%': { backgroundPosition: '0 0' },
+          '10%': { backgroundPosition: '-5% -10%' },
+          '20%': { backgroundPosition: '-15% 5%' },
+          '30%': { backgroundPosition: '7% -25%' },
+          '40%': { backgroundPosition: '-5% 25%' },
+          '50%': { backgroundPosition: '-15% 10%' },
+          '60%': { backgroundPosition: '15% 0%' },
+          '70%': { backgroundPosition: '0% 15%' },
+          '80%': { backgroundPosition: '3% 35%' },
+          '90%': { backgroundPosition: '-10% 10%' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}