refansa/refansa.my.id
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes and tweak a couple of changes.

Browse Source 
- fixed responsive issues
- fixed anchor hashtag link offset
This commit is contained in:
Refansa 2023-10-17 10:47:37 +07:00
parent 932b6f6a8f
commit 416c382368
7 changed files with 233 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -1,3 +1,3 @@
{ {
"discord.enabled": false "discord.enabled": false
} }

9
src/app/global.css
View File

@ -1,12 +1,3 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Offset the anchor hashtag link
*/
:target::before {
content: '';
display: block;
height: 144px;
margin-top: -144px;
}

23
src/app/page.tsx
View File

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

9
src/partials/About.module.css
View File

@ -1,3 +1,12 @@
.grayscale { .grayscale {
filter: grayscale(1); filter: grayscale(1);
} }
/* Offset the anchor hashtag link
*/
.anchor:target::before {
content: '';
display: block;
height: 160px;
margin-top: -160px;
}

116
src/partials/About.tsx
View File

@ -9,65 +9,71 @@ import {
Title, Title,
} from '@mantine/core' } from '@mantine/core'
import classes from './About.module.css' import classes from './About.module.css'
import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
function About() { function About() {
return ( return (
<Box <SlideUpWhenVisible>
id='about' <Box
my='xl'> id='about'
<SimpleGrid className={classes.anchor}
cols={{ base: 1, sm: 2 }} my='xl'>
spacing={{ base: 'sm', md: 'md', lg: 'lg' }}> <SimpleGrid
<Stack> cols={{ base: 1, sm: 2 }}
<Title>A bit About Me</Title> spacing={{ base: 'sm', md: 'md', lg: 'lg' }}>
<Stack gap='md'> <Stack>
<Text> <Title>A bit About Me</Title>
Hello 👋 Refansa here. Muhammad Refansa Ali Muzky is my full name. <Stack gap='md'>
I'm an 18 years old software developer, just came fresh out of the <Text>
oven. Constantly seeking new open source projects to contribute to Hello 👋 Refansa here. Muhammad Refansa Ali Muzky is my full
and enjoy working with others to make a meaningful contribution. name. I'm an 18 years old software developer, just came fresh
</Text> out of the oven. Constantly seeking new open source projects to
<Text> contribute to and enjoy working with others to make a meaningful
I thrive on challenging coding projects and love nothing more than contribution.
diving into complex software development tasks. As a lover of open </Text>
source, I believe that sharing knowledge and collaborating on <Text>
projects is essential for the advancement of the tech industry. I thrive on challenging coding projects and love nothing more
</Text> than diving into complex software development tasks. As a lover
<Text of open source, I believe that sharing knowledge and
mt='lg' collaborating on projects is essential for the advancement of
c='dark.1' the tech industry.
fs='italic'> </Text>
I use Archlinux btw. <Text
</Text> mt='lg'
<Text c='dark.1'
mt='xl' fs='italic'>
fw='bold'> I use Archlinux btw.
Peace from Indonesia 🇮🇩 </Text>
</Text> <Text
mt='xl'
fw='bold'>
Peace from Indonesia 🇮🇩
</Text>
</Stack>
</Stack> </Stack>
</Stack> <Container visibleFrom='sm'>
<Container visibleFrom='sm'> <Stack
<Stack justify='center'
justify='center' w={360}>
w={360}> <Image
<Image className={classes.grayscale}
className={classes.grayscale} src='/assets/hand-coding.svg'
src='/assets/hand-coding.svg' alt='Coding Illustration'
alt='Coding Illustration' width={360}
width={360} height='auto'
height='auto' />
/> <Anchor
<Anchor ta='center'
ta='center' fs='italic'
fs='italic' fz='xs'
fz='xs' href='https://storyset.com/work'>
href='https://storyset.com/work'> Work illustrations by Storyset
Work illustrations by Storyset </Anchor>
</Anchor> </Stack>
</Stack> </Container>
</Container> </SimpleGrid>
</SimpleGrid> </Box>
</Box> </SlideUpWhenVisible>
) )
} }

179
src/partials/Experiences.tsx
View File

