dark mode 🌙

karimhossenbux · Mar 20, 2021 · a5a5b02 · a5a5b02
1 parent 3df44d4
commit a5a5b02
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 11 deletions.
diff --git a/components/About.js b/components/About.js
@@ -10,14 +10,14 @@ const About = (props) => {
           <h1 className="text-lg md:text-3xl font-extrabold tracking-tight">
             {info.name}
           </h1>
-          <h2 className="text-xs uppercase font-medium text-gray-500">
+          <h2 className="text-xs uppercase font-bold text-green-500">
             {info.label}
           </h2>
         </div>
 
         <img className="my-2 mx-4 w-16 rounded-full ring-4 ring-green-400 ring-offset-2" src={info.image} alt={`Picture of ${info.name}`} />
 
-        <div className="m-2 text-xs text-gray-600">
+        <div className="m-2 text-xs text-gray-500">
           <div>
             {info.email}
           </div>

diff --git a/components/DarkMode.js b/components/DarkMode.js
@@ -1,7 +1,23 @@
+import {useTheme} from 'next-themes'
+
 const DarkMode = () => {
+
+  const {theme, setTheme} = useTheme()
+
   return (
-    <svg class="absolute cursor-pointer top-2 right-2 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+    <svg
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="absolute cursor-pointer top-2 right-2 w-6 h-6"
+      fill="none" stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          fill="#fff"
+          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+        ></path>
     </svg>
   )
 }

diff --git a/components/Item.js b/components/Item.js
@@ -3,7 +3,7 @@ import Title from './Title'
 
 const Item = (props) => {
   return (
-      <div className="mb-4 pl-4 border-l-4 border-gray-200">
+      <div className="mb-4 pl-4 border-l-4 border-gray-200 dark:border-gray-600">
         <div className="tracking-tight flex items-baseline justify-between">
           <div>
             <span className="font-extrabold mr-1">{props.title}</span>

diff --git a/components/Skills.js b/components/Skills.js
@@ -15,7 +15,10 @@ const Skills = (props) => {
               {item.name}
             </h3>
             {item.keywords.map((keyword, kindex) => 
-              <span className="inline-flex mr-2 text-xs font-semibold text-opacity-70 text-black border rounded border-purple-100 px-1 bg-purple-50" key={kindex}>
+              <span
+                className="inline-flex mr-2 text-xs font-semibold text-opacity-70 text-black border px-1 rounded border-purple-100 bg-purple-50 dark:border-gray-900 dark:bg-gray-600"
+                key={kindex}
+              >
                 {keyword}
               </span>
             )}

diff --git a/data/resume.json b/data/resume.json
@@ -1,7 +1,7 @@
 {
   "basics": {
     "name": "Karim Hossenbux",
-    "label": "Developer",
+    "label": "Developer / semi-designer",
     "image": "https://pbs.twimg.com/profile_images/841284898803470336/7MtFNRui_400x400.jpg",
     "email": "[email protected]",
     "phone": "+34 620 588 797",
@@ -31,7 +31,7 @@
       "highlights": [],
       "position": "Full-Stack Developer",
       "startDate": "2018/03",
-      "summary": null,
+      "summary": "",
       "website": "https://www.ef.com"
     },
     {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "next": "10.0.9",
+    "next-themes": "^0.0.14",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   },

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,7 +1,12 @@
+import { ThemeProvider } from 'next-themes'
 import '../styles/globals.css'
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <ThemeProvider attribute="class">
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
 }
 
 export default MyApp
diff --git a/pages/_document.js b/pages/_document.js
@@ -8,7 +8,7 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html className="">
+      <Html>
         <Head />
         <body className="dark:bg-gray-900">
           <Main />

diff --git a/pages/index.js b/pages/index.js
@@ -10,7 +10,6 @@ import { getResume } from '../utils/resume'
 
 export default function Home() {
   const resume = getResume()
-  console.log(resume)
 
   return (
     <div className="relative">