add colors, add playground section

davbazz · May 2, 2023 · d3d8073 · d3d8073 · vercel · May 2, 2023
1 parent 36488f7
commit d3d8073
Show file tree

Hide file tree

Showing 14 changed files with 502 additions and 290 deletions.
diff --git a/app/components/About.tsx b/app/components/About.tsx
@@ -18,14 +18,14 @@ export default function About() {
         <div className="lg:w-[60%]">
           <div className="flex flex-nowrap items-center justify-start gap-[2px] md:gap-[5px]">
             <span
-              className={`${mono.className} mt-[3px] text-[20px] font-normal sm:mt-[4px] md:text-[21px] xl:text-[22px]`}
+              className={`${mono.className} mt-[3px] text-[20px] font-normal text-secondary sm:mt-[4px] md:text-[21px] xl:text-[22px]`}
             >
               01.
             </span>
-            <h2 className="mr-[10px] whitespace-nowrap text-[26px] font-bold sm:mr-[10px] sm:text-[28px] lg:text-[30px] xl:text-[32px]">
+            <h2 className="mr-[10px] whitespace-nowrap text-[26px] font-bold text-main sm:mr-[10px] sm:text-[28px] lg:text-[30px] xl:text-[32px]">
               About Me
             </h2>
-            <span className="inline-block h-[1px] w-full bg-black "></span>
+            <span className="inline-block h-[1px] w-full rounded-md bg-main/90"></span>
           </div>
 
           <p className="mt-[40px] text-[16px] md:text-[17px] xl:text-[18px]">
@@ -64,6 +64,7 @@ export default function About() {
               className="rounded-md"
               loading="eager"
             />
+            <span className="absolute top-0 left-0 z-10 h-full w-full rounded-md bg-secondary/4 0 duration-300 hover:bg-transparent hover:after:bg-secondary/20"></span>
           </div>
         </div>
       </div>

diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
@@ -15,7 +15,7 @@ export default function Contact() {
     >
       <div className="mx-auto flex flex-col justify-center">
         <div
-          className={`${mono.className} flex flex-nowrap items-end justify-center gap-[8px] leading-[26px] md:gap-[13px]`}
+          className={`${mono.className} flex flex-nowrap items-end justify-center gap-[8px] leading-[26px] text-secondary md:gap-[13px]`}
         >
           <span className="text-[15px] font-normal sm:mt-[4px] md:text-[18px] lg:text-[19px] xl:text-[20px]">
             05.
@@ -26,7 +26,7 @@ export default function Contact() {
           </h2>
         </div>
 
-        <p className="mt-[5px] text-center text-[36px] font-bold sm:mr-[10px] md:mt-[10px] md:text-[40px] lg:text-[44px] xl:text-[48px]">
+        <p className="mt-[5px] text-center text-[36px] font-bold text-main sm:mr-[10px] md:mt-[10px] md:text-[40px] lg:text-[44px] xl:text-[48px]">
           Get In Touch
         </p>
 
@@ -38,7 +38,7 @@ export default function Contact() {
 
         <Link
           href="mailto:[email protected]"
-          className={`${mono.className} mx-auto mt-[40px] inline-block rounded-md border-2 border-black px-[30px] py-[15px] text-[16px] md:mt-[50px] md:text-[17px] xl:text-[18px]`}
+          className={`${mono.className} mx-auto mt-[40px] inline-block rounded-md border-2 border-secondary px-[30px] py-[15px] text-[16px] text-secondary duration-150 hover:bg-secondary/10 md:mt-[50px] md:text-[17px] xl:text-[18px]`}
         >
           Email Me
         </Link>

diff --git a/app/components/Email.tsx b/app/components/Email.tsx
@@ -9,7 +9,7 @@ const mono = DM_Mono({
 
 export default function Email() {
   return (
-    <aside className="hidden lg:fixed lg:bottom-0 lg:right-[30px] lg:block xl:right-[40px] 2xl:right-[70px]">
+    <aside className="hidden text-main/80 duration-200 hover:text-secondary lg:fixed lg:bottom-0 lg:right-[30px] lg:block xl:right-[40px] 2xl:right-[70px]">
       <div className="flex flex-col items-center justify-end gap-8">
         <Link
           href="mailto:[email protected]"
@@ -18,7 +18,7 @@ export default function Email() {
           [email protected]
         </Link>
 
-        <span className="inline-block h-[100px] w-[2px] bg-black" />
+        <span className="inline-block h-[100px] w-[2px] bg-main/80" />
       </div>
     </aside>
   )

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -21,7 +21,7 @@ export default function Footer() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-linkedin h-[22px] w-[22px]"
+                className="bi bi-linkedin h-[22px] w-[22px] fill-main/90 hover:fill-secondary duration-200"
               >
                 <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
               </svg>
@@ -32,7 +32,7 @@ export default function Footer() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-github h-[22px] w-[22px]"
+                className="bi bi-github h-[22px] w-[22px] fill-main/90 hover:fill-secondary duration-200"
               >
                 <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
               </svg>
@@ -43,7 +43,7 @@ export default function Footer() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-telegram h-[22px] w-[22px]"
+                className="bi bi-telegram h-[22px] w-[22px] fill-main/90 hover:fill-secondary duration-200"
               >
                 <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z" />
               </svg>
@@ -54,7 +54,7 @@ export default function Footer() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-whatsapp h-[22px] w-[22px]"
+                className="bi bi-whatsapp h-[22px] w-[22px] fill-main/90 hover:fill-secondary duration-200"
               >
                 <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z" />
               </svg>
@@ -66,7 +66,7 @@ export default function Footer() {
                 xmlns="http://www.w3.org/2000/svg"
                 fill="currentColor"
                 viewBox="0 0 16 16"
-                className="bi bi-twitter h-[22px] w-[22px]"
+                className="bi bi-twitter h-[22px] w-[22px] fill-main/90 hover:fill-secondary duration-200"
               >
                 <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
               </svg>
@@ -77,7 +77,7 @@ export default function Footer() {
         <Link
           href="https://github.com/davbazz/portfolio"
           target="_blank"
-          className={`${mono.className} mx-auto inline-block px-[10px] py-[10px] text-[14px] md:text-[15px] lg:px-[60px] lg:py-[40px]`}
+          className={`${mono.className} mx-auto inline-block px-[10px] py-[10px] text-[14px] text-main duration-200 hover:text-secondary md:text-[15px] lg:px-[60px] lg:py-[40px]`}
         >
           Developed by David Bazashvili
         </Link>

diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
@@ -10,11 +10,13 @@ const mono = DM_Mono({
 export default function Hero() {
   return (
     <section className="py-[30px] sm:py-[70px] lg:px-[80px] xl:mt-[50px] xl:px-[150px] 2xl:mx-auto 2xl:mt-[100px] 2xl:max-w-[1140px] 2xl:py-[50px] 2xl:px-0">
-      <h2 className={`${mono.className} ml-[2px] text-[17px] md:text-[18px]`}>
+      <h2
+        className={`${mono.className} ml-[2px] text-[17px] text-secondary md:text-[18px]`}
+      >
         Hi, my name is
       </h2>
 
-      <h1 className="mt-[20px] text-[44px] font-[800] leading-[50px] sm:text-[54px] sm:leading-[60px] md:mt-[30px] md:text-[58px] md:leading-[64px] lg:text-[64px] lg:leading-[70px] xl:mt-[40px] xl:text-[72px] xl:leading-[80px]">
+      <h1 className="mt-[20px] text-[44px] font-[800] leading-[50px] text-main sm:text-[54px] sm:leading-[60px] md:mt-[30px] md:text-[58px] md:leading-[64px] lg:text-[64px] lg:leading-[70px] xl:mt-[40px] xl:text-[72px] xl:leading-[80px]">
         David Bazashvili.
       </h1>
 
@@ -28,10 +30,10 @@ export default function Hero() {
         opportunities, and I'd be glad to bring my expertise to your business.
       </p>
 
-      <div className="mt-[40px] w-full max-w-[270px] rounded-md border-2 border-black md:mt-[50px] xl:mt-[60px]">
+      <div className="mt-[40px] w-full max-w-[270px] rounded-md border-2 border-secondary duration-150 hover:bg-secondary/10 md:mt-[50px] xl:mt-[60px]">
         <Link
           href="#contact"
-          className={`${mono.className} block w-full py-[12px] text-center text-[17px] md:text-[18px]`}
+          className={`${mono.className} block w-full py-[12px] text-center text-[17px] text-secondary md:text-[18px]`}
         >
           Contact me
         </Link>

diff --git a/app/components/Nav.tsx b/app/components/Nav.tsx
@@ -42,7 +42,7 @@ export default function Nav() {
       <div className="flex items-center justify-between">
         <a
           href="http://localhost:3000/"
-          className={`${outfit.className} text-[24px] md:mt-[-8px] md:text-[26px] lg:text-[28px] xl:mt-[-10px] xl:text-[30px] 2xl:text-[32px]`}
+          className={`${outfit.className} text-[24px] text-secondary md:mt-[-8px] md:text-[26px] lg:text-[28px] xl:mt-[-10px] xl:text-[30px] 2xl:text-[32px]`}
         >
           davbaz
         </a>
@@ -52,55 +52,55 @@ export default function Nav() {
             <li>
               <a
                 href="#about"
-                className="flex w-full items-center justify-center gap-1"
+                className="flex w-full items-center justify-center gap-1 p-1 duration-150 hover:text-secondary"
               >
-                <span>01.</span>
+                <span className="text-secondary">01.</span>
                 About
               </a>
             </li>
             <li>
               <a
                 href="#skills"
-                className="flex w-full items-center justify-center gap-1"
+                className="flex w-full items-center justify-center gap-1 p-1 duration-150 hover:text-secondary"
               >
-                <span>02.</span>
+                <span className="text-secondary">02.</span>
                 Skills
               </a>
             </li>
             <li>
               <a
                 href="#work"
-                className="flex w-full items-center justify-center gap-1"
+                className="flex w-full items-center justify-center gap-1 p-1 duration-150 hover:text-secondary"
               >
-                <span>03.</span>
+                <span className="text-secondary">03.</span>
                 Work
               </a>
             </li>
             <li>
               <a
                 href="#playground"
-                className="flex w-full items-center justify-center gap-1"
+                className="flex w-full items-center justify-center gap-1 p-1 duration-150 hover:text-secondary"
               >
-                <span>04.</span>
+                <span className="text-secondary">04.</span>
                 Playground
               </a>
             </li>
             <li>
               <a
                 href="#contact"
-                className="flex w-full items-center justify-center gap-1"
+                className="flex w-full items-center justify-center gap-1 p-1 duration-150 hover:text-secondary"
               >
-                <span>05.</span>
+                <span className="text-secondary">05.</span>
                 Contact
               </a>
             </li>
           </ul>
 
-          <div className="w-[90px] rounded-md border-2 border-black lg:w-[100px] xl:w-[120px]">
+          <div className="w-[90px] rounded-md border-2 border-secondary lg:w-[100px] xl:w-[120px]">
             <a
               href="/resume.pdf"
               target="_blank"
-              className="block w-full py-[9px] text-center text-[13px] lg:text-[16px] xl:py-[10px] 2xl:text-[18px]"
+              className="block w-full py-[9px] text-center text-[13px] text-secondary duration-150 hover:bg-secondary/10 lg:text-[16px] xl:py-[10px] 2xl:text-[18px]"
             >
               Resume
             </a>
@@ -109,75 +109,75 @@ export default function Nav() {
 
         <div
           onClick={toggleMenu}
-          className="close z-10 flex cursor-pointer flex-col items-end justify-between gap-[5px] p-[3px] md:hidden"
+          className="close z-10 mr-[-8px] flex cursor-pointer flex-col items-end justify-between gap-[5px] p-2 md:hidden"
         >
-          <span className="x-1 inline-block h-[3px] w-[30px] rounded-md bg-black duration-300"></span>
-          <span className="x-2 inline-block h-[3px] w-[20px] rounded-md bg-black duration-300"></span>
-          <span className="x-3 inline-block h-[3px] w-[30px] rounded-md bg-black duration-300"></span>
+          <span className="x-1 inline-block h-[3px] w-[30px] rounded-md bg-secondary duration-300"></span>
+          <span className="x-2 inline-block h-[3px] w-[20px] rounded-md bg-secondary duration-300"></span>
+          <span className="x-3 inline-block h-[3px] w-[30px] rounded-md bg-secondary duration-300"></span>
         </div>
       </div>
 
-      <aside className="menu move-menu-off menu-width fixed top-0 flex h-[100dvh] flex-col justify-between rounded-l-lg bg-white px-[30px] py-[30px] duration-300 md:w-[320px]">
+      <aside className="menu move-menu-off menu-width fixed top-0 flex h-[100dvh] flex-col justify-between rounded-l-lg bg-third px-[30px] py-[30px] duration-300 md:w-[320px] z-5">
         <div className="mt-[70px]">
           <ul className="mx-auto flex flex-col items-center justify-between gap-6 text-[17px]">
             <li className="block w-full">
               <a
                 href="#about"
-                className="flex w-full flex-col items-center justify-center"
+                className="flex w-full flex-col items-center justify-center rounded-md p-1 text-main duration-300 hover:bg-secondary/10 hover:text-secondary"
                 onClick={toggleMenu}
               >
-                <span>01.</span>
+                <span className="text-secondary">01.</span>
                 About
               </a>
             </li>
             <li className="block w-full">
               <a
                 href="#skills"
-                className="flex w-full flex-col items-center justify-center"
+                className="flex w-full flex-col items-center justify-center rounded-md p-1 text-main duration-300 hover:bg-secondary/10 hover:text-secondary"
                 onClick={toggleMenu}
               >
-                <span>02.</span>
+                <span className="text-secondary">02.</span>
                 Skills
               </a>
             </li>
             <li className="block w-full">
               <a
                 href="#work"
-                className="flex w-full flex-col items-center justify-center"
+                className="flex w-full flex-col items-center justify-center rounded-md p-1 text-main duration-300 hover:bg-secondary/10 hover:text-secondary"
                 onClick={toggleMenu}
               >
-                <span>03.</span>
+                <span className="text-secondary">03.</span>
                 Work
               </a>
             </li>
             <li className="block w-full">
               <a
                 href="#playground"
-                className="flex w-full flex-col items-center justify-center"
+                className="flex w-full flex-col items-center justify-center rounded-md p-1 text-main duration-300 hover:bg-secondary/10 hover:text-secondary"
                 onClick={toggleMenu}
               >
-                <span>04.</span>
+                <span className="text-secondary">04.</span>
                 Playground
               </a>
             </li>
             <li className="block w-full">
               <a
                 href="#contact"
-                className="flex w-full flex-col items-center justify-center"
+                className="flex w-full flex-col items-center justify-center rounded-md p-1 text-main duration-300 hover:bg-secondary/10 hover:text-secondary"
                 onClick={toggleMenu}
               >
-                <span>05.</span>
+                <span className="text-secondary">05.</span>
                 Contact
               </a>
             </li>
           </ul>
         </div>
 
-        <div className="my-[40px] mx-auto w-[140px] rounded-md border-2 border-black sm:w-[160px]">
+        <div className="btn my-[40px] mx-auto w-[140px] rounded-md border-[1px] border-secondary bg-third duration-200 hover:bg-secondary/10 sm:w-[160px]">
           <a
             href="/resume.pdf"
             target="_blank"
-            className="block w-full py-[12px] text-center text-[17px]"
+            className="block w-full py-[12px] text-center text-[17px] text-secondary"
           >
             Resume
           </a>