fix(v1.1): update text positioning & fix error matching element

components/nav/Navbar.js

@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import {
   Box,
   Container,
@@ -15,8 +16,13 @@ import MenuDrawer from './menu/MenuDrawer';
 
 const Navbar = () => {
   const [isLargerThan425] = useMediaQuery('(min-width: 425px)');
+  const [larger, setLarger] = useState(true);
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  useEffect(() => {
+    setLarger(isLargerThan425);
+  }, [isLargerThan425]);
+
   return (
     <>
       <Box
@@ -49,7 +55,7 @@ const Navbar = () => {
                 hendraaagil
               </Heading>
             </Link>
-            {isLargerThan425 && (
+            {larger && (
               <HStack spacing={10}>
                 {links.map((link, index) => (
                   <NavLink key={index} link={link.url} name={link.name} />
@@ -59,7 +65,7 @@ const Navbar = () => {
           </HStack>
         </Container>
       </Box>
-      {!isLargerThan425 && (
+      {!larger && (
         <>
           <MenuButton onOpen={onOpen} />
           <MenuDrawer isOpen={isOpen} onClose={onClose} links={links} />

pages/index.js

@@ -1,16 +1,18 @@
-import { Box, Heading, Text } from '@chakra-ui/react';
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
 
 import { getAge } from '../lib/age';
 
 export default function Home() {
   return (
-    <Box py={40} textAlign="center">
-      <Heading as="h1" mb={4}>
-        Hello, I'm Hendra Agil 👋
-      </Heading>
-      <Text fontSize="2xl" fontWeight="600">
-        Student. {getAge()} years old.
-      </Text>
-    </Box>
+    <Flex align="center" justify="center" minH="100vh">
+      <Box pb="72px" textAlign="center">
+        <Heading as="h1" mb={4}>
+          Hello, I'm Hendra Agil 👋
+        </Heading>
+        <Text fontSize="2xl" fontWeight="600">
+          Student. {getAge()} years old.
+        </Text>
+      </Box>
+    </Flex>
   );
 }