From 8a1863e155cf47d80577f191ae5a4c97d0681e7c Mon Sep 17 00:00:00 2001
From: tunny17 <tvnji01@gmail.com>
Date: Wed, 4 Dec 2024 15:02:07 +0100
Subject: [PATCH 1/3] feat: add marquee

---
 src/lib/pages/home/author-display.svelte | 15 +++++
 src/lib/pages/home/hero.svelte           | 36 +++++++++++
 src/lib/pages/home/marquee-card.svelte   | 30 +++++++++
 src/lib/pages/home/marquee.svelte        | 34 +++++++++++
 src/lib/pages/home/page.svelte           | 49 ++++++++-------
 src/lib/pages/home/table.svelte          | 77 +++++++++---------------
 tailwind.config.js                       | 44 ++++++++------
 7 files changed, 196 insertions(+), 89 deletions(-)
 create mode 100644 src/lib/pages/home/author-display.svelte
 create mode 100644 src/lib/pages/home/hero.svelte
 create mode 100644 src/lib/pages/home/marquee-card.svelte
 create mode 100644 src/lib/pages/home/marquee.svelte

diff --git a/src/lib/pages/home/author-display.svelte b/src/lib/pages/home/author-display.svelte
new file mode 100644
index 0000000..f9989ec
--- /dev/null
+++ b/src/lib/pages/home/author-display.svelte
@@ -0,0 +1,15 @@
+<script>
+  export let data = {
+    author: '',
+    author_link: '',
+    author_avatar: ''
+  };
+</script>
+
+<div class="flex items-center gap-3">
+  <a href={`${data.author_link}`}>
+    <img src={data.author_avatar} alt="" class="w-7 rounded-full" />
+  </a>
+
+  <a href={`${data.author_link}`}> {data.author}</a>
+</div>
diff --git a/src/lib/pages/home/hero.svelte b/src/lib/pages/home/hero.svelte
new file mode 100644
index 0000000..6bee652
--- /dev/null
+++ b/src/lib/pages/home/hero.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Repository } from '$lib/types/repository';
+  import Marquee from './marquee.svelte';
+  import MarqueeCard from './marquee-card.svelte';
+
+  export let data: Repository[] = [];
+
+  let firstRow = data.slice(0, data.length / 2);
+  let secondRow = data.slice(data.length / 2);
+</script>
+
+<div
+  class="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background py-5 mb-5 md:shadow-xl"
+>
+  <h2
+    class="mt-5 scroll-m-20 border-b pb-4 md:text-3xl text-center font-semibold tracking-tight transition-colors first:mt-0"
+  >
+    Open 10 source projects in Nigeria
+  </h2>
+  <Marquee pauseOnHover class="[--duration:20s]">
+    {#each firstRow as item}
+      <MarqueeCard {...item} />
+    {/each}
+  </Marquee>
+  <Marquee reverse pauseOnHover class="[--duration:20s]">
+    {#each secondRow as item}
+      <MarqueeCard {...item} />
+    {/each}
+  </Marquee>
+  <div
+    class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"
+  ></div>
+  <div
+    class="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"
+  ></div>
+</div>
diff --git a/src/lib/pages/home/marquee-card.svelte b/src/lib/pages/home/marquee-card.svelte
new file mode 100644
index 0000000..3e2de0e
--- /dev/null
+++ b/src/lib/pages/home/marquee-card.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  export let author_avatar: string;
+  export let name: string;
+  export let author: string;
+  export let description: string;
+</script>
+
+<figure
+  class={cn(
+    'relative w-72 cursor-pointer overflow-hidden rounded-2xl border p-4',
+    // light styles
+    'border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]',
+    // dark styles
+    'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]'
+  )}
+>
+  <div class="flex flex-row items-center gap-2">
+    <img class="rounded-full" width="32" height="32" alt="" src={author_avatar} />
+    <div class="flex flex-col">
+      <!-- svelte-ignore a11y-structure -->
+      <figcaption class="text-sm font-medium dark:text-white">
+        {name}
+      </figcaption>
+      <p class="text-xs font-medium dark:text-white/40">{author}</p>
+    </div>
+  </div>
+  <blockquote class="mt-2 text-sm">{description}</blockquote>
+</figure>
diff --git a/src/lib/pages/home/marquee.svelte b/src/lib/pages/home/marquee.svelte
new file mode 100644
index 0000000..e710f05
--- /dev/null
+++ b/src/lib/pages/home/marquee.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+  export let pauseOnHover: boolean = false;
+  export let vertical: boolean = false;
+  export let repeat: number = 4;
+  export let reverse: boolean = false;
+
+  let className: any = '';
+  export { className as class };
+</script>
+
+<div
+  class={cn(
+    'group flex overflow-hidden p-2 [--duration:2s] [--gap:1rem] [gap:var(--gap)]',
+    {
+      'flex-row': !vertical,
+      'flex-col': vertical
+    },
+    className
+  )}
+>
+  {#each { length: repeat } as _, i (i)}
+    <div
+      class={cn('flex shrink-0 justify-around [gap:var(--gap)]', {
+        'animate-marquee flex-row': !vertical,
+        'animate-marquee-vertical flex-col': vertical,
+        'group-hover:[animation-play-state:paused]': pauseOnHover,
+        '[animation-direction:reverse]': reverse
+      })}
+    >
+      <slot>Default</slot>
+    </div>
+  {/each}
+</div>
diff --git a/src/lib/pages/home/page.svelte b/src/lib/pages/home/page.svelte
index 8dc8915..4fc8dd8 100644
--- a/src/lib/pages/home/page.svelte
+++ b/src/lib/pages/home/page.svelte
@@ -8,6 +8,7 @@
   import detectUrlChange from 'detect-url-change';
 
   import Table from './table.svelte';
+  import Hero from './hero.svelte';
 
   let repositories: Repository[] = [];
   let apiMetadata: ApiMetadata = {
@@ -17,12 +18,12 @@
       totalItems: 250,
       itemsPerPage: 10,
       hasNextPage: false,
-      hasPrevPage: false,
+      hasPrevPage: false
     },
     sort: {
       sortBy: 'stars',
-      order: 'desc',
-    },
+      order: 'desc'
+    }
   };
   let currentPage: number = 1;
   let currentOrder: string = 'desc';
@@ -57,11 +58,11 @@
 
       repositories = result.data.map((repo: Repository, index: number) => ({
         ...repo,
-        id: index + 1 + (page - 1) * 10,
+        id: index + 1 + (page - 1) * 10
       }));
       apiMetadata = {
         pagination: result.pagination,
-        sort: result.sort,
+        sort: result.sort
       };
     } catch (err: any) {
       console.error(err);
@@ -91,11 +92,11 @@
       const result = await response.json();
       repositories = result.data.map((repo: Repository, index: number) => ({
         ...repo,
-        id: index + 1,
+        id: index + 1
       }));
       apiMetadata = {
         pagination: result.pagination,
-        sort: result.sort,
+        sort: result.sort
       };
     } catch (err: any) {
       console.error(err);
@@ -118,7 +119,7 @@
 >
   <Sidebar />
 
-  <div class="py-6 lg:gap-10 w-full max-w-2xl mx-auto">
+  <div class="py-6 lg:gap-10 w-full max-w-4xl mx-auto">
     {#if isFetching && !isMounted}
       <div class="rounded-md border w-full">
         <div class="flex flex-col gap-4 p-4">
@@ -132,21 +133,25 @@
       </div>
     {:else}
       <div>
-        <h2
-          class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-        >
-          Open source projects in Nigeria
-        </h2>
+        <Hero data={repositories} />
+
+        <div>
+          <h2
+            class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+          >
+            Open source projects in Nigeria
+          </h2>
+        </div>
+        {#key gettingFreshData}
+          <Table
+            data={repositories}
+            {apiMetadata}
+            bind:searchValue
+            isFetching={gettingFreshData}
+            onSearch={searchRepositories}
+          />
+        {/key}
       </div>
-      {#key gettingFreshData}
-        <Table
-          data={repositories}
-          {apiMetadata}
-          bind:searchValue
-          isFetching={gettingFreshData}
-          onSearch={searchRepositories}
-        />
-      {/key}
     {/if}
   </div>
 </div>
diff --git a/src/lib/pages/home/table.svelte b/src/lib/pages/home/table.svelte
index 2632cae..fc6367a 100644
--- a/src/lib/pages/home/table.svelte
+++ b/src/lib/pages/home/table.svelte
@@ -3,14 +3,15 @@
   import {
     Render,
     Subscribe,
+    createRender,
     // createRender,
-    createTable,
+    createTable
   } from 'svelte-headless-table';
   import {
     addHiddenColumns,
     addPagination,
     addSortBy,
-    addTableFilter,
+    addTableFilter
   } from 'svelte-headless-table/plugins';
   import ArrowUpDown from 'lucide-svelte/icons/arrow-up-down';
   import ArrowRight from 'lucide-svelte/icons/chevron-right';
@@ -24,6 +25,7 @@
   import * as Table from '$lib/components/table';
   import { Button } from '$lib/components/button';
   import { BorderBeam } from '$lib/components/border-beam';
+  import AuthorDisplay from './author-display.svelte';
 
   export let data: Repository[] = [];
   export let apiMetadata: ApiMetadata;
@@ -48,44 +50,43 @@
     sort: addSortBy({ disableMultiSort: true }),
     page: addPagination(),
     filter: addTableFilter({
-      fn: ({ filterValue, value }) => value.includes(filterValue),
+      fn: ({ filterValue, value }) => value.includes(filterValue)
     }),
-    hide: addHiddenColumns(),
+    hide: addHiddenColumns()
   });
 
   const columns = table.createColumns([
     table.column({
       header: '#',
-      accessor: 'id',
+      accessor: 'id'
     }),
     table.column({
       header: 'Name',
-      accessor: 'link',
-    }),
-    table.column({
-      header: '',
-      accessor: 'author_avatar',
-      cell: ({ value }) => value.toLowerCase(),
+      accessor: 'link'
     }),
     table.column({
       header: 'Author',
-      accessor: 'author',
-      cell: ({ value }) => value.toLowerCase(),
+      accessor: (data) => data,
+      cell: ({ value }) => {
+        return createRender(AuthorDisplay, {
+          data: value
+        });
+      }
     }),
     table.column({
       header: 'Stars',
       accessor: 'stars',
       cell: ({ value }) => {
         return value;
-      },
+      }
     }),
     table.column({
       header: 'Forks',
       accessor: 'forks',
       cell: ({ value }) => {
         return value;
-      },
-    }),
+      }
+    })
     // table.column({
     //   header: '',
     //   accessor: (data) => data,
