feat: more theming

7 files changed, 117 insertions, 23 deletions

diff --git a/components/layout.tsx b/components/layout.tsx
index b24a0e7..64f87b7 100644
--- a/components/layout.tsx
+++ b/components/layout.tsx
@@ -2,11 +2,13 @@ import TopNav from '../components/topnav.tsx'
 import { Container, Box } from '@chakra-ui/react'
 export default function Layout({ children }) {
   return (
-    <Container maxW="2xl">
+    <>
       <TopNav/>
-      <Box as="main">
-        {children}
-      </Box>
-    </Container>
+      <Container maxW="lg">
+        <Box as="main">
+          {children}
+        </Box>
+      </Container>
+    </>
   )
 }
diff --git a/lib/theme.tsx b/lib/theme.tsx
index ecc30d4..08f269f 100644
--- a/lib/theme.tsx
+++ b/lib/theme.tsx
@@ -4,8 +4,8 @@ import { mode } from '@chakra-ui/theme-tools'
 const styles = {
   global: props => ({
     body: {
-      bg: mode('#d5d6db', '#24283b')(props),
-      color: mode('#0f4b6e', '#7dcfff')(props),
+      //bg: mode('#d5d6db', '#24283b')(props),
+      //color: mode('#0f4b6e', '#7dcfff')(props),
     }
   })
 }
