perf: about Dynamic Page Background

12Gustavo21 · Jan 3, 2024 · 32c97b5 · 32c97b5
1 parent 3feab3a
commit 32c97b5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 36 deletions.
diff --git a/src/assets/img/dark-forest.png b/src/assets/img/dark-forest.png
diff --git a/src/assets/pages/about/index.js b/src/assets/pages/about/index.js
@@ -114,7 +114,7 @@ function Index() {
 
     return (
         <Layout backgroundHeader="#070c11" backgroundFooter="#070c11" >
-            <S.Main>
+            <S.Main background={about.backgroud.url}>
                 <FireflyCanvas />
                 <S.ContentWrapper>
                     <AboutSection about={about} />

diff --git a/src/assets/pages/about/style.js b/src/assets/pages/about/style.js
@@ -1,8 +1,5 @@
 import styled from "styled-components";
 
-//Assets
-import darkForest from '../../img/dark-forest.png';
-
 /*
     Palette:
     #454545
@@ -15,7 +12,7 @@ import darkForest from '../../img/dark-forest.png';
 export const Main = styled.main`
     width: 100%;
     min-height: 100vh;
-    background: url(${darkForest}) no-repeat center/cover;
+    background: url(${props => props.background}) no-repeat center/cover;
     position: relative;
     z-index: 0;
 

diff --git a/src/assets/services/querys/aboutQuery/index.js b/src/assets/services/querys/aboutQuery/index.js
@@ -1,38 +1,41 @@
 import { gql } from "@apollo/client";
 
 export const ABOUT_QUERY = gql`
-    query {
-        about(where: {slug: "about"}) {
-            aboutTitle
-            aboutText
-            workTitle
-            works {
-                workDescription
-                workEnterprise
-                enterpriseSvg {
-                    url
-                }
-                workStart
-                workEnd
-                calendarSvg {
-                    url
-                }
-            }
-            educationTitle
-            educations {
-                educationDescription
-                educationEnterprise
-                enterpriseSvg {
-                    url
-                }
-                educationStart
-                educationEnd
-                calendarSvg {
-                    url
-                }
-            }
+  query {
+    about(where: { slug: "about" }) {
+      aboutTitle
+      aboutText
+      workTitle
+      works {
+        workDescription
+        workEnterprise
+        enterpriseSvg {
+          url
         }
-    }  
+        workStart
+        workEnd
+        calendarSvg {
+          url
+        }
+      }
+      educationTitle
+      educations {
+        educationDescription
+        educationEnterprise
+        enterpriseSvg {
+          url
+        }
+        educationStart
+        educationEnd
+        calendarSvg {
+          url
+        }
+      }
+      backgroud {
+        url
+      }
+    }
+  }
 `;
 
 export default ABOUT_QUERY;