mycv button

marcoburrometo · Mar 21, 2021 · 3d89d62 · 3d89d62
1 parent b64f0d3
commit 3d89d62
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/public/CV ENG.pdf b/public/CV ENG.pdf
diff --git a/src/App.css b/src/App.css
@@ -1,11 +1,12 @@
 .app {
   opacity: 0;
-  transition: opacity .5s, transform .25s;
+  transition: opacity .5s, transform .2s;
   min-height: 100vh;
   width: 100vw;
   z-index: 1;
   position: relative;
   overflow: auto;
+  will-change: transform, opacity;
 }
 
 .app+footer {
@@ -63,4 +64,16 @@ footer {
   width: 100%;
   z-index: 0;
   transition: opacity .5s .5s;
+}
+
+.dark body {
+  background-color: rgb(17, 24, 39);
+}
+
+body {
+  background-color: rgb(243, 244, 246);
+}
+
+canvas {
+  user-select: none;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -50,7 +50,9 @@ function App(): JSX.Element {
     }, [count]);
 
     const scrollData = useScrollData();
-    const skewTransform = `skewY(${(scrollData.speed.y / 500) * (scrollData.direction.y === 'up' ? -1 : 1)}deg)`;
+    const skewTransform = `skewY(${
+        Math.min(scrollData.speed.y / 600, 5) * (scrollData.direction.y === 'up' ? -1 : 1)
+    }deg)`;
 
     const qualitiesEl = qualities.map((q) => (
         <span key={q}>
@@ -151,11 +153,11 @@ function App(): JSX.Element {
             >
                 <DarkModeToggle className="theme-toggle" onChange={setIsDarkMode} checked={isDarkMode} size={60} />
                 {header}
-                <p className="text-6xl sm:-ml-12 font-bold p-10 pb-0 md:px-40 mt-10 text-gray-800 dark:text-gray-200">
+                <p className="text-6xl sm:-ml-12 font-bold p-4 md:p-10 pb-0 md:px-40 mt-10 text-gray-800 dark:text-gray-200">
                     Hello.
                 </p>
-                <div className="grid grid-cols-1 p-10 md:px-40 px-8">{presentation}</div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-20 p-10 md:px-40 px-8 mt-20">
+                <div className="grid grid-cols-1 p-5 md:p-10 md:px-40">{presentation}</div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-20 p-5 md:p-10 md:px-40 mt-20">
                     <div>
                         <p className="text-2xl sm:-ml-12 font-bold text-gray-700 dark:text-gray-400">
                             Work and experiences.
@@ -183,10 +185,13 @@ function App(): JSX.Element {
                 <p className="text-xl font-bold p-10 pb-0 md:px-40 text-white text-center">Curious?</p>
                 <a
                     href="mailto:[email protected]"
-                    className="text-2xl font-bold text-gray-100 text-center effect-underline"
+                    className="text-lg md:text-2xl font-bold text-gray-100 text-center effect-underline"
                 >
                     [email protected]
                 </a>
+                <a href="/CV ENG.pdf" target="_blank" className="cv-button px-8 py-2 text-white mt-4">
+                    Get my CV
+                </a>
                 <div className="w-full mt-20 flex flex-col center-justify items-center justify-between text-white">
                     <div className="flex flex-row mb-3">
                         <a
@@ -254,7 +259,7 @@ function App(): JSX.Element {
                             </svg>
                         </a>
                     </div>
-                    <span className="text-sm">🚀 2021 © Marco Burrometo - VAT. 01214220319</span>
+                    <span className="text-xs md:text-sm">🚀 2021 © Marco Burrometo - VAT. 01214220319</span>
                 </div>
             </footer>
         </>

diff --git a/src/effects.css b/src/effects.css
@@ -391,4 +391,33 @@ a.effect-shine:hover {
     to {
         -webkit-mask-position: -50%;
     }
-}
+}
+
+.cv-button {
+    border: 1px solid rgb(243, 244, 246);
+    position: relative;
+    overflow: hidden;
+}
+
+.cv-button:before {
+    content: '';
+    background-image: linear-gradient(90deg, #ff00c1 0%, #0095ff 70%, #00ff00 100%);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
+    z-index: -1;
+}
+
+.cv-button:hover:before {
+    transform: scale(1.2) translate(0%);
+}
+
+/* .cv-button:hover,
+.cv-button:focus,
+.cv-button:active {
+    color: #21D4FD;
+} */