From e9a63461fbbc69cade24f957d52fb2124f6f2a84 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
Date: Fri, 26 May 2023 20:44:44 +0200
Subject: [PATCH] Styling and responsive layout

---
 src/PersonalData.ts               |  1 +
 src/PersonalDataTypes.ts          |  1 +
 src/app/components/AboutBrief.tsx | 13 +++++++++----
 src/app/components/Contacts.tsx   |  9 ++++++---
 src/app/components/Education.tsx  |  4 ++--
 src/app/components/Footer.tsx     | 13 +++++++++++++
 src/app/globals.css               | 19 +++++++++++++++++++
 src/app/page.tsx                  | 18 +++++++++++-------
 8 files changed, 62 insertions(+), 16 deletions(-)
 create mode 100644 src/app/components/Footer.tsx

diff --git a/src/PersonalData.ts b/src/PersonalData.ts
index 764a84b..dcc91cd 100644
--- a/src/PersonalData.ts
+++ b/src/PersonalData.ts
@@ -1,6 +1,7 @@
 import { PersonalData } from "./PersonalDataTypes";
 
 export const personalData: PersonalData = {
+    updatedDate: '2023-05-26',
     name: "David Hrdina Němeček",
     brief: "Software developer, people manager.",
 
diff --git a/src/PersonalDataTypes.ts b/src/PersonalDataTypes.ts
index 8bc9add..dabd4cf 100644
--- a/src/PersonalDataTypes.ts
+++ b/src/PersonalDataTypes.ts
@@ -25,6 +25,7 @@ export type Skills = {
 }
 
 export type PersonalData = {
+    updatedDate: string,
     name: string,
     brief: string,
     contacts: Contact[],
diff --git a/src/app/components/AboutBrief.tsx b/src/app/components/AboutBrief.tsx
index 7f58dda..94ace7b 100644
--- a/src/app/components/AboutBrief.tsx
+++ b/src/app/components/AboutBrief.tsx
@@ -2,14 +2,19 @@ import React, { useContext } from 'react';
 import Container from 'react-bootstrap/Container';
 import Image from 'react-bootstrap/Image'
 import { usePersonContext } from './PersonContext';
+import { Col, Row } from 'react-bootstrap';
 
 export default function AboutBrief() {
     const person = usePersonContext()
     return (
-    <Container className='about-brief'>
-        <Image alt='Photograph of the person' rounded={true} src='photo.png'></Image>
-        <h1>{person.name}</h1>
-        <p className='brief'>{person.brief}</p>
+    <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>
     )
 }
diff --git a/src/app/components/Contacts.tsx b/src/app/components/Contacts.tsx
index 302a3dd..9b0d17b 100644
--- a/src/app/components/Contacts.tsx
+++ b/src/app/components/Contacts.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react'
 import { usePersonContext } from './PersonContext'
 import Container from 'react-bootstrap/esm/Container'
 import { useAutoFocus } from '../FocusedElement'
+import { Col, Row } from 'react-bootstrap'
 
 export function Contact(props: {icon?: string, text: string}) {
     let textElement: ReactNode = <span className='contact-text'>{props.text}</span>
@@ -21,10 +22,10 @@ export function Contact(props: {icon?: string, text: string}) {
         textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a>
     }
     return (
-        <span className='contact'>
+        <Col className='contact'>
             <i className={'bi-' + props.icon}> </i>
             {textElement}
-        </span>
+        </Col>
     )
 }
 
@@ -32,11 +33,13 @@ export function Contacts() {
     const person = usePersonContext()
     const focus = useAutoFocus<HTMLDivElement>('contacts')
     return (
-        <Container ref={focus} className='contacts'>
+        <Container ref={focus} className='contacts' fluid>
             <h2>Contacts</h2>
+            <Row>
             {person.contacts.map((contact, index) => (
                 <Contact key={index} {...contact} />
             ))}
+            </Row>
         </Container>
     )
 }
\ No newline at end of file
diff --git a/src/app/components/Education.tsx b/src/app/components/Education.tsx
index 227795e..fa4f4bf 100644
--- a/src/app/components/Education.tsx
+++ b/src/app/components/Education.tsx
@@ -6,11 +6,11 @@ import JobHistory from './JobHistory';
 export default function WorkExperience() {
     const person = usePersonContext()
 
-    return person.education && (
+    return person.education ? (
       <JobHistory
         jobs={person.education}
         heading='Education'
         currentHeading='Currently studying'
         />
-    )
+    ) : <></>
 }
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
new file mode 100644
index 0000000..1058300
--- /dev/null
+++ b/src/app/components/Footer.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Container } from 'react-bootstrap';
+import { usePersonContext } from './PersonContext';
+
+export default function Footer() {
+    const personalData = usePersonContext()
+    return (
+        <Container fluid className="footer text-center">
+            <p><small>Created by {personalData.name}, last updated on {personalData.updatedDate}</small></p>
+            <p><small className='tiny'>CV engineered by <a href={'https://www.dejvino.cz/'} target={'_blank'}>Dejvino</a></small></p>
+        </Container>
+    )
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index e3aeffa..e318ef8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,6 +2,25 @@
 @import 'bootstrap/dist/css/bootstrap.min.css';
 @import 'bootstrap-icons/font/bootstrap-icons.min.css';
 
+body {
+    background-color: lightgrey;
+}
+
+.main-container {
+    background-color: white;
+    padding-top: 1rem;
+    padding-bottom: 0.2rem;
+}
+.footer {
+    margin-top: 2rem;
+}
+.tiny {
+    font-size: 75%;
+}
+h2, h3, h4 {
+    margin-top: 1em;
+}
+
 .job-card {
     margin-top: 1em;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d8a61fd..e081d86 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,22 +1,26 @@
 'use client'
 import React from 'react';
 import Container from 'react-bootstrap/Container';
-import JobsHistory from './components/WorkExperience';
 import AboutBrief from './components/AboutBrief';
 import Skills from './components/Skills';
 import { Contacts } from './components/Contacts';
 import WorkExperience from './components/WorkExperience';
 import Education from './components/Education';
+import { Col, Row } from 'react-bootstrap';
+import Footer from './components/Footer';
 
 export default function Home() {
   return (
 
-    <Container fluid='xxl'>
-      <AboutBrief />
-      <Contacts />
-      <WorkExperience />
-      <Education />
-      <Skills />
+    <Container className='main-container' fluid='xxl'>
+      <Row>
+        <Col md={12} lg={8}><AboutBrief /></Col>
+        <Col md={12} lg={4}><Contacts /></Col>
+      </Row>
+      <Row><WorkExperience /></Row>
+      <Row><Education /></Row>
+      <Row><Skills /></Row>
+      <Row><Footer /></Row>
     </Container>
   )
 }