Add people page

src/App.tsx

@@ -3,8 +3,9 @@ import { Navigate, RouterProvider, createHashRouter } from 'react-router-dom'
 
 import theme from './theme'
 import { LandingPage } from './pages/LandingPage'
+import { Things } from './pages/Things'
 import { Layout } from './layouts/Layout'
-import { Things } from './pages/Things/Things'
+import { People } from './pages/People'
 
 
 const router = createHashRouter([
@@ -24,6 +25,10 @@ const router = createHashRouter([
         path: '/things/:projectId?',
         element: <Things />,
       },
+      {
+        path: '/people',
+        element: <People />,
+      },
     ],
   },
 ])

src/configs/aboutme.json

@@ -0,0 +1,16 @@
+{
+  "about": [
+    "**Team player with positive attitude** who has experience working remotely in an Agile environment using Scrum methodologies and is a fan of peer reviews. Worked together with product management, DevOps, and UI/UX designers. Have been part of both a small start-up team and a large multi-squad project.",
+    "**Highly motivated software developer** with two years of work experience in web development, focusing mostly on frontend but also competent with backend technologies. Proficient in TypeScript, CSS, React, and Haskell while having solid understanding of many other languages. Skilled in building beautiful UIs and writing elegant, readable, and maintainable code.",
+    "**Love taking on challenges, learning new things, and enjoy problem solving at its core.** Highly receptive to feedback with a strong drive for self-improvement and mastering the art of software engineering.",
+    "To this day proud of my bachelor’s thesis on [Game Development in Haskell](https://github.com/honzaflash/ba-thesis) which early on shows my **curiosity, willingness to challenge myself, and my ability to understand and analyze high level concepts.**"
+  ],
+  "interests": [
+    "Ultimate Frisbee coach and team co-founder",
+    "Led a church youth club for a few years",
+    "Maker, designer, techie, 3D printer, and beginner woodworker",
+    "PC gamer and board gamer",
+    "Drummer",
+    "Hiker"
+  ]
+}

src/configs/aboutme.yaml

@@ -0,0 +1,13 @@
+about:
+  - "**Team player with positive attitude** who has experience working remotely in an Agile environment using Scrum methodologies and is a fan of peer reviews. Worked together with product management, DevOps, and UI/UX designers. Have been part of both a small start-up team and a large multi-squad project."
+  - "**Highly motivated software developer** with two years of work experience in web development, focusing mostly on frontend but also competent with backend technologies. Proficient in TypeScript, CSS, React, and Haskell while having solid understanding of many other languages. Skilled in building beautiful UIs and writing elegant, readable, and maintainable code."
+  - "**Love taking on challenges, learning new things, and enjoy problem solving at its core.** Highly receptive to feedback with a strong drive for self-improvement and mastering the art of software engineering."
+  - "To this day proud of my bachelor’s thesis on [Game Development in Haskell](https://github.com/honzaflash/ba-thesis) which early on shows my **curiosity, willingness to challenge myself, and my ability to understand and analyze high level concepts.**"
+
+interests:
+  - Ultimate Frisbee coach and team co-founder
+  - Led a church youth club for a few years
+  - Maker, designer, techie, 3D printer, and beginner woodworker
+  - PC gamer and board gamer
+  - Drummer
+  - Hiker

src/layouts/Navigation.tsx

@@ -12,9 +12,11 @@ const a11yProps = (index: number) => ({
 
 })
 
+// TODO consolidate this config object with the router object and make creating links safer through constants or type checking
 const tabs: { label: string, path: string }[] = [
   { label: 'Main', path: '/landing' },
   { label: 'Things', path: '/things' },
+  { label: 'People', path: '/people' },
 ]
 
 export const Navigation = () => {

src/pages/People/People.tsx

@@ -0,0 +1,31 @@
+import { Box, Typography } from '@mui/material'
+import aboutMe from '../../configs/aboutme.json'
+import { ListFromMd } from '../../components/ListFromMd'
+
+
+export const People = () => {
+
+  return (
+    <Box>
+      <Typography>Things are nice. And useful.</Typography>
+      <Typography variant="h5">
+      But meaning and fulfilment is in<br/>
+      interacting with God and other<br/> 
+        <Typography
+          variant="h1"
+          color="primary" 
+          sx={{ fontWeight: 700 }}
+          component="span"
+        >
+        People
+        </Typography>
+      </Typography>
+      <Typography>Here is something about me as a <span style={{ textDecoration: 'line-through' }}>people</span> person and as a professional.</Typography>
+      <Box sx={{ mt: 6 }}>
+        <Typography variant="h4" component="h1" sx={{ mt: 6 }}>About me</Typography>
+        <ListFromMd items={aboutMe.about} />
+        <Typography variant="h4" component="h1" sx={{ mt: 6 }}>Interests</Typography>
+        <ListFromMd items={aboutMe.interests} />
+      </Box>
+    </Box>
+  )}

src/pages/People/index.tsx

@@ -0,0 +1 @@
+export { People } from './People'