app/layout.tsx

@@ -73,9 +73,7 @@ export default function RootLayout({
         <Providers themeProps={{ attribute: "class", defaultTheme: "kudos" }}>
           <div className="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-default from-0% to-background to-80% relative flex flex-col h-screen">
             <Navbar />
-            <main className="container mx-auto max-w-7xl py-16 px-6 flex-grow">
-              {children}
-            </main>
+            <main className="py-16 flex-grow">{children}</main>
             <footer className="py-6 px-6 md:px-8 md:py-0">
               <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
                 <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">

app/page.tsx

@@ -27,24 +27,24 @@ export default async function Home({ searchParams }: IHomeProps) {
   };
 
   return (
-    <div>
-      <section className="flex flex-col items-center text-center pt-10 pb-20">
+    <>
+      <section className="flex flex-col items-center text-center pt-10 pb-24 px-6 container mx-auto max-w-7xl">
         <h1 className={title()}>Find Collaborations,</h1>
         <h1 className={title()}>Collect Kudos</h1>
       </section>
       <CtaBanner />
-      <div className="flex flex-col gap-4 pt-10">
+      <div className="flex flex-col pt-10">
         <Toolbar searchParams={searchParams} />
-        <div>
+        <section className="px-6 container mx-auto max-w-7xl">
           <ContributionsTable
             items={items}
             queries={{
               page_size: 10,
               filter,
             }}
           />
-        </div>
+        </section>
       </div>
-    </div>
+    </>
   );
 }

components/contributions-table/row.tsx

@@ -7,7 +7,7 @@ import { useState, useRef, useEffect } from "react";
 const MAX_LABEL_WIDTH = 192;
 
 interface IProjectProps {
-  avatarSrc: string;
+  avatarSrc: string | null;
   name: string;
   repository: string;
 }
@@ -25,20 +25,22 @@ export const Project = ({ avatarSrc, name, repository }: IProjectProps) => {
 
 interface IAvatarProps {
   alt: string;
-  src: string;
+  src: string | null;
 }
 
 const Avatar = ({ alt, src }: IAvatarProps) => {
   return (
     <div className="bg-foreground rounded-md min-w-[45px] shrink-0">
-      <MyImage
-        className="border"
-        src={src}
-        alt={alt}
-        radius="sm"
-        height={45}
-        width={45}
-      />
+      {src !== null && (
+        <MyImage
+          className="border"
+          src={src}
+          alt={alt}
+          radius="sm"
+          height={45}
+          width={45}
+        />
+      )}
     </div>
   );
 };

components/contributions-table/table.tsx

@@ -132,18 +132,15 @@ export const Table = ({ items, queries = {} }: ITableProps) => {
 
   return (
     <>
-      <div className="py-4 px-3 bg-default-100 border-small rounded-t-md">
-        <span className="text-lg font-bold">Good First Contributions</span>
-      </div>
       <NuiTable
         hideHeader
         aria-label="Example table with infinite pagination"
         classNames={{
           table:
-            "w-full max-w-7xl border-spacing-0 rounded-b-md overflow-hidden",
+            "w-full bg-gradient-to-r from-background to-background-200 to-80% max-w-7xl border-spacing-0 rounded-b-md overflow-hidden",
           wrapper:
             "bg-background overflow-visible p-0 rounded-none border-small rounded-b-md",
-          tr: "relative bg-gradient-to-r from-background to-background-200 to-80% border-y-small border-y-overlay before:content-[''] before:absolute before:bg-hover-overlay before:opacity-0 before:w-full before:h-full before:transition-opacity before:duration-300 before:ease-in-out hover:before:opacity-100",
+          tr: "relative bg-red border-y-small border-y-overlay before:content-[''] before:absolute before:bg-hover-overlay before:opacity-0 before:w-full before:h-full before:transition-opacity before:duration-300 before:ease-in-out sm:before:max-h-[88px] md:before:max-h-[62px] hover:before:opacity-100",
           td: "px-2 sm:px-inherit",
         }}
       >

components/filters/toolbar.tsx

@@ -5,14 +5,19 @@ import {
   PROJECTS_OPTIONS,
 } from "@/data/filters";
 import { useFilters } from "@/hooks/useFilters";
+import useSticky from "@/hooks/useSticky";
 import { SearchParams } from "@/types/filters";
 import ClearFilters from "./clear-filters";
 import SelectFilter from "./select-filter";
+import { useRef } from "react";
 interface IToolbarProps {
   searchParams: SearchParams;
 }
 
 const Toolbar = ({ searchParams }: IToolbarProps) => {
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const isToolbarSticky = useSticky(toolbarRef);
+
   const { filters, updateFilter, clearFilter, clearAllFilters } = useFilters({
     initialParams: searchParams,
   });
@@ -27,34 +32,46 @@ const Toolbar = ({ searchParams }: IToolbarProps) => {
   const numberOfFilters = Object.keys(filters).length;
 
   return (
-    <div className="flex flex-col gap-4 items-start overflow-hidden lg:flex-row lg:items-center">
-      <div className="flex flex-nowrap overflow-x-auto gap-4 w-full sm:w-auto">
-        <SelectFilter
-          placeholder="Languages"
-          mainEmoji="🌐"
-          options={LANGUAGES_OPTIONS}
-          selectedKey={filters.languages}
-          onSelect={handleSelect("languages")}
-        />
-        <SelectFilter
-          placeholder="Interests"
-          mainEmoji="🪄"
-          options={INTERESTS_OPTIONS}
-          selectedKey={filters.interests}
-          onSelect={handleSelect("interests")}
-        />
-        <SelectFilter
-          placeholder="Projects"
-          mainEmoji="🖥️"
-          options={PROJECTS_OPTIONS}
-          selectedKey={filters.projects}
-          onSelect={handleSelect("projects")}
-        />
-      </div>
+    <div
+      className={`sticky top-0 z-10 bg-background ${
+        isToolbarSticky ? "bg-background" : "bg-transparent"
+      }`}
+      ref={toolbarRef}
+    >
+      <div className="container mx-auto max-w-7xl px-6 pt-6 flex flex-col gap-4">
+        <div className="flex flex-col gap-4 items-start overflow-hidden lg:flex-row lg:items-center">
+          <div className="flex flex-nowrap overflow-x-auto gap-4 w-full sm:w-auto">
+            <SelectFilter
+              placeholder="Languages"
+              mainEmoji="🌐"
+              options={LANGUAGES_OPTIONS}
+              selectedKey={filters.languages}
+              onSelect={handleSelect("languages")}
+            />
+            <SelectFilter
+              placeholder="Interests"
+              mainEmoji="🪄"
+              options={INTERESTS_OPTIONS}
+              selectedKey={filters.interests}
+              onSelect={handleSelect("interests")}
+            />
+            <SelectFilter
+              placeholder="Projects"
+              mainEmoji="🖥️"
+              options={PROJECTS_OPTIONS}
+              selectedKey={filters.projects}
+              onSelect={handleSelect("projects")}
+            />
+          </div>
 
-      {numberOfFilters > 1 && (
-        <ClearFilters onClear={clearAllFilters} value="Clear all filters" />
-      )}
+          {numberOfFilters > 1 && (
+            <ClearFilters onClear={clearAllFilters} value="Clear all filters" />
+          )}
+        </div>
+        <div className="py-4 px-3 bg-default-100 border-small rounded-t-md">
+          <span className="text-lg font-bold">Good First Contributions</span>
+        </div>
+      </div>
     </div>
   );
 };

components/navbar.tsx

@@ -15,7 +15,7 @@ import { SITE_CONFIG } from "@/data/config";
 
 export const Navbar = () => {
   return (
-    <NextUINavbar maxWidth="xl" position="sticky" isBordered>
+    <NextUINavbar maxWidth="xl" position="static" isBordered>
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
         <NavbarBrand as="li" className="gap-3 max-w-fit">
           <NextLink className="flex justify-start items-center gap-1" href="/">

data/config.ts

@@ -7,7 +7,8 @@ export const SITE_CONFIG = {
     twitter: "https://twitter.com/kudos_ink",
     bugReport:
       "https://github.com/kudos-ink/portal/issues/new?assignees=&labels=bug&projects=&template=bug_report.yml&title=",
-    includeProject: "https://github.com/kudos-ink/portal/issues",
+    includeProject:
+      "https://github.com/kudos-ink/repository-classification/issues/new?labels=new-project&template=NEW_PROJECT.yaml&title=%5BAdd%5D%3A+",
   },
 };
 

hooks/useSticky.tsx

@@ -0,0 +1,25 @@
+import { useState, useEffect, RefObject } from "react";
+
+const useSticky = (ref: RefObject<HTMLElement>) => {
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (ref.current) {
+        const boundingRect = ref.current.getBoundingClientRect();
+        const isElementTopAboveViewport = boundingRect.top <= 0;
+        setIsSticky(isElementTopAboveViewport);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref]);
+
+  return isSticky;
+};
+
+export default useSticky;

types/contribution.ts

@@ -2,7 +2,7 @@ import { PaginatedCustomDataResponse } from ".";
 
 export type Contribution = {
   id: number;
-  avatar: string;
+  avatar: string | null;
   labels: string[];
   languages: string[];
   project: string;

utils/github.ts

@@ -3,9 +3,7 @@ import { ProjectLogoImages } from "@/lib/notion/types";
 export function getImagePath(
   githubUrl: string,
   projectLogos: ProjectLogoImages,
-): string {
-  return (
-    "/images/" + projectLogos[githubUrl] ||
-    "https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
-  );
+): string | null {
+  const endpoint = projectLogos[githubUrl];
+  return endpoint ? "/images/" + endpoint : null;
 }