landing page structure

src/pages/about/About.jsx

@@ -1,7 +1,103 @@
 import React from 'react';
+import { Container, Grid, Typography, Link } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+const useStyles = makeStyles((theme) => ({
+  // root: {
+  //   display: 'flex',
+  //   flexDirection: 'column',
+  //   justifyContent: 'flex-end',
+  //   height: 'auto',
+  // },
+  container: {
+    marginTop: 'auto',
+    // height:'100vh'
+    display: 'flex',
+    // position: 'absolute',
+  },
+  name: {
+    textTransform: 'uppercase',
+    letterSpacing: '2rem',
+  },
+}));
 
 const About = () => {
-  return <div>About ...in progress</div>;
+  const classes = useStyles();
+
+  return (
+    <Container id="about">
+      <Grid container direction="row" alignItems="stretch" justify="flex-end">
+        <div
+          style={{
+            height: '70vh',
+            display: 'flex',
+            alignItems: 'flex-end',
+          }}
+        >
+          <Grid
+            className={classes.container}
+            container
+            direction="column"
+            alignItems="flex-end"
+            justify="flex-end"
+            spacing={3}
+          >
+            <Grid item>
+              <Typography variant="h4" align="right" inline="true">
+                Software Developer
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Typography
+                variant="h1"
+                gutterBottom
+                align="right"
+                inline="true"
+                className={classes.name}
+              >
+                Dan Dobos
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Link
+                variant="h6"
+                href="https://skilltransfers.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                color="inherit"
+                gutterBottom
+              >
+                https://skilltransfers.com/
+              </Link>
+            </Grid>
+
+            <Grid item>
+              <Typography align="right" inline="true" variant="h6">
+                A passionate software developer with afinity for React and AWS.
+                <br />
+                Characterized by the desire of understanding and implementing
+                technological inovations.
+              </Typography>
+            </Grid>
+
+            {/* <Grid item>Contact</Grid> */}
+            <Grid item>
+              <Typography align="right" inline="true">
+                Contact
+              </Typography>
+              <Link
+                variant="h6"
+                href="mailto:danandreidobos@gmail.com"
+                target="_blank"
+                color="inherit"
+              >
+                danandreidobos@gmail.com
+              </Link>
+            </Grid>
+          </Grid>
+        </div>
+      </Grid>
+    </Container>
+  );
 };
 
 export default About;

src/pages/games/Games.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
 const Games = () => {
-  return <div>Games ...in progress</div>;
+  return (
+    <div style={{ minHeight: 'calc(100vh-128px)' }}>Games ...in progress</div>
+  );
 };
 
 export default Games;

src/pages/home/Home.jsx

@@ -1,7 +1,27 @@
 import React from 'react';
+import { Container, Grid, Typography, Link } from '@material-ui/core';
+import About from '../about';
+import Games from '../games';
+import Snippets from '../snippets';
+import Projects from '../projects';
 
 const Home = () => {
-  return <div>Home ...in progress</div>;
+  return (
+    <Grid container direction="row" alignItems="stretch">
+      <Grid item container>
+        <Projects />
+      </Grid>
+      <Grid item container>
+        <Games />
+      </Grid>
+      <Grid item container>
+        <Snippets />
+      </Grid>
+      <Grid item container>
+        <About />
+      </Grid>
+    </Grid>
+  );
 };
 
 export default Home;

src/pages/projects/Projects.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const Projects = () => {
   return (
-    <div>
+    <div style={{ minHeight: 'calc(100vh-128px)' }}>
       Projects ...in progress
     </div>
   )

src/pages/snippets/Snippets.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
 const Snippets = () => {
-  return <div>Snippets ...in progress</div>;
+  return (
+    <div style={{ minHeight: 'calc(100vh-128px)' }}>
+      Snippets ...in progress
+    </div>
+  );
 };
 
 export default Snippets;