Fixed most things for mobile

Author: 0xJeremy

src/components/About.js

@@ -1,34 +1,38 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import Avatar from "@material-ui/core/Avatar";
 import Grid from "@material-ui/core/Grid";
-import { fontSans, slate, orange } from "./PageStyles";
+import { fontSans, slate } from "./PageStyles";
 import { SectionHeader, StyledLink } from "./Common";
 
 const smallScreen = window.screen.height < 850;
+const thinScreen = window.screen.width < 950;
 
 const useStyles = makeStyles((theme) => ({
   root: {
     margin: "auto",
     marginTop: "50vh",
-    maxWidth: "60%",
+    width: (props) => (props.thinScreen ? "95%" : "60%"),
   },
   grid: {
     marginTop: "5vh",
   },
+  gridItem: {
+    minWidth: (props) => (props.thinScreen ? "100%" : "auto"),
+  },
   about: {
     fontFamily: fontSans,
     fontSize: "1.2em",
     color: slate,
     position: "relative",
     top: "50%",
     transform: "translateY(-50%)",
-    lineHeight: "1.6",
+    lineHeight: (props) => (props.thinScreen ? "1.2" : "1.6"),
   },
   imgWrapper: {
     // TODO: make this image prettier
     display: "block",
     position: "relative",
+    width: (props) => (props.thinScreen ? "100%" : "auto"),
     // width: '100%',
     // borderRadius: '5px',
     // backgroundColor: orange,
@@ -67,13 +71,13 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function About(props) {
-  const classes = useStyles({ smallScreen });
+  const classes = useStyles({ smallScreen, thinScreen });
 
   return (
     <div className={classes.root} id="about">
       <SectionHeader number="1" text="About Me" />
       <Grid container spacing={3} className={classes.grid}>
-        <Grid item xs={8}>
+        <Grid item xs={8} className={classes.gridItem}>
           <div className={classes.about}>
             Hello! My name is Jeremy and I write code that lives and runs on
             hardware. Specifically, I enjoy writing code for robots, 3D
@@ -97,9 +101,9 @@ export default function About(props) {
           </div>
         </Grid>
 
-        <Grid item xs={4}>
+        <Grid item xs={4} className={classes.gridItem}>
           <div className={classes.imgWrapper}>
-            <img rounded src="static/avatar.jpeg" className={classes.avatar} />
+            <img src="static/avatar.jpeg" alt="Avatar" className={classes.avatar} />
           </div>
         </Grid>
       </Grid>

src/components/Common.js

@@ -3,6 +3,8 @@ import Button from "@material-ui/core/Button";
 import { makeStyles, withStyles } from "@material-ui/core/styles";
 import { orange, slightOrange, fontMono, llslate } from "./PageStyles";
 
+const thinScreen = window.screen.width < 950;
+
 const StyledButton = withStyles({
   root: {
     color: orange,
@@ -16,13 +18,13 @@ const StyledButton = withStyles({
 
 const sectionHeaderStyles = makeStyles((theme) => ({
   root: {
-    width: "80%",
-    lineHeight: "0.1em",
+    width: "100%",
+    // lineHeight: "0.1em",
     // borderBottom: `1px solid ${slate}`,
-    margin: "10px 0 20px",
+    margin: (props) => (props.thinScreen ? "10px 0 0" : "10px 0 20px"),
     color: llslate,
     fontFamily: fontMono,
-    fontSize: "2em",
+    fontSize: (props) => (props.thinScreen ? "1.5em" : "2em"),
   },
   number: {
     color: orange,
@@ -36,7 +38,7 @@ const sectionHeaderStyles = makeStyles((theme) => ({
 }));
 
 function SectionHeader(props) {
-  const classes = sectionHeaderStyles();
+  const classes = sectionHeaderStyles({ thinScreen });
 
   return (
     <div>

src/components/Contact.js

@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { fontMono, fontSans, orange, llslate, slate } from "./PageStyles";
 import { StyledButton } from "./Common";
 
-const smallScreen = window.screen.height < 850;
+const thinScreen = window.screen.width < 750;
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -27,23 +27,22 @@ const useStyles = makeStyles((theme) => ({
   },
   info: {
     color: slate,
-    fontSize: "1.5em",
-    width: "60%",
+    fontSize: (props) => (props.thinScreen ? "1.1em" : "1.5em"),
+    width: (props) => (props.thinScreen ? "100%" : "60%"),
     margin: "auto",
     textAlign: "center",
     fontFamily: fontSans,
     marginTop: "2vh",
   },
   centerButton: {
     textAlign: "center",
-    marginTop: "4vh",
+    marginTop: (props) => (props.thinScreen ? "8vh" : "4vh"),
   },
   outline: {
     borderColor: orange,
   },
   button: {
     fontSize: "1em",
-    // marginRight: "2em",
     padding: "12px 20px 12px 20px",
   },
   footer: {
@@ -66,11 +65,11 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function Contact(props) {
-  const classes = useStyles({ smallScreen });
+  const classes = useStyles({ thinScreen });
 
   return (
     <div className={classes.root} id="contact">
-      <div className={classes.sectionTitle}>04. What's next?</div>
+      <div className={classes.sectionTitle}>03. What's next?</div>
       <div className={classes.subtitle}>Get In Touch</div>
       <div className={classes.info}>
         I'm not currently looking for new job opportunities, but my inbox is
@@ -95,8 +94,15 @@ export default function Contact(props) {
       </div>
 
       <div className={classes.footer}>
-        This site is made by Jeremy Kanovsky with React.js and some small
-        headache.
+        <a
+          href="https://github.com/0xJeremy/0xJeremy.github.io"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={classes.a}
+        >
+          This site is made by Jeremy Kanovsky with React.js and some small
+          headache.
+        </a>
       </div>
     </div>
   );

src/components/Hero.js

@@ -1,19 +1,19 @@
 import React, { useEffect } from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { Link } from "react-router-dom";
 import { HashLink } from "react-router-hash-link";
 import { fontMono, fontSans, orange, llslate, slate } from "./PageStyles";
-import { StyledButton } from "./Common";
+import { StyledButton, StyledLink } from "./Common";
 
 const offsetTop = 18;
 const smallScreen = window.screen.height < 850;
+const thinScreen = window.screen.width < 950;
 
 const useStyles = makeStyles((theme) => ({
   root: {
     position: "relative",
     top: (props) =>
       props.smallScreen ? `${offsetTop / 3}vh` : `${offsetTop}vh`,
-    width: "70%",
+    width: (props) => (props.smallScreen ? "95%" : "70%"),
     margin: "auto",
   },
   hello: {
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: "600",
     letterSpacing: "1px",
     fontFamily: fontSans,
-    fontSize: "5em",
+    fontSize: (props) => (props.smallScreen ? "2.5em" : "5em"),
   },
   name: {
     color: llslate,
@@ -36,26 +36,28 @@ const useStyles = makeStyles((theme) => ({
   },
   about: {
     fontFamily: fontSans,
-    fontSize: "1.2em",
+    fontSize: (props) => (props.thinScreen ? "1.1em" : "1.2em"),
+    marginTop: (props) => (props.thinScreen ? "16px" : 0),
     color: slate,
-    maxWidth: "50%",
+    maxWidth: (props) => (props.smallScreen ? "90%" : "50%"),
   },
   buttonGroup: {
-    marginTop: "64px",
+    marginTop: (props) => (props.smallScreen ? "32px" : "64px"),
   },
   outline: {
     borderColor: orange,
   },
   button: {
     float: "none",
-    fontSize: "1em",
+    fontSize: (props) => (props.thinScreen ? "0.8em" : "1em"),
     marginRight: "2em",
-    padding: "12px 20px 12px 20px",
+    padding: (props) =>
+      props.thinScreen ? "6px 10px 6px 10px" : "12px 20px 12px 20px",
   },
 }));
 
 export default function Hero(props) {
-  const classes = useStyles({ smallScreen });
+  const classes = useStyles({ smallScreen, thinScreen });
 
   useEffect(() => {
     document.title = "Home | Jeremy Kanovsky";
@@ -72,7 +74,7 @@ export default function Hero(props) {
       <div className={classes.about}>
         I'm a Boston-based software engineer who specializes in writing code for
         IoT devices and robots. Sometimes, I dabble in hardware. Currently, I'm
-        an engineer at Markforged working on the software powering
+        an engineer at <StyledLink href="https://markforged.com/" text="Markforged" /> working on the software powering
         next-generation 3D printers.
       </div>
 
@@ -87,15 +89,15 @@ export default function Hero(props) {
           </StyledButton>
         </HashLink>
 
-        <Link to="/projects" style={{ textDecoration: "none" }}>
+        <HashLink to="/#projects" style={{ textDecoration: "none" }}>
           <StyledButton
             className={classes.button}
             classes={{ outlined: classes.outline }}
             variant="outlined"
           >
             See My Work
           </StyledButton>
-        </Link>
+        </HashLink>
       </div>
     </div>
   );

src/components/OtherProjects.js

@@ -27,7 +27,7 @@ import * as SpacePrinter from "./projects/SpacePrinter";
 import * as Crawler from "./projects/Crawler";
 import * as DevBoard from "./projects/DevBoard";
 
-const smallScreen = window.screen.height < 850;
+const thinScreen = window.screen.width < 750;
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -71,6 +71,7 @@ const useStyles = makeStyles((theme) => ({
   },
   folder: {
     float: "left",
+    color: orange,
   },
   github: {
     float: "right",
@@ -82,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 function ProjectCard(props) {
-  const classes = useStyles();
+  const classes = useStyles({ thinScreen });
   const project = props.project;
 
   return (
@@ -117,26 +118,29 @@ const showcaseStyles = makeStyles((theme) => ({
   root: {
     margin: "auto",
     marginTop: "25vh",
-    width: "75%",
+    width: (props) => (props.thinScreen ? "95%" : "75%"),
   },
   sectionTitle: {
     textAlign: "center",
     fontFamily: fontMono,
-    color: slate,
-    fontSize: "1.5em",
+    color: llslate,
+    fontSize: (props) => (props.thinScreen ? "1em" : "1.5em"),
     fontWeight: "600",
     letterSpacing: "1px",
   },
   subtitle: {
     textAlign: "center",
     fontFamily: fontMono,
     color: orange,
-    fontSize: "1em",
+    fontSize: (props) => (props.thinScreen ? "0.8em" : "1em"),
     marginTop: "2vh",
   },
   grid: {
     marginTop: "4vh",
   },
+  gridItem: {
+    minWidth: (props) => (props.thinScreen ? "90vw" : "auto"),
+  },
   centerButton: {
     textAlign: "center",
     marginTop: "8vh",
@@ -151,7 +155,7 @@ const showcaseStyles = makeStyles((theme) => ({
 }));
 
 export default function Showcase(props) {
-  const classes = showcaseStyles({ smallScreen });
+  const classes = showcaseStyles({ thinScreen });
   const projects = [
     SocketEngine,
     Helios,
@@ -192,7 +196,7 @@ export default function Showcase(props) {
       <Grid container spacing={2} className={classes.grid}>
         {toShow.map((project) => {
           return (
-            <Grid item xs={4}>
+            <Grid item xs={4} className={classes.gridItem}>
               <ProjectCard project={project} />
             </Grid>
           );