added and fixes couple of changes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "author": {
     "name": "Refansa",

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

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"
+        ]
+    }
+]

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 <Project projectLists={projectLists} />
 }

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) {

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 (
     <Card
       shadow='sm'
-      padding='lg'>
+      padding='lg'
+      withBorder>
       <Card.Section>
         <AspectRatio
           ratio={1366 / 609}
           mah={160}
           my='auto'>
           <Image
+            component={NextImage}
             src={imgSrc}
             alt={alt}
+            width={340}
+            height={160}
           />
         </AspectRatio>
       </Card.Section>
@@ -62,7 +67,7 @@ const ProjectItem = ({
               <Badge
                 key={title}
                 radius='xs'
-                variant='outline'>
+                variant='light'>
                 {tag}
               </Badge>
             )
@@ -75,17 +80,18 @@ const ProjectItem = ({
         mb='md'>
         {description}
       </Text>
-      {codeSrc ? (
-        <Button
-          mt='auto'
-          component='a'
-          href={codeSrc}
-          target='_blank'
-          leftSection={<IconSourceCode />}
-          variant='light'>
-          Source Code
-        </Button>
-      ) : null}
+      <Group mt='auto'>
+        {codeSrc ? (
+          <Button
+            component='a'
+            href={codeSrc}
+            target='_blank'
+            leftSection={<IconBrandGithub />}
+            variant='filled'>
+            Source Code
+          </Button>
+        ) : null}
+      </Group>
     </Card>
   )
 }

src/styles/extends/Card.module.css

@@ -0,0 +1,7 @@
+.card {
+  @mixin dark {
+    &[data-with-border='true'] {
+      border-color: var(--mantine-color-dark-6);
+    }
+  }
+}

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,
+  },
+})

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'

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,