From 59677e3d7fd841105c927674c20eddd1e312afa6 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
Date: Fri, 26 May 2023 21:31:38 +0200
Subject: [PATCH] Restructure header to make it more responsive

---
 src/app/components/AboutBrief.tsx | 11 +++--------
 src/app/components/Contacts.tsx   |  9 +++++----
 src/app/components/Photo.tsx      |  8 ++++++++
 src/app/page.tsx                  | 10 ++++++++--
 4 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 src/app/components/Photo.tsx

diff --git a/src/app/components/AboutBrief.tsx b/src/app/components/AboutBrief.tsx
index 94ace7b..28e61ed 100644
--- a/src/app/components/AboutBrief.tsx
+++ b/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>
     )
 }
diff --git a/src/app/components/Contacts.tsx b/src/app/components/Contacts.tsx
index 9b0d17b..15e3254 100644
--- a/src/app/components/Contacts.tsx
+++ b/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} />
diff --git a/src/app/components/Photo.tsx b/src/app/components/Photo.tsx
new file mode 100644
index 0000000..35e0be2
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e081d86..48d8190 100644
--- a/src/app/page.tsx
+++ b/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>