@ -17,6 +17,7 @@ import {
IconBrandTailwind, IconBrandTailwind,
IconBrandVue, IconBrandVue,
} from '@tabler/icons-react' } from '@tabler/icons-react'
import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
interface ItemGridProps { interface ItemGridProps {
icon: React.ReactNode icon: React.ReactNode
@ -35,7 +36,12 @@ const ItemGrid = ({ icon, text }: ItemGridProps) => {
align='center' align='center'
justify='center'> justify='center'>
{icon} {icon}
<Text>{text}</Text> <Text
style={{ userSelect: 'none' }}
fw='bold'
fz='sm'>
{text}
</Text>
</Stack> </Stack>
</Paper> </Paper>
) )
@ -43,87 +49,94 @@ const ItemGrid = ({ icon, text }: ItemGridProps) => {
export default function Experiences() { export default function Experiences() {
return ( return (
<Box my='xl'> <SlideUpWhenVisible>
<Stack align='center'> <Box my='xl'>
<Title>Experiences</Title> <Stack
<Text fz='lg'> align='center'
I have worked and used these awesome technologies in my projects ta='center'>
</Text> <Title>Experiences</Title>
<SimpleGrid <Text
mt='xl' fz='lg'
w={{ base: 240, sm: 480, md: 720, lg: 960 }} ta='center'>
cols={{ base: 2, sm: 4, md: 6, lg: 8 }}> I have worked and used these awesome technologies in my projects
<ItemGrid </Text>
icon={<IconBrandHtml5 />} <SimpleGrid
text='HTML' mt='xl'
/> w={{ base: 240, sm: 480, md: 720, lg: 960 }}
<ItemGrid cols={{ base: 2, sm: 4, md: 6, lg: 8 }}>
icon={<IconBrandCss3 />} <ItemGrid
text='CSS' icon={<IconBrandHtml5 />}
/> text='HTML'
<ItemGrid />
icon={<IconBrandJavascript />} <ItemGrid
text='Javascript' icon={<IconBrandCss3 />}
/> text='CSS'
<ItemGrid />
icon={<IconBrandPhp />} <ItemGrid
text='PHP' icon={<IconBrandJavascript />}
/> text='Javascript'
<ItemGrid />
icon={<IconBrandPython />} <ItemGrid
text='Python' icon={<IconBrandPhp />}
/> text='PHP'
<ItemGrid />
icon={<IconBrandMysql />} <ItemGrid
text='MySQL' icon={<IconBrandPython />}
/> text='Python'
<ItemGrid />
icon={<IconBrandLaravel />} <ItemGrid
text='Laravel' icon={<IconBrandMysql />}
/> text='MySQL'
<ItemGrid />
icon={<IconBrandNodejs />} <ItemGrid
text='NodeJS' icon={<IconBrandLaravel />}
/> text='Laravel'
<ItemGrid />
icon={<IconBrandReact />} <ItemGrid
text='React' icon={<IconBrandNodejs />}
/> text='NodeJS'
<ItemGrid />
icon={<IconBrandVue />} <ItemGrid
text='Vue' icon={<IconBrandReact />}
/> text='React'
<ItemGrid />
icon={<IconBrandTailwind />} <ItemGrid
text='Tailwind' icon={<IconBrandVue />}
/> text='Vue'
<ItemGrid />
icon={<IconBrandSass />} <ItemGrid
text='Sass' icon={<IconBrandTailwind />}
/> text='Tailwind'
<ItemGrid />
icon={<IconBrandMantine />} <ItemGrid
text='Mantine' icon={<IconBrandSass />}
/> text='Sass'
<ItemGrid />
icon={<IconBrandNextjs />} <ItemGrid
text='NextJS' icon={<IconBrandMantine />}
/> text='Mantine'
<ItemGrid />
icon={<IconBrandPrisma />} <ItemGrid
text='Prisma' icon={<IconBrandNextjs />}
/> text='NextJS'
<ItemGrid />
icon={<IconBrandSupabase />} <ItemGrid
text='Supabase' icon={<IconBrandPrisma />}
/> text='Prisma'
</SimpleGrid> />
<Text <ItemGrid
mt='xl' icon={<IconBrandSupabase />}
fs='italic'> text='Supabase'
And probably many more... />
</Text> </SimpleGrid>
</Stack> <Text
</Box> mt='xl'
fs='italic'
ta='center'>
And probably many more...
</Text>
</Stack>
</Box>
</SlideUpWhenVisible>
) )
} }

107
src/partials/Introduction.tsx
View File

@ -1,65 +1,68 @@
import { Box, Button, Flex, Group, Text, Title } from '@mantine/core' import { Box, Button, Flex, Group, Text, Title } from '@mantine/core'
import { IconBrandGithub, IconMail } from '@tabler/icons-react' import { IconBrandGithub, IconMail } from '@tabler/icons-react'
import classes from './Introduction.module.css' import classes from './Introduction.module.css'
import SlideUpWhenVisible from '../hooks/slideUpWhenVisible'
function Introduction() { function Introduction() {
return ( return (
<Box <SlideUpWhenVisible>
mt='xl' <Box
mah='100vh' mt='xl'
h='100vh' mah='100vh'
className={classes.background}> h='100vh'
<Flex className={classes.background}>
align='center' <Flex
gap='md'> align='center'
<Box className={classes.line} /> 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 <Text
fz='display-lg' fz='display-lg'
fw='bold' fw='bold'
c='coffee.6'> lh='xs'>
Hi There! A Passionate, self-taught Software Developer{' '}
<Text
component='span'
display='block'
inherit
c='dark.1'>
A supporter of Open Source Software.
</Text>
</Text> </Text>
</Flex> <Group mt={'xl'}>
<Title <Button
variant='shadow' component='a'
fz='display-xl' href='https://github.com/Refansa'
fw='bold' target='_blank'
lh={1.2}> leftSection={<IconBrandGithub />}
I'm Refansa. size='lg'
</Title> variant='light'>
<Text Github
fz='display-lg' </Button>
fw='bold' <Button
lh='xs'> component='a'
A Passionate, self-taught Software Developer{' '} href='mailto:m.refansa.am@gmail.com'
<Text leftSection={<IconMail />}
component='span' size='lg'
display='block' variant='light'>
inherit Email
c='dark.1'> </Button>
A supporter of Open Source Software. </Group>
</Text> </Box>
</Text> </SlideUpWhenVisible>
<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>
) )
} }