upgrade + add Dashdoc

package.json

@@ -10,7 +10,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-spring": "^9.2.4",
     "styled-components": "^4.1.3",
     "typescript": "^4.3.2",

public/index.html

@@ -27,19 +27,19 @@
     <title>Pierre-Yves Dezaunay</title>
 
     <!-- Matomo -->
-    <script>
-      var _paq = window._paq = window._paq || [];
-      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="//20.105.184.247/";
-        _paq.push(['setTrackerUrl', u+'matomo.php']);
-        _paq.push(['setSiteId', '1']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-      })();
-    </script>
+<!--    <script>-->
+<!--      var _paq = window._paq = window._paq || [];-->
+<!--      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */-->
+<!--      _paq.push(['trackPageView']);-->
+<!--      _paq.push(['enableLinkTracking']);-->
+<!--      (function() {-->
+<!--        var u="//20.105.184.247/";-->
+<!--        _paq.push(['setTrackerUrl', u+'matomo.php']);-->
+<!--        _paq.push(['setSiteId', '1']);-->
+<!--        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];-->
+<!--        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);-->
+<!--      })();-->
+<!--    </script>-->
     <!-- End Matomo Code -->
 
   </head>

src/App.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import MainLayout from './components/layouts/MainLayout'
+import {createTheme, ThemeProvider} from "@material-ui/core";
 
 
 function App() {
-  return (
-    <div className="App">
-      <MainLayout></MainLayout>
-    </div>
-  );
+    const theme = createTheme();
+    return (
+        <div className="App">
+            <ThemeProvider theme={theme}><MainLayout></MainLayout></ThemeProvider>
+        </div>
+    );
 }
 
 export default App;

src/components/Bio.tsx

@@ -36,10 +36,10 @@ const Bio = () => {
             </Grid>
             <Grid container>
                 <Grid xs={7} sm={8} item style={{padding: isXs? '3em 1.5em' : '3em',}} className={utilities.backgroundPrimaryColor}>
-                    Depuis 10 ans, je concrétise votre idée auprés de vos utilisateurs.<br/><br/>
+                    Depuis plus de 12 ans, je concrétise votre idée auprés de vos utilisateurs.<br/><br/>
                     Compétent, passionné, ouvert et empathique.<br/><br/>
                     Créons ensemble des services inédits, innovants et à l’épreuve du temps.<br/><br/>
-                    Egalement maraîcher agroécologique en permaculture, je suis disponible aux 3/5.<br/><br/>
+                    Egalement en charge d'un jardin agroécologique, je suis disponible aux 3/5.<br/><br/>
                     Retrouvez mon profil sur <a href='https://www.linkedin.com/in/pydezaunay/' style={{color: 'var(--secondaryColor)', textDecoration: 'none'}}>LinkedIn</a>.
                 </Grid>
                 <Grid xs={5} sm={4} item container direction="column" justify='center' style={{textAlign: 'center',}}>

src/components/Contact.tsx

@@ -1,4 +1,4 @@
-import {Grid, Hidden} from "@material-ui/core";
+import {Grid, useMediaQuery, useTheme} from "@material-ui/core";
 import React from "react";
 import Ladaux from '../assets/photo-contact.png'
 import Email from '../assets/mail.svg'
@@ -12,9 +12,11 @@ const Contact = () => {
     const phoneBoop = useBoop({rotation: 15});
     const emailBoop = useBoop({rotation: 15});
     const pinBoop = useBoop({rotation: 15});
+    const theme = useTheme();
+    const desktopDisplay = useMediaQuery(theme.breakpoints.up('md'));
     return (
         <>
-            <Hidden mdUp>
+            {!desktopDisplay &&
                 <span style={{
                     display: 'flex',
                     justifyContent: 'center',
@@ -25,7 +27,7 @@ const Contact = () => {
                         padding: '0.5em 1em'
                     }}>Contact</h2>
                 </span>
-            </Hidden>
+            }
             <Grid container alignItems='center' style={{marginTop: '5em', paddingRight: '2em'}} id='Contact'>
 
                 <Grid container item md={8} style={{padding: '0 3em', flexWrap: 'nowrap',}}