Merge pull request #65 from chicio/particles-home-background

New home background 🚀

Author: chicio

CHANGELOG.md

@@ -1,6 +1,15 @@
 # Change Log
 All changes to Chicio coding will be documented in this file.
 
+## [4.4.0](https://github.com/chicio/chicio.github.io/releases/tag/v4.4.0)
+Release date: 2021-04-29
+
+#### Added
+
+- New home background with tsParticle
+- Added adaptive loading dependency
+- Added device detect dependency
+
 ## [4.3.0](https://github.com/chicio/chicio.github.io/releases/tag/v4.3.0)
 Release date: 2021-04-29
 

__stories__/molecules/post-tags.stories.tsx

@@ -9,7 +9,7 @@ const Template: Story<PostTagsProps> = (args) => <PostTags {...args} />;
 
 export const PostTagsStory = Template.bind({});
 PostTagsStory.args = {
-  tags: ["iOS", "macOS", "mobile app development"],
+  tags: ["ios", "macos", "mobile app development"],
 };
 PostTagsStory.storyName = "Post Tags";
 

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>;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fabrizioduroni.it",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "private": true,
   "description": "Fabrizio Duroni aka 'chicio' website",
   "repository": {
@@ -33,18 +33,19 @@
     "start": "gatsby develop",
     "prebuild": "npm run test",
     "build": "gatsby build",
-    "postbuild": "npm run build-storybook && cp -R ./static/chicio-coding-design-system ./public/",
+    "postbuild": "npm run build-storybook",
     "build-ci": "./scripts/build-ci.sh",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "predeploy": "npm run clean && npm run build",
     "deploy": "gh-pages -d public -b main",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o ./static/chicio-coding-design-system"
+    "build-storybook": "build-storybook -o ./public/chicio-coding-design-system"
   },
   "dependencies": {
     "@styled-icons/fa-brands": "^10.26.0",
     "@styled-icons/fa-solid": "^10.32.0",
+    "@types/react-adaptive-hooks": "0.0.0",
     "@types/styled-components": "^5.1.9",
     "babel-plugin-styled-components": "^1.12.0",
     "disqus-react": "^1.0.11",
@@ -73,8 +74,11 @@
     "katex": "^0.13.0",
     "prismjs": "^1.23.0",
     "react": "^17.0.1",
+    "react-adaptive-hooks": "0.0.8",
+    "react-device-detect": "^1.17.0",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-tsparticles": "^1.26.4",
     "sass": "^1.32.8",
     "styled-components": "^5.2.3"
   },

package.json

@@ -0,0 +1,89 @@
+import React from "react";
+import Particles from "react-tsparticles";
+import { textAbovePrimaryColor } from "./theme";
+import { isSafariDesktop, useIsPowerfulDesktop } from "../logic/device";
+
+export const BackgroundFullScreen: React.FC = () => {
+  const isPowerfulDesktop = useIsPowerfulDesktop();
+
+  return (
+    <div>
+      {(isSafariDesktop() || isPowerfulDesktop) && (
+        <Particles
+          id="tsparticles"
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+          }}
+          options={{
+            background: {
+              color: {
+                value: "transparent",
+              },
+            },
+            fpsLimit: 60,
+            interactivity: {
+              detectsOn: "canvas",
+              events: {
+                onHover: {
+                  enable: true,
+                  mode: "repulse",
+                },
+              },
+              modes: {
+                repulse: {
+                  distance: 150,
+                  duration: 0.5,
+                },
+              },
+            },
+            particles: {
+              color: {
+                value: textAbovePrimaryColor,
+              },
+              links: {
+                enable: true,
+                color: textAbovePrimaryColor,
+                blink: true,
+                distance: 150,
+                opacity: 0.5,
+                width: 1,
+              },
+              collisions: {
+                enable: false,
+                mode: "bounce",
+              },
+              move: {
+                direction: "none",
+                enable: true,
+                outMode: "bounce",
+                random: false,
+                speed: 3,
+                straight: false,
+              },
+              number: {
+                density: {
+                  enable: true,
+                  value_area: 800,
+                },
+                value: 80,
+              },
+              opacity: {
+                value: 0.5,
+              },
+              shape: {
+                type: "circle",
+              },
+              size: {
+                random: true,
+                value: 3,
+              },
+            },
+            detectRetina: true,
+          }}
+        />
+      )}
+    </div>
+  );
+};

