From 4f7256da05dbbc400f7e17ef0db644fae9a4a0cc Mon Sep 17 00:00:00 2001
From: Dan Dobos <dan@prowarehouse.nl>
Date: Mon, 20 Oct 2025 15:52:07 +0200
Subject: [PATCH] refactor: update layout structure in Landing and Projects
 components for improved responsiveness

---
 src/pages/landing/Landing.jsx   |  2 +-
 src/pages/projects/Projects.jsx | 38 +++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/pages/landing/Landing.jsx b/src/pages/landing/Landing.jsx
index 2184b83..0bc9ce1 100644
--- a/src/pages/landing/Landing.jsx
+++ b/src/pages/landing/Landing.jsx
@@ -9,7 +9,7 @@ import { useIntl } from "react-intl";
 const Home = () => {
 	const t = useIntl();
 	return (
-		<Grid2 container direction="row" alignItems="stretch" spacing={3}>
+		<Grid2 container direction="column" alignItems="stretch">
 			<Grid2 item container direction="column">
 				<Grid2 item>
 					<Typography variant="h3">
diff --git a/src/pages/projects/Projects.jsx b/src/pages/projects/Projects.jsx
index 1c95666..4d46e1e 100644
--- a/src/pages/projects/Projects.jsx
+++ b/src/pages/projects/Projects.jsx
@@ -1,25 +1,31 @@
 import React from "react";
+import { Box } from "@mui/material";
 import {
-  // AngularData,
-  ReactData,
-  WebsitesData,
-  VueData,
-  GoData,
-  JavaData,
+	// AngularData,
+	ReactData,
+	WebsitesData,
+	VueData,
+	GoData,
+	JavaData,
 } from "data/Data";
 import MainAccordion from "components/main-accordion/MainAccordion";
 
 const Projects = () => {
-  return (
-    <>
-      {/* <MainAccordion items={AngularData} title='Angular' /> */}
-      <MainAccordion items={ReactData} title="React" />
-      <MainAccordion items={WebsitesData} title="HTML" />
-      <MainAccordion items={VueData} title="Vue" />
-      <MainAccordion items={GoData} title="Golang" />
-      <MainAccordion items={JavaData} title="Java" />
-    </>
-  );
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				width: "100%", // added so children can take full width
+				alignItems: "stretch", // optional, ensures flex children stretch
+			}}>
+			<MainAccordion items={ReactData} title="React" />
+			<MainAccordion items={WebsitesData} title="HTML" />
+			<MainAccordion items={VueData} title="Vue" />
+			<MainAccordion items={GoData} title="Golang" />
+			<MainAccordion items={JavaData} title="Java" />
+		</Box>
+	);
 };
 
 export default Projects;