From 63440b5010ada4e0b98e9cf42bd9da3531da34da Mon Sep 17 00:00:00 2001
From: Suvansh Rana <suvansh.rana@peoplegrove.com>
Date: Sat, 21 Dec 2024 19:41:29 +0530
Subject: [PATCH] fix: make projects, skills and blogs centered in phone, left
 align in desktop

---
 sections/BlogSection.js    | 6 +++++-
 sections/DomainSection.js  | 7 +++++--
 sections/ProjectSection.js | 7 +++++--
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/sections/BlogSection.js b/sections/BlogSection.js
index 15480e8..d95a21c 100644
--- a/sections/BlogSection.js
+++ b/sections/BlogSection.js
@@ -2,15 +2,19 @@ import React from "react";
 import {
   Container,
   Grid,
+  useMediaQuery,
+  useTheme,
 } from "@material-ui/core";
 import BlogCard from "../components/BlogCard";
 
 
 export default function BlogSection({ blogsData }) {
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("sm"));
 
   return (
     <Container>
-      <Grid container justify="center" spacing={3}>
+      <Grid container justify={matches && "center"} spacing={3}>
         {blogsData.items.map((blogData, index) => (
           <Grid item key={`blog-card-${index}`}>
             <BlogCard {...blogData} />
diff --git a/sections/DomainSection.js b/sections/DomainSection.js
index 1e39b7f..d4f4483 100755
--- a/sections/DomainSection.js
+++ b/sections/DomainSection.js
@@ -1,10 +1,13 @@
-import { Grid } from "@material-ui/core";
+import { Grid, useMediaQuery, useTheme } from "@material-ui/core";
 import DomainListItem from "../components/DomainListItem";
 import domainData from "../data/domainData";
 
 export default function DomainSection() {
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
-    <Grid container justify="center" spacing={3}>
+    <Grid container justify={matches && "center"} spacing={3}>
       {domainData.map((_domainData, index) => (
         <Grid item key={`domain-item-${index}`}>
           <DomainListItem {..._domainData} />
diff --git a/sections/ProjectSection.js b/sections/ProjectSection.js
index 403a309..c341a38 100755
--- a/sections/ProjectSection.js
+++ b/sections/ProjectSection.js
@@ -1,12 +1,15 @@
 import React from "react";
-import { Container, Grid } from "@material-ui/core";
+import { Container, Grid, useMediaQuery, useTheme } from "@material-ui/core";
 import ProjectCard from "../components/ProjectCard";
 import projectData from "../data/projectData";
 
 function ProjectSection() {
+  const theme = useTheme();
+  const matches = useMediaQuery(theme.breakpoints.down("sm"));
+
   return (
     <Container>
-      <Grid container justify="center" spacing={3}>
+      <Grid container justify={matches && "center"} spacing={3}>
         {projectData.map((_projectData, index) => (
           <Grid item key={`project-card-${index}`}>
             <ProjectCard {..._projectData} />