@@ -95,15 +96,8 @@
     // }),
   ]);
 
-  const {
-    headerRows,
-    pageRows,
-    tableAttrs,
-    tableBodyAttrs,
-    flatColumns,
-    pluginStates,
-    rows,
-  } = table.createViewModel(columns);
+  const { headerRows, pageRows, tableAttrs, tableBodyAttrs, flatColumns, pluginStates, rows } =
+    table.createViewModel(columns);
 
   const { hiddenColumnIds } = pluginStates.hide;
   const ids = flatColumns.map((c) => c.id);
@@ -172,16 +166,8 @@
           <Subscribe rowAttrs={headerRow.attrs()}>
             <Table.Row>
               {#each headerRow.cells as cell (cell.id)}
-                <Subscribe
-                  attrs={cell.attrs()}
-                  let:attrs
-                  props={cell.props()}
-                  let:props
-                >
-                  <Table.Head
-                    {...attrs}
-                    class={cn('[&:has([role=checkbox])]:pl-3')}
-                  >
+                <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
+                  <Table.Head {...attrs} class={cn('[&:has([role=checkbox])]:pl-3')}>
                     {#if cell.id === 'stars' || cell.id === 'forks'}
                       <Button
                         variant="ghost"
@@ -190,11 +176,9 @@
                       >
                         <Render of={cell.render()} />
                         <ArrowUpDown
-                          class="ml-2 h-4 w-4 {apiMetadata.sort.sortBy ===
-                            cell.id &&
+                          class="ml-2 h-4 w-4 {apiMetadata.sort.sortBy === cell.id &&
                             apiMetadata.sort.order === 'asc' &&
-                            'text-green-500'} {apiMetadata.sort.sortBy ===
-                            cell.id &&
+                            'text-green-500'} {apiMetadata.sort.sortBy === cell.id &&
                             apiMetadata.sort.order === 'desc' &&
                             'text-red-500'}"
                         />
@@ -223,18 +207,11 @@
                         class="text-right font-medium underline"
                         target="_blank"
                       >
-                        <Render
-                          of={extractLastSegment(cell.render() || '') ||
-                            'Unknown'}
-                        />
+                        <Render of={extractLastSegment(cell.render() || '') || 'Unknown'} />
                       </a>
                     {:else if cell.id === 'author_avatar'}
                       <div class="w-[30px]">
-                        <img
-                          src={`${cell.render()}`}
-                          class="rounded-full"
-                          alt=""
-                        />
+                        <img src={`${cell.render()}`} class="rounded-full" alt="" />
                       </div>
                     {:else}
                       <Render of={cell.render()} />
@@ -284,8 +261,8 @@
         variant="outline"
         size="sm"
         on:click={onLastPage}
-        disabled={apiMetadata.pagination.currentPage ===
-          apiMetadata.pagination.totalPages || isFetching}
+        disabled={apiMetadata.pagination.currentPage === apiMetadata.pagination.totalPages ||
+          isFetching}
       >
         Last page
       </Button>
diff --git a/tailwind.config.js b/tailwind.config.js
index ee8a036..19cd85b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,8 +10,8 @@ const config = {
       center: true,
       padding: '2rem',
       screens: {
-        '2xl': '1400px',
-      },
+        '2xl': '1400px'
+      }
     },
     extend: {
       colors: {
@@ -22,54 +22,64 @@ const config = {
         foreground: 'hsl(var(--foreground) / <alpha-value>)',
         primary: {
           DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
+          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
         },
         secondary: {
           DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
+          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
         },
         destructive: {
           DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
         },
         muted: {
           DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
+          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
         },
         accent: {
           DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
         },
         popover: {
           DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
+          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
         },
         card: {
           DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
-        },
+          foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
+        }
       },
       borderRadius: {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
+        sm: 'calc(var(--radius) - 4px)'
       },
       fontFamily: {
-        sans: ['Inter', ...fontFamily.sans],
+        sans: ['Inter', ...fontFamily.sans]
       },
 
       animation: {
         'border-beam': 'border-beam calc(var(--duration)*1s) infinite linear',
+        marquee: 'marquee var(--duration) linear infinite',
+        'marquee-vertical': 'marquee-vertical var(--duration) linear infinite'
       },
       keyframes: {
         'border-beam': {
           '100%': {
-            'offset-distance': '100%',
-          },
+            'offset-distance': '100%'
+          }
         },
-      },
-    },
-  },
+        marquee: {
+          from: { transform: 'translateX(0)' },
+          to: { transform: 'translateX(calc(-100% - var(--gap)))' }
+        },
+        'marquee-vertical': {
+          from: { transform: 'translateY(0)' },
+          to: { transform: 'translateY(calc(-100% - var(--gap)))' }
+        }
+      }
+    }
+  }
 };
 
 export default config;

