From d3d80732df5b8c0253a863bffaaa7a7e5773117b Mon Sep 17 00:00:00 2001
From: David <callmelmao@gmail.com>
Date: Tue, 2 May 2023 17:04:50 +0100
Subject: [PATCH] add colors, add playground section

---
 app/components/About.tsx       |   7 +-
 app/components/Contact.tsx     |   6 +-
 app/components/Email.tsx       |   4 +-
 app/components/Footer.tsx      |  12 +-
 app/components/Hero.tsx        |  10 +-
 app/components/Nav.tsx         |  60 ++--
 app/components/Playground.tsx  | 533 +++++++++++++++++++++------------
 app/components/Skills.tsx      |  34 ++-
 app/components/SocialLinks.tsx |  13 +-
 app/components/Work.tsx        |  44 ++-
 app/globals.css                |  10 +-
 app/layout.tsx                 |   2 +-
 app/page.tsx                   |   4 +-
 tailwind.config.js             |  53 +++-
 14 files changed, 502 insertions(+), 290 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index f9d8c60..85c7d36 100644
--- 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
index c751cc2..9a96a84 100644
--- 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:codingbazashvili@gmail.com"
-          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
index 919042f..1f86830 100644
--- 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:codingbazashvili@gmail.com"
@@ -18,7 +18,7 @@ export default function Email() {
           codingbazashvili@gmail.com
         </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
index 2bf4dae..303ab32 100644
--- 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
index e679380..54f5cc9 100644
--- 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
index f184642..eb70890 100644
--- 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>
diff --git a/app/components/Playground.tsx b/app/components/Playground.tsx
index 73bd570..e2966d4 100644
--- a/app/components/Playground.tsx
+++ b/app/components/Playground.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import PocketBase from "pocketbase"
+import PocketBase from 'pocketbase'
 import { useState } from 'react'
 import { DM_Mono } from 'next/font/google'
 
@@ -11,202 +11,357 @@ const mono = DM_Mono({
 })
 
 export default function Playground() {
-	const [item, setItem] = useState<any>()
-	const [dbItem, setDbItem] = useState<any>()
-
-	const pb = new PocketBase('http://127.0.0.1:8090')
-
-	async function getData() {
-		const res = await fetch('https://fakestoreapi.com/products/1')
-		const data = await res.json()
-		const trim = {
-			category: data.category, 
-			description: data.description, 
-			image: data.image,
-			price: data.price,
-			title: data.title
-		}
-		setItem(trim)
-	}
-
-	async function createItem() {
-		const create = await pb.collection('products').create(item)
-		return create
-	}
-
-	async function getItem() {
-		const get = await pb.collection('products').getOne('6j1zez1meaumlrh')
-		setDbItem(get)
-		return get
-	}
-
-	return (
-		<section
-			className="mx-auto mt-[20px] py-[40px] sm:py-[50px] md:py-[70px] lg:py-[100px] lg:px-[80px] xl:py-[120px] xl:px-[150px] 2xl:max-w-[1140px] 2xl:px-0"
+  const [item, setItem] = useState<any>()
+  const [created, setCreated] = useState<any>()
+  const [dbItem, setDbItem] = useState<any>()
+
+  // const pb = new PocketBase('http://127.0.0.1:8090') for real database connection
+
+  async function getData() {
+    const res = await fetch('https://fakestoreapi.com/products/1')
+    const data = await res.json()
+    const trim = {
+      category: data.category,
+      description: data.description,
+      image: data.image,
+      price: data.price,
+      title: data.title,
+    }
+    setItem(trim)
+  }
+
+  // real database envolvment example
+
+  // async function createItem() {
+  // 	const create = await pb.collection('products').create(item)
+  // 	console.log(item)
+  // 	setCreated(item)
+  // 	return create
+  // }
+
+  // no database envolvment
+  async function createItem() {
+    setCreated(item)
+  }
+
+  // real database envolvment
+
+  // async function getItem() {
+  // 	const get = await pb.collection('products').getOne('6j1zez1meaumlrh')
+  // 	setDbItem(get)
+  // 	return get
+  // }
+
+  // no database envolvment
+  async function getItem() {
+    setDbItem(item)
+  }
+
+  return (
+    <section
+      className="mx-auto mt-[20px] py-[40px] sm:py-[50px] md:py-[70px] lg:py-[100px] lg:px-[80px] xl:py-[120px] xl:px-[150px] 2xl:max-w-[1140px] 2xl:px-0"
       id="playground"
-		>
-			<div className="flex flex-nowrap items-center justify-start gap-[2px] md:gap-[5px]">
+    >
+      <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 sm:mt-[4px] md:text-[21px] xl:text-[22px] text-secondary`}
         >
           04.
         </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 sm:mr-[10px] sm:text-[28px] lg:text-[30px] xl:text-[32px] text-main">
           Playground
         </h2>
 
-        <span className="inline-block h-[1px] w-full bg-black lg:w-[300px]"></span>
+        <span className="inline-block h-[1px] w-full bg-main/80 lg:w-[300px]"></span>
       </div>
 
-			<h2 className={`${mono.className} mt-[40px] text-[17px] md:text-[18px]`}>
-				API & Database
-			</h2>
-
-			<div className="flex flex-col gap-10 bg-slate-300 rounded-md p-4 mt-[40px] text-[16px] md:text-[17px] xl:text-[18px]">
-				<p className="text-[17px] md:text-[18px]">
-					In this section there is a simple demonstration of some of the <span className={`${mono.className}`}>API & Database</span> functionalities. Let's begin with API.
-				</p>
-
-				<p>
-					When using internet, we may not notice it but computer programs talk to each other for the sake of giving or receiving information. Let's see it on practice. Say, we want to open e-commerce store, but our goods isn'tready for production. In this case we can use a fake-store <span className={`${mono.className}`}>API</span> to fill in the <span className={`${mono.className}`}>UI</span>.
-				</p>
-
-				<code className="overflow-x-scroll bg-slate-100 rounded-md p-4">
-					async function getData() {'{'}
-					<br/>
-					const res = await fetch('https://fakestoreapi.com/products/1') 
-					<br/>
-					const data = await res.json()
-					<br/>
-					const trim = {'{'} 
-					<br/>
-					category: data.category, 
-					<br/>
-					descr: data.description, 
-					<br/>
-					img: data.image,
-					<br/>
-					price: data.price,
-					<br/>
-					title: data.title
-					<br/>
-					{'}'}
-					<br/>
-					setItem(trim)
-					<br/>
-					{'}'}			
-				</code>
-
-				<p>Click on the button to see result</p>
-
-				<button onClick={getData}>
-					fetch data
-				</button>
-
-				{item && 
-					<div className="flex flex-col justify-between gap-8 p-4 bg-white rounded-md">
-						<div>
-							<img 
-								src={item.image} 
-								alt="image" 
-								loading="eager" 
-								width={'64%'} height={'100%'}
-								className="rounded-md mx-auto max-w-[260px]"
-							/>
-						</div>
-						<div className="">
-							<p className={`font-semibold`}>
-								{item.title}
-							</p>
-							<p className="mt-[20px] text-[14px] md:text-[15px]">
-								{item.description}
-							</p>
-							<p className="mt-[30px] text-[14px] md:text-[15px] font-semibold">
-								{item.price}$
-							</p>
-						</div>
-					</div>
-				}
-
-				<p>
-					Great, now that we know how to use the API, let's take a look at database!
-				</p>
-				
-				<p>
-					Finally, our goods are ready for production and we want to use them on the website. The question is, how where do we deploy this information and how do we access will user get access to it on the website?
-				</p>
-
-				<p>
-					The answer would be is to use a database. We can structurise the nessesary data and deploy it to one of the multiple resources out there. For this example i'll go with PocketBase.
-				</p>
-
-				<p>Lets create a product in the database. For cpnviniece I'll use same data we receive from the API</p>
-
-				<code className="overflow-x-scroll bg-slate-100 rounded-md p-4">
-					async function createItem() {'{'}
-					<br/>
-					const pb = new PocketBase('http://127.0.0.1:8090')
-					<br/>
-					const create = await pb.collection('products').create(item)
-					<br/>
-					return create
-					<br/>
-					{'}'}
-				</code>
-
-				<button onClick={createItem}>
-					create item
-				</button>
-
-				<p>Now we can retrieve data from data base and put in in our UI</p>
-
-				<code className="overflow-x-scroll bg-slate-100 rounded-md p-4">
-					async function getItem() {'{'}
-					<br/>
-					const get = await pb.collection('products').getOne('6j1zez1meaumlrh')
-					<br/>
-					setDbItem(get)
-					<br/>
-					return get
-					<br/>
-					{'}'}
-				</code>
-
-				<button onClick={getItem}>
-					get data
-				</button>
-
-				{dbItem && 
-					<div className="flex flex-col justify-between gap-8 p-4 bg-white rounded-md">
-						<div>
-							<img 
-								src={dbItem.image} 
-								alt="image" 
-								loading="eager" 
-								width={'64%'} height={'100%'}
-								className="rounded-md mx-auto max-w-[260px]"
-							/>
-						</div>
-						<div className="">
-							<p className={`font-semibold`}>
-								{dbItem.title}
-							</p>
-							<p className="mt-[20px] text-[14px] md:text-[15px]">
-								{dbItem.description}
-							</p>
-							<p className="mt-[30px] text-[14px] md:text-[15px] font-semibold">
-								{dbItem.price}$
-							</p>
-						</div>
-					</div>
-				}
-
-				<p>
-					Great! There is much more to tell about API's & Databases, contact me if you want know more!
-				</p>
-
-			</div>
-		</section>
-	)
-}
\ No newline at end of file
+      <h2 className={`${mono.className} mt-[40px] text-[17px] md:text-[18px] text-secondary`}>
+        API & Database
+      </h2>
+
+      <div className="ml-[-24px] mt-[40px] flex w-[calc(100%+48px)] flex-col gap-10 rounded-md bg-[#e0e7ff] p-6 text-[16px] sm:ml-0 sm:w-full md:text-[17px] xl:text-[18px]">
+        <p className="text-[17px] md:text-[18px]">
+          In this section there is a simple demonstration of some of the{' '}
+          <span className={`${mono.className} text-secondary`}>API & Database</span>{' '}
+          functionalities. Let's begin with API.
+        </p>
+
+        <p>
+          When using internet, we may not notice it but computer programs talk
+          to each other for the sake of giving or receiving information.
+        </p>
+
+        <p>
+          Let's see it on practice. Say, we want to open e-commerce store, but
+          our goods isn't ready for production. In this case we can use a
+          fake-store <span className={`${mono.className}`}>API</span> to fill in
+          the <span className={`${mono.className}`}>UI</span>.
+        </p>
+
+        <code
+          className={`${mono.className} overflow-x-scroll whitespace-nowrap rounded-md bg-slate-100 p-4`}
+        >
+          async function getData() {'{'}
+          <br />
+          <span className="ml-[20px]">
+            const res = await fetch('https://fakestoreapi.com/products/1')
+          </span>
+          <br />
+          <span className="ml-[20px]">const data = await res.json()</span>
+          <br />
+          <span className="ml-[20px]">const trim = {'{'}</span>
+          <br />
+          <span className="ml-[40px]">category: data.category,</span>
+          <br />
+          <span className="ml-[40px]">descr: data.description,</span>
+          <br />
+          <span className="ml-[40px]">img: data.image,</span>
+          <br />
+          <span className="ml-[40px]">price: data.price,</span>
+          <br />
+          <span className="ml-[40px]">title: data.title</span>
+          <br />
+          <span className="ml-[20px]">{'}'}</span>
+          <br />
+          <span className="ml-[20px]">setItem(trim)</span>
+          <br />
+          {'}'}
+        </code>
+
+        <div className="mx-auto flex items-center justify-start gap-4 whitespace-nowrap">
+          <p>{item ? 'Fetched' : 'Fetch Data'}</p>
+
+          <div onClick={getData} className="cursor-pointer">
+            {item ? (
+              <div className="rounded-md border-2 border-black p-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                  className="bi bi-check-lg h-4 w-4"
+                >
+                  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
+                </svg>
+              </div>
+            ) : (
+              <div className="rounded-md border-2 border-black p-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                  className="bi bi-arrow-down-up h-4 w-4"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {item && (
+          <div className="flex flex-col justify-between gap-8 rounded-md bg-white p-4 sm:mx-auto sm:max-w-[550px] sm:flex-row sm:gap-12 md:w-[70%] md:min-w-[550px]">
+            <div className="mx-auto w-[64%] max-w-[220px] sm:w-[30%]">
+              <img
+                src={item.image}
+                alt="image"
+                loading="eager"
+                width={'100%'}
+                height={'100%'}
+                className="mx-auto rounded-md"
+              />
+            </div>
+            <div className="sm:flex sm:w-[70%] sm:flex-col sm:justify-between">
+              <p className={`font-semibold`}>{item.title}</p>
+              <p className="mt-[20px] text-[14px] sm:mt-[-30px] md:mt-0 md:text-[15px]">
+                {item.description}
+              </p>
+              <p className="mt-[30px] text-[14px] font-semibold sm:mr-[10px] sm:mt-0 sm:text-right md:text-[15px]">
+                {item.price}$
+              </p>
+            </div>
+          </div>
+        )}
+
+        <p>
+          Great, now that we know how to use the API, let's take a look at
+          database!
+        </p>
+
+        <p>
+          Finally, our goods are ready for production and we want to use them on
+          the website. The question is, how where do we deploy this information
+          and how do we access will user get access to it on the website?
+        </p>
+
+        <p>
+          The answer would be is to use a database. We can structurise the
+          nessesary data and deploy it to one of the multiple resources out
+          there. For this example i'll go with PocketBase.
+        </p>
+
+        <p>
+          Lets create a product in the database. For cpnviniece I'll use same
+          data we receive from the API
+        </p>
+
+        <code className="overflow-x-scroll whitespace-nowrap rounded-md bg-slate-100 p-4">
+          async function createItem() {'{'}
+          <br />
+          <span className="ml-[20px]">
+            const pb = new PocketBase('http://127.0.0.1:8090')
+          </span>
+          <br />
+          <span className="ml-[20px]">
+            const create = await pb.collection('products').create(item)
+          </span>
+          <br />
+          <span className="ml-[20px]">return create</span>
+          <br />
+          {'}'}
+        </code>
+
+        <div className="mx-auto flex items-center justify-start gap-4">
+          <p>{created ? 'Created' : 'Create Product'}</p>
+
+          <div onClick={createItem} className="cursor-pointer">
+            {created ? (
+              <div className="rounded-md border-2 border-black p-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                  className="bi bi-check-lg h-4 w-4"
+                >
+                  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
+                </svg>
+              </div>
+            ) : (
+              <div className="rounded-md border-2 border-black p-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                  className="bi bi-arrow-down-up h-4 w-4"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {created && (
+          <code className="overflow-x-scroll rounded-md bg-slate-100 p-4">
+            <span className="whitespace-nowrap">
+              category: "men's clothing"
+            </span>
+            <br />
+            <span className="whitespace-nowrap">
+              description: "Your perfect pack for everyday use and walks in the
+              forest. Stash your laptop (up to 15 inches) in the padded sleeve,
+              your everyday"
+            </span>
+            <br />
+            <span className="whitespace-nowrap">
+              image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
+            </span>
+            <br />
+            <span className="whitespace-nowrap">
+              price: 109.95title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15
+              Laptops"
+            </span>
+          </code>
+        )}
+
+        <p>
+          Here's what we sent to the Database. Now we can retrieve data from
+          data base and put it in our UI
+        </p>
+
+        <code className="overflow-x-scroll whitespace-nowrap rounded-md bg-slate-100 p-4">
+          async function getItem() {'{'}
+          <br />
+          <span className="ml-[20px]">
+            const get = await
+            pb.collection('products').getOne('6j1zez1meaumlrh')
+          </span>
+          <br />
+          <span className="ml-[20px]">setDbItem(get)</span>
+          <br />
+          <span className="ml-[20px]">return get</span>
+          <br />
+          {'}'}
+        </code>
+
+        <div className="mx-auto flex items-center justify-start gap-4">
+          <p>{dbItem ? 'Fetched' : 'Fetch Product'}</p>
+
+          <div onClick={getItem} className="cursor-pointer">
+            {dbItem ? (
+              <div className="rounded-md border-2 border-black p-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                  className="bi bi-check-lg h-4 w-4"
+                >
+                  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z" />
+                </svg>
+              </div>
+            ) : (
+              <div className="rounded-md border-2 border-black p-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                  className="bi bi-arrow-down-up h-4 w-4"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"
+                  />
+                </svg>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {dbItem && (
+          <div className="flex flex-col justify-between gap-8 rounded-md bg-white p-4 sm:mx-auto sm:max-w-[550px] sm:flex-row sm:gap-12 md:w-[70%] md:min-w-[550px]">
+		  <div className="mx-auto w-[64%] max-w-[220px] sm:w-[30%]">
+			<img
+			  src={item.image}
+			  alt="image"
+			  loading="eager"
+			  width={'100%'}
+			  height={'100%'}
+			  className="mx-auto rounded-md"
+			/>
+		  </div>
+		  <div className="sm:flex sm:w-[70%] sm:flex-col sm:justify-between">
+			<p className={`font-semibold`}>{item.title}</p>
+			<p className="mt-[20px] text-[14px] sm:mt-[-30px] md:mt-0 md:text-[15px]">
+			  {item.description}
+			</p>
+			<p className="mt-[30px] text-[14px] font-semibold sm:mr-[10px] sm:mt-0 sm:text-right md:text-[15px]">
+			  {item.price}$
+			</p>
+		  </div>
+		</div>
+        )}
+
+        <p>
+          Great! There is much more to tell about API's & Databases, contact me
+          if you want know more!
+        </p>
+      </div>
+    </section>
+  )
+}
diff --git a/app/components/Skills.tsx b/app/components/Skills.tsx
index 303ab40..59d2026 100644
--- a/app/components/Skills.tsx
+++ b/app/components/Skills.tsx
@@ -28,19 +28,21 @@ export default function Skills() {
     >
       <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]`}
         >
           02.
         </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]">
           Skills
         </h2>
 
-        <span className="inline-block h-[1px] w-full bg-black lg:w-[50%]"></span>
+        <span className="inline-block h-[1px] w-full rounded-md bg-main/90 lg:w-[50%]"></span>
       </div>
 
-      <p className={`${mono.className} mt-[40px] text-[17px] md:text-[18px]`}>
+      <p
+        className={`${mono.className} mt-[40px] text-[17px] text-secondary md:text-[18px]`}
+      >
         Here are some of the technologies I use:
       </p>
 
@@ -55,7 +57,7 @@ export default function Skills() {
               />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">1 year</p>
+              <p className="font-semibold text-main">1 year</p>
               <p>
                 <span className="italic">JavaScript</span> - a programming
                 language
@@ -67,7 +69,7 @@ export default function Skills() {
               <Image src={HTML} alt={`HTML`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">2 years</p>
+              <p className="font-semibold text-main">2 years</p>
               <p>
                 <span className="italic">HTML</span> - a mark up language
               </p>
@@ -78,7 +80,7 @@ export default function Skills() {
               <Image src={CSS} alt={`CSS`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">2 years</p>
+              <p className="font-semibold text-main">2 years</p>
               <p>
                 <span className="italic">CSS</span> - a stylesheet language
               </p>
@@ -89,7 +91,7 @@ export default function Skills() {
               <Image src={React} alt={`React`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">1 year</p>
+              <p className="font-semibold text-main">1 year</p>
               <p>
                 <span className="italic">React</span> - a JavaScript library for
                 building Front-End
@@ -101,7 +103,7 @@ export default function Skills() {
               <Image src={Next} alt={`Next.js`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">1 year</p>
+              <p className="font-semibold text-main">1 year</p>
               <p>
                 <span className="italic">Next.js</span> - a React framework for
                 building Front-End and Back-End
@@ -113,7 +115,7 @@ export default function Skills() {
               <Image src={Node} alt={`Node.js`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">{`<`}1 year</p>
+              <p className="font-semibold text-main">{`<`}1 year</p>
               <p>
                 <span className="italic">Node.js</span> - a Back-End JavaScript
                 runtime
@@ -132,7 +134,7 @@ export default function Skills() {
               />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">{`<`}1 year</p>
+              <p className="font-semibold text-main">{`<`}1 year</p>
               <p>
                 <span className="italic">TypeScript</span> - a programming
                 language
@@ -144,7 +146,7 @@ export default function Skills() {
               <Image src={Go} alt={`Go`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">{`<`}1 year</p>             
+              <p className="font-semibold text-main">{`<`}1 year</p>
               <p>
                 <span className="italic">Golang</span> - a programming language
               </p>
@@ -155,7 +157,7 @@ export default function Skills() {
               <Image src={Tailwind} alt={`Tailwind`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">1 year</p>
+              <p className="font-semibold text-main">1 year</p>
               <p>
                 <span className="italic">Tailwind</span> - a CSS framework
               </p>
@@ -166,7 +168,7 @@ export default function Skills() {
               <Image src={Git} alt={`Git`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">2 years</p>
+              <p className="font-semibold text-main">2 years</p>
               <p>
                 <span className="italic">Git</span> - a version control system
               </p>
@@ -177,7 +179,7 @@ export default function Skills() {
               <Image src={API} alt={`API`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">1 year</p>
+              <p className="font-semibold text-main">1 year</p>
               <p>
                 <span className="italic">API's</span> - a way for programs to
                 communicate with each other
@@ -189,7 +191,7 @@ export default function Skills() {
               <Image src={Database} alt={`Database`} className="h-16 w-16" />
             </div>
             <div className="max-w-[calc(100%-88px)]">
-              <p className="font-semibold">1 year</p>
+              <p className="font-semibold text-main">1 year</p>
               <p>
                 <span className="italic">Database</span> - a collection of data
                 stored and accessed electronically
diff --git a/app/components/SocialLinks.tsx b/app/components/SocialLinks.tsx
index 389e960..52afe4c 100644
--- a/app/components/SocialLinks.tsx
+++ b/app/components/SocialLinks.tsx
@@ -13,7 +13,7 @@ export default function SocialLinks() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-linkedin h-[22px] w-[22px] xl:h-6 xl:w-6"
+                className="bi bi-linkedin dura h-[22px] w-[22px] fill-main/80 hover:fill-secondary xl:h-6 xl:w-6"
               >
                 <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>
@@ -24,7 +24,7 @@ export default function SocialLinks() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-github h-[22px] w-[22px] xl:h-6 xl:w-6"
+                className="bi bi-github dura h-[22px] w-[22px] fill-main/80 hover:fill-secondary xl:h-6 xl:w-6"
               >
                 <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>
@@ -35,7 +35,7 @@ export default function SocialLinks() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-telegram h-[22px] w-[22px] xl:h-6 xl:w-6"
+                className="bi bi-telegram dura h-[22px] w-[22px] fill-main/80 hover:fill-secondary xl:h-6 xl:w-6"
               >
                 <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>
@@ -46,7 +46,7 @@ export default function SocialLinks() {
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
-                className="bi bi-whatsapp h-[22px] w-[22px] xl:h-6 xl:w-6"
+                className="bi bi-whatsapp dura h-[22px] w-[22px] fill-main/80 hover:fill-secondary xl:h-6 xl:w-6"
               >
                 <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>
@@ -56,9 +56,8 @@ export default function SocialLinks() {
             <Link href="https://twitter.com/bazashvilidavid" target="_blank">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
                 viewBox="0 0 16 16"
-                className="bi bi-twitter h-[22px] w-[22px] xl:h-6 xl:w-6"
+                className="bi bi-twitter dura h-[22px] w-[22px] fill-main/80 hover:fill-secondary xl:h-6 xl:w-6"
               >
                 <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>
@@ -66,7 +65,7 @@ export default function SocialLinks() {
           </li>
         </ul>
 
-        <span className="block h-[100px] w-[2px] bg-black" />
+        <span className="block h-[100px] w-[2px] bg-main/80" />
       </div>
     </aside>
   )
diff --git a/app/components/Work.tsx b/app/components/Work.tsx
index 6c7e8b9..d842b3a 100644
--- a/app/components/Work.tsx
+++ b/app/components/Work.tsx
@@ -19,16 +19,16 @@ export default function Work() {
     >
       <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]`}
         >
           03.
         </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]">
           Some Things I've Built
         </h2>
 
-        <span className="inline-block h-[1px] w-full bg-black lg:w-[300px]"></span>
+        <span className="inline-block h-[1px] w-full rounded-md bg-main/90 lg:w-[300px]"></span>
       </div>
 
       <ul className="mt-[40px] flex flex-col gap-10 md:mt-[80px] md:gap-20 lg:gap-32 2xl:gap-40">
@@ -42,14 +42,14 @@ export default function Work() {
 
           <div>
             <p
-              className={`${mono.className} text-[14px] md:text-right md:text-[15px]`}
+              className={`${mono.className} text-[14px] text-secondary md:text-right md:text-[15px]`}
             >
               Featured Project
             </p>
-            <h3 className="text-[23px] font-bold md:text-right md:text-[25px] xl:text-[27px]">
+            <h3 className="text-[23px] font-bold text-main md:text-right md:text-[25px] xl:text-[27px]">
               Stock Tracker App
             </h3>
-            <p className="mt-[30px] text-[16px] md:ml-[40%] md:block md:w-[60%] md:rounded-md md:bg-slate-300 md:py-[20px] md:px-[30px] md:text-right md:text-[17px] lg:ml-[47%] lg:w-[53%] xl:text-[18px]">
+            <p className="mt-[30px] text-[16px] md:ml-[40%] md:block md:w-[60%] md:rounded-md md:bg-[#e0e7ff] md:py-[20px] md:px-[30px] md:text-right md:text-[17px] lg:ml-[47%] lg:w-[53%] xl:text-[18px]">
               An application that allows users receive data on stocks in real
               time, including several price values, daily overall dynamic and
               latest news.
@@ -76,12 +76,11 @@ export default function Work() {
                   xmlns="http://www.w3.org/2000/svg"
                   role="img"
                   viewBox="0 0 24 24"
-                  fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="feather feather-github h-5 w-5"
+                  className="feather feather-github h-5 w-5 fill-none hover:stroke-secondary"
                 >
                   <title>GitHub</title>
                   <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
@@ -96,12 +95,11 @@ export default function Work() {
                   xmlns="http://www.w3.org/2000/svg"
                   role="img"
                   viewBox="0 0 24 24"
-                  fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="feather feather-external-link h-[21px] w-[22px]"
+                  className="feather feather-external-link h-[21px] w-[22px] fill-none hover:stroke-secondary"
                 >
                   <title>External Link</title>
                   <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
@@ -122,13 +120,15 @@ export default function Work() {
           />
 
           <div>
-            <p className={`${mono.className} text-[14px] md:text-[15px]`}>
+            <p
+              className={`${mono.className} text-[14px] text-secondary md:text-[15px]`}
+            >
               Featured Project
             </p>
-            <h3 className="text-[23px] font-bold md:text-[25px] xl:text-[27px]">
+            <h3 className="text-[23px] font-bold text-main md:text-[25px] xl:text-[27px]">
               Memory Cards Game
             </h3>
-            <p className="mt-[30px] text-[16px] md:block md:w-[60%] md:rounded-md md:bg-slate-300 md:py-[20px] md:px-[30px] md:text-[17px] lg:w-[53%] xl:text-[18px]">
+            <p className="mt-[30px] text-[16px] md:block md:w-[60%] md:rounded-md md:bg-[#e0e7ff] md:py-[20px] md:px-[30px] md:text-[17px] lg:w-[53%] xl:text-[18px]">
               A simple game where a user clicks on cards to flip them & remember
               which one is which. The game ends when all cards are mathed. I
               choce Van Gogh art to be the matching pictures.
@@ -154,12 +154,11 @@ export default function Work() {
                   xmlns="http://www.w3.org/2000/svg"
                   role="img"
                   viewBox="0 0 24 24"
-                  fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="feather feather-github h-5 w-5"
+                  className="feather feather-github h-5 w-5 fill-none hover:stroke-secondary"
                 >
                   <title>GitHub</title>
                   <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
@@ -174,12 +173,11 @@ export default function Work() {
                   xmlns="http://www.w3.org/2000/svg"
                   role="img"
                   viewBox="0 0 24 24"
-                  fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="feather feather-external-link h-[21px] w-[22px]"
+                  className="feather feather-external-link h-[21px] w-[22px] fill-none hover:stroke-secondary"
                 >
                   <title>External Link</title>
                   <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
@@ -201,14 +199,14 @@ export default function Work() {
 
           <div>
             <p
-              className={`${mono.className} text-[14px] md:text-right md:text-[15px]`}
+              className={`${mono.className} text-[14px] text-secondary md:text-right md:text-[15px]`}
             >
               Featured Project
             </p>
-            <h3 className="text-[23px] font-bold md:text-right md:text-[25px] xl:text-[27px]">
+            <h3 className="text-[23px] font-bold text-main md:text-right md:text-[25px] xl:text-[27px]">
               Starwars Characters
             </h3>
-            <p className="mt-[30px] text-[16px] md:ml-[40%] md:block md:w-[60%] md:rounded-md md:bg-slate-300 md:py-[20px] md:px-[30px] md:text-right md:text-[17px] lg:ml-[47%] lg:w-[53%] xl:text-[18px]">
+            <p className="mt-[30px] text-[16px] md:ml-[40%] md:block md:w-[60%] md:rounded-md md:bg-[#e0e7ff] md:py-[20px] md:px-[30px] md:text-right md:text-[17px] lg:ml-[47%] lg:w-[53%] xl:text-[18px]">
               A simple UI empowered by swapi API to search starwars characters
               by their names. The response data comes with name, age and gender.
             </p>
@@ -234,12 +232,11 @@ export default function Work() {
                   xmlns="http://www.w3.org/2000/svg"
                   role="img"
                   viewBox="0 0 24 24"
-                  fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="feather feather-github h-5 w-5"
+                  className="feather feather-github h-5 w-5 fill-none hover:stroke-secondary"
                 >
                   <title>GitHub</title>
                   <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
@@ -254,12 +251,11 @@ export default function Work() {
                   xmlns="http://www.w3.org/2000/svg"
                   role="img"
                   viewBox="0 0 24 24"
-                  fill="none"
                   stroke="currentColor"
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className="feather feather-external-link h-[21px] w-[22px]"
+                  className="feather feather-external-link h-[21px] w-[22px] fill-none hover:stroke-secondary"
                 >
                   <title>External Link</title>
                   <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
diff --git a/app/globals.css b/app/globals.css
index 847d418..92a4cce 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -21,6 +21,10 @@ nav {
   overflow: hidden;
 }
 
+/* .blur-effect {
+  backdrop-filter: blur(1px);
+} */
+
 .close-x-1 {
   height: 2px;
   transform: translate(0px, 7px) rotate(45deg);
@@ -41,7 +45,7 @@ nav {
 }
 
 .move-menu-off {
-  right: -400px;
+  right: -500px;
 }
 
 .move-menu-on {
@@ -61,7 +65,7 @@ nav {
   left: 20px;
   position: absolute;
   display: inline-block;
-  border: 2px solid black;
+  border: 2px solid #6366f1;
   z-index: -1;
   border-radius: 6px;
   transition: all 300ms;
@@ -76,4 +80,4 @@ nav {
   body::-webkit-scrollbar {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 805e740..2413563 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className="bg-back">{children}</body>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
index 9b2f062..4910d11 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -18,7 +18,9 @@ const inter = Inter({
 
 export default function Home() {
   return (
-    <main className={`${inter.className} overflow-hidden overflow-y-hidden`}>
+    <main
+      className={`${inter.className} overflow-hidden overflow-y-hidden text-main/80`}
+    >
       <div className="relative mx-auto px-[24px] lg:max-w-[calc(100vw-80px)] lg:px-0 2xl:max-w-[calc(100vw-140px)]">
         <Nav />
         <Hero />
diff --git a/tailwind.config.js b/tailwind.config.js
index b297e21..1ecc007 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,58 @@
 module.exports = {
   content: ['./app/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        back: '#fff',
+        main: '#374151',
+        secondary: '#6366f1',
+        third: '#e0e7ff',
+      },
+    },
   },
   plugins: [],
 }
+
+/*
+the best one fo far 
+colors: {
+  'back': '#EEEEEE',
+  'main': '#334257',
+  'secondary': '#362FD9',
+  'lightBack': '#ca9635',
+  'third': '#476072'
+}
+
+*/
+
+/*
+not bad 
+
+colors: {
+        'back': '#181D31',
+        'main': '#C4D7E0',
+        'secondary': '#F0EBE3',
+        'lightBack': '#ca9635',
+        'third': '#B2C8DF'
+      }
+*/
+
+/*
+colors: {
+  'back': '#cea352',
+  'lightBack': '#ca9635',
+  'main': '#3d4025',
+  'secondary': '#f2e9c9',
+  'third': '#ffffff'
+}
+*/
+
+/*colors: {
+        'back': '#F1F6F9',
+        'lightBack': '#ca9635',
+        'main': '#212A3E',
+        'secondary': '#F97B22',
+        'third': '#394867'
+      }
+
+*/