v5

fezcode · fezcode · commit 57b1f16aec10 · 2025-10-15T00:50:22.000+03:00
diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
     <title>React App</title>
   </head>
   <body class="bg-gray-950">
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -4,7 +4,7 @@ import Footer from './Footer';
 
 const Layout = ({ children }) => {
   return (
-    <div className="bg-gray-950 text-white min-h-screen font-sans">
+    <div className="bg-gray-950 min-h-screen font-sans">
       <Navbar />
       <main className="flex-grow">
         {children}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,9 +1,21 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 const Navbar = () => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
-    <header className="backdrop-blur-sm sticky top-0 z-40">
+    <header className={`backdrop-blur-sm sticky top-0 z-40 transition-colors border-b ${isScrolled ? 'border-gray-700/50' : 'border-transparent'}`}>
       <div className="container mx-auto flex justify-between items-center p-4 text-white">
         <Link to="/" className="text-2xl font-semibold tracking-tight">
           My Awesome Blog
diff --git a/src/components/PostItem.js b/src/components/PostItem.js
@@ -6,21 +6,21 @@ const PostItem = ({ slug }) => {
   const date = 'October 15, 2025'; // Placeholder date
 
   return (
-    <article className="p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg">
-      <div className="flex items-center">
-        <p className="text-sm text-gray-400">{date}</p>
-        <div className="ml-4 flex-grow flex items-center">
-          <h2 className="text-xl font-semibold">
-            <Link to={`/blog/${slug}`} className="text-white hover:text-teal-400 transition-colors">
+    <Link to={`/blog/${slug}`} className="block p-8 my-4 border border-gray-700/50 rounded-lg shadow-lg cursor-pointer hover:bg-gray-800/30 transition-colors">
+      <article>
+        <div className="flex items-center">
+          <p className="text-sm text-gray-400">{date}</p>
+          <div className="ml-4 flex-grow flex items-center">
+            <h2 className="text-xl font-semibold text-white hover:text-teal-400 transition-colors">
               {title}
-            </Link>
-          </h2>
+            </h2>
+          </div>
+          <span className="ml-4 flex-shrink-0 text-sm font-medium text-teal-400 hover:text-teal-500 transition-colors">
+            Read post &rarr;
+          </span>
         </div>
-        <Link to={`/blog/${slug}`} className="ml-4 flex-shrink-0 text-sm font-medium text-teal-400 hover:text-teal-500 transition-colors">
-          Read post &rarr;
-        </Link>
-      </div>
-    </article>
+      </article>
+    </Link>
   );
 };
 
diff --git a/src/components/ProjectCard.js b/src/components/ProjectCard.js
@@ -3,13 +3,13 @@ import { Link } from 'react-router-dom';
 
 const ProjectCard = ({ project }) => {
   return (
-    <div className="bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors border border-gray-700/50">
+    <Link to={`/projects/${project.slug}`} className="block bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors border border-gray-700/50 cursor-pointer">
       <h3 className="text-xl font-semibold text-white">{project.title}</h3>
       <p className="mt-2 text-gray-400">{project.description}</p>
-      <Link to={`/projects/${project.slug}`} className="mt-4 inline-block text-teal-400 hover:text-teal-500 transition-colors">
+      <span className="mt-4 inline-block text-teal-400 hover:text-teal-500 transition-colors">
         View Project &rarr;
-      </Link>
-    </div>
+      </span>
+    </Link>
   );
 };
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,8 +9,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-        mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
+        sans: ['Space Mono', ...defaultTheme.fontFamily.sans],
+        mono: ['Inter', ...defaultTheme.fontFamily.mono],
       },
       colors: {
         teal: {