src/components/background-fullscreen.tsx

@@ -1,12 +1,17 @@
 import { DefaultTheme } from "styled-components";
 import { Colors } from "./styled";
 
+export const primaryColor = "#3F51B5";
+export const primaryColorDark = "#303F9F";
+export const primaryColorLight = "#DFDFF1";
+export const textAbovePrimaryColor = "#FFFFFF";
+
 export const dark: Colors = {
-  primaryColor: "#3F51B5",
-  primaryColorDark: "#303F9F",
-  primaryColorLight: "#DFDFF1",
+  primaryColor,
+  primaryColorDark,
+  primaryColorLight,
   generalBackground: "#181918",
-  textAbovePrimaryColor: "#FFFFFF",
+  textAbovePrimaryColor,
   primaryTextColor: "#FAFAFA",
   secondaryTextColor: "#A6A6A6",
   accentColor: "#4fA7ff",
@@ -17,11 +22,11 @@ export const dark: Colors = {
 };
 
 export const light: Colors = {
-  primaryColor: "#3F51B5",
-  primaryColorDark: "#303F9F",
-  primaryColorLight: "#DFDFF1",
+  primaryColor,
+  primaryColorDark,
+  primaryColorLight,
   generalBackground: "#FBFBFB",
-  textAbovePrimaryColor: "#FFFFFF",
+  textAbovePrimaryColor,
   primaryTextColor: "#151515",
   secondaryTextColor: "#575757",
   accentColor: "#1F67FF",

src/components/theme.ts

@@ -0,0 +1,16 @@
+import { isDesktop, isSafari } from "react-device-detect";
+import { useHardwareConcurrency, useMemoryStatus } from "react-adaptive-hooks";
+
+export const isSafariDesktop = () => isSafari && isDesktop;
+
+export const useIsPowerfulDesktop = () => {
+  const { deviceMemory } = useMemoryStatus({ deviceMemory: 1 });
+  const { numberOfLogicalProcessors } = useHardwareConcurrency();
+
+  return (
+    isDesktop &&
+    deviceMemory >= 8 &&
+    numberOfLogicalProcessors != null &&
+    numberOfLogicalProcessors >= 8
+  );
+};

src/logic/device.ts

@@ -11,6 +11,7 @@ import { ContainerFullscreen } from "../components/design-system/atoms/container
 import { Footer } from "../components/design-system/organism/footer";
 import { tracking } from "../logic/tracking";
 import { OgPageType } from "../logic/seo";
+import { BackgroundFullScreen } from "../components/background-fullscreen";
 
 const HomePage: React.FC<PageProps> = ({ location }) => {
   const data = useStaticQuery<HomePageQuery>(
@@ -38,6 +39,7 @@ const HomePage: React.FC<PageProps> = ({ location }) => {
         imageUrl={`/${featuredImage}`}
       />
       <ContainerFullscreen>
+        <BackgroundFullScreen />
         <ProfilePresentation author={author} />
         <DownArrow />
       </ContainerFullscreen>

src/pages/index.tsx

@@ -4,7 +4,7 @@ description: "The first of a short series of post in which I describe my two lat
 Mp3ID3Tagger. In this post I will talk about why I started to develop them."
 date: 2018-05-07
 image: ../images/posts/mp3id3tagger-id3tageditor.jpg
-tags: [swift, ios, apple, mobile application development, macOS]
+tags: [swift, ios, apple, mobile application development, macos]
 comments: true
 math: false
 authors: [fabrizio_duroni]