Monochrome bby

src/app/layout.tsx

@@ -16,11 +16,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className="antialiased bg-black">
-        <Background>
-          <div className="relative h-screen overflow-y-scroll">
+        {/* <Background> */}
+          {/* <div className="relative h-screen overflow-y-scroll"> */}
             {children}
-          </div>
-        </Background>
+          {/* </div> */}
+        {/* </Background> */}
       </body>
     </html>
   );

src/app/page.tsx

@@ -24,8 +24,8 @@ export default function App() {
             <p className="font-semibold text-gray-300">
               A 15 year old Software Engineer from Tirane, Albania, with 6 years
               of experience, specializing in full-stack web development, desktop
-              applications, TUI apps, and hacking. I also have a deep interest in
-              low-level programming.
+              applications, TUI apps, and hacking. I also have a deep interest
+              in low-level programming.
             </p>
 
             {/* Socials and skill */}
@@ -36,7 +36,7 @@ export default function App() {
                   <FontAwesomeIcon
                     icon={faGithub}
                     width={36}
-                    className="text-red"
+                    className="text-slate-300"
                   />
                 </a>
                 <a
@@ -46,14 +46,14 @@ export default function App() {
                   <FontAwesomeIcon
                     icon={faLinkedin}
                     width={36}
-                    className="text-red"
+                    className="text-slate-300"
                   />
                 </a>
                 <a href="https://www.instagram.com/kleo.dev/" target="blank_">
                   <FontAwesomeIcon
                     icon={faInstagram}
                     width={36}
-                    className="text-red"
+                    className="text-slate-300"
                   />
                 </a>
               </div>
@@ -70,16 +70,31 @@ export default function App() {
                 </div>
               </div>
             </div>
-            
-            <h1 className="text-red-400">Pinned Projects</h1>
+
+            <h1 className="text-slate-300">Pinned Projects</h1>
             <section className="">
               <PinnedRepos />
             </section>
             <section className="mt-8">
-              <GitHubCalendar username="kleo-dev" theme={{
-                light: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
-                dark: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
-              }} />
+              <GitHubCalendar
+                username="kleo-dev"
+                theme={{
+                  light: [
+                    "rgba(255, 255, 255, 0.1)",
+                    "rgba(255, 255, 255, 0.3)",
+                    "rgba(255, 255, 255, 0.5)",
+                    "rgba(255, 255, 255, 0.7)",
+                    "rgba(255, 255, 255, 1)",
+                  ],
+                  dark: [
+                    "rgba(255, 255, 255, 0.1)",
+                    "rgba(255, 255, 255, 0.3)",
+                    "rgba(255, 255, 255, 0.5)",
+                    "rgba(255, 255, 255, 0.7)",
+                    "rgba(255, 255, 255, 1)",
+                  ],
+                }}
+              />
             </section>
           </div>
         </div>