Feature/front end start

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/frontEnd/node_modules
+/frontEnd/.pnp
+/frontEnd/.pnp.js
+
+# testing
+/frontEnd/coverage
+
+# production
+/frontEnd/build
+
+# misc
+/frontEnd/.DS_Store
+/frontEnd/.env.local
+/frontEnd/.env.development.local
+/frontEnd/.env.test.local
+/frontEnd/.env.production.local
+
+/frontEnd/npm-debug.log*
+/frontEnd/yarn-debug.log*
+/frontEnd/yarn-error.log*

frontEnd/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontEnd/src/App.js

@@ -5,14 +5,15 @@ import HomePage from "./Pages/HomePage"
 import MyStatsPage from "./Pages/MyStatsPage"
 import ProteinTrackerPage from "./Pages/ProteinTrackerPage"
 import WorkoutsPage from "./Pages/WorkoutsPage"
+import Navbar from "./Components/Navbar"
 
 
 function App() {
 
   return (
   <BrowserRouter>
     <div>
-      <h1> HomePage</h1>
+      <Navbar />
       <Routes>
         <Route path = "/" element={<HomePage/>} />
         <Route path = "/MyStatsPage" element={<MyStatsPage/>} />

frontEnd/src/Components/Navbar.js

@@ -0,0 +1,27 @@
+import { useNavigate } from "react-router-dom";
+import "../Styles/Navbar.css"
+
+
+const Navbar = () =>{
+    let navigate = useNavigate();
+
+    const goHomePage = () => {
+      navigate("/");
+    };
+    return (
+      <>
+        <div className={"container__navbar"}>
+          <h1 className={"navbar__title"}>GainzTracker</h1>
+          <div className={"container__navbar_buttons"}>
+            <button className={"navbar__button"} onClick={goHomePage}>
+              My Dashboard
+            </button>
+            <button className={"navbar__button"}>Login</button>
+            <button className={"navbar__button"}>Signup</button>
+          </div>
+        </div>
+      </>
+    );
+}
+
+export default Navbar;

frontEnd/src/Pages/HomePage.js

@@ -1,4 +1,8 @@
 import { useNavigate } from "react-router-dom";
+import "../Styles/HomePage.css";
+import calendarIcon from "../Icons/calendar.png";
+import dumbbellIcon from "../Icons/dumbbell.png";
+import trendIcon from "../Icons/trend.png";
 
 const HomePage = () => {
   let navigate = useNavigate();
@@ -15,7 +19,38 @@ const HomePage = () => {
     navigate("/ProteinTrackerPage");
   };
 
-  return <>This is the homepage</>;
+  return (
+    <>
+      <h1>My Dashboard</h1>
+      <div className={"container__button_primary"}>
+        <div>
+          <button className={"button__primary"} onClick={goWorkoutsPage}>
+            <img
+              className="icon"
+              src={dumbbellIcon}
+              align="center"
+              alt="Dumbbell"
+            />
+            My Workouts
+          </button>
+        </div>
+
+        <button className={"button__primary"} onClick={goMyStatsPage}>
+          <img className="icon" src={trendIcon} align="center" alt="Dumbbell" />
+          My Stats
+        </button>
+        <button className={"button__primary"} onClick={goProteinTrackerPage}>
+          <img
+            className="icon"
+            src={calendarIcon}
+            align="center"
+            alt="Dumbbell"
+          />
+          Protein Tracker
+        </button>
+      </div>
+    </>
+  );
 };
 
 export default HomePage;

frontEnd/src/Styles/HomePage.css

@@ -0,0 +1,25 @@
+.container__button_primary {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.button__primary {
+  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
+    "Lucida Sans", Arial, sans-serif;
+    font-size: medium;
+  border: none;
+  color: white;
+  display: inline-block;
+  background-color: rgb(27, 27, 27);
+  border-radius: 35px;
+  height: 15em;
+  width: 23em;
+}
+
+.icon {
+  display:inline-block;
+  height: 2em;
+  width: auto;
+  padding:1em;
+}