Merge pull request #79 from AmruthPillai/develop

Feature: Pan Zoom Animation indicating Interactivity

docs/changelog/README.md

@@ -11,6 +11,7 @@ All notable changes to this project will be documented in this file.
 ### April 5, 2020
 
 - Added Print Dialog to set Quality & Print Type before Exporting PDF
+- Added Pan-Zoom Animation to indicate the artboard is interactive
 
 ### April 3, 2020
 

src/components/App/App.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/media-has-caption */
 import React, { useRef, useEffect, useContext, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PanZoom } from 'react-easy-panzoom';
@@ -11,6 +12,7 @@ import RightSidebar from '../RightSidebar/RightSidebar';
 import templates from '../../templates';
 import PageController from '../../shared/PageController';
 import PrintDialog from '../../shared/PrintDialog';
+import PanZoomAnimation from '../../shared/PanZoomAnimation';
 
 const App = () => {
   const pageRef = useRef(null);
@@ -58,6 +60,7 @@ const App = () => {
 
         <RightSidebar />
 
+        <PanZoomAnimation />
         <PrintDialog />
       </div>
     </Suspense>

src/i18n/locales/de/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "Als PDF Speichern"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "Sie können die Zeichenfläche jederzeit schwenken und zoomen, um Ihren Lebenslauf genauer zu betrachten."
+  },
   "markdownHelpText": "Du kannst <1>GitHub Flavored Markdown</1> verwenden, um diesen Abschnitt des Textes zu gestalten."
 }

src/i18n/locales/en/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "Save as PDF"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "You can pan and zoom around the artboard at any time to get a closer look at your resume."
+  },
   "markdownHelpText": "You can use <1>GitHub Flavored Markdown</1> to style this section of the text."
 }

src/i18n/locales/fr/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "Enregistrer en PDF"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "Vous pouvez effectuer un panoramique et un zoom sur le plan de travail à tout moment pour voir de plus près votre CV."
+  },
   "markdownHelpText": "Vous pouvez utiliser <1>GitHub Flavored Markdown</1> pour styliser cette section du texte."
 }

src/i18n/locales/hi/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "डाउनलोड पीडीऍफ़"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "अपने रिज्यूमे को करीब से जानने के लिए आप किसी भी समय आर्टबोर्ड पर पैन और जूम कर सकते हैं।"
+  },
   "markdownHelpText": "आप पाठ के इस खंड को स्टाइल करने के लिए <1>GitHub Flavoured Markdown</1> का उपयोग कर सकते हैं।"
 }

src/i18n/locales/kn/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "ಪಿಡಿಎಫ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "ನಿಮ್ಮ ರೇಸ್ಯುಮೇಯನ್ನು ಹತ್ತಿರದಿಂದ ನೋಡಲು ನೀವು ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಆರ್ಟ್‌ಬೋರ್ಡ್‌ನ ಸುತ್ತಲೂ ಪ್ಯಾನ್ ಮಾಡಬಹುದು ಮತ್ತು ಜೂಮ್ ಮಾಡಬಹುದು."
+  },
   "markdownHelpText": "ಪಠ್ಯದ ಈ ವಿಭಾಗವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ನೀವು <1>ಗಿಟ್‌ಹಬ್ ಫ್ಲೇವರ್ಡ್ ಮಾರ್ಕ್‌ಡೌನ್</1> ಅನ್ನು ಬಳಸಬಹುದು."
 }

src/i18n/locales/zh/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "保存为 PDF"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "您可以随时在画板上平移和缩放，以更仔细地查看简历。"
+  },
   "markdownHelpText": "你可以使用 <1>GitHub 倾向的 Markdown</1> 来美化这部分文字."
 }

src/i18n/source/app/app.json

@@ -34,5 +34,8 @@
       "saveAsPdf": "Save as PDF"
     }
   },
+  "panZoomAnimation": {
+    "helpText": "You can pan and zoom around the artboard at any time to get a closer look at your resume."
+  },
   "markdownHelpText": "You can use <1>GitHub Flavored Markdown</1> to style this section of the text."
 }

src/shared/PanZoomAnimation.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import animation from '../assets/panzoom.mp4';
+
+const PanZoomAnimation = () => {
+  const { t } = useTranslation();
+  const [animationVisible, setAnimationVisible] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setAnimationVisible(true), 500);
+    setTimeout(() => setAnimationVisible(false), 4500);
+  }, []);
+
+  return (
+    <div
+      className={`centered absolute inset-0 w-1/4 mt-24 transition-all duration-1000 ease-in-out ${
+        animationVisible ? 'opacity-100 z-20' : 'opacity-0 z-0'
+      }`}
+    >
+      <div className="px-12 rounded-lg shadow-2xl bg-white">
+        <video src={animation} autoPlay muted loop />
+        <p className="px-6 pb-6 text-sm text-gray-800 font-medium text-center">
+          {t('panZoomAnimation.helpText')}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PanZoomAnimation;