diff options
| -rw-r--r-- | components/layout.tsx | 2 | ||||
| -rw-r--r-- | components/topnav.tsx | 20 | ||||
| -rw-r--r-- | pages/index.tsx | 30 |
3 files changed, 39 insertions, 13 deletions
diff --git a/components/layout.tsx b/components/layout.tsx index 64f87b74..296f4ac1 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -5,7 +5,7 @@ export default function Layout({ children }) { <> <TopNav/> <Container maxW="lg"> - <Box as="main"> + <Box as="main" pt="20"> {children} </Box> </Container> diff --git a/components/topnav.tsx b/components/topnav.tsx index 7d25c9ba..8213b71a 100644 --- a/components/topnav.tsx +++ b/components/topnav.tsx @@ -14,6 +14,7 @@ import { MenuOptionGroup, MenuDivider, useMediaQuery, + Container } from '@chakra-ui/react' import { GiHamburgerMenu } from "react-icons/gi" import { DiGithubBadge } from "react-icons/di" @@ -58,10 +59,21 @@ function Navigation() { export default function Navbar() { - return <HStack> - <Heading>Michal </Heading> - <Navigation/> - </HStack> + return <Box + as="header" + position="fixed" + backdropFilter="auto" + backdropBlur="6px" + width="100%" + pt="5px" + > + <Container maxW="xl"> + <HStack> + <Heading flex={[1,1,0,0]}>Michal </Heading> + <Navigation/> + </HStack> + </Container> + </Box> } diff --git a/pages/index.tsx b/pages/index.tsx index 5cfe959d..89af9e2c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -12,8 +12,8 @@ import { Icon, Text, Image as CImage, - Stack - + Stack, + Button, } from '@chakra-ui/react' import { AiFillGithub,AiFillMediumCircle} from "react-icons/ai"; @@ -48,7 +48,7 @@ const Home: NextPage = () => { <Box as="section"> <Heading variant="section-title" as="h3">About me</Heading> <Text> - I am a self-thought software engineer working at <Link href="https://zendesk.com">Zendesk</Link>. Even though I started my professional programming life relatively late in life, I've been passionate about computers since I was ten. I love the process of creating software. Even though I consider caring about the product a requisite, the technical side strongly drives me. I take pride in what and how I do things. I have most extensive experience working with Ruby on Rails and relative databases. Still, I am expanding my knowledge around service-oriented architecture, no-SQL databases, and other languages - currently, I am trying to get the hang of Golang and MongoDB. I am also trying to get familiar with the modern ReactJS ecosystem. + I am a self-thought software engineer working at <Link href="https://zendesk.com" isExternal>Zendesk</Link>. Even though I started my professional programming life relatively late in life, I've been passionate about computers since I was ten. I love the process of creating software. Even though I consider caring about the product a requisite, the technical side strongly drives me. I take pride in what and how I do things. I have most extensive experience working with Ruby on Rails and relative databases. Still, I am expanding my knowledge around service-oriented architecture, no-SQL databases, and other languages - currently, I am trying to get the hang of Golang and MongoDB. I am also trying to get familiar with the modern ReactJS ecosystem. </Text> </Box> @@ -68,13 +68,27 @@ Non-action movies, anime and manga, classic PC games (with huge love for adventu <Box as="section"> <Heading variant="section-title" as="h3">Recent publications</Heading> ... + <Stack width="100%" direction={['column', 'column', 'row', 'row']}> + <Box flex="1" textAlign={['left', 'left', 'center', 'center']}> + <Link href="https://mailchi.mp/85b0caa8a1c1/michalsapkapl" isExternal> + <Button>Subscribe to my newsletter</Button> + </Link> + </Box> + </Stack> </Box> - <Box as="section"> - <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> + <Box as="section"> + <Heading variant="section-title" as="h3">On the web</Heading> + <VStack spacing="1" alignItems="start"> + <Box> + <Link href="https://github.com/michalsapka" isExternal><Icon as={AiFillGithub}/> Github</Link> + </Box> + <Box> + <Link href="https://medium.com/@msapka" isExternal><Icon as={AiFillMediumCircle}/> Medium</Link> + </Box> + </VStack> + + </Box> </VStack> </Layout> ) |