fix: some UI changes

src/components/GetInTouch/Arrow.tsx

@@ -4,11 +4,13 @@ import {
   LINKEDIN_LINK,
   DRIBBLE_LINK,
   FLICKR_LINK,
+  MAIL_TO_LINK,
 } from "@/utils/constants";
 import { InstagramIcon } from "@/components/icons/Instagram";
 import { LinkedInIcon } from "@/components/icons/LinkedIn";
 import { DribbleIcon } from "@/components/icons/Dribble";
 import { FlickrIcon } from "@/components/icons/Flickr";
+import { MailIcon } from "@/components/icons/Mail";
 
 export const Arrow: React.FC = () => {
   const [showFullWidth, setShowFullWidth] = useState(false);
@@ -83,6 +85,15 @@ export const Arrow: React.FC = () => {
               >
                 <LinkedInIcon className="hover:animate-wiggle h-8 w-8 lg:h-14 lg:w-14 text-white" />
               </a>
+
+              <a
+                className="bg-black h-8 w-8 lg:h-14 lg:w-14 flex justify-center items-center rounded-full px-1 md:px-0"
+                href={MAIL_TO_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <MailIcon className="hover:animate-wiggle h-8 w-8 lg:h-14 lg:w-14 text-white" />
+              </a>
             </div>
 
             <div className="flex items-center w-1/2">

src/components/Home/Hero.tsx

@@ -14,11 +14,6 @@ export const Hero = () => (
           {"–"} Salvador Dali
         </p>
         <div className="w-full md:w-3/4 leading-[1.9rem] md:leading-[2.5rem] text-xl md:text-3xl font-[500] lg:font-[400]">
-          {/* <p className="mb-4">
-            I studied at Bologna University and worked in London for 6 years. I
-            {"'"}m currently freelancing and travelling the globe.
-          </p> */}
-
           <p>
             Working in multidisciplinary environments and different design areas
             including: 2D/3D graphics, 3D interiors and UX/UI strategy. I{"'"}m

src/components/Home/Skills/index.tsx

@@ -5,7 +5,7 @@ export const Skills = () => (
   <div className="bg-[#FFB649] flex flex-col px-8 md:px-16 lg:px-32 xl:px-60 py-12 lg:py-24 relative">
     <div className="flex items-center justify-between overflow-hidden">
       <div className="flex flex-col">
-        <h1 className="font-semibold text-5xl">Skills</h1>
+        <h1 className="font-semibold text-5xl">Expertise</h1>
 
         <div className="mt-8 w-screen overflow-x-scroll lg:w-auto">
           <div className="flex">

src/components/Home/Skills/skills.ts

@@ -10,14 +10,15 @@ export const SOFTWARES = [
 ];
 
 export const SKILLS = [
-  "Illustration",
-  "UX/UI Design",
+  "Branded Assets",
+  "UX Design",
+  "UI Design",
   "Graphic Design",
-  "3D modelling",
-  "Interior Design",
-  "Etching & Linocuts",
-  "Sculpture",
-  "Pottery",
+  "3D Modelling",
+  "Interior Branding",
+  "Visualisation",
+  "Printing Process",
+  "Illustration",
 ];
 
 export const LANGUAGES = [

src/components/icons/Mail.tsx

@@ -0,0 +1,28 @@
+interface MailIconProps {
+  className?: string;
+  onClick?: VoidFunction;
+}
+
+export const MailIcon: React.FC<React.PropsWithChildren<MailIconProps>> = ({
+  className = "",
+}) => (
+  <svg
+    className={className}
+    viewBox="0 0 48 48"
+    fill="white"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M38.1139 16.6429C38.005 16.7231 37.9124 16.7919 37.8231 16.863C36.3507 18.0315 35.0046 19.1003 33.6965 20.1394C31.2744 22.0634 28.9866 23.8803 26.261 26.038C25.5599 26.6349 24.8291 26.9331 24.0743 26.9334C23.3397 26.9334 22.5823 26.6507 21.807 26.0854L21.7991 26.0794C19.3824 24.168 17.3845 22.5819 15.2697 20.903C14.14 20.0061 12.9737 19.0801 11.6873 18.06C11.2309 17.698 10.7676 17.3333 10.2771 16.947C10.1483 16.8456 10.0169 16.742 9.88236 16.6362C9.87478 16.718 9.87004 16.784 9.87004 16.8481C9.86783 22.3246 9.86751 27.685 9.86941 31.942C9.86941 32.3052 10.0112 32.6463 10.2686 32.9028C10.5247 33.158 10.8649 33.2985 11.2262 33.2985H11.2309L36.777 33.2148C37.5227 33.2123 38.1294 32.604 38.1297 31.8584C38.131 26.7679 38.1304 21.3275 38.1285 16.9328C38.1285 16.8437 38.1225 16.7509 38.1136 16.6435L38.1139 16.6429Z"
+      fill="currentColor"
+    />
+    <path
+      d="M24.45 24.0042L36.0326 14.8042H11.9648L23.4782 24.0026C23.7641 24.2309 24.1636 24.2316 24.45 24.0039V24.0042Z"
+      fill="currentColor"
+    />
+    <path
+      d="M24.0002 0C10.7453 0 0 10.7453 0 23.9998C0 37.2544 10.7453 47.9997 24.0002 47.9997C37.255 47.9997 48.0003 37.2544 48.0003 23.9998C48.0003 10.7453 37.2547 0 24.0002 0ZM40.6833 32.3165C40.6823 33.3006 40.322 34.2016 39.6685 34.8538C39.0145 35.5069 38.1074 35.8682 37.1151 35.8714C35.2618 35.8774 33.3896 35.879 31.5326 35.879C30.299 35.879 29.0723 35.8783 27.8618 35.8774C26.5757 35.8767 25.2897 35.8758 24.0036 35.8758C22.8139 35.8758 21.6245 35.8761 20.4348 35.8767C17.3262 35.8777 14.1114 35.879 10.9496 35.8736C9.25651 35.8707 7.98216 34.9523 7.45347 33.3536C7.33535 32.9967 7.31987 32.6155 7.31956 32.3231C7.31229 26.5744 7.31134 20.9768 7.3164 15.6858C7.31735 14.7146 7.67265 13.8195 8.31725 13.1658C8.96311 12.5105 9.85373 12.1438 10.8255 12.133C12.2704 12.1169 13.7387 12.1204 15.159 12.1236C15.7464 12.1248 16.3335 12.1261 16.9209 12.1261H16.9276C18.5067 12.1261 20.0858 12.1261 21.665 12.1261C26.6885 12.1258 31.8831 12.1251 36.9926 12.1286C38.7489 12.1299 40.0106 13.0249 40.5459 14.6489C40.6656 15.0121 40.6798 15.411 40.6801 15.6791C40.6877 21.7376 40.6887 27.1799 40.683 32.3165H40.6833Z"
+      fill="currentColor"
+    />
+  </svg>
+);

src/pages/index.tsx

@@ -44,8 +44,6 @@ const Home: NextPage<HomePageProps> = ({ projects }) => {
 
       <Hero />
 
-      <ReloadButton onReload={onRefetchFetchShit} />
-
       <div>
         <Filterbar
           currentFilter={currentFilter}

src/utils/constants.tsx

@@ -1,3 +1,4 @@
+export const MAIL_TO_LINK = "mailto:beatriceduguidcox@gmail.com";
 export const INSTAGRAM_LINK = "https://www.instagram.com/beets_and_roots";
 export const TWITTER_LINK = "https://twitter.com/beatricecox16";
 export const LINKEDIN_LINK =