jsouliss · jsouliss · Aug 29, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
diff --git a/REACTREADME.md b/REACTREADME.md
diff --git a/appsec.yml b/appsec.yml
@@ -0,0 +1,14 @@
+version: 0.0
+os: linux
+files:
+  - source: /
+    destination: /var/www/gsoulis.blog
+hooks:
+  AfterInstall:
+    - location: scripts/install_dependencies.sh
+      timeout: 300
+      runas: root
+  ApplicationStart:
+    - location: scripts/start_server.sh
+      timeout: 300
+      runas: root
diff --git a/install_dependencies.sh b/install_dependencies.sh
@@ -0,0 +1,3 @@
+#!/bin/zsh
+sudo apt-get update
+sudo apt-get install -y nginx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/App.css b/src/App.css
@@ -1,9 +1,22 @@
 html, body {
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    height: 100vh;
+    height: 100%;
     margin: 0;
     padding: 0;
     background-color: #282A36;
+    overflow: hidden;
+}
+
+.App {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.content {
+    flex: 1;
 }
 
 @font-face {
@@ -18,4 +31,4 @@ html, body {
     src: url("/src/assets/fonts/OldeEnglish.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,32 @@
-import './App.css';
+import "./App.css";
 import Home from "./pages/Home";
+import About from "./pages/About";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Footer from "./components/Footer";
+import Navbar from "./components/Navbar";
+import BG_Square_2 from "./svg/BG_Square_2";
+import BG_Square from "./svg/BG_Square";
+import "./styles/component_styles/BG-Square.css";
 
 function App() {
   return (
     <div className="App">
-        <Home/>
+      <Router>
+        <Navbar />
+        <div className={"bg-square-top"}>
+          <BG_Square />
+        </div>
+        <div className={"content"}>
+          <Routes>
+            <Route path={"/"} element={<Home />} />
+            <Route path={"/about"} element={<About />} />
+          </Routes>
+        </div>
+      </Router>
+      <div className={"bg-square-bottom"}>
+        <BG_Square_2 />
+      </div>
+      <Footer />
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Body.js b/src/components/Body.js
diff --git a/src/components/ContactInfo.js b/src/components/ContactInfo.js
@@ -0,0 +1,28 @@
+import React from "react";
+import "../styles/component_styles/ContactInfo.css";
+
+const ContactInfo = ({ icon, text, href, isLink }) => {
+  return (
+    <div className="horizontal-align">
+      <img
+        src={icon}
+        alt={`${text} Icon`}
+        className={`${text.toLowerCase()}-icon`}
+      />
+      {isLink ? (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`${text.toLowerCase()}-link`}
+        >
+          {text}
+        </a>
+      ) : (
+        <span className={"email-text"}>{text}</span>
+      )}
+    </div>
+  );
+};
+
+export default ContactInfo;