From e4d646d8b64882117b77a64a45006cf2160dae9d Mon Sep 17 00:00:00 2001
From: Kyle Wiskel <kwiskel@gmail.com>
Date: Tue, 19 Nov 2024 17:42:33 -0700
Subject: [PATCH] Background + responsiveness updates

---
 app/page.tsx | 60 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 300d970..188ccb8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,12 @@
 'use client';
-import { Box, useTheme } from '@mui/material';
+import { Box, Collapse, useTheme } from '@mui/material';
 import NavigationBar from './ui/NavigationBar';
 import TitleSection from './ui/TitleSection';
 import ProjectsSection from './ui/ProjectsSection';
 import ContactSection from './ui/ContactSection';
 import WorkSection from './ui/WorkSection';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
+import { ExpandMore } from '@mui/icons-material';
 
 export default function Page() {
   const theme = useTheme();
@@ -14,23 +15,46 @@ export default function Page() {
   const workRef = useRef(null);
   const contactRef = useRef(null);
 
+  // const [showMore, setShowMore] = useState(false); // Controls expanded content
+
+  // const setCollapse = () => {
+  //   if (showMore) window.scrollTo({ top: 0, behavior: 'smooth' });
+  //   setShowMore(!showMore);
+  // };
+
   return (
-    <Box
-      sx={{
-        backgroundColor: theme.palette.background.default,
-        backgroundImage: (theme) =>
-          theme.palette.mode === 'dark'
-            ? 'radial-gradient(circle, #ffffff26 1px, transparent 1px)'
-            : 'radial-gradient(circle, #12121226 1px, transparent 1px)',
-        backgroundSize: '40px 40px' /* Adjust for dot spacing */,
-        height: 'fit-content',
-      }}
-    >
-      <NavigationBar projectRef={projectRef} workRef={workRef} contactRef={contactRef} />
-      <TitleSection />
-      <ProjectsSection ref={projectRef} />
-      <WorkSection ref={workRef} />
-      <ContactSection ref={contactRef} />
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+      <Box
+        sx={{
+          maxWidth: '1300px',
+          margin: {
+            xs: '25px 15px 50px 15px',
+            lg: '25px 100px 50px 100px',
+          },
+        }}
+      >
+        <NavigationBar projectRef={projectRef} workRef={workRef} contactRef={contactRef} />
+        <TitleSection />
+        {/* <ExpandMore
+          sx={{
+            display: 'block',
+            margin: 'auto',
+            fontSize: '50px',
+            color: theme.palette.text.primary,
+            cursor: 'pointer',
+            marginTop: '100px',
+            rotate: showMore ? '180deg' : '0deg',
+          }}
+          onClick={() => setCollapse()}
+        /> */}
+        <Collapse in={true} timeout={{ enter: 2000, exit: 0 }} sx={{ maxWidth: '100%' }}>
+          <>
+            <ProjectsSection ref={projectRef} />
+            <WorkSection ref={workRef} />
+            <ContactSection ref={contactRef} />
+          </>
+        </Collapse>
+      </Box>
     </Box>
   );
 }