Add theme light/dark

gustavoquinalha · Jul 14, 2024 · c17979a · c17979a
1 parent c2d4bd3
commit c17979a
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 51 deletions.
diff --git a/dist/_astro/index.DkRKUmLi.css b/dist/_astro/index.DkRKUmLi.css
diff --git a/dist/index.html b/dist/index.html
diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -6,25 +6,25 @@ import { SendIcon } from 'astro-feather';
   <div class="w-full pt-20 flex flex-col gap-4" id="contact">
     <div class="w-full flex flex-col items-center justify-center gap-2">
       <div class="flex flex-wrap text-center items-center justify-center gap-4 w-full">
-        <label for="name" class="font-medium text-xl text-zinc-200">Hello, my name is</label>
-        <input id="name" name="name" type="text" placeholder="Name" required class="appearance-none text-center focus:bg-zinc-950 focus:border-zinc-200 focus:outline-none focus:shadow-outline border-b border-zinc-800 bg-zinc-950 max-w-60 w-full py-2 px-3 text-zinc-200" />
+        <label for="name" class="font-medium text-xl text-black dark:text-zinc-200">Hello, my name is</label>
+        <input id="name" name="name" type="text" placeholder="Name" required class="appearance-none placeholder:text-zinc-500 dark:placeholder:text-zinc-600 text-center focus:bg-white focus:border-zinc-200 focus:outline-none focus:shadow-outline border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 max-w-60 w-full py-2 px-3 text-black dark:text-zinc-200" />
       </div>
       <div class="flex flex-wrap text-center items-center justify-center gap-4 w-full">
-        <label for="city" class="font-medium text-xl text-zinc-200">I'm from</label>
-        <input id="city" name="city" type="text" placeholder="City" required class="appearance-none text-center focus:bg-zinc-950 focus:border-zinc-200 focus:outline-none focus:shadow-outline border-b border-zinc-800 bg-zinc-950 max-w-80 w-full py-2 px-3 text-zinc-200" />
+        <label for="city" class="font-medium text-xl text-black dark:text-zinc-200">I'm from</label>
+        <input id="city" name="city" type="text" placeholder="City" required class="appearance-none placeholder:text-zinc-500 dark:placeholder:text-zinc-600 text-center focus:bg-white focus:border-zinc-200 focus:outline-none focus:shadow-outline border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 max-w-60 w-full py-2 px-3 text-black dark:text-zinc-200" />
       </div>
     </div>
 
     <div class="flex flex-wrap text-center items-center justify-center gap-4 w-full">
-      <label for="subject" class="font-medium text-xl text-zinc-200">I would like to talk about</label>
+      <label for="subject" class="font-medium text-xl text-black dark:text-zinc-200">I would like to talk about</label>
       <div class="relative w-full max-w-40">
-        <select id="subject" name="subject" required class="appearance-none text-center focus:bg-zinc-950 focus:border-zinc-200 focus:outline-none focus:shadow-outline border-b border-zinc-800 bg-zinc-950 w-full py-2 px-3 text-zinc-200">
+        <select id="subject" name="subject" required class="appearance-none placeholder:text-zinc-500 dark:placeholder:text-zinc-600 text-center focus:bg-white focus:border-zinc-200 focus:outline-none focus:shadow-outline border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 max-w-60 w-full py-2 px-3">
           <option value="Budget">Budget</option>
           <option value="New project">New project</option>
           <option value="Doubts">Doubts</option>
           <option value="Other">Other</option>
         </select>
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-zinc-500">
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white0">
           <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
             <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
           </svg>
@@ -33,12 +33,12 @@ import { SendIcon } from 'astro-feather';
     </div>
 
     <div class="flex flex-col items-center justify-center gap-4 w-full max-w-xl mx-auto">