@@ -13,12 +13,41 @@ const styles = {
 const components = {
   Link: {
     baseStyle: props => ({
-      color: mode('#34548a', '##34548a')(props),
+      //color: mode('#34548a', '##34548a')(props),
       textUnderlineOffset: 3
     })
+  },
+  Heading: {
+    baseStyle: {
+    },
+    variants: {
+      'section-title': {
+        fontSize: 20,
+        marginBottom: 2,
+      },
+      'main-title': {
+        fontSize: 30.
+      }
+    }
+  },
+  Text: {
+    baseStyle: {
+      textAlign: 'justify',
+      textIndent: '1em'
+    },
+    variants: {
+      'main-title': {
+        fontSize: '1em',
+        textIndent: 0
+      }
+    }
   }
 }
 
+const fonts = {
+  body: `'Lato', sans-serif`,
+}
+
 const config = {
   initialColorMode: 'dark',
   useSystemColorMode: false,
@@ -27,11 +56,9 @@ const config = {
 const theme = extendTheme({
   config,
   styles,
+  fonts,
   components
 })
 
 
-console.log(theme)
-
-
 export default theme
diff --git a/package-lock.json b/package-lock.json
index ff68039..a1f6ae4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@chakra-ui/react": "^2.2.6",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
+        "@fontsource/lato": "^4.5.9",
+        "@fontsource/open-sans": "^4.5.11",
         "framer-motion": "^7.0.0",
         "next": "12.2.3",
         "react": "18.2.0",
@@ -1478,6 +1480,16 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource/lato": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.9.tgz",
+      "integrity": "sha512-VkDnHBbPee/KMAUuBwe3rEKRDECo1MsA+I+ucZNU6FYdHrsv+SKpYgNr7nk/OhoaGrn9PrpXcmcd9eoD4J3Y6Q=="
+    },
+    "node_modules/@fontsource/open-sans": {
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.11.tgz",
+      "integrity": "sha512-nG0gmbx4pSr8wltdG/ZdlS6OrsMK40Wt6iyuLTKHEf0TQfzKRMlWaskZHdeuWCwS6WUgqHKMf9KSwGdxPfapOg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
@@ -6350,6 +6362,16 @@
         "strip-json-comments": "^3.1.1"
       }
     },
+    "@fontsource/lato": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.5.9.tgz",
+      "integrity": "sha512-VkDnHBbPee/KMAUuBwe3rEKRDECo1MsA+I+ucZNU6FYdHrsv+SKpYgNr7nk/OhoaGrn9PrpXcmcd9eoD4J3Y6Q=="
+    },
+    "@fontsource/open-sans": {
+      "version": "4.5.11",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.11.tgz",
+      "integrity": "sha512-nG0gmbx4pSr8wltdG/ZdlS6OrsMK40Wt6iyuLTKHEf0TQfzKRMlWaskZHdeuWCwS6WUgqHKMf9KSwGdxPfapOg=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.10.4",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",
diff --git a/package.json b/package.json
index 8bf31c6..a89aef3 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "@chakra-ui/react": "^2.2.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fontsource/lato": "^4.5.9",
+    "@fontsource/open-sans": "^4.5.11",
     "framer-motion": "^7.0.0",
     "next": "12.2.3",
     "react": "18.2.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3dcf9aa..1c06149 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,7 @@
 import { ChakraProvider } from '@chakra-ui/react'
 import theme from '../lib/theme.tsx'
 import type { AppProps } from 'next/app'
-
+import '@fontsource/lato/400.css'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
diff --git a/pages/index.tsx b/pages/index.tsx
index 03fc2b8..79daa9a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,34 +3,75 @@ import Head from 'next/head'
 import Image from 'next/image'
 import Layout from '../components/layout'
 import styles from '../styles/Home.module.css'
-import { VStack, Box, Heading, Link, Icon } from '@chakra-ui/react'
+import { 
+  VStack, 
+  HStack,
+  Box, 
+  Heading, 
+  Link, 
+  Icon,
+  Text,
+  Image as CImage,
+  Stack
+
+} from '@chakra-ui/react'
 import { AiFillGithub,AiFillMediumCircle} from "react-icons/ai";
 
+const BioEntry = ({date, description}) => {
+  return <HStack spacing="6" alignItems="start">
+      <Box fontWeight='bolder'>{date}</Box>
+      <Box>{description}</Box>
+  </HStack>
+}
+
 const Home: NextPage = () => {
   return (
     <Layout>
       <VStack spacing="24px"align="stretch">
-      <Box as="section">
-      <Heading>Michal Sapka</Heading>
-      Self-though senior software engineer from Poland.
-      </Box>
+        <Box as="section">
+          <Stack width="100%" direction={["column", "column", "row"]}>
+            <Box flex="1">
+              <Heading variant="main-title">Michal Sapka</Heading>
+              <Text variant="main-title">Self-though senior software engineer from Poland.</Text>
+            </Box>
+            <Box textAlign="center">
+              <CImage
+                display="inline-block"
+                src="images/michal.png"
+                width="80px"
+                borderRadius="full"
+                />
+            </Box>
+          </Stack>
+        </Box>
 
       <Box as="section">
-      <Heading as="h3">About me</Heading>
-        I am a self-thoght software engineer working with at <Link href="https://zendesk.com">Zendesk</Link>. Even though I&apos;ve sterted my professional programig life relatively late in life, I&apos;ve been passionate with computers since being 10 years old.  I love the process of creating software. Even though understanding the product is a requisite, I am strongly driven by the technical side. I take pride at what and how I do things. I have biggest experience working with Ruby on Rails and relative datababases, but I am expanding my knowlege around service oriented architecture, no-sql databases and other languages - currently I am trying to get a hang of Golang, MongoDB. I am also trying to get familiar with modern ReactJS ecosystem.
+      <Heading variant="section-title" as="h3">About me</Heading>
+          <Text>
+  I am a self-thoght software engineer working with at <Link href="https://zendesk.com">Zendesk</Link>. Even though I&apos;ve sterted my professional programig life relatively late in life, I&apos;ve been passionate with computers since being 10 years old.  I love the process of creating software. Even though understanding the product is a requisite, I am strongly driven by the technical side. I take pride at what and how I do things. I have biggest experience working with Ruby on Rails and relative datababases, but I am expanding my knowlege around service oriented architecture, no-sql databases and other languages - currently I am trying to get a hang of Golang, MongoDB. I am also trying to get familiar with modern ReactJS ecosystem.
+        </Text>
       </Box>
       
       <Box as="section">
-      <Heading as="h3">I enjoy</Heading>
-      Non-action movies, anime and manga, classic PC games (with huge love for adventure ganre), literature, jazz.
+      <Heading variant="section-title" as="h3">Bio</Heading>
+          <BioEntry date="1985" description="Born"/>
+          <BioEntry date="2009" description="Gratuated The Silesian University of Technology with M.Eng. title in Automation and Robotics"/>
+          <BioEntry date="2016" description="Joined Zendesk"/>
+
+      </Box>
+      <Box as="section">
+      <Heading variant="section-title" as="h3">I enjoy</Heading>
+        <Text>
+Non-action movies, anime and manga, classic PC games (with huge love for adventure ganre), literature, jazz.
+        </Text>
       </Box>
       <Box as="section">
-      <Heading as="h3">Recent publications</Heading>
+      <Heading variant="section-title" as="h3">Recent publications</Heading>
       ...
       </Box>
 
       <Box as="section">
-      <Heading as="h3">On the web</Heading>
+      <Heading variant="section-title" as="h3">On the web</Heading>
          <Link href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link>
          <Link href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link>
       </Box>
diff --git a/public/images/michal.png b/public/images/michal.png
new file mode 100644
index 0000000..a19bb64
--- /dev/null
+++ b/public/images/michal.png