select-none added in title principal

Author: dc7devs

src/components/navbar.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { CircleDashed, CirclesFour, CirclesThreePlus, Plus, X } from "phosphor-react";
+import { CirclesFour, CirclesThreePlus, X } from "phosphor-react";
 import { useState } from "react";
 import Modal from "./modal";
-import ToggleThemeBtn from "./toggle-theme";
+import ToggleThemeBtn from "./toggle-dark-theme-btn";
 
 export default function NavBar() {
     const router = useRouter();
@@ -15,27 +15,27 @@ export default function NavBar() {
     }
 
     return(
-        <nav className="h-auto w-full pt-4 text-base text-zinc-800/70 dark:text-white/70 flex justify-between items-center px-8 md:px-0 md:justify-around md:h-16 absolute top-0">
+        <nav className="h-auto w-full pt-4 text-base flex justify-between items-center px-8 md:px-0 md:justify-around md:h-16 absolute top-0">
             <Link href="/">
-                <div className="w-10 h-10 md:w-12 md:h-12 rounded-full ring-2 ring-violet-700/5 shadow-md shadow-violet-700/10 bakcdrop-blur relative">
+                <div className="w-10 h-10 md:w-12 md:h-12 rounded-full ring-4 ring-violet-700/5 shadow-sm shadow-violet-700/10 bakcdrop-blur relative select-none">
                     <img className="object-cove rounded-full" src="/images/My.png" alt="Althor image" />
                 </div>
             </Link>
 
             <div className="flex justify-center items-center">
                 <ul className="hidden sm:flex justify-stretch items-cente gap-x-3">
-                    <li className={`${router.pathname == "/" ?  "text-zinc-800/90 dark:text-white/90 font-semibold" : "text-base" } font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20 `}>
+                    <li className={`${router.pathname == "/" ?  "text-zinc-900/90 font-semibold" : "text-base" } font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20 `}>
                         <Link href="/">Home</Link>
                     </li>
-                    <li className={`${router.pathname == "/about" ?  "text-z300-700/90 dark:text-white/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
+                    <li className={`${router.pathname == "/about" ?  "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20`}>
                         <Link href="/about">About</Link>
                     </li>
-                    <li className={`${router.pathname == "/contact" ?  "text-z300-700/90 dark:text-white/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
-                        <Link href="/contact">Contact</Link>
-                    </li>
-                    <li className={`${router.pathname == "/projects" ?  "text-z300-700/90 dark:text-white/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
+                    <li className={`${router.pathname == "/projects" ?  "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20`}>
                         <Link href="/projects">Projects</Link>
                     </li>
+                    <li className={`${router.pathname == "/contact" ?  "text-zinc-900/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium hover:transition duration-75 ease-in-out md:text-lg md:w-20`}>
+                        <Link href="/contact">Contact</Link>
+                    </li>
                 </ul>
 
                 <hr className="hidden sm:block w-0.5 h-5 bg-separator/80 dark:bg-white/25 mx-5 md:mx-7 shadow-md rounded-full" />

src/components/toggle-theme.tsx src/components/toggle-dark-theme-btn.tsxsrc/components/toggle-theme.tsx renamed to src/components/toggle-dark-theme-btn.tsx

@@ -1,15 +1,14 @@
 import Link from 'next/link'
 
 import Layout from '../components/layout'
-import ToggleThemeBtn from '../components/toggle-theme'
 
 export default function Home() {
   return (
       <Layout>
-        <div className="sm:w-full sm:h-full flex mt-24 sm:m-0 sm:items-center">
+        <div className="sm:w-full sm:h-full flex mt-24 sm:m-0 sm:items-center select-none">
           <div className="flex flex-col gap-10 md:gap-5 px-4">
             <h2 className="flex flex-col text-zinc">
-              <div className="text-4xl font-semibold ">
+              <div className="text-4xl font-semibold">
                 Hi!, my name is
               </div>
               <div className="text-5xl md:text-7xl md:ml-5 font-extralight">
@@ -19,13 +18,13 @@ export default function Home() {
             <p 
               className="text-xl md:ml-5"
             >I'm a software <strong>
-              <Link href="https://www.google.com/search?q=what+is+developer" className="underline" target="__blank">
+              <Link href="https://www.google.com/search?q=what+is+developer" className="underline dark:hover:text-white/70 hover:text-zinc-700 hover:transition-colors hover:ease-in" target="__blank">
                 developer
               </Link>
             </strong>!</p>
-            <button className="max-w-max h-8 px-2 text-xl font-regular rounded-lg text-black dark:text-white bg-black/25 dark:bg-white/25 md:ml-5 dark:border-1 shadow-md dark:shadow-none shadow-violet-700/25 dark:shadow-violet-300/25 bakcdrop-blur transition ring-2 ring-violet-700/30 dark:ring-violet-300/10">
+            <button className="max-w-max h-8 px-2 text-xl hover:text-zinc-700 dark:hover:text-white/70 font-regular rounded-lg bg-black/25 dark:bg-white/25 md:ml-5 dark:border-1 md:shadow-sm hover:shadow-violet-500/25 bakcdrop-blur ring-4 dark:ring-2 ring-violet-300/10 border border-transparent hover:transition-colors hover:ease-in hover:border-zinc-700 dark:hover:border-white/50"> 
               <Link href="/about">
-                more...
+                about me...
               </Link>
             </button>
           </div>

src/pages/index.tsx

@@ -7,6 +7,8 @@
 @layer utilities {
     * {
         scrollbar-color: #111 #050505;
+        @apply text-zinc-700/90
+        dark:text-white/50
     }
 
     ::-webkit-scrollbar {