Add brief about using Context

src/Person.ts

@@ -0,0 +1,4 @@
+export const Person = {
+    name: "David Hrdina Němeček",
+    brief: "Software developer, people manager."
+};

src/app/components/AboutBrief.tsx

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import Container from 'react-bootstrap/Container';
+import Image from 'react-bootstrap/Image'
+import { PersonContext } from './PersonContext';
+
+export default function AboutBrief() {
+    const person = useContext(PersonContext)
+    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>
+    )
+}

src/app/components/PersonContext.tsx

@@ -0,0 +1,14 @@
+'use client'
+import React from 'react';
+import { createContext } from 'react';
+import { Person } from '../../Person';
+
+export const PersonContext = createContext(Person);
+
+export function PersonProvider({ children }) {
+    return (
+        <PersonContext.Provider value={Person}>
+            {children}
+        </PersonContext.Provider>
+    )
+}

src/app/layout.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 import { Inter } from 'next/font/google'
 
 import './globals.css'
+import { PersonProvider } from './components/PersonContext'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'David Hrdina Němeček | CV',
+  title: 'David Hrdina Němeček | CV.',
   description: 'Curriculum Vitae',
 }
 
@@ -17,7 +18,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <PersonProvider>
+          {children}
+        </PersonProvider>
+        </body>
     </html>
   )
 }

src/app/page.tsx

@@ -2,10 +2,13 @@
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import JobsHistory from './components/JobsHistory';
+import AboutBrief from './components/AboutBrief';
 
 export default function Home() {
   return (
+
     <Container fluid='xxl'>
+      <AboutBrief></AboutBrief>
       <JobsHistory></JobsHistory>
     </Container>
   )