feat: color fixes

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>

frontend/src/app/blog/page.tsx

@@ -76,7 +76,7 @@ export default async function BlogList() {
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
           {articles.map((article, idx) => (
             <Link key={idx} href={`/blog${article.link}`}>
-              <div className="p-6 rounded-lg border flex flex-col justify-between hover:text-red-500 hover:shadow-2xl transition-shadow duration-500 ease-in-out h-[180px] md:h-[300px]">
+              <div className="p-6 rounded-lg border flex flex-col justify-between hover:text-red-500 hover:shadow-2xl dark:shadow-white transition-shadow duration-500 ease-in-out h-[180px] md:h-[300px]">
                 <p
                   className={`text-sm font-semibold mb-2"
                     }`}

frontend/src/app/layout.tsx

@@ -58,7 +58,7 @@ export default function RootLayout({
       >
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
+          defaultTheme="light"
           enableSystem
           disableTransitionOnChange
         >

frontend/src/app/portfolio/page.tsx

@@ -15,7 +15,8 @@ export default async function Portfolio() {
   // }
   // console.log(ip, isIndianVisitor);
 
-  const skillsLeft = {
+  const skills = {
+    left: {
       "Programming Languages": {
         Python: "vscode-icons:file-type-python",
         JavaScript: "vscode-icons:file-type-js-official",
@@ -48,8 +49,8 @@ export default async function Portfolio() {
         // Hetzner: "simple-icons:hetzner",
         Cloudflare: "devicon:cloudflare",
       },
-  };
+    },
-  const skillsRight = {
+    right: {
       "Web Frameworks": {
         FastAPI: "devicon:fastapi",
         Django: "material-icon-theme:django",
@@ -88,6 +89,7 @@ export default async function Portfolio() {
         Marathi: "",
         Konkani: "",
       },
+    },
   };
 
   const workExperience = [
@@ -148,10 +150,8 @@ export default async function Portfolio() {
       <div className="">
         <div className="uppercase tracking-[0.2em] text-gray-500 dark:text-gray-100 flex items-center justify-between pb-20">
           <div>About Me</div>
-          <Link
+          <Link href="https://resume.codingcoffee.me">
-            href="https://resume.codingcoffee.me"
+            <div className="flex border-gray-200 border-2 p-2 rounded-full pointer-cursor">
-          >
-            <div className="flex border-gray-200 border-2 p-2 pointer-cursor underline">
               Resume
               <Download />
             </div>
@@ -214,42 +214,28 @@ export default async function Portfolio() {
         <div className="md:w-[40vw] w-[95vw] md:min-w-3xl">
           <div className="text-3xl pb-10 gap-10">Key Skills</div>
           <div className="grid grid-cols-1 md:grid-cols-2">
+            {Object.entries(skills).map(([_, sideMap]) => (
               <div>
-              {Object.entries(skillsLeft).map(([topic, skillsMap]) => (
+                {Object.entries(sideMap).map(([topic, skillsMap]) => (
                   <div key={topic}>
                     <div className="text-xl pb-5">{topic}</div>
                     <div className="flex items-center flex-wrap pb-5 gap-2">
                       {Object.entries(skillsMap).map(([language, icon]) => (
                         <span
                           key={language}
-                        className="flex items-center bg-red-50 dark:bg-red-900 px-3 py-1 rounded-full text-gray-700 dark:text-white gap-2"
+                          className="flex items-center px-3 py-1 rounded-full gap-2"
                         >
-                        <Icon icon={icon} className="inline-block" /> {language}
+                          <Icon icon={icon} className="inline-block" />{" "}
+                          {language}
                         </span>
                       ))}
                     </div>
                   </div>
                 ))}
               </div>
-            <div>
-              {Object.entries(skillsRight).map(([topic, skillsMap]) => (
-                <div key={topic}>
-                  <div className="text-xl pb-5">{topic}</div>
-                  <div className="flex items-center flex-wrap pb-5 gap-2">
-                    {Object.entries(skillsMap).map(([language, icon]) => (
-                      <span
-                        key={language}
-                        className="flex items-center bg-red-50 dark:bg-red-900 px-3 py-1 rounded-full text-gray-700 dark:text-white gap-2"
-                      >
-                        <Icon icon={icon} className="inline-block" /> {language}
-                      </span>
             ))}
           </div>
         </div>
-              ))}
-            </div>
-          </div>
-        </div>
       </div>
     </main>
   );

frontend/src/components/ModeToggle.tsx

@@ -13,28 +13,23 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 export function ModeToggle() {
-  const { setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
 
   return (
-    <DropdownMenu>
+    <div>
-      <DropdownMenuTrigger asChild>
+      <Button
-        <Button variant="outline" size="icon">
+        variant="outline"
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+        size="icon"
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+        onClick={() => {
-          <span className="sr-only">Toggle theme</span>
+          if (resolvedTheme == "light") {
+            setTheme("dark");
+          } else {
+            setTheme("light");
+          }
+        }}
+      >
+        {resolvedTheme === "dark" ? <Moon /> : <Sun />}
       </Button>
-      </DropdownMenuTrigger>
+    </div>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
   );
 }

frontend/src/components/Navbar.tsx

@@ -70,7 +70,7 @@ export function NavigationMenu() {
       </Link>
       */}
       </div>
-      <div className="fixed md:right-1/3 right-2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
+      <div className="fixed md:right-2 right-2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
         <ModeToggle />
       </div>
     </div>