feat: color fixes

Signed-off-by: Ameya Shenoy <shenoy.ameya@gmail.com>
2025-06-24 15:55:59 +05:30 · 2025-06-24 15:55:59 +05:30 · e51f83561a
commit e51f83561a
parent 0708f0600b
5 changed files with 112 additions and 131 deletions
--- a/frontend/src/app/blog/page.tsx
+++ b/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"
                    }`}
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@ -58,7 +58,7 @@ export default function RootLayout({
      >
        <ThemeProvider
          attribute="class"
-          defaultTheme="system"
+          defaultTheme="light"
          enableSystem
          disableTransitionOnChange
        >
--- a/frontend/src/app/portfolio/page.tsx
+++ b/frontend/src/app/portfolio/page.tsx
@ -15,78 +15,80 @@ export default async function Portfolio() {
  // }
  // console.log(ip, isIndianVisitor);

-  const skillsLeft = {
-    "Programming Languages": {
-      Python: "vscode-icons:file-type-python",
-      JavaScript: "vscode-icons:file-type-js-official",
-      TypeScript: "vscode-icons:file-type-typescript-official",
-      Golang: "material-icon-theme:go",
-    },
-    AI: {
-      LangChain: "simple-icons:langchain",
-      Livekit: "",
-      ElevenLabs: "simple-icons:elevenlabs",
-      Ollama: "simple-icons:ollama",
-      vllm: "",
-    },
-    Databases: {
-      Postgres: "devicon:postgresql",
-      Redis: "devicon:redis",
-      ClickHouse: "devicon:clickhouse",
-      etcd: "logos:etcd",
-      Meilisearch: "logos:meilisearch",
-      Typesense: "logos:typesense-icon",
-      qdrant: "logos:qdrant-icon",
-      MySQL: "logos:mysql-icon",
-    },
-    "Cloud Providers": {
-      AWS: "logos:aws",
-      "Microsoft Azure": "material-icon-theme:azure",
-      "Google Cloud Platform GCP": "material-icon-theme:gcp",
-      DigitalOcean: "devicon:digitalocean",
-      // Scaleway: "simple-icons:scaleway",
-      // Hetzner: "simple-icons:hetzner",
-      Cloudflare: "devicon:cloudflare",
-    },
-  };
-  const skillsRight = {
-    "Web Frameworks": {
-      FastAPI: "devicon:fastapi",
-      Django: "material-icon-theme:django",
-      "Next.js": "devicon:nextjs",
-      Flask: "simple-icons:flask",
-      ReactJS: "material-icon-theme:react",
+  const skills = {
+    left: {
+      "Programming Languages": {
+        Python: "vscode-icons:file-type-python",
+        JavaScript: "vscode-icons:file-type-js-official",
+        TypeScript: "vscode-icons:file-type-typescript-official",
+        Golang: "material-icon-theme:go",
+      },
+      AI: {
+        LangChain: "simple-icons:langchain",
+        Livekit: "",
+        ElevenLabs: "simple-icons:elevenlabs",
+        Ollama: "simple-icons:ollama",
+        vllm: "",
+      },
+      Databases: {
+        Postgres: "devicon:postgresql",
+        Redis: "devicon:redis",
+        ClickHouse: "devicon:clickhouse",
+        etcd: "logos:etcd",
+        Meilisearch: "logos:meilisearch",
+        Typesense: "logos:typesense-icon",
+        qdrant: "logos:qdrant-icon",
+        MySQL: "logos:mysql-icon",
+      },
+      "Cloud Providers": {
+        AWS: "logos:aws",
+        "Microsoft Azure": "material-icon-theme:azure",
+        "Google Cloud Platform GCP": "material-icon-theme:gcp",
+        DigitalOcean: "devicon:digitalocean",
+        // Scaleway: "simple-icons:scaleway",
+        // Hetzner: "simple-icons:hetzner",
+        Cloudflare: "devicon:cloudflare",
+      },
    },
+    right: {
+      "Web Frameworks": {
+        FastAPI: "devicon:fastapi",
+        Django: "material-icon-theme:django",
+        "Next.js": "devicon:nextjs",
+        Flask: "simple-icons:flask",
+        ReactJS: "material-icon-theme:react",
+      },

-    DevOps: {
-      Kubernetes: "material-icon-theme:kubernetes",
-      Ansible: "devicon:ansible",
-      Docker: "material-icon-theme:docker",
-      // Vagrant: "material-icon-theme:vagrant",
-      // "VMware ESXi": "carbon:logo-vmware",
-      Nomad: "devicon:nomad",
-      Terraform: "material-icon-theme:terraform",
-      Bash: "devicon:bash",
-      // Packer: "devicon:packer",
-      // "HashiCorp Vault": "devicon:vault",
-      Jenkins: "material-icon-theme:jenkins",
-      // KVM: "simple-icons:qemu",
-      // Nagios: null,
-      Prometheus: "devicon:prometheus",
-      Grafana: "devicon:grafana",
-      // InfluxDB: "devicon:influxdb",
-      Sentry: "material-icon-theme:sentry",
-      Kafka: "devicon:apachekafka",
-      // Selenium: "devicon:selenium",
-    },
-    Robotics: {
-      "Robot Operating System ROS": "devicon:ros",
-    },
-    "Spoken Languages": {
-      English: "",
-      Hindi: "",
-      Marathi: "",
-      Konkani: "",
+      DevOps: {
+        Kubernetes: "material-icon-theme:kubernetes",
+        Ansible: "devicon:ansible",
+        Docker: "material-icon-theme:docker",
+        // Vagrant: "material-icon-theme:vagrant",
+        // "VMware ESXi": "carbon:logo-vmware",
+        Nomad: "devicon:nomad",
+        Terraform: "material-icon-theme:terraform",
+        Bash: "devicon:bash",
+        // Packer: "devicon:packer",
+        // "HashiCorp Vault": "devicon:vault",
+        Jenkins: "material-icon-theme:jenkins",
+        // KVM: "simple-icons:qemu",
+        // Nagios: null,
+        Prometheus: "devicon:prometheus",
+        Grafana: "devicon:grafana",
+        // InfluxDB: "devicon:influxdb",
+        Sentry: "material-icon-theme:sentry",
+        Kafka: "devicon:apachekafka",
+        // Selenium: "devicon:selenium",
+      },
+      Robotics: {
+        "Robot Operating System ROS": "devicon:ros",
+      },
+      "Spoken Languages": {
+        English: "",
+        Hindi: "",
+        Marathi: "",
+        Konkani: "",
+      },
    },
  };

@ -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
-            href="https://resume.codingcoffee.me"
-          >
-            <div className="flex border-gray-200 border-2 p-2 pointer-cursor underline">
+          <Link href="https://resume.codingcoffee.me">
+            <div className="flex border-gray-200 border-2 p-2 rounded-full pointer-cursor">
              Resume
              <Download />
            </div>
@ -214,40 +214,26 @@ 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">
-            <div>
-              {Object.entries(skillsLeft).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>
-                    ))}
+            {Object.entries(skills).map(([_, sideMap]) => (
+              <div>
+                {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 px-3 py-1 rounded-full gap-2"
+                        >
+                          <Icon icon={icon} className="inline-block" />{" "}
+                          {language}
+                        </span>
+                      ))}
+                    </div>
                  </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>
      </div>
--- a/frontend/src/components/ModeToggle.tsx
+++ b/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>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div>
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => {
+          if (resolvedTheme == "light") {
+            setTheme("dark");
+          } else {
+            setTheme("light");
+          }
+        }}
+      >
+        {resolvedTheme === "dark" ? <Moon /> : <Sun />}
+      </Button>
+    </div>
  );
 }
--- a/frontend/src/components/Navbar.tsx
+++ b/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>