diff --git a/package.json b/package.json index 8281ef6..ffe45fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "portfolio", - "version": "0.1.2", + "version": "0.1.3", "private": true, "author": { "name": "Refansa", diff --git a/public/assets/project-4.png b/public/assets/project-4.png new file mode 100644 index 0000000..1593300 Binary files /dev/null and b/public/assets/project-4.png differ diff --git a/src/app/api/projects/route.ts b/src/app/api/projects/route.ts new file mode 100644 index 0000000..5d75e29 --- /dev/null +++ b/src/app/api/projects/route.ts @@ -0,0 +1,6 @@ +import { NextResponse } from 'next/server' +import data from '../../data/projectList.json' + +export async function GET() { + return NextResponse.json(data) +} diff --git a/src/app/data/projectList.json b/src/app/data/projectList.json new file mode 100644 index 0000000..6faec8b --- /dev/null +++ b/src/app/data/projectList.json @@ -0,0 +1,49 @@ +[ + { + "title": "AmanaTax", + "description": "A video course website to learn about taxes.", + "imgSrc": "/assets/project-1.png", + "alt": "AmanaTax Homepage", + "tags": [ + "internship project", + "laravel", + "completed" + ] + }, + { + "title": "Koperasi", + "description": "Cooperatives website that accept online transactions.", + "codeSrc": "https://github.com/Refansa/koperasi", + "imgSrc": "/assets/project-2.png", + "alt": "Koperasi Homepage", + "tags": [ + "school project", + "vue.js", + "completed" + ] + }, + { + "title": "RMBG", + "description": "Easily remove background from an image with one simple click.", + "codeSrc": "https://github.com/Refansa/rmbg", + "imgSrc": "/assets/project-3.png", + "alt": "RMBG Website", + "tags": [ + "personal project", + "react.js", + "completed" + ] + }, + { + "title": "This Portfolio", + "description": "My own portfolio!", + "codeSrc": "https://github.com/Refansa/portfolio", + "imgSrc": "/assets/project-4.png", + "alt": "Portfolio Homepage", + "tags": [ + "personal project", + "react", + "in progress" + ] + } +] \ No newline at end of file diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx index 7f48523..d6e9dd3 100644 --- a/src/app/projects/page.tsx +++ b/src/app/projects/page.tsx @@ -5,41 +5,16 @@ export const metadata: Metadata = { title: 'Projects', } -const projectLists = [ - { - title: 'AmanaTax', - description: 'A video course website to learn about taxes.', - imgSrc: '/assets/project-1.png', - alt: 'AmanaTax Homepage', - tags: ['internship project', 'laravel', 'completed'], - }, - { - title: 'Koperasi', - description: 'Cooperatives website that accept online transactions.', - codeSrc: 'https://github.com/Refansa/koperasi', - imgSrc: '/assets/project-2.png', - alt: 'Koperasi Homepage', - tags: ['school project', 'vue.js', 'completed'], - }, - { - title: 'RMBG', - description: - 'Easily remove background from an image with one simple click.', - codeSrc: 'https://github.com/Refansa/rmbg', - imgSrc: '/assets/project-3.png', - alt: 'RMBG Website', - tags: ['personal project', 'react.js', 'completed'], - }, - { - title: 'This Portfolio', - description: 'My own portfolio!', - codeSrc: 'https://github.com/Refansa/portfolio', - imgSrc: '/assets/project-4.png', - alt: 'Portfolio Homepage', - tags: ['personal project', 'react', 'in progress'], - }, -] +async function getProjectLists() { + const res = await fetch('http://localhost:3000/api/projects') + + if (!res.ok) throw new Error('Failed to fetch project lists.') + + return res.json() +} + +export default async function Projects() { + const projectLists = await getProjectLists() -export default function ProjectLists() { return } diff --git a/src/hooks/slideUpWhenVisible.tsx b/src/hooks/slideUpWhenVisible.tsx index cb36a33..bdd25f6 100644 --- a/src/hooks/slideUpWhenVisible.tsx +++ b/src/hooks/slideUpWhenVisible.tsx @@ -12,7 +12,7 @@ export default function SlideUpWhenVisible({ threshold?: number | number[] }) { const controls = useAnimation() - const [ref, inView] = useInView({ threshold: threshold ? threshold : 0.35 }) + const [ref, inView] = useInView({ threshold: threshold ? threshold : 0 }) useEffect(() => { if (inView) { diff --git a/src/partials/Projects.tsx b/src/partials/Projects.tsx index 76d0b40..3b54fb8 100644 --- a/src/partials/Projects.tsx +++ b/src/partials/Projects.tsx @@ -11,11 +11,12 @@ import { Text, Title, } from '@mantine/core' -import { IconSourceCode } from '@tabler/icons-react' +import { IconBrandGithub } from '@tabler/icons-react' import SlideUpWhenVisible from '../hooks/slideUpWhenVisible' +import NextImage from 'next/image' export interface ProjectItemProps { - alt?: string + alt: string codeSrc?: any description: string imgSrc?: any @@ -34,15 +35,19 @@ const ProjectItem = ({ return ( + padding='lg' + withBorder> {alt} @@ -62,7 +67,7 @@ const ProjectItem = ({ + variant='light'> {tag} ) @@ -75,17 +80,18 @@ const ProjectItem = ({ mb='md'> {description} - {codeSrc ? ( - - ) : null} + + {codeSrc ? ( + + ) : null} + ) } diff --git a/src/styles/extends/Card.module.css b/src/styles/extends/Card.module.css new file mode 100644 index 0000000..531b14f --- /dev/null +++ b/src/styles/extends/Card.module.css @@ -0,0 +1,7 @@ +.card { + @mixin dark { + &[data-with-border='true'] { + border-color: var(--mantine-color-dark-6); + } + } +} diff --git a/src/styles/extends/Card.ts b/src/styles/extends/Card.ts new file mode 100644 index 0000000..f1bdb28 --- /dev/null +++ b/src/styles/extends/Card.ts @@ -0,0 +1,8 @@ +import { Card as Component } from '@mantine/core' +import classes from './Card.module.css' + +export const Card = Component.extend({ + defaultProps: { + className: classes.card, + }, +}) diff --git a/src/styles/extends/index.ts b/src/styles/extends/index.ts index cf662bd..94c4139 100644 --- a/src/styles/extends/index.ts +++ b/src/styles/extends/index.ts @@ -1,4 +1,5 @@ export { Button } from './Button' +export { Card } from './Card' export { Drawer } from './Drawer' export { Paper } from './Paper' export { Text } from './Text' diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 8ea856e..14ca259 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -8,6 +8,7 @@ import { import { fluidDisplay, fluidTypography } from '../utils/typography' import { Button, + Card, Drawer, Paper, Text, @@ -148,6 +149,7 @@ export const theme = createTheme({ // Allows adding `classNames`, `styles` and `defaultProps` to any component components: { Button, + Card, Drawer, Paper, Text,