Changed particlejs condition 🚀

Author: chicio

.lighthouserc.json

@@ -11,7 +11,8 @@
         "unsized-images": "off",
         "uses-rel-preconnect": "off",
         "link-name": "off",
-        "aria-valid-attr-value": "off"
+        "aria-valid-attr-value": "off",
+        "unused-javascript": "off"
       }
     },
     "upload": {

graphql-types.ts

@@ -258,6 +258,8 @@ export type DirectoryCtimeArgs = {
 export type Site = Node & {
   buildTime?: Maybe<Scalars['Date']>;
   siteMetadata?: Maybe<SiteSiteMetadata>;
+  port?: Maybe<Scalars['Int']>;
+  host?: Maybe<Scalars['String']>;
   polyfill?: Maybe<Scalars['Boolean']>;
   pathPrefix?: Maybe<Scalars['String']>;
   id: Scalars['ID'];
@@ -1009,6 +1011,8 @@ export type QueryAllDirectoryArgs = {
 export type QuerySiteArgs = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
+  port?: Maybe<IntQueryOperatorInput>;
+  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;
@@ -2183,6 +2187,8 @@ export type SiteFieldsEnum =
   | 'siteMetadata___contacts___links___medium'
   | 'siteMetadata___contacts___links___devto'
   | 'siteMetadata___contacts___links___instagram'
+  | 'port'
+  | 'host'
   | 'polyfill'
   | 'pathPrefix'
   | 'id'
@@ -2284,6 +2290,8 @@ export type SiteGroupConnection = {
 export type SiteFilterInput = {
   buildTime?: Maybe<DateQueryOperatorInput>;
   siteMetadata?: Maybe<SiteSiteMetadataFilterInput>;
+  port?: Maybe<IntQueryOperatorInput>;
+  host?: Maybe<StringQueryOperatorInput>;
   polyfill?: Maybe<BooleanQueryOperatorInput>;
   pathPrefix?: Maybe<StringQueryOperatorInput>;
   id?: Maybe<StringQueryOperatorInput>;

src/components/background-fullscreen.tsx

@@ -1,14 +1,15 @@
 import React from "react";
 import Particles from "react-tsparticles";
 import { textAbovePrimaryColor } from "./theme";
-import { isSafariDesktop, useIsPowerfulDevice } from "../logic/device";
+import { useIsPowerfulMobileDevice } from "../logic/device";
+import { isDesktop } from "react-device-detect";
 
 export const BackgroundFullScreen: React.FC = () => {
-  const isPowerfulDesktop = useIsPowerfulDevice();
+  const isPowerfulMobileDevice = useIsPowerfulMobileDevice();
 
   return (
     <div>
-      {(isSafariDesktop() || isPowerfulDesktop) && (
+      {(isDesktop || isPowerfulMobileDevice) && (
         <Particles
           id="tsparticles"
           style={{

src/logic/device.ts

@@ -1,14 +1,13 @@
-import { isDesktop, isSafari } from "react-device-detect";
 import { useHardwareConcurrency, useMemoryStatus } from "react-adaptive-hooks";
+import { isMobile } from "react-device-detect";
 
-export const isSafariDesktop = () => isSafari && isDesktop;
-
-export const useIsPowerfulDevice = () => {
+export const useIsPowerfulMobileDevice = () => {
   const { deviceMemory } = useMemoryStatus({ deviceMemory: 1 });
   const { numberOfLogicalProcessors } = useHardwareConcurrency();
 
   return (
-    deviceMemory >= 8 &&
+    isMobile &&
+    deviceMemory >= 3 &&
     numberOfLogicalProcessors != null &&
     numberOfLogicalProcessors >= 8
   );