Styling and responsive layout

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.",
 

src/PersonalDataTypes.ts

@@ -25,6 +25,7 @@ export type Skills = {
 }
 
 export type PersonalData = {
+    updatedDate: string,
     name: string,
     brief: string,
     contacts: Contact[],

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'>
+    <Container className='about-brief' fluid>
-        <Image alt='Photograph of the person' rounded={true} src='photo.png'></Image>
+        <Row>
-        <h1>{person.name}</h1>
+          <Col><Image alt='Photograph of the person' rounded fluid src='photo.png'></Image></Col>
-        <p className='brief'>{person.brief}</p>
+          <Col xs={7} sm={'auto'} lg={8}>
+            <h1>{person.name}</h1>
+            <p className='brief'>{person.brief}</p>
+          </Col>
+        </Row>
       </Container>
     )
 }

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>
     )
 }

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'
         />
-    )
+    ) : <></>
 }

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>
+    )
+}

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;
 }

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'>
+    <Container className='main-container' fluid='xxl'>
-      <AboutBrief />
+      <Row>
-      <Contacts />
+        <Col md={12} lg={8}><AboutBrief /></Col>
-      <WorkExperience />
+        <Col md={12} lg={4}><Contacts /></Col>
-      <Education />
+      </Row>
-      <Skills />
+      <Row><WorkExperience /></Row>
+      <Row><Education /></Row>
+      <Row><Skills /></Row>
+      <Row><Footer /></Row>
     </Container>
   )
 }