testt

michael-mackenzie · Jun 1, 2020 · 6598655 · 6598655
1 parent d1a3ce0
commit 6598655
Show file tree

Hide file tree

Showing 31 changed files with 1,016 additions and 314 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,11 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.10.1",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^4.5.0",
     "react": "^16.13.1",
+    "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"
   },
   "scripts": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
+    <title>Michael MacKenzie</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700;900&display=swap" rel="stylesheet">
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+      crossorigin="anonymous"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
+
+    <script
+      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+      crossorigin>
+    </script>
+
+    <script
+      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
+      crossorigin>
+    </script>
+
+    <script>var Alert = ReactBootstrap.Alert;</script>
   </head>
+
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script src="../src/index.js" type="text/jsx"></script>
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import Navigation from "./Navigation";
+import ScrollToTop from "./ScrollToTop";
+import { BrowserRouter } from 'react-router-dom';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <ScrollToTop />
+      <Navigation />
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/src/components/Bio.jsx b/src/components/Bio.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { Grid, Divider } from "@material-ui/core";
+import Footer from "./Footer";
+
+function Bio() {
+
+  const style = {
+    divider: {width: "60%", margin: "auto"},
+    bottomd: {width: "100%", margin: "auto"},
+    dividertop: {width: "60%", margin: "auto", marginTop: "80px", marginBottom: "30px"},
+    dividerbottom: {width: "60%", margin: "auto", marginTop: "20px", marginBottom: "120px"},
+  };
+
+  return (
+    <div>
+      <Divider style={style.dividertop}/>
+      <Grid container alignContent="center" justify="center" className="main">
+        <Grid item xs={6} className="bio1">
+          <h4 className="biodef"> engineer / web developer / athlete / thinker</h4>
+          <p className="biodef">harnessing technology positively every day.</p>
+        </Grid>
+      </Grid>
+      <Divider style={style.dividerbottom}/>
+      <Grid container alignContent="stretch" justify="center" className="main anotherphoto">
+        <Grid item xs={12} className="bio2">
+          <p>Sports</p>
+        </Grid>
+      </Grid>
+      <Divider style={style.divider}/>
+      <Grid container alignContent="stretch" justify="center" className="main">
+        <Grid item xs={6} className="bio3">
+          <h2>Courses Completed</h2>
+          <h4>External Courses</h4>
+          <ul>
+            <li>Udemy "The Complete 2020 Web Development Bootcamp" by Dr. Angela Yu</li>
+          </ul>
+          <h4>400/Grad Level</h4>
+          <ul>
+            <li>Data Compression & Source Coding</li>
+            <li>Control of Stochastic Systems</li>
+            <li>A.I. & Interactive Systems</li>
+            <li>Information Theory</li>
+            <li>Stochastic Processes & Applications</li>
+            <li>Modern Control Theory</li>
+          </ul>
+          <h4>300 Level</h4>
+          <ul>
+            <li>Database Management Systems</li>
+            <li>Algorithms I</li>
+            <li>Probability I & II</li>
+            <li>Math of Engineering Systems</li>
+            <li>Introducation to Control Theory</li>
+            <li>Microprocessor Systems</li>
+            <li>Complex Analysis</li>
+            <li>Math Methods for Engineers</li>
+          </ul>
+          <h4>200 Level</h4>
+          <ul>
+            <li>Real Analysis</li>
+            <li>Computer Architecture</li>
+            <li>Electricity & Magnetism</li>
+            <li>Linear Algebra</li>
+            <li>Differential Equations</li>
+            <li>Digital Systems</li>
+            <li>Advanced Calculus</li>
+            <li>Info & Data Structures</li>
+            <li>Algebraic Structures</li>
+          </ul>
+        </Grid>
+        <Grid item xs={6} className="bio3">
+          <h2>Who Am I?</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus. Morbi tristique senectus et netus et. Volutpat blandit aliquam etiam erat. Porta lorem mollis aliquam ut porttitor leo. Placerat vestibulum lectus mauris ultrices eros. Diam vel quam elementum pulvinar etiam non. Tempor commodo ullamcorper a lacus vestibulum sed. Condimentum lacinia quis vel eros donec ac. Eget velit aliquet sagittis id consectetur purus ut. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget.
+            <br />
+            Odio euismod lacinia at quis risus sed vulputate. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor. At in tellus integer feugiat scelerisque varius morbi enim nunc. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Laoreet id donec ultrices tincidunt arcu non sodales neque. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Sollicitudin aliquam ultrices sagittis orci a. Enim tortor at auctor urna. Consequat mauris nunc congue nisi vitae suscipit. Dis parturient montes nascetur ridiculus. In hac habitasse platea dictumst quisque sagittis purus sit.
+            <br />
+            Amet est placerat in egestas erat imperdiet sed euismod nisi. Ut ornare lectus sit amet. Lorem ipsum dolor sit amet consectetur adipiscing. Vivamus arcu felis bibendum ut tristique et egestas quis. Ultricies mi eget mauris pharetra et ultrices neque ornare. Mollis aliquam ut porttitor leo a diam sollicitudin tempor id. Eu turpis egestas pretium aenean pharetra magna ac placerat. At augue eget arcu dictum varius duis at consectetur lorem. Habitasse platea dictumst quisque sagittis. Tincidunt vitae semper quis lectus nulla at volutpat. Felis imperdiet proin fermentum leo vel. Nibh ipsum consequat nisl vel pretium lectus quam id. Pellentesque dignissim enim sit amet venenatis. Faucibus et molestie ac feugiat sed. Faucibus nisl tincidunt eget nullam non. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam.
+            <br />
+            Egestas congue quisque egestas diam in arcu cursus euismod. Cursus vitae congue mauris rhoncus aenean. At urna condimentum mattis pellentesque id nibh tortor. Volutpat maecenas volutpat blandit aliquam etiam. Quis eleifend quam adipiscing vitae. Et sollicitudin ac orci phasellus. Sit amet nisl purus in mollis nunc sed id. Quis varius quam quisque id diam vel quam. Elementum curabitur vitae nunc sed velit. Sed augue lacus viverra vitae congue eu consequat ac felis. Consectetur a erat nam at lectus urna duis. Nisl pretium fusce id velit ut tortor pretium viverra suspendisse. Sapien eget mi proin sed libero enim. Faucibus in ornare quam viverra orci sagittis eu.
+            <br />
+          </p>
+        </Grid>
+      </Grid>
+      <Divider style={style.bottomd}/>
+      <Grid container alignContent="stretch" justify="center" className="main">
+        <Grid item xs={12} className="format5">
+          <Footer cname="ficons"/>
+        </Grid>
+      </Grid>
+    </div>
+  )
+}
+
+export default Bio;
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Grid, Divider } from "@material-ui/core";
+import Footer from "./Footer";
+
+function Contact() {
+
+  const style = {
+    divider: {width: "60%", margin: "auto"},
+    bottomd: {width: "100%", margin: "auto"},
+    info: {paddingTop: "60px", paddingBottom: "30px"}
+  };
+
+  return (
+    <div>
+      <div>
+        <Grid container alignContent="center" justify="center" className="divtest">
+          <Grid item xs={6}>
+            <h1>Email</h1>
+            <h4 style={style.info}>mikedavidmackenzie@gmail.com</h4>
+          </Grid>
+        </Grid>
+        <Divider style={style.divider}/>
+        <Grid container alignContent="stretch" justify="center" className="divtest">
+          <Grid item xs={12}>
+            <h1>Phone</h1>
+            <h4 style={style.info}>705 761 2524</h4>
+          </Grid>
+        </Grid>
+        <Divider style={style.bottomd}/>
+        <Grid container alignContent="stretch" justify="center" className="main">
+          <Grid item xs={12} className="format5">
+            <Footer cname="ficons"/>
+          </Grid>
+        </Grid>
+      </div>
+    </div>
+  )
+}
+
+export default Contact;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Link } from "@material-ui/core";
+import LinkedInIcon from '@material-ui/icons/LinkedIn';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import InstagramIcon from '@material-ui/icons/Instagram';
+
+function Footer(props) {
+  return (
+      <p>
+        <Link href="https://www.linkedin.com/in/-michaelmackenzie/"><LinkedInIcon className={props.cname}/></Link>
+        <Link href="https://github.com/michael-mackenzie/"><GitHubIcon className={props.cname}/></Link>
+        <Link href="https://www.instagram.com/mikemackenzie_/"><InstagramIcon className={props.cname}/></Link>
+      </p>
+  );
+}
+
+export default Footer;