feat: animated blogpost cards.

fezcode · fezcode · commit 599c810730fd · 2025-11-12T04:30:38.000+03:00
diff --git a/src/components/PostItem.js b/src/components/PostItem.js
@@ -57,7 +57,7 @@ const PostItem = ({ slug, title, date, updatedDate, category, series, seriesInde
   return (
     <Link
       to={isSeries ? `/blog/${slug}` : `/blog/${slug}`}
-      className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors group ${postBackgroundColorClass} ${postHoverBackgroundColorClass}`}
+      className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors group relative overflow-hidden ${postBackgroundColorClass} ${postHoverBackgroundColorClass} animated-grid-bg`}
     >
       <article>
         <div className="flex items-center">
diff --git a/src/index.css b/src/index.css
@@ -151,3 +151,19 @@ input[type=number] {
     opacity: 0;
   }
 }
+
+@keyframes grid-animation {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+
+.animated-grid-bg {
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  background-size: 20px 20px;
+  animation: grid-animation 30s linear infinite;
+}

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ const PostItem = ({ slug, title, date, updatedDate, category, series, seriesInde`
`57`	`57`	`return (`
`58`	`58`	`<Link`
`59`	`59`	to={isSeries ? `/blog/${slug}` : `/blog/${slug}`}
`60`		- className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors group ${postBackgroundColorClass} ${postHoverBackgroundColorClass}`}
	`60`	+ className={`block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer transition-colors group relative overflow-hidden ${postBackgroundColorClass} ${postHoverBackgroundColorClass} animated-grid-bg`}
`61`	`61`	`>`
`62`	`62`	`<article>`
`63`	`63`	`<div className="flex items-center">`