From c7af0e248445156503546a3320aac1a0a68f889c Mon Sep 17 00:00:00 2001
From: tunny17 <tvnji01@gmail.com>
Date: Wed, 4 Dec 2024 15:55:06 +0100
Subject: [PATCH 2/3] feat: ui changes

---
 src/lib/assets/star.svg                |  8 +++++++
 src/lib/pages/home/marquee-card.svelte | 33 +++++++++++++++++---------
 2 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/assets/star.svg

diff --git a/src/lib/assets/star.svg b/src/lib/assets/star.svg
new file mode 100644
index 0000000..9038ea0
--- /dev/null
+++ b/src/lib/assets/star.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo
+Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="#eab308"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.5245 3.46353C11.6741 3.00287 12.3259 3.00287 12.4755 3.46353L14.1329 8.56434C14.1998 8.77035 14.3918 8.90983 14.6084 8.90983H19.9717C20.4561 8.90983 20.6575 9.52964 20.2656 9.81434L15.9266 12.9668C15.7514 13.0941 15.678 13.3198 15.745 13.5258L17.4023 18.6266C17.552 19.0873 17.0248 19.4704 16.6329 19.1857L12.2939 16.0332C12.1186 15.9059 11.8814 15.9059 11.7061 16.0332L7.3671 19.1857C6.97524 19.4704 6.448 19.0873 6.59768 18.6266L8.25503 13.5258C8.32197 13.3198 8.24864 13.0941 8.07339 12.9668L3.73438 9.81434C3.34253 9.52964 3.54392 8.90983 4.02828 8.90983H9.39159C9.6082 8.90983 9.80018 8.77035 9.86712 8.56434L11.5245 3.46353Z"
+    fill="#eab308" />
+</svg>
\ No newline at end of file
diff --git a/src/lib/pages/home/marquee-card.svelte b/src/lib/pages/home/marquee-card.svelte
index 3e2de0e..a6beb03 100644
--- a/src/lib/pages/home/marquee-card.svelte
+++ b/src/lib/pages/home/marquee-card.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
   import { cn } from '$lib/utils';
