home structure

src/pages/about/About.jsx

@@ -17,6 +17,11 @@ const useStyles = makeStyles((theme) => ({
   name: {
     textTransform: 'uppercase',
     letterSpacing: '2rem',
+    [theme.breakpoints.down('md')]: {
+      letterSpacing: '1rem',
+      fontSize: '1.4rem',
+      fontWeight: 'bold',
+    },
   },
 }));
 

src/pages/home/Home.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Grid, Typography, Link } from '@material-ui/core';
+import { Grid, Typography, Divider } from '@material-ui/core';
 import About from '../about';
 import Games from '../games';
 import Snippets from '../snippets';
@@ -7,18 +7,38 @@ import Projects from '../projects';
 
 const Home = () => {
   return (
-    <Grid container direction="row" alignItems="stretch">
-      <Grid item container>
-        <Projects />
+    <Grid container direction="row" alignItems="stretch" spacing={3}>
+      <Grid item container direction="column">
+        <Grid item>
+          <Typography variant="h3">Projects</Typography>
+          <Divider variant="inset"/>
+        </Grid>
+        <Grid item>
+          <Projects />
+        </Grid>
       </Grid>
-      <Grid item container>
-        <Games />
+      <Grid item container direction="column">
+        <Grid item>
+          <Typography variant="h3">Games</Typography>
+          <Divider variant="inset"/>
+        </Grid>
+        <Grid item>
+          <Games />
+        </Grid>
       </Grid>
-      <Grid item container>
-        <Snippets />
+      <Grid item container direction="column">
+        <Grid item>
+          <Typography variant="h3">Snippets</Typography>
+          <Divider variant="inset"/>
+        </Grid>
+        <Grid item>
+          <Snippets />
+        </Grid>
       </Grid>
-      <Grid item container>
-        <About />
+
+      <Grid item container justify="flex-end">
+        <Grid item>
+        <About /></Grid>
       </Grid>
     </Grid>
   );