darkmode added from BartoszJarocki/cv#72

touhi99 · Jun 3, 2024 · 88b42d1 · 88b42d1
1 parent 3565bf1
commit 88b42d1
Show file tree

Hide file tree

Showing 8 changed files with 940 additions and 665 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "cmdk": "^0.2.0",
     "lucide-react": "^0.300.0",
     "next": "14.0.4",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { Inter } from "next/font/google";
 
 import "./globals.css";
 import React from "react";
+import { ThemeProvider } from "@/components/ui/theme-provider";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -23,8 +24,17 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={inter.className}>
-      <body>{children}</body>
-      <Analytics />
+      <body>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          {children}
+        </ThemeProvider>
+      </body>
+            <Analytics />
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -16,8 +16,8 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <main className="container relative mx-auto scroll-my-12 overflow-auto p-4 print:p-12 md:p-16">
-      <section className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-6">
+    <main className="relative mx-auto w-full scroll-my-12 overflow-auto p-4 print:p-12 md:p-16 dark:bg-gray-950">
+      <section className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-6 dark:bg-gray-950">
         <div className="flex items-center justify-between">
           <div className="flex-1 space-y-1.5">
             <h1 className="text-2xl font-bold">{RESUME_DATA.name}</h1>

diff --git a/src/components/command-menu.tsx b/src/components/command-menu.tsx
@@ -13,13 +13,15 @@ import {
 } from "@/components/ui/command";
 import { Button } from "./ui/button";
 import { CommandIcon } from "lucide-react";
+import { useTheme } from "next-themes";
 
 interface Props {
   links: { url: string; title: string }[];
 }
 
 export const CommandMenu = ({ links }: Props) => {
   const [open, setOpen] = React.useState(false);
+  const { theme, setTheme } = useTheme();
 
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
@@ -35,7 +37,7 @@ export const CommandMenu = ({ links }: Props) => {
 
   return (
     <>
-      <p className="fixed bottom-0 left-0 right-0 hidden border-t border-t-muted bg-white p-1 text-center text-sm text-muted-foreground print:hidden xl:block">
+      <p className="fixed bottom-0 left-0 right-0 hidden border-t border-t-muted bg-white p-1 text-center text-sm text-muted-foreground print:hidden xl:block dark:bg-gray-950">
         Press{" "}
         <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
           <span className="text-xs">⌘</span>J
@@ -63,6 +65,14 @@ export const CommandMenu = ({ links }: Props) => {
             >
               <span>Print</span>
             </CommandItem>
+            <CommandItem
+              onSelect={(prev) => {
+                theme === "dark" ? setTheme("light") : setTheme("dark");
+                setOpen(false);
+              }}
+            >
+              <span>Toggle Theme</span>
+            </CommandItem>
           </CommandGroup>
           <CommandGroup heading="Links">
             {links.map(({ url, title }) => (

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-lg bg-card text-card-foreground", className)}
+    className={cn("rounded-lg bg-card text-card-foreground dark:bg-secondary p-3", className)}
     {...props}
   />
 ));

diff --git a/src/components/ui/theme-provider.tsx b/src/components/ui/theme-provider.tsx
@@ -0,0 +1,6 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/src/data/resume-data.tsx b/src/data/resume-data.tsx
@@ -25,7 +25,7 @@ export const RESUME_DATA = {
   location: "Munich, Germany, CET",
   locationLink: "https://www.google.com/maps/place/Munich",
   about:
-    "NLP/AI Engineer, currently heavily focusing on LLM/Generative AI",
+    "NLP/AI Engineering Lead | Deep Expertise in LLMs and Generative AI Innovations",
   summary:
     "As an NLP Specialist, I transform business challenges into data-driven solutions. My expertise encompasses NLP, \
     ML, and LLMs. At Accenture, I am dedicated to developing Generative AI architecture that deliver innovative solutions",
@@ -136,10 +136,21 @@ export const RESUME_DATA = {
   ],
   projects: [
     {
-      title: "LLM Multi-Agent",
+      title: "A Voice-based LLM Crew Agent",
+      techStack: ["Python", "OpenAI", "Langchain", "CrewAI", "Streamlit", "Elevenlabs", "Crawler"],
+      description:
+        "A text/voice-based multi-agent system with RAG in specialized domain",
+      logo: BarepapersLogo,
+      link: {
+        label: "Github",
+        href: "https://github.com/touhi99/tldr-ai-news-crew",
+      },
+    },
+    {
+      title: "LLM Multi-Agent for Search",
       techStack: ["Python", "OpenAI", "Langchain", "Langgraph", "Streamlit"],
       description:
-        "Simple multi-agent system with external search api to search, analyze, generate content",
+        "Simple multi-agent system with external search API to search, analyze, generate content",
       logo: BarepapersLogo,
       link: {
         label: "Github",