+  import starIcon from '$lib/assets/star.svg';
 
   export let author_avatar: string;
   export let name: string;
   export let author: string;
   export let description: string;
+  export let stars: number;
+  export let link: string;
 </script>
 
-<figure
+<a
+  href={link}
+  target="_blank"
   class={cn(
     'relative w-72 cursor-pointer overflow-hidden rounded-2xl border p-4',
     // light styles
@@ -16,15 +21,21 @@
     'dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]'
   )}
 >
-  <div class="flex flex-row items-center gap-2">
-    <img class="rounded-full" width="32" height="32" alt="" src={author_avatar} />
-    <div class="flex flex-col">
-      <!-- svelte-ignore a11y-structure -->
-      <figcaption class="text-sm font-medium dark:text-white">
-        {name}
-      </figcaption>
-      <p class="text-xs font-medium dark:text-white/40">{author}</p>
+  <div class="flex flex-row justify-between items-center">
+    <div class="flex flex-row items-center gap-2">
+      <img class="rounded-full" width="32" height="32" alt="" src={author_avatar} />
+      <div class="flex flex-col">
+        <!-- svelte-ignore a11y-structure -->
+        <figcaption class="text-sm font-medium dark:text-white">
+          {name}
+        </figcaption>
+        <p class="text-xs font-medium dark:text-white/40">{author}</p>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <img src={starIcon} alt="" class="w-5 text-white fill-white" />
+      <p class="text-xs">{stars}</p>
     </div>
   </div>
