fix: make projects, skills and blogs centered in phone, left align in…

… desktop
suvnshr · Dec 21, 2024 · 63440b5 · 63440b5
1 parent 6b77f6b
commit 63440b5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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} />