fixes and added a couple of changes.

- fixed responsive issues
- added navbar drawer for mobile device
- added experiences and footer section

src/app/page.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { AppShell, Container, rem } from '@mantine/core'
+import { AppShell, Container, Stack, rem } from '@mantine/core'
 import Introduction from '../partials/Introduction'
 import About from '../partials/About'
 import Navbar from '../components/Navbar'
 import Footer from '../components/Footer'
 import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
+import Experiences from '../partials/Experiences'
 
 export default function HomePage() {
   return (
@@ -18,13 +19,16 @@ export default function HomePage() {
         <Navbar />
       </AppShell.Header>
       <AppShell.Main>
-        <SlideUpWhenVisible>
+        <SlideUpWhenVisible threshold={0.2}>
           <Container
             size={rem(1920)}
             px={{ base: '0rem', lg: '4rem', xl: '8rem' }}>
+            <Stack>
               <Introduction />
               <About />
+              <Experiences />
               <Footer />
+            </Stack>
           </Container>
         </SlideUpWhenVisible>
       </AppShell.Main>

src/components/Footer.tsx

@@ -1,11 +1,32 @@
-import { Anchor, Container, Text } from '@mantine/core'
+import { Anchor, Badge, Box, SimpleGrid, Stack, Text } from '@mantine/core'
+import pkg from '../../package.json'
+
+const { version } = pkg
 
 export default function Footer() {
   return (
-    <Container>
-      <Text
-        fw='bold'
-        ta='center'>
+    <Box mt='xl'>
+      <SimpleGrid
+        cols={{ base: 1, sm: 2 }}
+        h={120}
+        spacing={{ base: 'sm', md: 'md', lg: 'lg' }}>
+        <Stack>
+          <Text fw='bold'>
+            Email:{' '}
+            <Anchor href='mailto:m.refansa.am@gmail.com'>
+              m.refansa.am@gmail.com
+            </Anchor>
+          </Text>
+          <Text fw='bold'>
+            Tel:{' '}
+            <Anchor href='tel:+62-812-8543-3284'>(+62) 812-8543-3284</Anchor>
+          </Text>
+        </Stack>
+        <Stack>{/* empty space */}</Stack>
+      </SimpleGrid>
+      <Stack align='center'>
+        <Badge variant='outline'>V. {version}</Badge>
+        <Text fw='bold'>
           Created with ❤️ by{' '}
           <Anchor
             fw='bold'
@@ -13,6 +34,7 @@ export default function Footer() {
             Refansa
           </Anchor>
         </Text>
-    </Container>
+      </Stack>
+    </Box>
   )
 }

src/components/NavLink.tsx

@@ -1,16 +1,19 @@
 import { Button } from '@mantine/core'
+import { MouseEventHandler } from 'react'
 
 interface NavLinkProps {
   content: string
   href: string
+  onClick?: MouseEventHandler<HTMLElement>
 }
 
-function NavLink({ content, href }: NavLinkProps) {
+function NavLink({ content, href, onClick }: NavLinkProps) {
   return (
     <Button
       component={'a'}
       variant='subtle'
       size='md'
+      onClick={onClick}
       href={href}>
       {content}
     </Button>

src/components/NavMobile.tsx

@@ -0,0 +1,35 @@
+import { useDisclosure } from '@mantine/hooks'
+import { Box, Burger, Drawer, Stack } from '@mantine/core'
+import NavLink from './NavLink'
+
+export default function NavMobile() {
+  const [opened, { open, close }] = useDisclosure(false)
+
+  return (
+    <Box hiddenFrom='sm'>
+      <Drawer
+        opened={opened}
+        onClose={close}
+        overlayProps={{ backgroundOpacity: 0.5, blur: 1 }}
+        position='right'
+        size='xs'>
+        <Stack>
+          <NavLink
+            content='About'
+            href='/#about'
+            onClick={close}
+          />
+          <NavLink
+            content='Projects'
+            href='https://github.com/Refansa?tab=repositories'
+          />
+        </Stack>
+      </Drawer>
+      <Burger
+        opened={opened}
+        onClick={open}
+        aria-label='Toggle navigation'
+      />
+    </Box>
+  )
+}

src/components/Navbar.tsx

@@ -3,6 +3,7 @@ import { Box, Group } from '@mantine/core'
 import classes from './Navbar.module.css'
 import NavIcon from './NavIcon'
 import NavLink from './NavLink'
+import NavMobile from './NavMobile'
 
 function Navbar() {
   return (
@@ -20,6 +21,7 @@ function Navbar() {
           href='https://github.com/Refansa?tab=repositories'
         />
       </Group>
+      <NavMobile />
     </Box>
   )
 }

src/partials/About.tsx

@@ -14,9 +14,7 @@ function About() {
   return (
     <Box
       id='about'
-      mt='xl'
-      mah='100vh'
-      h='100vh'>
+      my='xl'>
       <SimpleGrid
         cols={{ base: 1, sm: 2 }}
         spacing={{ base: 'sm', md: 'md', lg: 'lg' }}>

src/partials/Experiences.tsx

@@ -0,0 +1,129 @@
+import { Box, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core'
+import {
+  IconBrandCss3,
+  IconBrandHtml5,
+  IconBrandJavascript,
+  IconBrandLaravel,
+  IconBrandMantine,
+  IconBrandMysql,
+  IconBrandNextjs,
+  IconBrandNodejs,
+  IconBrandPhp,
+  IconBrandPrisma,
+  IconBrandPython,
+  IconBrandReact,
+  IconBrandSass,
+  IconBrandSupabase,
+  IconBrandTailwind,
+  IconBrandVue,
+} from '@tabler/icons-react'
+
+interface ItemGridProps {
+  icon: React.ReactNode
+  text: string
+}
+
+const ItemGrid = ({ icon, text }: ItemGridProps) => {
+  return (
+    <Paper
+      w={100}
+      h={100}>
+      <Stack
+        p='sm'
+        w='inherit'
+        h='inherit'
+        align='center'
+        justify='center'>
+        {icon}
+        <Text>{text}</Text>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default function Experiences() {
+  return (
+    <Box my='xl'>
+      <Stack align='center'>
+        <Title>Experiences</Title>
+        <Text fz='lg'>
+          I have worked and used these awesome technologies in my projects
+        </Text>
+        <SimpleGrid
+          mt='xl'
+          w={{ base: 240, sm: 480, md: 720, lg: 960 }}
+          cols={{ base: 2, sm: 4, md: 6, lg: 8 }}>
+          <ItemGrid
+            icon={<IconBrandHtml5 />}
+            text='HTML'
+          />
+          <ItemGrid
+            icon={<IconBrandCss3 />}
+            text='CSS'
+          />
+          <ItemGrid
+            icon={<IconBrandJavascript />}
+            text='Javascript'
+          />
+          <ItemGrid
+            icon={<IconBrandPhp />}
+            text='PHP'
+          />
+          <ItemGrid
+            icon={<IconBrandPython />}
+            text='Python'
+          />
+          <ItemGrid
+            icon={<IconBrandMysql />}
+            text='MySQL'
+          />
+          <ItemGrid
+            icon={<IconBrandLaravel />}
+            text='Laravel'
+          />
+          <ItemGrid
+            icon={<IconBrandNodejs />}
+            text='NodeJS'
+          />
+          <ItemGrid
+            icon={<IconBrandReact />}
+            text='React'
+          />
+          <ItemGrid
+            icon={<IconBrandVue />}
+            text='Vue'
+          />
+          <ItemGrid
+            icon={<IconBrandTailwind />}
+            text='Tailwind'
+          />
+          <ItemGrid
+            icon={<IconBrandSass />}
+            text='Sass'
+          />
+          <ItemGrid
+            icon={<IconBrandMantine />}
+            text='Mantine'
+          />
+          <ItemGrid
+            icon={<IconBrandNextjs />}
+            text='NextJS'
+          />
+          <ItemGrid
+            icon={<IconBrandPrisma />}
+            text='Prisma'
+          />
+          <ItemGrid
+            icon={<IconBrandSupabase />}
+            text='Supabase'
+          />
+        </SimpleGrid>
+        <Text
+          mt='xl'
+          fs='italic'>
+          And probably many more...
+        </Text>
+      </Stack>
+    </Box>
+  )
+}

src/partials/Introduction.tsx

@@ -7,7 +7,7 @@ function Introduction() {
     <Box
       mt='xl'
       mah='100vh'
-      h='80vh'
+      h='100vh'
       className={classes.background}>
       <Flex
         align='center'

src/styles/extends/Drawer.module.css

@@ -0,0 +1,15 @@
+.title {
+  font-weight: bold;
+}
+
+.content {
+  @mixin dark {
+    background-color: var(--mantine-color-dark-8);
+  }
+}
+
+.header {
+  @mixin dark {
+    background-color: var(--mantine-color-dark-8);
+  }
+}

src/styles/extends/Drawer.ts

@@ -0,0 +1,10 @@
+import { Drawer as Component } from '@mantine/core'
+import classes from './Drawer.module.css'
+
+export const Drawer = Component.extend({
+  classNames: {
+    title: classes.title,
+    header: classes.header,
+    content: classes.content,
+  },
+})

src/styles/extends/Paper.module.css

@@ -0,0 +1,5 @@
+.root {
+  @mixin dark {
+    background-color: var(--mantine-color-dark-8);
+  }
+}

src/styles/extends/Paper.ts

@@ -0,0 +1,8 @@
+import { Paper as Component } from '@mantine/core'
+import classes from './Paper.module.css'
+
+export const Paper = Component.extend({
+  classNames: {
+    root: classes.root,
+  },
+})

src/styles/extends/index.ts

@@ -1,4 +1,6 @@
 export { Button } from './Button'
+export { Drawer } from './Drawer'
+export { Paper } from './Paper'
 export { Text } from './Text'
 export { Textarea } from './Textarea'
 export { TextInput } from './TextInput'

src/styles/theme.ts

@@ -6,7 +6,15 @@ import {
   createTheme,
 } from '@mantine/core'
 import { fluidDisplay, fluidTypography } from '../utils/typography'
-import { Button, Text, TextInput, Textarea, Title } from './extends'
+import {
+  Button,
+  Drawer,
+  Paper,
+  Text,
+  TextInput,
+  Textarea,
+  Title,
+} from './extends'
 
 const coffee: MantineColorsTuple = [
   '#fff4e5',
@@ -140,6 +148,8 @@ export const theme = createTheme({
   // Allows adding `classNames`, `styles` and `defaultProps` to any component
   components: {
     Button,
+    Drawer,
+    Paper,
     Text,
     Textarea,
     TextInput,