-      <label for="message" class="invisible font-medium text-xl text-zinc-200">I would like to talk about</label>
-      <textarea required name="message" placeholder="Message" id="message" rows="4" class="resize-none appearance-none text-center focus:bg-zinc-950 focus:border-zinc-200 focus:outline-none focus:shadow-outline rounded-xl border border-zinc-800 bg-zinc-950 w-full py-2 px-3 text-zinc-200"></textarea>
+      <label for="message" class="invisible font-medium text-xl text-black dark:text-zinc-200">I would like to talk about</label>
+      <textarea required name="message" placeholder="Message" id="message" rows="4" class="resize-none appearance-none placeholder:text-zinc-500 dark:placeholder:text-zinc-600 text-center focus:bg-white focus:border-zinc-200 focus:outline-none focus:shadow-outline rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 w-full py-2 px-3 text-black dark:text-zinc-200"></textarea>
     </div>
 
     <div class="w-full mt-4">
-      <button id="send" class="mx-auto bg-zinc-300 hover:bg-zinc-50 text-zinc-900 rounded-xl h-12 text-sm px-5 py-3 flex items-center justify-center gap-2">
+      <button id="send" class="mx-auto bg-black dark:bg-white hover:scale-110 transition-all text-white dark:text-zinc-900 rounded-xl h-12 text-sm px-5 py-3 flex items-center justify-center gap-2">
         <SendIcon size={18} strokeWidth={1} />
         <span>Send message</span>
       </button>

diff --git a/src/components/Experience.astro b/src/components/Experience.astro
@@ -7,17 +7,17 @@ const { items } = Astro.props as Props;
 ---
 
 <div class="w-full pt-20 flex flex-col" id="experience">