-  <blockquote class="mt-2 text-sm">{description}</blockquote>
-</figure>
+  <blockquote class="mt-2 text-sm line-clamp-3">{description}</blockquote>
+</a>

From a4e98318da286a9931d42d44b6bd60252d035e4c Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 4 Dec 2024 16:30:46 +0100
Subject: [PATCH 3/3] feat: add top 10 in marques

---
 deno.json                                     |  1 +
 src/lib/components/marquee/index.ts           |  4 ++
 .../marquee}/marquee-card.svelte              |  8 ++-
 .../marquee}/marquee.svelte                   |  4 +-
 src/lib/pages/home/hero.svelte                |  9 +--
 src/lib/pages/home/page.svelte                | 18 ++---
 src/lib/pages/home/table.svelte               | 68 ++++++++++++-------
 7 files changed, 73 insertions(+), 39 deletions(-)
 create mode 100644 src/lib/components/marquee/index.ts
 rename src/lib/{pages/home => components/marquee}/marquee-card.svelte (90%)
 rename src/lib/{pages/home => components/marquee}/marquee.svelte (91%)

diff --git a/deno.json b/deno.json
index 85db2d7..5f6bca6 100644
--- a/deno.json
+++ b/deno.json
@@ -1,5 +1,6 @@
 {
   "tasks": {
+    "dev": "deno run fe:dev & deno run be:dev",
     "fe:dev": "deno run -A --node-modules-dir npm:vite",
     "fe:build": "deno run -A --node-modules-dir npm:vite build",
     "fe:preview": "deno run -A --node-modules-dir npm:vite preview",
diff --git a/src/lib/components/marquee/index.ts b/src/lib/components/marquee/index.ts
new file mode 100644
index 0000000..ca2105d
--- /dev/null
+++ b/src/lib/components/marquee/index.ts
@@ -0,0 +1,4 @@
+import Root from './marquee.svelte';
+import MarqueeCard from './marquee-card.svelte';
+
+export { Root, Root as Marquee, MarqueeCard };
diff --git a/src/lib/pages/home/marquee-card.svelte b/src/lib/components/marquee/marquee-card.svelte
similarity index 90%
rename from src/lib/pages/home/marquee-card.svelte
rename to src/lib/components/marquee/marquee-card.svelte
index a6beb03..1b20f64 100644
--- a/src/lib/pages/home/marquee-card.svelte
+++ b/src/lib/components/marquee/marquee-card.svelte
@@ -23,7 +23,13 @@
 >
   <div class="flex flex-row justify-between items-center">
     <div class="flex flex-row items-center gap-2">
-      <img class="rounded-full" width="32" height="32" alt="" src={author_avatar} />
+      <img
+        class="rounded-full"
+        width="32"
+        height="32"
+        alt=""
+        src={author_avatar}
+      />
       <div class="flex flex-col">
         <!-- svelte-ignore a11y-structure -->
         <figcaption class="text-sm font-medium dark:text-white">
diff --git a/src/lib/pages/home/marquee.svelte b/src/lib/components/marquee/marquee.svelte
similarity index 91%
rename from src/lib/pages/home/marquee.svelte
rename to src/lib/components/marquee/marquee.svelte
index e710f05..657c9b4 100644
--- a/src/lib/pages/home/marquee.svelte
+++ b/src/lib/components/marquee/marquee.svelte
@@ -14,7 +14,7 @@
     'group flex overflow-hidden p-2 [--duration:2s] [--gap:1rem] [gap:var(--gap)]',
     {
       'flex-row': !vertical,
-      'flex-col': vertical
+      'flex-col': vertical,
     },
     className
   )}
