chore: tweak color palette

src/App.tsx

@@ -8,7 +8,7 @@ import { Welcome } from './components/Welcome'
 
 const App = (): JSX.Element => {
   return (
-    <div className="flex flex-col items-center bg-background text-text">
+    <div className="flex flex-col items-center  bg-background text-text-primary">
       <Welcome />
       <About />
       <Technologies />

src/components/Contact.tsx

@@ -28,7 +28,7 @@ const contactButtons: {
 export const Contact = (): JSX.Element => {
   return (
     <div className="flex flex-col items-center w-full">
-      <div className=" w-11/12 xs:w-10/12 md:w-3/4 xl:w-9/12 2xl:w-8/12 max-w-8xl">
+      <div className="w-11/12 xs:w-10/12 md:w-3/4 xl:w-9/12 2xl:w-8/12 max-w-8xl">
         <div className="pb-4 my-8" id="contact">
           <div className="flex flex-wrap justify-center gap-8 my-8">
             <h6 className="w-full text-xl font-bold text-center">

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 export const Footer = (): JSX.Element => {
   return (
-    <div className="flex items-center justify-center w-full h-20 mt-8 bg-primary text-background">
-      <h4>© 2023 Karol Stawowski</h4>
+    <div className="flex items-center justify-center w-full h-24 bg-background text-text-secondary xs:w-10/12 md:w-3/4 xl:w-9/12 2xl:w-8/12 max-w-8xl">
+      <h4>Copyright © 2023 Karol Stawowski</h4>
     </div>
   )
 }

src/components/Projects/ProjectCard.tsx

@@ -23,7 +23,7 @@ export const ProjectCard = ({
   return (
     <div className="box-content flex flex-col p-6 transition-shadow duration-300 ease-in-out rounded-lg shadow text-background xs:p-8 background-gradient">
       <h4 className="w-full text-xl font-semibold">{name}</h4>
-      <div className="w-10 h-[2px] bg-text mt-2" />
+      <div className="w-10 h-[2px] bg-button mt-2" />
       <img
         src={`./assets/projects/${imgName}.png`}
         className="object-cover w-full my-4 rounded-md"

src/components/Projects/TechIcon.tsx

@@ -13,7 +13,7 @@ export const TechIcon = ({ name, imageName }: TechIconProps): JSX.Element => {
         alt={name}
         className="w-8 h-8"
       />
-      <span className="absolute z-10 px-2 py-1 m-4 mx-auto text-xs text-center transition-opacity -translate-x-1/2 rounded-md opacity-0 text-text bg-secondary translate-y-9 group-hover:opacity-100 left-1/2">
+      <span className="absolute z-10 px-2 py-1 m-4 mx-auto text-xs text-center transition-opacity -translate-x-1/2 rounded-md opacity-0 text-text-primary bg-secondary translate-y-9 group-hover:opacity-100 left-1/2">
         {name}
       </span>
     </div>

src/components/Technologies/TechButton.tsx

@@ -8,7 +8,7 @@ export const TechButton = ({
   imageName,
 }: TechButtonProps): JSX.Element => {
   return (
-    <div className="card flex flex-wrap items-center justify-center w-[84px] h-[84px] rounded-md bg-text text-black">
+    <div className="card flex flex-wrap items-center justify-center w-[84px] h-[84px] rounded-md bg-button text-black">
       <img
         src={`./assets/${imageName}.svg`}
         height="32"

src/components/Welcome/NavigationBar.tsx

@@ -2,7 +2,7 @@ import { Link } from './NavigationBar/Link'
 
 export const Navbar = (): JSX.Element => {
   return (
-    <div className="flex items-baseline justify-center w-full h-12 rounded-lg text-text sm:justify-between">
+    <div className="flex items-baseline justify-center w-full h-12 rounded-lg text-text-primary sm:justify-between">
       <h1 className="h-8 my-2 text-2xl select-none ">{'<KarolStawowski/>'}</h1>
       <div className="hidden text-lg lg:block">
         {linkTitles.map((title) => (

src/index.css

@@ -5,7 +5,7 @@
 :root {
   --primary-color: #00bcd1;
   --accent-color: #3cb0d7;
-  --gradient-color: #33d1e7;
+  --gradient-color: #00d8f0;
 }
 
 body {

tailwind.config.js

@@ -17,9 +17,10 @@ module.exports = {
         secondary: '#0C2F3B',
         accent: '#3CB0D7',
         background: '#030A0D',
-        text: '#D5EEF6',
-        button: '#e1f8ff',
-        'button-hover': '#bfd3d9',
+        'text-primary': '#D5EEF6',
+        'text-secondary': '#839FA8',
+        button: '#D6F5FF',
+        'button-hover': '#BFD3D9',
         'monitor-inner-border': '#32323C',
         'monitor-side-pannel': '#0B0D14',
         'monitor-outer-border': '#393A3C',