From 416c382368b884aa4d29589b4066a6974a17a12a Mon Sep 17 00:00:00 2001
From: Refansa <m.refansa.am@gmail.com>
Date: Tue, 17 Oct 2023 10:47:37 +0700
Subject: [PATCH] fixes and tweak a couple of changes. - fixed responsive
 issues - fixed anchor hashtag link offset

---
 .vscode/settings.json         |   4 +-
 src/app/global.css            |   9 --
 src/app/page.tsx              |  23 ++---
 src/partials/About.module.css |   9 ++
 src/partials/About.tsx        | 116 +++++++++++-----------
 src/partials/Experiences.tsx  | 179 ++++++++++++++++++----------------
 src/partials/Introduction.tsx | 107 ++++++++++----------
 7 files changed, 233 insertions(+), 214 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 54f6c0d..8034358 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "discord.enabled": false
-}
\ No newline at end of file
+  "discord.enabled": false
+}
diff --git a/src/app/global.css b/src/app/global.css
index 479deb1..cc1c72c 100644
--- a/src/app/global.css
+++ b/src/app/global.css
@@ -1,12 +1,3 @@
 html {
   scroll-behavior: smooth;
 }
-
-/* Offset the anchor hashtag link
- */
-:target::before {
-  content: '';
-  display: block;
-  height: 144px;
-  margin-top: -144px;
-}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5a1ff7b..5e435e6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,6 @@ 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() {
@@ -19,18 +18,16 @@ export default function HomePage() {
         <Navbar />
       </AppShell.Header>
       <AppShell.Main>
-        <SlideUpWhenVisible threshold={0.2}>
-          <Container
-            size={rem(1920)}
-            px={{ base: '0rem', lg: '4rem', xl: '8rem' }}>
-            <Stack>
-              <Introduction />
-              <About />
-              <Experiences />
-              <Footer />
-            </Stack>
-          </Container>
-        </SlideUpWhenVisible>
+        <Container
+          size={rem(1920)}
+          px={{ base: '0rem', lg: '4rem', xl: '8rem' }}>
+          <Stack>
+            <Introduction />
+            <About />
+            <Experiences />
+            <Footer />
+          </Stack>
+        </Container>
       </AppShell.Main>
     </AppShell>
   )
diff --git a/src/partials/About.module.css b/src/partials/About.module.css
index 21afbd1..12f700e 100644
--- a/src/partials/About.module.css
+++ b/src/partials/About.module.css
@@ -1,3 +1,12 @@
 .grayscale {
   filter: grayscale(1);
 }
+
+/* Offset the anchor hashtag link
+ */
+.anchor:target::before {
+  content: '';
+  display: block;
+  height: 160px;
+  margin-top: -160px;
+}
diff --git a/src/partials/About.tsx b/src/partials/About.tsx
index 3d136c8..4beef90 100644
--- a/src/partials/About.tsx
+++ b/src/partials/About.tsx
@@ -9,65 +9,71 @@ import {
   Title,
 } from '@mantine/core'
 import classes from './About.module.css'
+import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
 
 function About() {
   return (
-    <Box
-      id='about'
-      my='xl'>
-      <SimpleGrid
-        cols={{ base: 1, sm: 2 }}
-        spacing={{ base: 'sm', md: 'md', lg: 'lg' }}>
-        <Stack>
-          <Title>A bit About Me</Title>
-          <Stack gap='md'>
-            <Text>
-              Hello 👋 Refansa here. Muhammad Refansa Ali Muzky is my full name.
-              I'm an 18 years old software developer, just came fresh out of the
-              oven. Constantly seeking new open source projects to contribute to
-              and enjoy working with others to make a meaningful contribution.
-            </Text>
-            <Text>
-              I thrive on challenging coding projects and love nothing more than
-              diving into complex software development tasks. As a lover of open
-              source, I believe that sharing knowledge and collaborating on
-              projects is essential for the advancement of the tech industry.
-            </Text>
-            <Text
-              mt='lg'
-              c='dark.1'
-              fs='italic'>
-              I use Archlinux btw.
-            </Text>
-            <Text
-              mt='xl'
-              fw='bold'>
-              Peace from Indonesia 🇮🇩
-            </Text>
+    <SlideUpWhenVisible>
+      <Box
+        id='about'
+        className={classes.anchor}
+        my='xl'>
+        <SimpleGrid
+          cols={{ base: 1, sm: 2 }}
+          spacing={{ base: 'sm', md: 'md', lg: 'lg' }}>
+          <Stack>
+            <Title>A bit About Me</Title>
+            <Stack gap='md'>
+              <Text>
+                Hello 👋 Refansa here. Muhammad Refansa Ali Muzky is my full
+                name. I'm an 18 years old software developer, just came fresh
+                out of the oven. Constantly seeking new open source projects to
+                contribute to and enjoy working with others to make a meaningful
+                contribution.
+              </Text>
+              <Text>
+                I thrive on challenging coding projects and love nothing more
+                than diving into complex software development tasks. As a lover
+                of open source, I believe that sharing knowledge and
+                collaborating on projects is essential for the advancement of
+                the tech industry.
+              </Text>
+              <Text
+                mt='lg'
+                c='dark.1'
+                fs='italic'>
+                I use Archlinux btw.
+              </Text>
+              <Text
+                mt='xl'
+                fw='bold'>
+                Peace from Indonesia 🇮🇩
+              </Text>
+            </Stack>
           </Stack>
-        </Stack>
-        <Container visibleFrom='sm'>
-          <Stack
-            justify='center'
-            w={360}>
-            <Image
-              className={classes.grayscale}
-              src='/assets/hand-coding.svg'
-              alt='Coding Illustration'
-              width={360}
-              height='auto'
-            />
-            <Anchor
-              ta='center'
-              fs='italic'
-              fz='xs'
-              href='https://storyset.com/work'>
-              Work illustrations by Storyset
-            </Anchor>
-          </Stack>
-        </Container>
-      </SimpleGrid>
-    </Box>
+          <Container visibleFrom='sm'>
+            <Stack
+              justify='center'
+              w={360}>
+              <Image
+                className={classes.grayscale}
+                src='/assets/hand-coding.svg'
+                alt='Coding Illustration'
+                width={360}
+                height='auto'
+              />
+              <Anchor
+                ta='center'
+                fs='italic'
+                fz='xs'
+                href='https://storyset.com/work'>
+                Work illustrations by Storyset
+              </Anchor>
+            </Stack>
+          </Container>
+        </SimpleGrid>
+      </Box>
+    </SlideUpWhenVisible>
   )
 }
 
diff --git a/src/partials/Experiences.tsx b/src/partials/Experiences.tsx
index 9714502..3bf43ce 100644
--- a/src/partials/Experiences.tsx
+++ b/src/partials/Experiences.tsx
@@ -17,6 +17,7 @@ import {
   IconBrandTailwind,
   IconBrandVue,
 } from '@tabler/icons-react'
+import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
 
 interface ItemGridProps {
   icon: React.ReactNode
@@ -35,7 +36,12 @@ const ItemGrid = ({ icon, text }: ItemGridProps) => {
         align='center'
         justify='center'>
         {icon}
-        <Text>{text}</Text>
+        <Text
+          style={{ userSelect: 'none' }}
+          fw='bold'
+          fz='sm'>
+          {text}
+        </Text>
       </Stack>
     </Paper>
   )
@@ -43,87 +49,94 @@ const ItemGrid = ({ icon, text }: ItemGridProps) => {
 
 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>
+    <SlideUpWhenVisible>
+      <Box my='xl'>
+        <Stack
+          align='center'
+          ta='center'>
+          <Title>Experiences</Title>
+          <Text
+            fz='lg'
+            ta='center'>
+            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'
+            ta='center'>
+            And probably many more...
+          </Text>
+        </Stack>
+      </Box>
+    </SlideUpWhenVisible>
   )
 }
diff --git a/src/partials/Introduction.tsx b/src/partials/Introduction.tsx
index 7eb2742..cc3532d 100644
--- a/src/partials/Introduction.tsx
+++ b/src/partials/Introduction.tsx
@@ -1,65 +1,68 @@
 import { Box, Button, Flex, Group, Text, Title } from '@mantine/core'
 import { IconBrandGithub, IconMail } from '@tabler/icons-react'
 import classes from './Introduction.module.css'
+import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
 
 function Introduction() {
   return (
-    <Box
-      mt='xl'
-      mah='100vh'
-      h='100vh'
-      className={classes.background}>
-      <Flex
-        align='center'
-        gap='md'>
-        <Box className={classes.line} />
+    <SlideUpWhenVisible>
+      <Box
+        mt='xl'
+        mah='100vh'
+        h='100vh'
+        className={classes.background}>
+        <Flex
+          align='center'
+          gap='md'>
+          <Box className={classes.line} />
+          <Text
+            fz='display-lg'
+            fw='bold'
+            c='coffee.6'>
+            Hi There!
+          </Text>
+        </Flex>
+        <Title
+          variant='shadow'
+          fz='display-xl'
+          fw='bold'
+          lh={1.2}>
+          I'm Refansa.
+        </Title>
         <Text
           fz='display-lg'
           fw='bold'
-          c='coffee.6'>
-          Hi There!
+          lh='xs'>
+          A Passionate, self-taught Software Developer{' '}
+          <Text
+            component='span'
+            display='block'
+            inherit
+            c='dark.1'>
+            A supporter of Open Source Software.
+          </Text>
         </Text>
-      </Flex>
-      <Title
-        variant='shadow'
-        fz='display-xl'
-        fw='bold'
-        lh={1.2}>
-        I'm Refansa.
-      </Title>
-      <Text
-        fz='display-lg'
-        fw='bold'
-        lh='xs'>
-        A Passionate, self-taught Software Developer{' '}
-        <Text
-          component='span'
-          display='block'
-          inherit
-          c='dark.1'>
-          A supporter of Open Source Software.
-        </Text>
-      </Text>
-      <Group mt={'xl'}>
-        <Button
-          component='a'
-          href='https://github.com/Refansa'
-          target='_blank'
-          leftSection={<IconBrandGithub />}
-          size='lg'
-          variant='light'>
-          Github
-        </Button>
-        <Button
-          component='a'
-          href='mailto:m.refansa.am@gmail.com'
-          leftSection={<IconMail />}
-          size='lg'
-          variant='light'>
-          Email
-        </Button>
-      </Group>
-    </Box>
+        <Group mt={'xl'}>
+          <Button
+            component='a'
+            href='https://github.com/Refansa'
+            target='_blank'
+            leftSection={<IconBrandGithub />}
+            size='lg'
+            variant='light'>
+            Github
+          </Button>
+          <Button
+            component='a'
+            href='mailto:m.refansa.am@gmail.com'
+            leftSection={<IconMail />}
+            size='lg'
+            variant='light'>
+            Email
+          </Button>
+        </Group>
+      </Box>
+    </SlideUpWhenVisible>
   )
 }