Merge pull request #8 from vncsmyrnk/6-add-dark-mode

6 add dark mode

app/src/App.js

@@ -1,5 +1,6 @@
 import './App.css';
 import Project from './Project';
+import DarkModeSwitch from './DarkModeSwitch';
 import { useInView } from 'react-intersection-observer'
 
 function App() {
@@ -30,46 +31,52 @@ public ResponseEntity<List<Calculation>> calculateDay(@Valid @RequestBody Reques
   const descriptionWTC = "This is an app built with Spring Boot and Gradle to calculate work time for a given parameter inputs";
 
   return (
-    <div className="App relative">
+    <div className="App relative bg-white dark:bg-gray-900 text-black dark:text-white">
       <div className="main-page h-screen flex flex-col" id="home">
-        <div className="header-section bg-white z-10 fixed top-0 right-0 left-0 pb-2 pr-[15%] pl-[15%]">
+        <div className="header-section bg-white dark:bg-gray-900 z-10 fixed top-0 right-0 left-0 pb-2 pr-[15%] pl-[15%]">
           <nav>
             <div class="flex flex-wrap items-center justify-between mx-auto pt-4">
               <span class="self-center text-4xl font-semibold whitespace-nowrap">~</span>
               <div class="hidden w-full md:block md:w-auto" id="navbar-default">
                 <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0">
                   <li>
-                    <a href="#home" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" aria-current="page">Home</a>
+                    <a href="#home" class="block py-2 px-3 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-900 md:p-0 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition duration-500 hover:scale-110" aria-current="page">Home</a>
                   </li>
                   <li>
-                    <a href="#projects" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Projects</a>
+                    <a href="#projects" class="block py-2 px-3 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-900 md:p-0 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition duration-500 hover:scale-110">Projects</a>
                   </li>
                   <li>
-                    <a href="#ai-projects" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">AI Projects</a>
+                    <a href="#ai-projects" class="block py-2 px-3 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-900 md:p-0 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition duration-500 hover:scale-110">AI Projects</a>
                   </li>
                   <li>
-                    <a href="#about-me" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About me</a>
+                    <a href="#about-me" class="block py-2 px-3 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-900 md:p-0 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition duration-500 hover:scale-110">About me</a>
                   </li>
                   <li>
-                    <a href="#contact" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
+                    <a href="#contact" class="block py-2 px-3 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-gray-900 md:p-0 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent transition duration-500 hover:scale-110">Contact</a>
+                  </li>
+                  <li>
+                    <DarkModeSwitch />
                   </li>
                 </ul>
               </div>
+              <div className="sm:hidden">
+                <DarkModeSwitch />
+              </div>
             </div>
           </nav>
         </div>
         <div className="content-section flex flex-col grow justify-center ml-8 pt-[100px] md:pt-0 mr-[15%] ml-[20%]">
           <div className="title-section text-right animate-[slideLeft_1s_ease-out]">
             <p className="main-sentence text-2xl md:text-7xl font-bold">Powering the digital world from behind the scenes</p>
-            <p className="description text-gray-800 text-xl md:text-4xl mt-4">I build scalable, secure, and seamless backend infrastructures</p>
+            <p className="description text-gray-800 dark:text-gray-300 text-xl md:text-4xl mt-4">I build scalable, secure, and seamless backend infrastructures</p>
           </div>
         </div>
         <div className="description-section mt-8 grow justify-center pr-5 md:pr-[20%] ml-5 md:ml-[15%] animate-[slideRight_1s_ease-out]">
-          <div className="description-text text-xl text-gray-800 pt-8 md:pt-0">
-            <p>I am <span className="underline">Vinicius Mayrink</span> and I am a backend developer specialized in crafting robust APIs using an arsenal of tools including Python, Java, and Node.js. With a deep understanding of backend principles and concepts, I am proficient in implementing SOLID principles, RESTful architecture, and clean code practices to engineer scalable and efficient solutions.</p>
+          <div className="description-text text-xl text-gray-800 dark:text-gray-400 pt-8 md:pt-0">
+            <p>I am <span className="underline">Vinicius Mayrink</span> and I am a backend developer specialized in crafting robust APIs using an arsenal of tools including <span className="text-blue-700 dark:text-blue-400 font-semibold">Python</span>, <span className="text-blue-700 dark:text-blue-400 font-semibold">Java</span>, and <span className="text-blue-700 dark:text-blue-400 font-semibold">Node.js</span>. With a deep understanding of backend principles and concepts, I am proficient in implementing <i>SOLID</i> principles, <i>RESTful</i> architecture, and <i>clean code</i> practices to engineer <strong>scalable</strong> and <strong>efficient</strong> solutions.</p>
           </div>
           <a href="#projects">
-            <button class="mt-8 bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">
+            <button class="mt-8 bg-blue-500 dark:bg-blue-700 hover:bg-blue-400 dark:hover:bg-blue-600 text-white font-bold py-2 px-4 border-b-4 border-blue-700 dark:border-blue-900 hover:border-blue-500 dark:hover:border-blue-700 rounded transition duration-500 hover:scale-110">
               Check it out
             </button>
           </a>
@@ -79,7 +86,7 @@ public ResponseEntity<List<Calculation>> calculateDay(@Valid @RequestBody Reques
         <div ref={refProjects} className={inViewProjects ? "animate-[upDown_1s_ease-out]" : "invisible"}>
           <div className="projects-section page-section pr-[5%] pl-[5%]">
             <p className="text-6xl font-bold mt-[60px] md:mt-0 md:mt-0">Projects</p>
-            <div className="project-samples grid grid-cols-1 md:grid-cols-2 gap-4 mt-[5%] mx-2">
+            <div className="project-samples grid grid-cols-1 md:grid-cols-2 gap-4 mt-[5%] mx-2 mb-2">
               <Project className="project-sample project-python w-full" name="Restaurant integration API" description={descriptionRestaurant} language="python" codeString={codeStringRestaurant} linkUrl="https://github.com/Sistema-de-integracao-em-restaurante/api" linkDescription="See on GitHub" />
               <Project className="project-sample project-java w-full" name="Work Time calculator API" description={descriptionWTC} language="java" codeString={codeStringWTC} linkUrl="https://github.com/clocked-app/calculations-api" linkDescription="See on GitHub" />
             </div>

app/src/DarkModeSwitch.js

@@ -0,0 +1,32 @@
+function DarkModeSwitch() {
+  const toggleToDarkMode = () => {
+    document.documentElement.classList.add('dark')
+  }
+
+  const toggleToLightMode = () => {
+    document.documentElement.classList.remove('dark')
+  }
+
+  return (
+    <div class="flex flex-col justify-center">
+      <label class="relative cursor-pointer p-2" for="light-switch">
+        <span onClick={toggleToDarkMode}>
+          <svg class="dark:hidden" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+            <path class="fill-slate-300" d="M7 0h2v2H7zM12.88 1.637l1.414 1.415-1.415 1.413-1.413-1.414zM14 7h2v2h-2zM12.95 14.433l-1.414-1.413 1.413-1.415 1.415 1.414zM7 14h2v2H7zM2.98 14.364l-1.413-1.415 1.414-1.414 1.414 1.415zM0 7h2v2H0zM3.05 1.706 4.463 3.12 3.05 4.535 1.636 3.12z" />
+            <path class="fill-slate-400" d="M8 4C5.8 4 4 5.8 4 8s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4Z" />
+          </svg>
+        </span>
+        <span onClick={toggleToLightMode}>
+          <svg class="hidden dark:block" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+            <path class="fill-slate-400" d="M6.2 1C3.2 1.8 1 4.6 1 7.9 1 11.8 4.2 15 8.1 15c3.3 0 6-2.2 6.9-5.2C9.7 11.2 4.8 6.3 6.2 1Z" />
+            <path class="fill-slate-500" d="M12.5 5a.625.625 0 0 1-.625-.625 1.252 1.252 0 0 0-1.25-1.25.625.625 0 1 1 0-1.25 1.252 1.252 0 0 0 1.25-1.25.625.625 0 1 1 1.25 0c.001.69.56 1.249 1.25 1.25a.625.625 0 1 1 0 1.25c-.69.001-1.249.56-1.25 1.25A.625.625 0 0 1 12.5 5Z" />
+          </svg>
+        </span>
+        <span class="sr-only">Switch to light / dark version</span>
+      </label>
+  </div>
+
+  );
+}
+
+export default DarkModeSwitch;

app/src/Project.js

@@ -1,12 +1,12 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 function Project(props) {
   return (
-     <div class="p-6 bg-white border border-gray-200 rounded-lg shadow">
-       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">{props.name}</h5>
-       <p className="text-gray-700">{props.description}</p>
-       <SyntaxHighlighter language={props.language} style={prism}>
+     <div class="p-6 bg-white dark:bg-slate-950 border border-gray-200 dark:border-gray-900 rounded-lg shadow">
+       <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{props.name}</h5>
+       <p className="text-gray-700 dark:text-gray-400">{props.description}</p>
+       <SyntaxHighlighter language={props.language} style={darcula}>
          {props.codeString}
        </SyntaxHighlighter>
        <a href={props.linkUrl} class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">

app/src/index.js

@@ -17,3 +17,4 @@ root.render(
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+document.documentElement.classList.add('dark')

app/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],