-  <span class="title block font-medium text-xl text-zinc-200 mb-4">Experience</span>
+  <span class="title block font-medium text-xl text-black dark:text-zinc-200 mb-4">Experience</span>
   {
     items.map((data) => (
-      <div class="w-full flex flex-col gap-1 pl-8 pb-14 last:pb-0 border-l last:border-transparent border-zinc-500 relative">
-        <div class="flex w-4 min-w-4 h-4 bg-zinc-500 rounded-full absolute -left-2" />
-        <span class="block text-xs text-zinc-400">{data.date}</span>
-        <span class="text-lg text-zinc-200">{data.title}</span>
-        <a href={data.link} target="_blank" class="inline text-sm text-zinc-200 hover:text-zinc-50 hover:underline underline-offset-1">
+      <div class="w-full flex flex-col gap-1 pl-8 pb-14 last:pb-0 border-l last:border-transparent border-zinc-200 dark:border-zinc-500 relative">
+        <div class="flex w-4 min-w-4 h-4 bg-zinc-200 dark:bg-white0 rounded-full absolute -left-2" />
+        <span class="block text-xs text-zinc-500 dark:text-zinc-400">{data.date}</span>
+        <span class="text-lg text-black dark:text-zinc-200">{data.title}</span>
+        <a href={data.link} target="_blank" class="inline text-sm text-black dark:text-zinc-200 hover:text-black dark:hover:text-white hover:underline underline-offset-1">
           {data.company}
         </a>
-        <ul class="list-disc block text-sm text-zinc-400 mt-2 pl-4">
+        <ul class="list-disc block text-sm text-zinc-500 dark:text-zinc-400 mt-2 pl-4">
           {data.description.map((description: any) => (
             <li>{description}</li>
           ))}

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -2,10 +2,10 @@
 import { PhoneIcon, MessageCircleIcon } from 'astro-feather';
 ---
 
-<a href="https://wa.me/5544998027802" title="WhatsApp" target="_blank" class="w-12 min-12 h-12 bg-zinc-900 shadow border border-zinc-800 hover:border-zinc-700 hover:bg-zinc-800 text-zinc-300 hover:text-zinc-50 rounded-xl text-sm flex items-center justify-center fixed bottom-16 md:bottom-6 right-2 md:right-6">
+<a href="https://wa.me/5544998027802" title="WhatsApp" target="_blank" class="w-12 min-12 h-12 bg-white dark:bg-zinc-900 dark:shadow border border-zinc-200 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 dark:text-zinc-300 text-black dark:hover:text-white rounded-xl text-sm flex items-center justify-center fixed bottom-16 md:bottom-6 right-2 md:right-6">
   <PhoneIcon size={20} strokeWidth={1} />
 </a>
 
 <div class="text-center w-full py-10 flex gap-4 flex-col items-center justify-center">
-  <div class="text-zinc-300 text-sm">©2024 • <a href="https://github.com/gustavoquinalha" target="_blank" class="hover:text-zinc-50 hover:underline underline-offset-1">Gustavo Quinalha</a> — All rights reserved.</div>
+  <div class="text-zinc-700 dark:text-zinc-300 text-sm">©2024 • <a href="https://github.com/gustavoquinalha" target="_blank" class="hover:text-black dark:hover:text-white hover:underline underline-offset-1">Gustavo Quinalha</a> — All rights reserved.</div>
 </div>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -51,33 +51,33 @@ const iconMap = {
   <div class="flip-card w-32 min-w-32 h-32">
     <div class="flip-card-inner relative w-full h-full">
       <div class="flip-card-front absolute w-full h-full">
-        <div class="w-32 h-32 min-w-32 bg-zinc-800 rounded-full mx-auto border border-zinc-600 overflow-hidden shadow">
+        <div class="w-32 h-32 min-w-32 bg-zinc-300 dark:bg-zinc-800 rounded-full mx-auto border border-zinc-200 dark:border-zinc-600 overflow-hidden dark:shadow">
           <Image src={imageMe} width="128" height="128" class="w-32 h-32 min-w-32 object-cover object-center grayscale" alt="" />
         </div>
       </div>
 
       <div class="flip-card-back absolute w-full h-full">
-        <div class="w-32 h-32 min-w-32 bg-zinc-800 rounded-full mx-auto border border-zinc-600 overflow-hidden shadow">
+        <div class="w-32 h-32 min-w-32 bg-zinc-300 dark:bg-zinc-800 rounded-full mx-auto border border-zinc-200 dark:border-zinc-600 overflow-hidden dark:shadow">
           <Image src={imageGus} width="128" height="128" class="w-32 h-32 min-w-32 object-cover object-center" alt="" />
         </div>
       </div>
     </div>
   </div>
 
   <div class="w-full text-center">
-    <span class="block font-medium text-2xl text-zinc-200">Gustavo Quinalha</span>
+    <span class="block font-medium text-2xl text-black dark:text-zinc-200">Gustavo Quinalha</span>
     <span class="block text-xs text-zinc-400">Software Engineer & UI/UX Designer</span>
   </div>
   <div class="w-full max-w-xl text-center">
-    <span class="block font-normal text-sm text-zinc-200">I have more than 15 years of experience as a Front-End Developer, focused on UI/UX. Passionate about creating beautiful and functional interfaces. Crazy about JavaScript and CSS, especially in animations that make user interaction better.</span>
+    <span class="block font-normal text-sm text-zinc-700 dark:text-zinc-200">I have more than 15 years of experience as a Front-End Developer, focused on UI/UX. Passionate about creating beautiful and functional interfaces. Crazy about JavaScript and CSS, especially in animations that make user interaction better.</span>
   </div>
 
   <div class="flex flex-wrap justify-center items-center gap-2 pt-4">
     {
       socialMedia.map(({ link, icon, name }) => {
         const IconComponent = iconMap[icon];
         return (
-          <a href={link} target="_blank" title={name} class="bg-zinc-900 shadow border border-zinc-800 hover:border-zinc-700 hover:bg-zinc-800 text-zinc-300 hover:text-zinc-50 rounded-xl h-10 w-10 min-w-10 text-sm flex items-center justify-center gap-2">
+          <a href={link} target="_blank" title={name} class="bg-white dark:bg-zinc-900 dark:shadow border border-zinc-200 dark:border-zinc-800 hover:border-zinc-200 dark:hover:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-800 dark:text-zinc-300 hover:text-black dark:hover:text-white rounded-xl h-10 w-10 min-w-10 text-sm flex items-center justify-center gap-2">
             <IconComponent size={20} strokeWidth={1} />
           </a>
         );

diff --git a/src/components/Menu.astro b/src/components/Menu.astro
@@ -1,20 +1,54 @@
 ---
-import { GithubIcon } from 'astro-feather';
+import { GithubIcon, MoonIcon, SunIcon } from 'astro-feather';
 ---
 
 <div class="max-w-full w-full left-0 md:left-auto md:w-auto fixed md:sticky bottom-0 md:bottom-[initial] top-[initial] md:top-4 z-50 flex items-center gap-2 mx-auto" id="menu">
-  <div class="bg-zinc-900 shadow border border-zinc-800 rounded-none md:rounded-xl flex items-center text-center h-14 md:h-10 px-2 overflow-x-auto overflow-y-hidden w-full md:w-auto" id="menu-items"></div>
-  <a href="https://github.com/gustavoquinalha/gustavoquinalha.github.io/fork" target="_blank" title="Fork me!" class="hidden md:flex whitespace-nowrap bg-zinc-900 shadow border border-zinc-800 hover:border-zinc-700 hover:bg-zinc-800 text-zinc-400 hover:text-zinc-50 rounded-xl h-10 px-4 text-sm items-center justify-center gap-2">
+  <div class="bg-white dark:bg-zinc-900 dark:shadow border border-zinc-200 dark:border-zinc-800 rounded-none md:rounded-xl flex items-center text-center h-14 md:h-10 px-2 overflow-x-auto overflow-y-hidden w-full md:w-auto" id="menu-items"></div>
+
+  <button id="theme-toggle" class="hidden md:flex whitespace-nowrap bg-white dark:bg-zinc-900 dark:shadow border border-zinc-200 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white rounded-xl h-10 w-10 text-sm items-center justify-center gap-2">
+    <SunIcon customClasses="sun" size={20} strokeWidth={1} />
+    <MoonIcon customClasses="moon" size={20} strokeWidth={1} />
+  </button>
+
+  <a href="https://github.com/gustavoquinalha/gustavoquinalha.github.io/fork" target="_blank" title="Fork me!" class="hidden md:flex whitespace-nowrap bg-white dark:bg-zinc-900 dark:shadow border border-zinc-200 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white rounded-xl h-10 px-4 text-sm items-center justify-center gap-2">
     <GithubIcon size={20} strokeWidth={1} />
     <span class="">Fork me!</span>
   </a>
 </div>
 
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const documentElement = document.documentElement;
+    const button = document.getElementById('theme-toggle');
+
+    function toggleTheme() {
+      if (documentElement.classList.contains('light')) {
+        documentElement.classList.remove('light');
+        documentElement.classList.add('dark');
+        localStorage.setItem('theme', 'dark');
+      } else {
+        documentElement.classList.remove('dark');
+        documentElement.classList.add('light');
+        localStorage.setItem('theme', 'light');
+      }
+    }
+
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      documentElement.classList.add(savedTheme);
+    } else {
+      documentElement.classList.add('dark');
+    }
+
+    button?.addEventListener('click', toggleTheme);
+  });
+</script>
+
 <script>
   const menu: any[] = [];
   const items: HTMLElement[] = Array.from(document.querySelectorAll('.title'));
   const menuItems: HTMLElement = document.querySelector('#menu-items')!;
-  const style = 'text-zinc-400 hover:text-zinc-50 h-10 text-sm px-3 md:px-4 py-3 flex items-center justify-center whitespace-nowrap';
+  const style = 'text-zinc-600 dark:text-zinc-400 hover:text-black dark:hover:text-white dark:hover:text-white h-10 text-sm px-3 md:px-4 py-3 flex items-center justify-center whitespace-nowrap';
 
   menu.push(`<a href="#about-me" class="${style}">About me</a>`);
 

diff --git a/src/components/Products.astro b/src/components/Products.astro
@@ -9,17 +9,17 @@ const { items } = Astro.props as Props;
 ---
 
 <div class="w-full pt-20" id="products">
-  <span class="title block font-medium text-xl text-zinc-200 mb-4">Products</span>
+  <span class="title block font-medium text-xl text-black dark:text-zinc-200 mb-4">Products</span>
   <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 flex-col gap-4">
     {
       items.map((data) => (
-        <a href={data.link} target="_blank" style={`background:  linear-gradient(rgba(9, 9, 11, 0.2), rgba(9, 9, 11, 0.6), rgba(9, 9, 11, 0.8)), url(${data.image})`} class="grayscale hover:grayscale-0 !bg-center !bg-cover group min-h-64 shadow w-full flex justify-end flex-col gap-4 py-4 md:py-8 px-4 md:px-6 border bg-zinc-900 border-zinc-800 hover:bg-zinc-800 hover:border-zinc-700 rounded-xl relative">
+        <a href={data.link} target="_blank" style={`background:  linear-gradient(rgba(9, 9, 11, 0), rgba(9, 9, 11, 0.4), rgba(9, 9, 11, 0.8)), url(${data.image})`} class="grayscale hover:grayscale-0 !bg-center !bg-cover group min-h-64 shadow w-full flex justify-end flex-col gap-4 py-4 md:py-8 px-4 md:px-6 border bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 rounded-xl relative">
           <div class="absolute top-0 right-0 p-2">
             <ExternalLinkIcon size={20} strokeWidth={1} />
           </div>
           <div class="flex flex-col w-full gap-1">
-            <div class="block font-medium text-lg text-zinc-200 group-hover:text-zinc-50 group-hover:underline underline-offset-1 leading-5">{data.name}</div>
-            <div class="block font-medium text-sm text-zinc-400 gap-2 leading-4">R$ {data.price},00</div>
+            <div class="block font-medium text-lg text-zinc-200 group-hover:text-white group-hover:underline underline-offset-1 leading-5">{data.name}</div>
+            <div class="block font-medium text-sm text-zinc-400  gap-2 leading-4">R$ {data.price},00</div>
           </div>
         </a>
       ))

diff --git a/src/components/Projects.astro b/src/components/Projects.astro
@@ -9,19 +9,19 @@ const { items } = Astro.props as Props;
 ---
 
 <div class="w-full pt-20" id="projects">
-  <span class="title block font-medium text-xl text-zinc-200 mb-4">Projects</span>
+  <span class="title block font-medium text-xl text-black dark:text-zinc-200 mb-4">Projects</span>
   <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 flex-col gap-4">
     {
       items.map((data) => (
-        <a href={data.link} target="_blank" class="group shadow w-full flex flex-col gap-4 py-4 md:py-8 px-4 md:px-6 border bg-zinc-900 border-zinc-800 hover:bg-zinc-800 hover:border-zinc-700 rounded-xl relative">
+        <a href={data.link} target="_blank" class="group dark:shadow w-full flex flex-col gap-4 py-4 md:py-8 px-4 md:px-6 border bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 rounded-xl relative">
           <div class="absolute top-0 right-0 p-2">
             <ExternalLinkIcon size={20} strokeWidth={1} />
           </div>
           <div class="flex flex-col w-full gap-1">
-            <div class="block font-medium text-lg text-zinc-200 group-hover:text-zinc-50 group-hover:underline underline-offset-1 leading-5">{data.name}</div>
-            <div class="block font-medium text-sm text-zinc-400 gap-2 leading-4">{data.title}</div>
+            <div class="block font-medium text-lg text-black dark:text-zinc-200 group-hover:text-black dark:group-hover:text-white group-hover:underline underline-offset-1 leading-5">{data.name}</div>
+            <div class="block font-medium text-sm text-white0 dark:text-white0 gap-2 leading-4">{data.title}</div>
           </div>
-          <div class="block font-medium text-sm leading-5 text-zinc-300 mt-2">{data.description}</div>
+          <div class="block font-medium text-sm leading-5 text-zinc-600 dark:text-zinc-400 mt-2">{data.description}</div>
         </a>
       ))
     }

diff --git a/src/components/Skills.astro b/src/components/Skills.astro
@@ -7,8 +7,8 @@ const { items } = Astro.props as Props;
 ---
 
 <div class="w-full pt-20" id="skills">
-  <span class="title block font-medium text-xl text-zinc-200 mb-4">Skills</span>
-  <div class="w-full flex flex-wrap gap-1">
-    {items.map((skill) => <div class="bg-zinc-800 text-zinc-300 text-xs inline-block rounded-lg px-2 py-1 leading-none">{skill}</div>)}
+  <span class="title block font-medium text-xl text-black dark:text-zinc-200 mb-4">Skills</span>
+  <div class="w-full flex flex-wrap gap-1.5">
+    {items.map((skill) => <div class="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-300 text-xs inline-block rounded-lg px-2 py-1 leading-none">{skill}</div>)}
   </div>
 </div>