feat: static page

* feat: static site * feat: mui support & basic theming * feat: entgamers favicon * feat: public images until dynamic content can be used * feat: entgamers & gaming assets * feat: eslint extra rules * feat: mui theme modifications * feat: fontawesome, gsap, bundle analyzer * feat: common interfaces * feat: basic layout * chore: upadted dependencies * chore: updated dependencies * feat: updated link styles * feat: layout now have better interfaces * feat: basic seo component * feat: static website * feat: env variable rules in .gitignore * feat: added lint to pre-commit * docs: initial documentation * ci: deploy using pm2 * ci: pm2 configuration file * ci: github action deploy preview * ci: github action deploy production * ci: env variables now pass to pm2 * fix: pass environment to actions * feat: post deploy as sudo * fix: pass only required env to deploy * revert: deploy as sudo Refs: 624b225 * fix: server use isomorphic-fetch * ci: use yarn instead npm * fix: glass text contrast * fix: production git ref * docs: deploy env vars
2022-10-09 15:39:16 -05:00
parent 8573d61066
commit 3f1e80051f
132 changed files with 4942 additions and 394 deletions
@@ -0,0 +1,101 @@
+import gsap, { Linear } from 'gsap'
+import ScrollTrigger from 'gsap/dist/ScrollTrigger'
+import ScrollToPlugin from 'gsap/dist/ScrollToPlugin'
+import { Container, Paper } from '@mui/material'
+import { FC, useEffect, useRef } from 'react'
+
+import SocialSlider, { SocialSliderProps } from '@components/pages/home/socialNetworks/SocialSlider'
+
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
+
+export interface SocialNetworksProps {
+  socialNetworks: SocialSliderProps['slides']
+}
+
+const SocialNetworks: FC<SocialNetworksProps> = ({ socialNetworks }) => {
+  const layer01 = useRef<HTMLDivElement| null>(null)
+  const layer02 = useRef<HTMLDivElement| null>(null)
+  const layer03 = useRef<HTMLDivElement| null>(null)
+  const layer04 = useRef<HTMLDivElement| null>(null)
+
+  useEffect(() => {
+    const scrollTrigger = {
+      trigger: layer01.current,
+      start: 'top bottom',
+      end: 'bottom top',
+      toggleActions: 'play pause resume pause'
+    }
+    const layer02Animation = gsap.to(layer02.current, { duration: 150, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
+    const layer03Animation = gsap.to(layer03.current, { duration: 60, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
+    const layer04Animation = gsap.to(layer04.current, { duration: 125, backgroundPositionX: '2048px', repeat: -1, ease: Linear.easeNone, scrollTrigger })
+
+    return () => {
+      layer02Animation.kill()
+      layer03Animation.kill()
+      layer04Animation.kill()
+    }
+  }, [])
+
+  return (
+    <div
+      ref={layer01}
+      css={{
+        minHeight: '100vh',
+        backgroundImage: 'url(/images/backgrounds/SkyNightLayer01.png)',
+        backgroundPositionX: 'center',
+        backgroundPositionY: 'center',
+        backgroundSize: 'auto'
+      }}
+    >
+      <div
+        ref={layer02}
+        css={{
+          minHeight: '100vh',
+          backgroundImage: 'url(/images/backgrounds/SkyNightLayer02.png)',
+          backgroundPositionX: '0',
+          backgroundPositionY: 'center',
+          backgroundSize: 'auto',
+          backgroundRepeat: 'repeat-x'
+        }}
+      >
+        <div
+          ref={layer03}
+          css={{
+            minHeight: '100vh',
+            backgroundImage: 'url(/images/backgrounds/SkyNightLayer03.png)',
+            backgroundPositionX: '0',
+            backgroundPositionY: 'center',
+            backgroundSize: 'auto',
+            backgroundRepeat: 'repeat-x'
+          }}
+        >
+          <div
+            ref={layer04}
+            css={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              minHeight: '100vh',
+              backgroundImage: 'url(/images/backgrounds/SkyNightLayer04.png)',
+              backgroundPositionX: '0',
+              backgroundPositionY: 'center',
+              backgroundSize: 'auto',
+              backgroundRepeat: 'repeat-x'
+            }}
+          >
+            <Paper
+              component={Container}
+              variant='glass'
+            >
+              <SocialSlider
+                slides={socialNetworks}
+              />
+            </Paper>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SocialNetworks