added scrollbar plugin and implemented it

ryuuzu · Aug 29, 2023 · e1c36c2 · e1c36c2
1 parent 34cc200
commit e1c36c2
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "devDependencies": {
         "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
         "@types/react-syntax-highlighter": "^15.5.7",
-        "prettier": "3.0.1"
+        "prettier": "3.0.1",
+        "tailwind-scrollbar": "^3.0.5"
     }
 }
diff --git a/src/app/credits/page.tsx b/src/app/credits/page.tsx
@@ -8,7 +8,7 @@ export default function Credits() {
         <main
             className={`flex min-h-screen w-full flex-col items-center sm:items-stretch md:flex-row`}
         >
-            <div className="w-full flex-grow overflow-auto bg-white px-5 py-3 text-primary sm:min-h-screen sm:py-10 md:max-h-screen md:w-3/5">
+            <div className="w-full flex-grow overflow-auto bg-white px-5 py-3 text-primary sm:min-h-screen sm:py-10 md:max-h-screen md:w-3/5 scrollbar-thumb-primary scrollbar-thin scrollbar-thumb-rounded-full">
                 <Header
                     title="Utsav Gurmachhan Magar"
                     subTitle="Website Credits"

diff --git a/src/app/hallofcodes/page.tsx b/src/app/hallofcodes/page.tsx
@@ -68,7 +68,7 @@ export default function HallOfCodes() {
         <main
             className={`flex min-h-screen w-full flex-col items-center sm:items-stretch md:flex-row`}
         >
-            <div className="w-full flex-grow overflow-auto bg-white px-5 py-3 text-primary sm:min-h-screen sm:py-10 md:max-h-screen md:w-3/5">
+            <div className="w-full flex-grow overflow-auto bg-white px-5 py-3 text-primary sm:min-h-screen sm:py-10 md:max-h-screen md:w-3/5 scrollbar-thumb-primary scrollbar-thin scrollbar-thumb-rounded-full">
                 <Header
                     title="Utsav Gurmachhan Magar"
                     subTitle="Hall of Codes"

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -21,7 +21,7 @@ export default function RootLayout({
 }) {
     return (
         <html lang="en">
-            <body className={dmSans.className}>{children}</body>
+            <body className={`${dmSans.className}`}>{children}</body>
         </html>
     );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -67,12 +67,15 @@ export default function Home() {
         <main
             className={`flex min-h-screen w-full flex-col items-center sm:items-stretch md:flex-row`}
         >
-            <div className="w-full flex-grow overflow-auto bg-white px-5 py-3 text-primary sm:min-h-screen sm:py-10 md:max-h-screen md:w-3/5">
+            <div className="w-full flex-grow overflow-auto bg-white px-5 py-3 text-primary sm:min-h-screen sm:py-10 md:max-h-screen md:w-3/5 scrollbar-thumb-primary scrollbar-thin scrollbar-thumb-rounded-full">
                 <Header
                     title="Utsav Gurmachhan Magar"
                     subTitle="Back-end Developer"
                 />
-                <WorkExperiences workExperiences={workExperiences} isLoading={isWorkExperiencesLoading} />
+                <WorkExperiences
+                    workExperiences={workExperiences}
+                    isLoading={isWorkExperiencesLoading}
+                />
                 <CvSeparator />
                 <Projects projects={projects} isLoading={isProjectsLoading} />
                 <CvSeparator />

diff --git a/src/components/Project.tsx b/src/components/Project.tsx
@@ -97,15 +97,14 @@ export const Projects = ({
                         {projects?.map((repo, index) => {
                             if (!repo) return null;
                             return (
-                                <>
-                                    <Project
-                                        project={repo}
-                                        key={`${repo.repoData.owner}/${repo.repoData.repo}`}
-                                    />
+                                <div
+                                    key={`${repo.repoData.owner}/${repo.repoData.repo}`}
+                                >
+                                    <Project project={repo} />
                                     {index < projects.length - 1 && (
                                         <div className="projects-separator my-5 border-b border-dotted border-tertiary"></div>
                                     )}
-                                </>
+                                </div>
                             );
                         })}
                     </>

diff --git a/src/services/RyuuApiService.ts b/src/services/RyuuApiService.ts
@@ -5,7 +5,7 @@ import { WorkExperience } from "../../@types/WorkExperience";
 
 export class RyuuApiService {
     public async preApiCall(): Promise<void> {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
+        await new Promise((resolve) => setTimeout(resolve, 500));
     }
 
     public async getSocialLinks(): Promise<SocialLink[]> {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -23,5 +23,5 @@ module.exports = {
             },
         },
     },
-    plugins: [],
+    plugins: [require("tailwind-scrollbar")({ nocompatible: true })],
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,5 +23,5 @@ module.exports = { @@
                 },
             },
         },
-        plugins: [],
+        plugins: [require("tailwind-scrollbar")({ nocompatible: true })],
     };