@@ -25,7 +25,7 @@
         'animate-marquee flex-row': !vertical,
         'animate-marquee-vertical flex-col': vertical,
         'group-hover:[animation-play-state:paused]': pauseOnHover,
-        '[animation-direction:reverse]': reverse
+        '[animation-direction:reverse]': reverse,
       })}
     >
       <slot>Default</slot>
diff --git a/src/lib/pages/home/hero.svelte b/src/lib/pages/home/hero.svelte
index 6bee652..6c5f2ab 100644
--- a/src/lib/pages/home/hero.svelte
+++ b/src/lib/pages/home/hero.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Repository } from '$lib/types/repository';
-  import Marquee from './marquee.svelte';
-  import MarqueeCard from './marquee-card.svelte';
+  import { Marquee, MarqueeCard } from '$lib/components/marquee';
+  import { BorderBeam } from '$lib/components/border-beam';
 
   export let data: Repository[] = [];
 
@@ -10,12 +10,13 @@
 </script>
 
 <div
-  class="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background py-5 mb-5 md:shadow-xl"
+  class="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background py-2 mb-5"
 >
+  <BorderBeam size={300} duration={12} />
   <h2
     class="mt-5 scroll-m-20 border-b pb-4 md:text-3xl text-center font-semibold tracking-tight transition-colors first:mt-0"
   >
