feat: the mobile background is now static images instead of a video to improve performance

Author: gentlementlegen

public/locales/en/common.json

@@ -1,6 +1,6 @@
 {
   "h1": "Welcome to my portfolio",
-  "h2": "I am <1>Fernand</1>, a dev lead in South Korea. Passionate about video-games, I currently work with Next.js, Node.js, Typescript & GraphQL.",
+  "h2": "I am <1>Fernand</1>, a fullstack dev lead in South Korea. Passionate about video-games, I currently work with Next.js, Node.js, Typescript & GraphQL.",
   "skills": "My skills",
   "about": "about",
   "contact": "contact",

public/locales/fr/common.json

@@ -1,6 +1,6 @@
 {
   "h1": "Bienvenue dans mon portfolio",
-  "h2": "Je suis <1>Fernand</1>, un dev lead en Corée du Sud. Passionné de jeux-vidéos, je travaille actuellement avec Next.js, Node.js, Typescript & GraphQL.",
+  "h2": "Je suis <1>Fernand</1>, un dev lead fullstack en Corée du Sud. Passionné de jeux-vidéos, je travaille actuellement avec Next.js, Node.js, Typescript & GraphQL.",
   "skills": "mes compétences",
   "about": "à propos",
   "contact": "contact",

public/locales/ko/common.json

@@ -1,6 +1,6 @@
 {
   "h1": "제 포트폴리오에 오신 것을 환영합니다.",
-  "h2": "저는 한국에 사는 개발 리드 <1>페르난도</1>입니다. 비디오 게임에 열광하는 저는 현재 Next.js, Node.js, Typescript & GraphQL을 사용해 작업하고있습니다.",
+  "h2": "저는 한국에 사는 풀스택 개발 리드 <1>페르난도</1>입니다. 비디오 게임에 열광하는 저는 현재 Next.js, Node.js, Typescript & GraphQL을 사용해 작업하고있습니다.",
   "skills": "스킬즈",
   "about": "저는...",
   "contact": "콘택트",

src/app/[lang]/page.tsx

@@ -1,9 +1,6 @@
 import React from 'react'
-import { Box, Container, Grid, NoSsr, Paper, SxProps, Theme } from '@mui/material'
-import { BrowserView, MobileView } from 'react-device-detect'
-import CrossFadeImage from 'components/images/CrossFadeImage'
-import { getFragmentData, graphql } from 'generated'
-import { ProjectElementFragmentDoc } from 'generated/graphql'
+import { Box, Container, Grid, Paper, SxProps, Theme } from '@mui/material'
+import { graphql } from 'generated'
 import apolloClient from 'apolloClient'
 import styles from 'styles/Home.module.css'
 import ContactForm from 'components/contact/ContactForm'
@@ -13,6 +10,7 @@ import SkillContainer from 'components/skills/SkillContainer'
 import ProjectContainer from 'components/project/ProjectContainer'
 import WelcomeMessage from 'components/home/WelcomeMessage'
 import DownArrow from 'components/home/DownArrow'
+import Background from 'components/home/Background'
 
 interface HomePageProps {
   params: {
@@ -72,18 +70,7 @@ async function HomePage({ params }: HomePageProps) {
   return (
     <>
       <Box id={'home'} sx={style.root} />
-      <NoSsr>
-        <BrowserView>
-          <Box component={'video'} autoPlay muted loop preload="none" id="backgroundVideo" sx={style.videoContainer}>
-            <source src="/backgroundVideo.mp4" type="video/mp4" />
-          </Box>
-        </BrowserView>
-        <MobileView>
-          <Box sx={style.videoContainer}>
-            <CrossFadeImage images={getFragmentData(ProjectElementFragmentDoc, projects).map((o) => o.image.url)} />
-          </Box>
-        </MobileView>
-      </NoSsr>
+      <Background projects={projects} />
       <Container className={styles.mainGrid}>
         <Grid container className={styles.mainGrid} alignItems={'center'}>
           <Grid item xs={12} sx={{ color: 'secondary.main', textShadow: '1px 1px 5px black' }}>

src/components/home/Background.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import React from 'react'
+import { Box, NoSsr, SxProps, Theme } from '@mui/material'
+import { BrowserView, MobileView } from 'react-device-detect'
+import CrossFadeImage from 'components/images/CrossFadeImage'
+import { FragmentType, getFragmentData } from 'generated'
+import { ProjectElementFragmentDoc } from 'generated/graphql'
+import { ProjectElement } from 'components/project/project.operations'
+
+interface BackgroundProps {
+  projects: FragmentType<typeof ProjectElement>[]
+}
+
+const style: Record<'videoContainer', SxProps<Theme>> = {
+  videoContainer: {
+    height: { xs: 'calc(100vh - 56px)', md: 'calc(100vh - 64px)' },
+    top: { sx: 56, md: 64 },
+    width: '100%',
+    position: 'fixed',
+    zIndex: -3,
+    objectFit: 'cover',
+    filter: 'blur(4px)',
+    msFilter: 'blur(4px)',
+    webkitFilter: 'blur(4px)',
+  },
+}
+
+export default function Background({ projects }: BackgroundProps) {
+  return (
+    <NoSsr>
+      <BrowserView>
+        <Box component={'video'} autoPlay muted loop preload="none" id="backgroundVideo" sx={style.videoContainer}>
+          <source src="/backgroundVideo.mp4" type="video/mp4" />
+        </Box>
+      </BrowserView>
+      <MobileView>
+        <Box sx={style.videoContainer}>
+          <CrossFadeImage images={getFragmentData(ProjectElementFragmentDoc, projects).map((o) => o.image.url)} />
+        </Box>
+      </MobileView>
+    </NoSsr>
+  )
+}