chore: format code

src/components/Experience.tsx

@@ -20,7 +20,7 @@ const experienceList: Array<ExperienceListElementProps> = [
   },
   {
     id: 3,
-    position: 'Trainee Junior Frontend Developer',
+    position: 'Intern Junior Frontend Developer',
     company: 'Tom&Co',
     since: new Date(2021, 7),
     to: new Date(2021, 8),

src/components/Projects/TechIcon.tsx

@@ -5,15 +5,15 @@ export type TechIconProps = {
 
 export const TechIcon = ({ name, imageName }: TechIconProps): JSX.Element => {
   return (
-    <div className="relative flex flex-wrap items-center justify-center w-10 h-10 rounded-md shadow-md bg-gray-50 group">
+    <div className="relative flex flex-wrap items-center justify-center w-10 h-10 rounded-md shadow bg-gray-50 group">
       <img
         src={`./assets/${imageName}.svg`}
         height="40"
         width="40"
         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 translate-y-10 rounded-md opacity-0 text-blue-100 bg-blue-900 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 bg-secondary translate-y-9 group-hover:opacity-100 left-1/2">
         {name}
       </span>
     </div>

src/components/Technologies.tsx

@@ -8,7 +8,7 @@ import { TechButton } from './Technologies/TechButton'
 export const Technologies = (): 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="py-8 my-8" id="technologies">
           <SectionTitle>Technologies</SectionTitle>
           <div className="grid md:grid-cols-2 gap-y-6 md:gap-y-0 md:gap-x-8">

src/components/Technologies/TechButton.tsx

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

src/index.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --primary-color: #00bcd1;
+  --accent-color: #3cb0d7;
+  --gradient-color: #33d1e7;
+}
+
 body {
   font-family: 'Poppins', sans-serif;
   margin: 0;
@@ -10,12 +16,21 @@ body {
 }
 
 .background-gradient {
-  background: linear-gradient(140deg, #0097a7 0%, #0097a7 45%, #1fb2c6 80%);
+  background: linear-gradient(
+    140deg,
+    var(--primary-color) 0%,
+    var(--primary-color) 45%,
+    var(--gradient-color) 80%
+  );
 }
 
 .text-gradient {
-  background: #0097a7;
-  background: linear-gradient(to bottom right, #0097a7 40%, #4dd0e1 100%);
+  background: var(--primary-color);
+  background: linear-gradient(
+    to bottom right,
+    var(--primary-color) 40%,
+    var(--gradient-color) 100%
+  );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -28,7 +43,7 @@ body {
 
 .link-underline {
   border-bottom-width: 0;
-  background-image: linear-gradient(#3cb0d7, #3cb0d7);
+  background-image: linear-gradient(var(--accent-color), var(--accent-color));
   background-size: 0 2px;
   background-position: 0 98%;
   background-repeat: no-repeat;
@@ -121,6 +136,7 @@ body {
 .card {
   position: relative;
   overflow: hidden;
+  transition: shadow 0.5s ease-in-out;
 }
 
 .card:hover:before {
@@ -130,7 +146,7 @@ body {
 .card:before {
   background: linear-gradient(
     130deg,
-    transparent 0% 33%,
+    transparent 33%,
     #5eead4 66%,
     #93c5fd 85%,
     #c084fc 100%