fixes and tweak a couple of changes.
- fixed responsive issues - fixed anchor hashtag link offset
This commit is contained in:
parent
932b6f6a8f
commit
416c382368
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,3 +1,3 @@
|
||||
{
|
||||
"discord.enabled": false
|
||||
"discord.enabled": false
|
||||
}
|
||||
@ -1,12 +1,3 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Offset the anchor hashtag link
|
||||
*/
|
||||
:target::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 144px;
|
||||
margin-top: -144px;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
.grayscale {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
/* Offset the anchor hashtag link
|
||||
*/
|
||||
.anchor:target::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 160px;
|
||||
margin-top: -160px;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user