fix: unify content max-width across all pages

Apply lg:max-w-4xl globally on the content wrapper in Index.tsx so every
section (about, projects, blog, playlist, contact) uses the same width cap
on desktop. Remove per-section max-w-4xl from BlogSection and BlogPostReader
since the global wrapper now handles it.

Mobile and tablet remain full-width (constraint only activates at lg+).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: luisxcam

src/components/BlogPostReader.tsx

@@ -16,7 +16,7 @@ interface BlogPostReaderProps {
 
 const BlogPostReader = ({ post, onBack }: BlogPostReaderProps) => {
   return (
-    <div className="space-y-4 max-w-4xl">
+    <div className="space-y-4">
       <button
         onClick={onBack}
         aria-label="back to blog list"

src/components/sections/BlogSection.tsx

@@ -18,7 +18,7 @@ const BlogSection = ({ slug }: BlogSectionProps) => {
   }
 
   return (
-    <div className="space-y-4 max-w-4xl">
+    <div className="space-y-4">
       <TerminalWindow title="~/portfolio/blog/">
         <div className="text-xs text-muted-foreground">
           <span className="text-terminal">$</span> find blog/ -name "*.md" | sort -r

src/pages/Index.tsx

@@ -51,7 +51,7 @@ const Index = () => {
         </div>
 
         {/* Content */}
-        <div className="p-6 lg:p-10 pt-16 lg:pt-6 pb-10">
+        <div className="p-6 lg:p-10 pt-16 lg:pt-6 pb-10 lg:max-w-4xl">
           {sections[activeSection]}
         </div>