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

Merge header and bio into unified compact layout 

Consolidated Header and Bio components into a single responsive section for better space utilization and visual consistency with the claims library.

Layout changes:
- Unified header section with wide container (max-w-[1920px])
- Desktop (lg+): Photo + name/title on left, bio paragraphs flow to the right
- Mobile: Vertical stack (photo → name → bio paragraphs)
- Removed separate Bio section from homepage
- Matches claims library container width for visual consistency

Benefits:
✓ Reduces vertical scrolling on desktop
✓ Better use of horizontal space on wide screens
✓ Maintains mobile-friendly responsive design
✓ Preserves semantic HTML and SEO structure
✓ All content left-aligned for consistency

Responsive breakpoints:
- Mobile: Stacked vertically
- lg (1024px+): Side-by-side layout with flexbox

🤖 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:28:35 -05:00
parent c633cd230d
commit 98b1e6482b
2 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

@ -1,6 +1,5 @@
import type { Metadata } from "next";
import Header from "@/components/Header";
import Bio from "@/components/Bio";
import Services from "@/components/Services";
import ClaimsLibrary from "@/components/ClaimsLibrary";
import Footer from "@/components/Footer";
@ -51,7 +50,6 @@ export default function HomePage() {
</a>
<Header />
<main id="main-content">
<Bio />
<ClaimsLibrary />
<Services />
</main>

61
src/components/Header.tsx
View File

@ -1,16 +1,55 @@
import { ExternalLink } from "lucide-react";
const Header = () => {
return (
<header className="border-b border-border py-12 md:py-16">
<div className="container max-w-4xl mx-auto px-5">
<div className="flex flex-row gap-6 items-center">
<img
src="/kamil-banc.jpg"
alt="Kamil Banc"
className="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0"
/>
<div>
<h1 className="text-4xl md:text-5xl font-bold mb-2">Kamil Banc</h1>
<p className="text-xl text-secondary">AI Implementation Expert</p>
<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">
<img
src="/kamil-banc.jpg"
alt="Kamil Banc"
className="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0"
/>
<div>
<h1 className="text-4xl md:text-5xl font-bold mb-2">Kamil Banc</h1>
<p className="text-xl text-secondary">AI Implementation Expert</p>
</div>
</div>
{/* Right: Bio Content */}
<div className="flex-1 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>
<p className="text-base leading-relaxed">
My work focuses on practical adoption patterns: what works, what fails, and why. I document implementation frameworks, measure outcomes, and share findings through the AI Adopters Club community.
</p>
<p className="text-base leading-relaxed">
This library contains citation-ready claims from my research and consulting work. Each claim is backed by data, includes context, and is optimized for LLM extraction.
</p>
<div className="flex flex-wrap gap-4 pt-2">
<a
href="https://www.linkedin.com/in/kbanc/"
target="_blank"
rel="noopener noreferrer"
className="text-accent hover:underline inline-flex items-center gap-1"
>
LinkedIn <ExternalLink className="h-3 w-3" />
</a>
<a
href="https://aiadopters.club"
target="_blank"
rel="noopener noreferrer"
className="text-accent hover:underline inline-flex items-center gap-1"
>
AI Adopters Club <ExternalLink className="h-3 w-3" />
</a>
</div>
</div>
</div>
</div>