home structure

src/layouts/white/White.jsx

@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme) => ({
   container: {
     minHeight: '100vh',
     paddingTop: '2rem',
-    paddingBottom: '2rem',
+    // paddingBottom: '2rem',
     fallbacks: [
       { minHeight: '-moz-calc(100% - 128px)' },
       { minHeight: '-webkit-calc(100% - 128px)' },

src/layouts/white/components/footer/Footer.jsx

@@ -9,6 +9,7 @@ const useStyles = makeStyles((theme) => ({
   icon: {
     width: '5rem',
     height: '5rem',
+    [theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' },
   },
 }));
 
@@ -43,15 +44,8 @@ const Footer = (props) => {
   return (
     <Grid container justify="center" alignItems="center" id="footer">
       <ScrollTop {...props}>
-        <KeyboardArrowUpIcon
-          className={classes.icon}
-          style={{
-            width: '5rem',
-            height: '5rem',
-          }}
-        />
+        <KeyboardArrowUpIcon className={classes.icon} />
       </ScrollTop>
-      {/* <div style={{ height: '30rem' }} /> */}
     </Grid>
   );
 };

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>
   );