Update on the minigame

src/app/layout.tsx

@@ -80,7 +80,7 @@ export default function RootLayout({
                * rendered client side and is therefore not included creating
                * an SSR Tree mismatch error.
                */}
-                <GithubPrimerWrapper>
+              <GithubPrimerWrapper>
                   {/* <PageLayout padding='condensed' containerWidth='full'>
                     <PageLayout.Header sx={{border: '1px solid', borderColor: 'border.default', position: 'sticky'}}>
                       <PortfolioHeader />
@@ -112,15 +112,11 @@ export default function RootLayout({
                   >
                     <PortfolioHeader />
                   </Box>
-                  <PageLayout>
-                    <PageLayout.Pane sticky offsetHeader={64} width={"large"}>
-                      <PhoneComponent />
-                    </PageLayout.Pane>
+                  <PageLayout sx={{ overflow: "hidden" }}>
                     <PageLayout.Content sx={{
                       border: "border.default",
-                      minHeight: "80%"
                     }}>
-                      <Box sx={{ minHeight: "100vh" }}>
+                      <Box sx={{ minHeight: "100vh"}}>
                         {children}
                       </Box>
                     </PageLayout.Content>
@@ -129,7 +125,7 @@ export default function RootLayout({
                     </PageLayout.Footer>
                   </PageLayout>
                 </Box>
-                </GithubPrimerWrapper>
+              </GithubPrimerWrapper>
             </NoSSR>
           </I18nProvider>
         </body>

src/app/page.tsx

@@ -13,13 +13,19 @@ export default function Home() {
     <Box sx={{
       display: 'flex',
       position: 'relative',
-      justifyContent: 'center',
-      alignItems: 'center',
-      minHeight: 'inherit'
+      justifyContent: 'center', // Flex Horizontal alignment
+      alignItems: 'center', // Flex Vertical alignment
+      minHeight: 'inherit',
+      flexDirection: 'row',
+      borderColor: "red",
+      border: "1px solid"
     }}>
-      <Text>
-        <Heading as='h1' sx={{padding: "15px"}}>Welcome to my website!</Heading>
-      </Text>
+      <Box sx={{border: "1px solid grey", padding: "15px", flexGrow: 1, minHeight: "100vh", minWidth: "50vh", display: "flex", justifyContent: "center", alignItems: "center"}}>
+        <Heading as='h1' sx={{ padding: "15px" }}>Welcome to my website!</Heading>
+      </Box>
+      <Box sx={{ border: "1px solid blue", padding: "15px", flexGrow: 1, minHeight: "100vh", minWidth: "50vh", display: "flex", justifyContent: "center", alignItems: "center" }}>
+        <PhoneComponent />
+      </Box>
     </Box>
   )
 }

src/components/phoneComponents/PhoneComponent.tsx

@@ -1,22 +1,19 @@
 import { Box, PageLayout } from "@primer/react";
 import PortfolioHeader from '../PortfolioHeader';
+import PhoneContext from "./PhoneContext";
+import PhoneMockup from "@/content/img/Samsung Galaxy S21 5G — Black — Shadow.png"
+import Image from "next/image";
+import { relative } from "path";
 
 export default function PhoneComponent(){
   return(
-    <PageLayout columnGap="condensed" sx={{
-      border: "1px solid",
-      borderColor: "cyan",
-      minHeight: "80vh",
-      minWidth: "100%"
+    <Box sx={{
+      position: "relative",
+      textAlign: "center",
+      userSelect: "none",
     }}>
-      <PageLayout.Header sx={{
-        border: "1px solid",
-        borderColor: "border.default"
-      }}>
-        <Box>
-          Test Header
-        </Box>
-      </PageLayout.Header>
-    </PageLayout>
+      <Image src={PhoneMockup} alt="Samsung Galaxy S21 5G - Black" height={800} width={450} style={{zIndex: 10, width: "100%", position: "relative"}} draggable={false}/>
+      <PhoneContext/>
+    </Box>
   )
 }

src/components/phoneComponents/PhoneContext.tsx

@@ -0,0 +1,42 @@
+import { Box, Text } from "@primer/react";
+import type { BetterSystemStyleObject } from "@primer/react/lib/sx";
+import deepmerge from "deepmerge";
+
+
+/**
+ * This is the function that exports the PhoneContext Component.
+ * @returns Test
+ */
+export default function PhoneContext({
+  sx
+}: {
+  sx?: BetterSystemStyleObject
+}){
+  // This component doesn't take any arguments but wraps all he returns
+  // in the PhoneContextManager Component which is in charge of supervising
+  // the state of the "game" the player is at on the website.
+
+  const wrapperStyle: BetterSystemStyleObject = {
+    backgroundColor: "#000000",
+    minWidth: "100%",
+    minHeight: "100%",
+    borderRadius: "20px",
+    padding: "15px",
+    zIndex: 1,
+    flexGrow: 1,
+  }
+
+  return(
+    <Box sx={{
+      position: "absolute", top: "100%", left: "50%",
+      transform: "translate(-50%, -50%)", display: "flex",
+      width: 320, height: 700, marginTop: -403, zIndex: 1 }}>
+      <Box sx={wrapperStyle}>
+        {/* Here should be the text content, for now */}
+        <Text>
+          Here is the context.
+        </Text>
+      </Box>
+    </Box>
+  )
+}

src/components/wrappers/GithubPrimerWrappers.tsx

@@ -5,7 +5,7 @@ export default function GithubPrimerWrapper({children}: {
 }){
 
   return(
-    <ThemeProvider colorMode={"night"}>
+    <ThemeProvider colorMode={"day"}>
       <BaseStyles>
         <Box sx={{bg: "canvas.default"}}>
           {children}