diff --git a/app/blog/page.tsx b/app/blog/page.tsx new file mode 100644 index 0000000..661f955 --- /dev/null +++ b/app/blog/page.tsx @@ -0,0 +1,191 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import { MediumCard } from '../../src/components/MediumCard'; +import { SearchBar } from '../../src/components/SearchBar'; +import { Tag } from '../../src/components/Tag'; +import { blogPosts } from '../../src/data/blogPosts'; + +export default function BlogPage() { + const [searchQuery, setSearchQuery] = useState(''); + const [filteredPosts, setFilteredPosts] = useState(blogPosts); + + // Sort posts by date + const allPosts = [...blogPosts].sort((a, b) => + new Date(b.date).getTime() - new Date(a.date).getTime() + ); + + // Get unique tags + const allTags = Array.from(new Set(allPosts.flatMap(post => post.tags || []))); + + useEffect(() => { + const query = searchQuery.toLowerCase().trim(); + if (query.startsWith('#')) { + const tag = query.slice(1); + setFilteredPosts(allPosts.filter(post => + post.tags?.some(t => t.toLowerCase() === tag.toLowerCase()) + )); + } else { + setFilteredPosts(allPosts.filter(post => { + const title = post.title.toLowerCase(); + const description = post.description.toLowerCase(); + const tags = (post.tags || []).join(' ').toLowerCase(); + return title.includes(query) || description.includes(query) || tags.includes(query); + })); + } + }, [searchQuery]); + + const filterByTag = (tag: string) => { + setSearchQuery(`#${tag}`); + }; + + return ( +
+ {/* Clean Hero Section */} +
+ {/* Animated Background */} +
+ + {/* Morphing Blob */} +
+
+
+ + {/* Animated Drawing Paths */} + + + + + + + {/* Floating Shapes */} +
+
+
+
+ +
+
+

+ Marc Mintel +

+

+ "A public notebook of things I figured out, mistakes I made, and tools I tested." +

+
+ + + Vulkaneifel, Germany + + + Digital problem solver +
+
+
+
+ + {/* Search */} +
+
+ +
+
+ + {/* Topics */} + {allTags.length > 0 && ( +
+

Topics

+
+ {allTags.map((tag, index) => ( + + ))} +
+
+ )} + + {/* All Posts */} +
+
+ {filteredPosts.length === 0 ? ( +
+

No posts found matching your criteria.

+
+ ) : ( + filteredPosts.map(post => ( + + )) + )} +
+
+ + +
+ ); +} diff --git a/app/layout.tsx b/app/layout.tsx index c0e408e..5e8a29a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import './globals.css'; import { Footer } from '../src/components/Footer'; +import { Header } from '../src/components/Header'; import { InteractiveElements } from '../src/components/InteractiveElements'; import { Analytics } from '../src/components/Analytics'; @@ -28,7 +29,8 @@ export default function RootLayout({ -
+
+
{children}