-    Open 10 source projects in Nigeria
+    The Odogwu's
   </h2>
   <Marquee pauseOnHover class="[--duration:20s]">
     {#each firstRow as item}
diff --git a/src/lib/pages/home/page.svelte b/src/lib/pages/home/page.svelte
index 4fc8dd8..47d74f5 100644
--- a/src/lib/pages/home/page.svelte
+++ b/src/lib/pages/home/page.svelte
@@ -18,12 +18,12 @@
       totalItems: 250,
       itemsPerPage: 10,
       hasNextPage: false,
-      hasPrevPage: false
+      hasPrevPage: false,
     },
     sort: {
       sortBy: 'stars',
-      order: 'desc'
-    }
+      order: 'desc',
+    },
   };
   let currentPage: number = 1;
   let currentOrder: string = 'desc';
@@ -58,11 +58,11 @@
 
       repositories = result.data.map((repo: Repository, index: number) => ({
         ...repo,
-        id: index + 1 + (page - 1) * 10
+        id: index + 1 + (page - 1) * 10,
       }));
       apiMetadata = {
         pagination: result.pagination,
-        sort: result.sort
+        sort: result.sort,
       };
     } catch (err: any) {
       console.error(err);
@@ -92,11 +92,11 @@
       const result = await response.json();
       repositories = result.data.map((repo: Repository, index: number) => ({
         ...repo,
-        id: index + 1
+        id: index + 1,
       }));
       apiMetadata = {
         pagination: result.pagination,
-        sort: result.sort
+        sort: result.sort,
       };
     } catch (err: any) {
       console.error(err);
@@ -137,9 +137,9 @@
 
         <div>
           <h2
-            class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+            class="mt-5 scroll-m-20 border-b pb-4 text-3xl font-semibold tracking-tight text-center transition-colors first:mt-0"
           >
-            Open source projects in Nigeria
+            All Projects
           </h2>
         </div>
         {#key gettingFreshData}
diff --git a/src/lib/pages/home/table.svelte b/src/lib/pages/home/table.svelte
index fc6367a..7520997 100644
--- a/src/lib/pages/home/table.svelte
+++ b/src/lib/pages/home/table.svelte
@@ -5,13 +5,13 @@
     Subscribe,
     createRender,
     // createRender,
-    createTable
+    createTable,
   } from 'svelte-headless-table';
   import {
     addHiddenColumns,
     addPagination,
     addSortBy,
-    addTableFilter
+    addTableFilter,
   } from 'svelte-headless-table/plugins';
   import ArrowUpDown from 'lucide-svelte/icons/arrow-up-down';
   import ArrowRight from 'lucide-svelte/icons/chevron-right';
@@ -50,43 +50,43 @@
     sort: addSortBy({ disableMultiSort: true }),
     page: addPagination(),
     filter: addTableFilter({
-      fn: ({ filterValue, value }) => value.includes(filterValue)
+      fn: ({ filterValue, value }) => value.includes(filterValue),
     }),
-    hide: addHiddenColumns()
+    hide: addHiddenColumns(),
   });
 
   const columns = table.createColumns([
     table.column({
       header: '#',
-      accessor: 'id'
+      accessor: 'id',
     }),
     table.column({
       header: 'Name',
-      accessor: 'link'
+      accessor: 'link',
     }),
     table.column({
       header: 'Author',
       accessor: (data) => data,
       cell: ({ value }) => {
         return createRender(AuthorDisplay, {
-          data: value
+          data: value,
         });
-      }
+      },
     }),
     table.column({
       header: 'Stars',
       accessor: 'stars',
       cell: ({ value }) => {
         return value;
-      }
+      },
     }),
     table.column({
       header: 'Forks',
       accessor: 'forks',
       cell: ({ value }) => {
         return value;
-      }
-    })
+      },
+    }),
     // table.column({
     //   header: '',
     //   accessor: (data) => data,
