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() {
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
)
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 (
-
-
-
- A bit About Me
-
-
- 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.
-
-
- 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 use Archlinux btw.
-
-
- Peace from Indonesia 🇮🇩
-
+
+
+
+
+ A bit About Me
+
+
+ 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.
+
+
+ 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 use Archlinux btw.
+
+
+ Peace from Indonesia 🇮🇩
+
+
-
-
-
-
-
- Work illustrations by Storyset
-
-
-
-
-
+
+
+
+
+ Work illustrations by Storyset
+
+
+
+
+
+
)
}
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}
+
)
@@ -43,87 +49,94 @@ const ItemGrid = ({ icon, text }: ItemGridProps) => {
export default function Experiences() {
return (
-
-
- Experiences
-
- I have worked and used these awesome technologies in my projects
-
-
- }
- text='HTML'
- />
- }
- text='CSS'
- />
- }
- text='Javascript'
- />
- }
- text='PHP'
- />
- }
- text='Python'
- />
- }
- text='MySQL'
- />
- }
- text='Laravel'
- />
- }
- text='NodeJS'
- />
- }
- text='React'
- />
- }
- text='Vue'
- />
- }
- text='Tailwind'
- />
- }
- text='Sass'
- />
- }
- text='Mantine'
- />
- }
- text='NextJS'
- />
- }
- text='Prisma'
- />
- }
- text='Supabase'
- />
-
-
- And probably many more...
-
-
-
+
+
+
+ Experiences
+
+ I have worked and used these awesome technologies in my projects
+
+
+ }
+ text='HTML'
+ />
+ }
+ text='CSS'
+ />
+ }
+ text='Javascript'
+ />
+ }
+ text='PHP'
+ />
+ }
+ text='Python'
+ />
+ }
+ text='MySQL'
+ />
+ }
+ text='Laravel'
+ />
+ }
+ text='NodeJS'
+ />
+ }
+ text='React'
+ />
+ }
+ text='Vue'
+ />
+ }
+ text='Tailwind'
+ />
+ }
+ text='Sass'
+ />
+ }
+ text='Mantine'
+ />
+ }
+ text='NextJS'
+ />
+ }
+ text='Prisma'
+ />
+ }
+ text='Supabase'
+ />
+
+
+ And probably many more...
+
+
+
+
)
}
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 (
-
-
-
+
+
+
+
+
+ Hi There!
+
+
+
+ I'm Refansa.
+
- Hi There!
+ lh='xs'>
+ A Passionate, self-taught Software Developer{' '}
+
+ A supporter of Open Source Software.
+
-
-
- I'm Refansa.
-
-
- A Passionate, self-taught Software Developer{' '}
-
- A supporter of Open Source Software.
-
-
-
- }
- size='lg'
- variant='light'>
- Github
-
- }
- size='lg'
- variant='light'>
- Email
-
-
-
+
+ }
+ size='lg'
+ variant='light'>
+ Github
+
+ }
+ size='lg'
+ variant='light'>
+ Email
+
+
+
+
)
}