Bump json5 from 1.0.1 to 1.0.2

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "cheerio": "1.0.0-rc.5",
+    "components": "^0.1.0",
     "compression": "1.7.4",
     "eslint-config-prettier": "6.15.0",
     "express": "4.17.1",
@@ -40,8 +41,8 @@
     "postcss-url": "9.0.0",
     "prettier": "2.2.1",
     "prettier-plugin-svelte": "0.7.0",
-    "sapper": "0.27.16",
-    "svelte": "3.32.3",
+    "sapper": "0.29.3",
+    "svelte": "3.49.0",
     "svelte-loader": "2.13.6",
     "svelte-preprocess": "3.9.12",
     "svg-inline-loader": "0.8.2",

src/components/EmojiContainer/EmojiContainer.svelte

@@ -15,8 +15,9 @@
 
     let currentXMovement = 0;
     let currentYMovement = 0;
-    let isOrientation = isDeviceOrientationSupported() || isTouchSupported();
+    let isOrientation = isDeviceOrientationSupported() && isTouchSupported();
     let ios = isIOS();
+    let initialWidth;
 
     if (window.DeviceOrientationEvent && window.DeviceOrientationEvent.requestPermissions) {
         DeviceOrientationEvent.requestPermissions();
@@ -27,6 +28,7 @@
     let timeoutId;
 
     onMount(() => {
+        initialWidth = window.innerWidth;
         timeoutId = setTimeout(() => {
             isEmojisShown = true;
         }, 200);
@@ -72,6 +74,10 @@
     }
 
     let updateEmoji = throttle(() => {
+        if (initialWidth === window.innerWidth) {
+            return;
+        }
+
         randomEmojis = generateEmoji(number, radius);
         currentXMovement = 0;
         currentYMovement = 0;

src/components/Main/Main.svelte

@@ -1,68 +1,72 @@
 <script>
-    import src from 'images/vkrbt.jpg';
-    import src2x from 'images/[email protected]';
-    import {SECONDS_IN_YEAR} from 'constants/default';
+    import src from 'images/vkrbt-new.jpg';
+    import src2x from 'images/[email protected]';
+    import {getPluralForm} from 'helpers/getPluralForm';
+    import {getMyAge} from 'helpers/getMyAge';
 
-    let birthday = Date.UTC(1998, 5, 8);
-    let today = Date.now();
-    let ageInSeconds = today - birthday;
-
-    export let ageInYears = Math.floor(ageInSeconds / SECONDS_IN_YEAR);
+    let ageSring = getPluralForm(getMyAge(), ['год', 'года', 'лет']);
 </script>
 
 <main class="content">
-    <img class="picture" {src} srcset="{src2x} 2x" alt="мой портрет" />
-    <div class="description">
-        <h1>Я Влад Корбут</h1>
-        <h2>Разработчик интерфейсов</h2>
-        <p>Мне {ageInYears}, а живу я Минске.</p>
-        <p>
-            Для связи со мной можно использовать
-            <a href="https://t.me/vkrbt/">телеграм</a>
-            или
-            <a href="mailto:[email protected]">email</a>
-        </p>
+    <div class="wrapper">
+        <img class="picture" {src} srcset="{src2x} 2x" alt="мой портрет" />
+        <div class="description">
+            <h1>Я Влад Корбут</h1>
+            <p>
+                Мне {ageSring}. Живу сейчас в Минске.
+            </p>
+            <p>
+                Подробнее <a href="/about/">здесь</a>.
+            </p>
+        </div>
     </div>
 </main>
 
 <style type="text/postcss">
     .content {
         display: flex;
+        flex-direction: column;
         padding: 16px;
         justify-content: center;
         align-items: center;
-        height: 100%;
         z-index: 1;
-        margin-top: 120px;
+        margin-top: 60px;
+    }
+
+    .wrapper {
+        background: rgba(255, 255, 255, 0.7);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 8px;
     }
 
     .description {
         min-height: 200px;
         padding-left: 16px;
-        background: rgba(255, 255, 255, 0.7);
         display: flex;
         flex-direction: column;
         justify-content: center;
+        max-width: 400px;
     }
 
     h2 {
         margin-top: 0;
     }
 
-    @media screen and (max-width: 576px) {
-        .description {
-            padding-left: 0;
-            text-align: center;
-        }
-        .content {
-            flex-direction: column;
-            margin-top: 0;
-        }
-    }
-
     .picture {
         width: 200px;
         height: 200px;
         clip-path: polygon(93% 8%, 100% 96%, 0% 100%, 5% 0%);
     }
+
+    @media screen and (max-width: 576px) {
+        .wrapper, .content {
+            padding: 0;
+        }
+
+        .content {
+            margin-top: 48px;
+        }
+    }
 </style>