mail_kbanc_com
/
nice-gee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
kbanc85 2025-11-09 14:50:39 -05:00
parent 9f5e0e47b3
commit 12e9a500c6
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Header.tsx
View File

@ -4,9 +4,9 @@ const Header = () => {
return ( return (
<header className="border-b border-border py-10 md:py-12"> <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="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"> <div className="flex flex-col gap-8 items-start">
{/* Left: Photo + Name/Title */} {/* Photo + Name/Title */}
<div className="flex flex-row gap-6 items-center lg:items-start flex-shrink-0"> <div className="flex flex-row gap-6 items-center flex-shrink-0">
<img <img
src="/kamil-banc.jpg" src="/kamil-banc.jpg"
alt="Kamil Banc" alt="Kamil Banc"
@ -18,8 +18,8 @@ const Header = () => {
</div> </div>
</div> </div>
{/* Right: Bio Content */} {/* Bio Content */}
<div className="flex-1 space-y-4"> <div className="w-full space-y-4">
<p className="text-base leading-relaxed"> <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. 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> </p>