fixes and tweak a couple of changes.

- fixed responsive issues
- fixed anchor hashtag link offset

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;
-}

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,7 +18,6 @@ export default function HomePage() {
         <Navbar />
       </AppShell.Header>
       <AppShell.Main>
-        <SlideUpWhenVisible threshold={0.2}>
         <Container
           size={rem(1920)}
           px={{ base: '0rem', lg: '4rem', xl: '8rem' }}>
@@ -30,7 +28,6 @@ export default function HomePage() {
             <Footer />
           </Stack>
         </Container>
-        </SlideUpWhenVisible>
       </AppShell.Main>
     </AppShell>
   )

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;
+}

src/partials/About.tsx

@@ -9,11 +9,14 @@ import {
   Title,
 } from '@mantine/core'
 import classes from './About.module.css'
+import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
 
 function About() {
   return (
+    <SlideUpWhenVisible>
       <Box
         id='about'
+        className={classes.anchor}
         my='xl'>
         <SimpleGrid
           cols={{ base: 1, sm: 2 }}
@@ -22,16 +25,18 @@ function About() {
             <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.
+                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.
+                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'
@@ -68,6 +73,7 @@ function About() {
           </Container>
         </SimpleGrid>
       </Box>
+    </SlideUpWhenVisible>
   )
 }
 

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,10 +49,15 @@ const ItemGrid = ({ icon, text }: ItemGridProps) => {
 
 export default function Experiences() {
   return (
+    <SlideUpWhenVisible>
       <Box my='xl'>
-      <Stack align='center'>
+        <Stack
+          align='center'
+          ta='center'>
           <Title>Experiences</Title>
-        <Text fz='lg'>
+          <Text
+            fz='lg'
+            ta='center'>
             I have worked and used these awesome technologies in my projects
           </Text>
           <SimpleGrid
@@ -120,10 +131,12 @@ export default function Experiences() {
           </SimpleGrid>
           <Text
             mt='xl'
-          fs='italic'>
+            fs='italic'
+            ta='center'>
             And probably many more...
           </Text>
         </Stack>
       </Box>
+    </SlideUpWhenVisible>
   )
 }

src/partials/Introduction.tsx

@@ -1,9 +1,11 @@
 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 (
+    <SlideUpWhenVisible>
       <Box
         mt='xl'
         mah='100vh'
@@ -60,6 +62,7 @@ function Introduction() {
           </Button>
         </Group>
       </Box>
+    </SlideUpWhenVisible>
   )
 }