adding home page

martinez-ml · martinez-ml · commit d15c566be0c9 · 2023-10-11T17:37:01.000-04:00
diff --git a/my-app/package-lock.json b/my-app/package-lock.json
diff --git a/my-app/package.json b/my-app/package.json
@@ -9,8 +9,11 @@
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^3.4.1",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.9.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-simple-maps": "^3.0.0",
+    "reactstrap": "^9.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -40,6 +43,7 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^6.0.0"
+    "gh-pages": "^6.0.0",
+    "react-router-dom": "^6.16.0"
   }
 }
diff --git a/my-app/public/favicon.ico b/my-app/public/favicon.ico
diff --git a/my-app/public/index.html b/my-app/public/index.html
@@ -24,7 +24,7 @@
       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>
+    <title>Joseph Martinez</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/my-app/src/assets/JM.png b/my-app/src/assets/JM.png
diff --git a/my-app/src/assets/profile.jpeg b/my-app/src/assets/profile.jpeg
diff --git a/my-app/src/index.css b/my-app/src/index.css
@@ -1,13 +1 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/my-app/src/index.js b/my-app/src/index.js
@@ -1,17 +1,33 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Layout from "./pages/Layout";
+import Home from "./pages/Home";
+import Projects from "./pages/Projects";
+import Contact from "./pages/Contact";
+import NoPage from "./pages/NoPage";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+export default function App() {
+  return (
+    <BrowserRouter>
+      <link
+        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+        rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+        crossOrigin="anonymous"
+      />
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="projects" element={<Projects />} />
+          <Route path="contact" element={<Contact />} />
+          <Route path="*" element={<NoPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
diff --git a/my-app/src/pages/Contact.js b/my-app/src/pages/Contact.js
@@ -0,0 +1,5 @@
+const Contact = () => {
+  return <h1>Contact Me</h1>;
+};
+
+export default Contact;
diff --git a/my-app/src/pages/Home.css b/my-app/src/pages/Home.css
@@ -0,0 +1,57 @@
+.main {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.home {
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  display: flex;
+}
+.image {
+  width: 350px;
+  background-image: url("../assets/profile.jpeg");
+  height: 350px;
+  border-radius: 50% !important;
+  background-position: center;
+}
+
+.text {
+  color: rgb(154, 157, 158);
+}
+
+.info {
+  margin-left: 20px;
+  width: 50vw;
+}
+
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  width: fit-content;
+}
+
+.body {
+  width: 75vw;
+}
+
+.button {
+  background-image: linear-gradient(
+    to right,
+    rgb(157, 112, 247),
+    rgb(31, 79, 182)
+  );
+  color: white;
+  height: 40px;
+  margin: 40px;
+  border-radius: 12px;
+  border: none;
+}
diff --git a/my-app/src/pages/Home.js b/my-app/src/pages/Home.js
@@ -0,0 +1,49 @@
+import "./Home.css";
+
+const Home = () => {
+  return (
+    <div className="home bg-dark">
+      <div className="main">
+        <div className="flex">
+          <div className="text info">
+            <h1>Hello, I'm Joseph Martinez!</h1>
+            <h2>
+              I'm a software engineer and AI enthusiast based in the Boston
+              area.
+            </h2>
+          </div>
+          <div className="image float-right" />
+        </div>
+      </div>
+      <div className="home text">
+        <div className="title">
+          <h1>About Me</h1>
+        </div>
+        <div className="body">
+          I'm Joseph Martinez, a full-stack software engineer currently at
+          WillowTree. I went to Amherst College for my undergraduate and majored
+          in Computer Science. I enjoy learning more about Machine Learning and
+          AI in my free time. I reflect on my academic career at Amherst and
+          remember my machine learning class being one of my most exciting
+          classes. Since then, I've taken Harvard CS50's Introduction to
+          Artificial Intelligence with Python on edX and worked on a personal
+          project that uses semi-supervised learning to classify which
+          municipalities in Puerto Rico are at risk of gentrification, which you
+          can learn more about under the Projects tab. Below, you can find my
+          resume and CV. If you'd like to reach out, please visit the Contact
+          tab. Thanks for visiting!
+        </div>
+        <div className="flex">
+          <button type="button" className="button">
+            Resume
+          </button>
+          <button type="button" className="button">
+            CV
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/my-app/src/pages/Layout.css b/my-app/src/pages/Layout.css
@@ -0,0 +1,16 @@
+ul {
+  flex-direction: row !important;
+  gap: 20px;
+  margin-right: 20px;
+}
+
+a {
+  margin-left: 20px;
+}
+
+.logo {
+  background-image: url("../assets/JM.png");
+  width: 70px;
+  height: 40px;
+  background-size: cover;
+}
diff --git a/my-app/src/pages/Layout.js b/my-app/src/pages/Layout.js
@@ -0,0 +1,35 @@
+import { Outlet, Link } from "react-router-dom";
+import "./Layout.css";
+
+const Layout = () => {
+  return (
+    <>
+      <nav className="navbar navbar-dark bg-dark">
+        <a className="navbar-brand" href="/">
+          <div className="logo" />
+        </a>
+        <ul className="navbar-nav">
+          <li className="nav-item active">
+            <Link className="nav-link" to="/">
+              Home
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/projects">
+              Projects
+            </Link>
+          </li>
+          <li className="nav-item">
+            <Link className="nav-link" to="/contact">
+              Contact
+            </Link>
+          </li>
+        </ul>
+      </nav>
+
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;
diff --git a/my-app/src/pages/NoPage.js b/my-app/src/pages/NoPage.js
@@ -0,0 +1,5 @@
+const NoPage = () => {
+  return <h1>404</h1>;
+};
+
+export default NoPage;
diff --git a/my-app/src/pages/Projects.js b/my-app/src/pages/Projects.js
@@ -0,0 +1,5 @@
+const Projects = () => {
+  return <h1>Personal Projects</h1>;
+};
+
+export default Projects;
