Merge pull request #40 from rbourdon/develop

Latest from Develop

.eslintrc.json

@@ -6,7 +6,6 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:prettier/recommended",
     "plugin:@next/next/recommended",
     "next/core-web-vitals"
   ],
@@ -19,12 +18,6 @@
   },
   "rules": {
     "react/react-in-jsx-scope": "off",
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
     "react/prop-types": 0,
     "no-useless-escape": "off"
   },

README.md

@@ -8,7 +8,7 @@ This is my personal portfolio website, intended to showcase my design and develo
 
 ### :wrench: Technologies
 
-**[Next.js](https://github.com/vercel/next.js)** - React, but *better:tm:*
+**[Next.js](https://github.com/vercel/next.js)** - React, but _better:tm:_
 
 **[Framer Motion](https://github.com/framer/motion)** - Slick animation and layout transitions
 
@@ -19,9 +19,10 @@ This is my personal portfolio website, intended to showcase my design and develo
  
 
 ### :electric_plug: Services
+
 **[Vercel](https://vercel.com/)** - The best Next.js integration, analytics, a generous hobby plan, and UX that sparks joy
 
-**[GraphCMS](https://graphcms.com/)** - Nice headless CMS with a GraphQL API, generous free tier and great tools
+**[Hygraph (formerly GraphCMS)](https://hygraph.com/)** - Nice headless CMS with a GraphQL API, generous free tier and great tools
 
  
 
@@ -30,7 +31,8 @@ This is my personal portfolio website, intended to showcase my design and develo
 This portfolio got me hired and now I'm super busy so documentation will be added as I have time.
 
 Click the button below to clone my GraphCMS schema to a new project which you can fill out with your own content.
-### [![Clone project](https://graphcms.com/button)](https://app.graphcms.com/clone/1c307b6a56ea471f88368b1e42dd7191?name=rorybourdon)
+
+### [![Clone project](https://hygraph.com/button)](https://app.hygraph.com/clone/1c307b6a56ea471f88368b1e42dd7191?name=rorybourdon)
 
  
 

components/Projects/ProjectsScroller.js

@@ -63,7 +63,7 @@ export default function ProjectScroller({ projects, bgColor, primaryColor }) {
   }, []);
 
   useEffect(() => {
-    panPos.onChange((latest) => {
+    const pan = panPos.on("change", (latest) => {
       if (Math.abs(latest) >= 245) {
         setRollerPos((prev) =>
           prev + Math.sign(latest * -1) > projects.length - 1
@@ -75,6 +75,7 @@ export default function ProjectScroller({ projects, bgColor, primaryColor }) {
         panPos.set(Math.sign(latest) * -150);
       }
     });
+    return () => pan();
   }, [panPos, projects.length]);
 
   const handlePan = (e, pointInfo) => {

components/Skills/SkillBubble.js

@@ -236,10 +236,18 @@ export default function SkillBubble({
           backgroundColor,
         }}
       >
-        <Link href={`/skills/${id}`} passHref scroll={false} legacyBehavior>
+        <Link
+          draggable={false}
+          href={`/skills/${id}`}
+          passHref
+          scroll={false}
+          legacyBehavior
+        >
           <BubbleLink
+            draggable={false}
             onClick={canHover ? null : disableLinkDrag}
             onTapStart={disableLinkDrag}
+            onDragStart={disableLinkDrag}
             initial="hidden"
             animate={hovering ? "hover" : "visible"}
           >

components/utils/useBackgroundEffect.js

@@ -75,7 +75,7 @@ function useBackgroundEffect(inView, effectStyle) {
   ]);
 
   useEffect(() => {
-    const unsubscribeY = scrollY.onChange((progress) => {
+    const unsubscribeY = scrollY.on("change", (progress) => {
       if (inView && baseY.get() === 0) {
         scrollOffsetY.set(
           scrollOffsetY.get() - (progress - scrollY.getPrevious()) * 0.325