Keep header layout vertical at all screen sizes

Changed header to always stack vertically (photo/name on top, bio below) instead of switching to horizontal layout on wide screens.

Changes:
- Removed lg:flex-row - now always flex-col at all sizes
- Removed lg:gap-12 - consistent gap-8 spacing
- Removed lg:items-start - always items-center
- Changed flex-1 to w-full for bio content section

Result: Photo + name/title always appear above bio paragraphs, regardless of screen width. This provides consistent visual hierarchy across all devices.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/Header.tsx

@@ -4,9 +4,9 @@ const Header = () => {
   return (
     <header className="border-b border-border py-10 md:py-12">
       <div className="container max-w-[1920px] mx-auto px-6 md:px-8 lg:px-12">
-        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start">
-          {/* Left: Photo + Name/Title */}
-          <div className="flex flex-row gap-6 items-center lg:items-start flex-shrink-0">
+        <div className="flex flex-col gap-8 items-start">
+          {/* Photo + Name/Title */}
+          <div className="flex flex-row gap-6 items-center flex-shrink-0">
             <img
               src="/kamil-banc.jpg"
               alt="Kamil Banc"
@@ -18,8 +18,8 @@ const Header = () => {
             </div>
           </div>
 
-          {/* Right: Bio Content */}
-          <div className="flex-1 space-y-4">
+          {/* Bio Content */}
+          <div className="w-full space-y-4">
             <p className="text-base leading-relaxed">
               I help organizations implement AI systems that actually work. I focus on real implementations that generate measurable value, not theoretical frameworks or vendor pitches.
             </p>