@@ -96,15 +96,20 @@
     // }),
   ]);
 
-  const { headerRows, pageRows, tableAttrs, tableBodyAttrs, flatColumns, pluginStates, rows } =
-    table.createViewModel(columns);
+  const {
+    headerRows,
+    pageRows,
+    tableAttrs,
+    tableBodyAttrs,
+    flatColumns,
+    pluginStates,
+    rows,
+  } = table.createViewModel(columns);
 
   const { hiddenColumnIds } = pluginStates.hide;
   const ids = flatColumns.map((c) => c.id);
   let hideForId = Object.fromEntries(ids.map((id) => [id, true]));
 
-  const { filterValue } = pluginStates.filter;
-
   function goToPage(page: number) {
     const url = new URL(window.location.href);
     url.searchParams.set('page', page.toString());
@@ -166,8 +171,16 @@
           <Subscribe rowAttrs={headerRow.attrs()}>
             <Table.Row>
               {#each headerRow.cells as cell (cell.id)}
-                <Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
-                  <Table.Head {...attrs} class={cn('[&:has([role=checkbox])]:pl-3')}>
+                <Subscribe
+                  attrs={cell.attrs()}
+                  let:attrs
+                  props={cell.props()}
+                  let:props
+                >
+                  <Table.Head
+                    {...attrs}
+                    class={cn('[&:has([role=checkbox])]:pl-3')}
+                  >
                     {#if cell.id === 'stars' || cell.id === 'forks'}
                       <Button
                         variant="ghost"
@@ -176,9 +189,11 @@
                       >
                         <Render of={cell.render()} />
                         <ArrowUpDown
-                          class="ml-2 h-4 w-4 {apiMetadata.sort.sortBy === cell.id &&
+                          class="ml-2 h-4 w-4 {apiMetadata.sort.sortBy ===
+                            cell.id &&
                             apiMetadata.sort.order === 'asc' &&
-                            'text-green-500'} {apiMetadata.sort.sortBy === cell.id &&
+                            'text-green-500'} {apiMetadata.sort.sortBy ===
+                            cell.id &&
                             apiMetadata.sort.order === 'desc' &&
                             'text-red-500'}"
                         />
@@ -207,11 +222,18 @@
                         class="text-right font-medium underline"
                         target="_blank"
                       >
-                        <Render of={extractLastSegment(cell.render() || '') || 'Unknown'} />
+                        <Render
+                          of={extractLastSegment(cell.render() || '') ||
+                            'Unknown'}
+                        />
                       </a>
                     {:else if cell.id === 'author_avatar'}
                       <div class="w-[30px]">
-                        <img src={`${cell.render()}`} class="rounded-full" alt="" />
+                        <img
+                          src={`${cell.render()}`}
+                          class="rounded-full"
+                          alt=""
+                        />
                       </div>
                     {:else}
                       <Render of={cell.render()} />
@@ -261,8 +283,8 @@
         variant="outline"
         size="sm"
         on:click={onLastPage}
-        disabled={apiMetadata.pagination.currentPage === apiMetadata.pagination.totalPages ||
-          isFetching}
+        disabled={apiMetadata.pagination.currentPage ===
+          apiMetadata.pagination.totalPages || isFetching}
       >
         Last page
       </Button>