Restructure header to make it more responsive

src/app/components/AboutBrief.tsx

@@ -7,14 +7,9 @@ import { Col, Row } from 'react-bootstrap';
 export default function AboutBrief() {
     const person = usePersonContext()
     return (
-    <Container className='about-brief' fluid>
-        <Row>
-          <Col><Image alt='Photograph of the person' rounded fluid src='photo.png'></Image></Col>
-          <Col xs={7} sm={'auto'} lg={8}>
-            <h1>{person.name}</h1>
-            <p className='brief'>{person.brief}</p>
-          </Col>
-        </Row>
+      <Container className='about-brief' fluid>
+        <h1>{person.name}</h1>
+        <p className='brief'>{person.brief}</p>
       </Container>
     )
 }

src/app/components/Contacts.tsx

@@ -22,9 +22,8 @@ export function Contact(props: {icon?: string, text: string}) {
         textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a>
     }
     return (
-        <Col className='contact'>
-            <i className={'bi-' + props.icon}> </i>
-            {textElement}
+        <Col className='contact' xs={'auto'}>
+            <i className={'bi-' + props.icon}></i>&nbsp;{textElement}
         </Col>
     )
 }
@@ -34,7 +33,9 @@ export function Contacts() {
     const focus = useAutoFocus<HTMLDivElement>('contacts')
     return (
         <Container ref={focus} className='contacts' fluid>
-            <h2>Contacts</h2>
+            <Row>
+                <h2>Contacts</h2>
+            </Row>
             <Row>
             {person.contacts.map((contact, index) => (
                 <Contact key={index} {...contact} />

src/app/components/Photo.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Image from 'react-bootstrap/Image'
+
+export default function Photo() {
+    return (
+      <Image alt='Photograph of the person' rounded fluid src='photo.png'></Image>
+    )
+}

src/app/page.tsx

@@ -8,14 +8,20 @@ import WorkExperience from './components/WorkExperience';
 import Education from './components/Education';
 import { Col, Row } from 'react-bootstrap';
 import Footer from './components/Footer';
+import Photo from './components/Photo';
 
 export default function Home() {
   return (
 
     <Container className='main-container' fluid='xxl'>
       <Row>
-        <Col md={12} lg={8}><AboutBrief /></Col>
-        <Col md={12} lg={4}><Contacts /></Col>
+        <Col xs={'auto'} sm={4} lg={2}><Photo /></Col>
+        <Col>
+          <Row>
+            <Col xs={'auto'} lg={6}><AboutBrief /></Col>
+            <Col xs={'auto'} lg={6}><Contacts /></Col>
+          </Row>
+        </Col>
       </Row>
       <Row><WorkExperience /></Row>
       <Row><Education /></Row>