Merge pull request #6 from Valimp/darkmode

feat: darkmode
Valimp · Apr 5, 2024 · de08da7 · de08da7
2 parents ef5e59e + d1a86a2
commit de08da7
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Valimp | Développeur</title>
   </head>
-  <body class="bg-white-default">
+  <body class="bg-white-default dark:bg-gray-dark">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,7 +6,7 @@ function App() {
   return (
     <PageLayout>
       <Routes>
-        <Route path='/' element={<Homepage />} />
+        <Route path='/' element={<Homepage/>} />
       </Routes>
     </PageLayout>
   )

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 const Card = ({children, url}: {children: ReactNode, url: string}) => {
 
     return (
-        <a target='_blank' href={url} className='bg-gray-light hover:bg-gray-light/60 shadow-lg rounded-lg p-5 duration-300 flex flex-col justify-center items-start'>
+        <a target='_blank' href={url} className='bg-gray-light hover:bg-gray-light/60 dark:bg-gray-dark dark:hover:bg-gray-dark/60 shadow-lg rounded-lg p-5 duration-300 flex flex-col justify-center items-start'>
             {children}
         </a>
     )

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,7 +2,7 @@ import TextButton from "./TextButton"
 
 const Navbar = (props: any) => {
     return (
-        <header className="h-16 w-full shadow backdrop-blur-lg bg-opacity-70 bg-white-default sticky top-0 flex justify-center items-center gap-5">
+        <header className="h-16 w-full shadow backdrop-blur-lg bg-opacity-70 dark:bg-opacity-70 bg-white-default dark:bg-gray-dark sticky top-0 flex justify-center items-center gap-5">
             <a href="/">
                 <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Animals/Beetle.png" alt="Beetle" width="25" height="25" />
             </a>

diff --git a/src/components/Title.tsx b/src/components/Title.tsx
@@ -6,7 +6,7 @@ interface TitleProps {
 
 const Title = ({children}: TitleProps) => {
   return (
-    <h3 className="font-extrabold text-2xl my-5 inline-block text-gray-dark mb-6">
+    <h3 className="font-extrabold text-2xl my-5 inline-block text-gray-dark dark:text-gray-light mb-6">
         {children}
         <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-[3px] bg-gradient-to-r from-green-default to-green-dark rounded"></span>
     </h3>

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react'
+
 import Article from '../components/Article'
 import Title from '../components/Title'
 import Image from '../components/Image'
@@ -7,13 +9,31 @@ import Badge from '../components/Badge'
 import { FaLinkedin } from "react-icons/fa";
 import { FaGithub } from "react-icons/fa";
 import { IoIosMail } from "react-icons/io";
+import { IoIosSunny } from "react-icons/io";
+import { IoMdMoon } from "react-icons/io";
 
 const HomePage = () => {
+
+  const [darkMode, setDarkMode] = useState(false)
+
+  const toggleDarkMode = () => {
+    const html = document.documentElement;
+    html.classList.toggle('dark');
+    setDarkMode(!darkMode)
+  }
+
   return (
-    <>
+    <div className={`${darkMode ? "dark" : "light"}`}>
+      <button onClick={toggleDarkMode} className={`hover:animate-spin-slow fixed bottom-5 right-5 p-1 border-[1.5px] rounded-full ${darkMode ? "border-white-default" : "border-gray-dark"}`}>
+        { darkMode ? 
+          <IoIosSunny size={25} className='text-white-default'/>
+          :
+          <IoMdMoon size={25} className='text-gray-dark'/>
+        }
+      </button>
       <div className="w-full h-[250px] self-center bg-cover bg-center" style={{ backgroundImage: "url(/forest.jpg)" }}></div>
       <span className="sm:text-4xl text-2xl mt-8 text-gray-default">Bonjour ! Je suis</span>
-      <h2 className="sm:text-5xl text-3xl mt-8 font-extrabold text-gray-dark">Valentin Chauvet</h2>
+      <h2 className="sm:text-5xl text-3xl mt-8 font-extrabold text-gray-dark dark:text-gray-light">Valentin Chauvet</h2>
       <h3 className="sm:text-4xl text-2xl mt-8 font-black bg-gradient-to-r from-green-default to-green-dark inline-block bg-clip-text text-transparent">un développeur web éco-responsable</h3>
       <img className="self-center mt-10" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/People%20with%20professions/Man%20Technologist%20Light%20Skin%20Tone.png" alt="Man Technologist Light Skin Tone" width="175" height="175" />
       <Article id="about">
@@ -44,17 +64,17 @@ const HomePage = () => {
         <div className='grid lg:grid-cols-2 grid-cols-1 gap-5'>
           <Card url='https://github.com/Valimp/vite-react-ts'>
             <Image src='/project1.jpg' alt="project1" width="400" height="250" />
-            <h3 className='text-gray-dark mt-3 text-xl font-bold'>Mon portfolio</h3>
+            <h3 className='text-gray-dark dark:text-gray-light mt-3 text-xl font-bold'>Mon portfolio</h3>
             <p className='text-gray-default mt-2'>Vous y êtes ! Il est beau n'est ce pas ? Restez autant que vous le voudrez.</p>
           </Card>
           <Card url='https://github.com/openfoodfacts/nutripatrol-frontend'>
             <Image src='/project2.jpg' alt="project2" width="400" height="250" />
-            <h3 className='text-gray-dark mt-3 text-xl font-bold'>L'interface Nutripatrol</h3>
+            <h3 className='text-gray-dark dark:text-gray-light mt-3 text-xl font-bold'>L'interface Nutripatrol</h3>
             <p className='text-gray-default mt-2'>Une interface de moderation de tickets. Et opensource s'il vous plait !</p>
           </Card>
           <Card url='https://github.com/openfoodfacts/nutripatrol'>
             <Image src='/project3.jpg' alt="project3" width="400" height="250"/>
-            <h3 className='text-gray-dark mt-3 text-xl font-bold'>L' API Nutripatrol</h3>
+            <h3 className='text-gray-dark dark:text-gray-light mt-3 text-xl font-bold'>L' API Nutripatrol</h3>
             <p className='text-gray-default mt-2'>J'avais dis développeur fullstack, alors je développe aussi des APIs.</p>
           </Card>
         </div>
@@ -73,7 +93,7 @@ const HomePage = () => {
           </Badge>
         </div>
       </Article>
-    </>
+    </div>
   )
 }
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -23,8 +23,13 @@ export default {
     fontFamily: {
       poppins: ['Poppins', 'sans-serif'],
     },
-    extend: {},
+    extend: {
+      animation: {
+        'spin-slow': 'spin 3s linear infinite',
+      }
+    },
   },
   plugins: [],
+  darkMode: 'class',
 }