refactor: update layout structure in Landing and Projects components for improved responsiveness

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">

src/pages/projects/Projects.jsx

@@ -1,25 +1,31 @@
 import React from "react";
+import { Box } from "@mui/material";
 import {
-  // AngularData,
+	// AngularData,
-  ReactData,
+	ReactData,
-  WebsitesData,
+	WebsitesData,
-  VueData,
+	VueData,
-  GoData,
+	GoData,
-  JavaData,
+	JavaData,
 } from "data/Data";
 import MainAccordion from "components/main-accordion/MainAccordion";
 
 const Projects = () => {
-  return (
+	return (
-    <>
+		<Box
-      {/* <MainAccordion items={AngularData} title='Angular' /> */}
+			sx={{
-      <MainAccordion items={ReactData} title="React" />
+				display: "flex",
-      <MainAccordion items={WebsitesData} title="HTML" />
+				flexDirection: "column",
-      <MainAccordion items={VueData} title="Vue" />
+				width: "100%", // added so children can take full width
-      <MainAccordion items={GoData} title="Golang" />
+				alignItems: "stretch", // optional, ensures flex children stretch
-      <MainAccordion items={JavaData} title="Java" />
+			}}>
-    </>
+			<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;