design

src/components/BlogPostClient.tsx

@@ -15,6 +15,15 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 100);
+      
+      // Update progress bar
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height);
+      const progressBar = document.querySelector('.reading-progress-bar') as HTMLElement;
+      if (progressBar) {
+        progressBar.style.transform = `scaleX(${scrolled})`;
+      }
     };
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
@@ -69,7 +78,8 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
 
   return (
     <>
-      <nav 
+      <div className="reading-progress-bar" />
+      <nav
         id="top-nav"
         className={`fixed top-0 left-0 right-0 z-40 border-b border-slate-200 transition-all duration-300 ${
           isScrolled ? 'bg-white/95 backdrop-blur-md' : 'bg-white/80 backdrop-blur-sm'