Add files via upload

Program-Warehouse · Dec 31, 2020 · 2cd57d2 · 2cd57d2
commit 2cd57d2
Show file tree

Hide file tree

Showing 44 changed files with 17,326 additions and 0 deletions.
diff --git a/Screenshots/Screenshot from 2020-12-31 00-16-37.png b/Screenshots/Screenshot from 2020-12-31 00-16-37.png
diff --git a/Screenshots/Screenshot from 2020-12-31 00-17-05.png b/Screenshots/Screenshot from 2020-12-31 00-17-05.png
diff --git a/Screenshots/Screenshot from 2020-12-31 00-17-22.png b/Screenshots/Screenshot from 2020-12-31 00-17-22.png
diff --git a/Screenshots/Screenshot from 2020-12-31 00-17-40.png b/Screenshots/Screenshot from 2020-12-31 00-17-40.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "template9",
+  "description": "A personal static website/portfolio template hosted with GitHub Pages, built to showcase my recent projects.",
+  "homepage": "https://program-warehouse.github.io/Template_1/",
+  "version": "2.0.0",
+  "private": true,
+  "author": {
+    "name": "Program Warehouse",
+    "email": "programwarehouse@gmail.com",
+    "url": "https://github.com/program-warehouse"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.2",
+    "gh-pages": "^2.2.0",
+    "jquery": "^3.5.1",
+    "node-sass": "^4.14.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.14.0",
+    "react-bootstrap": "^1.4.0",
+    "react-dom": "^16.14.0",
+    "react-loading-skeleton": "^2.1.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^3.4.4",
+    "react-typist": "^2.0.5",
+    "typescript": "^3.9.7"
+  },
+  "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "custom-deploy": "node pages.js"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/pages.js b/pages.js
@@ -0,0 +1,15 @@
+const ghpages = require("gh-pages");
+const pathname = `${__dirname}/build`;
+const repoURL = "https://github.com/Program-Warehouse/Template_1.git";
+
+ghpages.publish(
+  pathname,
+  {
+    branch: "master",
+    repo: repoURL,
+  },
+  (err) => {
+    if (err) console.log("ERROR: ", err);
+    else console.log("PUBLISHED");
+  }
+);
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
+      rel="stylesheet"
+    />
+
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="My name is Program Warehouse. I’m a Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut "
+    />
+    <link rel="apple-touch-icon" href="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" />
+    <meta property="twitter:image" content="%PUBLIC_URL%/social-image.png" />
+    <meta property="og:image" content="%PUBLIC_URL%/social-image.png" />
+    <!--
+      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>Portfolio</title>
+  </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`.
+    -->
+  </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
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }	    
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,91 @@
+import React from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+import {
+  navBar,
+  mainBody,
+  about,
+  repos,
+  leadership,
+  skills,
+  getInTouch,
+} from "./editable-stuff/config.js";
+import MainBody from "./components/home/MainBody";
+import AboutMe from "./components/home/AboutMe";
+import Project from "./components/home/Project";
+import Footer from "./components/Footer";
+import Navbar from "./components/Navbar";
+import Skills from "./components/home/Skills";
+// import { Blog } from "./components/blog/Blog";
+// import BlogPost from "./components/blog/BlogPost";
+import GetInTouch from "./components/home/GetInTouch.jsx";
+import Leadership from "./components/home/Leadership.jsx";
+
+const Home = React.forwardRef((props, ref) => {
+  return (
+    <>
+      <MainBody
+        gradient={mainBody.gradientColors}
+        title={`${mainBody.firstName} ${mainBody.middleName} ${mainBody.lastName}`}
+        message={mainBody.message}
+        icons={mainBody.icons}
+        ref={ref}
+      />
+      {about.show && (
+        <AboutMe
+          heading={about.heading}
+          message={about.message}
+          link={about.imageLink}
+          imgSize={about.imageSize}
+          resume={about.resume}
+        />
+      )}
+      {repos.show && (
+        <Project
+          heading={repos.heading}
+          username={repos.gitHubUsername}
+          length={repos.reposLength}
+          specfic={repos.specificRepos}
+        />
+      )}
+      {leadership.show && (
+        <Leadership
+          heading={leadership.heading}
+          message={leadership.message}
+          img={leadership.images}
+          imageSize={leadership.imageSize}
+        />
+      )}
+      {skills.show && (
+        <Skills
+          heading={skills.heading}
+          hardSkills={skills.hardSkills}
+          softSkills={skills.softSkills}
+        />
+      )}
+    </>
+  );
+});
+
+const App = () => {
+  const titleRef = React.useRef();
+
+  return (
+    <BrowserRouter basename={process.env.PUBLIC_URL + "/"}>
+      {navBar.show && <Navbar ref={titleRef} />}
+      <Route path="/" exact component={() => <Home ref={titleRef} />} />
+      {/* {false && <Route path="/blog" exact component={Blog} />}
+      {false && <Route path="/blog/:id" component={BlogPost} />} */}
+      <Footer>
+        {getInTouch.show && (
+          <GetInTouch
+            heading={getInTouch.heading}
+            message={getInTouch.message}
+            email={getInTouch.email}
+          />
+        )}
+      </Footer>
+    </BrowserRouter>
+  );
+};
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import Container from "react-bootstrap/Container";
+
+const Footer = (props) => {
+  const bgStyle = { backgroundColor: "#f5f5f5" };
+
+  return (
+    <footer style={bgStyle} className="mt-auto py-5 text-center ">
+      <Container>
+        {props.children}
+        <i className="fas fa-code" /> with <i className="fas fa-heart" /> by{" "}
+        <a
+          className="badge badge-dark"
+          rel="noopener"
+          href="https://github.com/program-warehouse"
+          aria-label="My GitHub"
+        >
+          Program Warehouse
+        </a>{" "}
+        using <i className="fab fa-react" />
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useScrollPosition } from "../hooks/useScrollPosition";
+import useResizeObserver from "../hooks/useResizeObserver";
+import Navbar from "react-bootstrap/Navbar";
+import Nav from "react-bootstrap/Nav";
+import { mainBody, repos, about, skills } from "../editable-stuff/config.js";
+
+const Navigation = React.forwardRef((props, ref) => {
+  // const { showBlog, FirstName } = config;
+  const [isTop, setIsTop] = useState(true);
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const navbarMenuRef = React.useRef();
+  const navbarDimensions = useResizeObserver(navbarMenuRef);
+  const navBottom = navbarDimensions ? navbarDimensions.bottom : 0;
+  useScrollPosition(
+    ({ prevPos, currPos }) => {
+      if (!navbarDimensions) return;
+      currPos.y + ref.current.offsetTop - navbarDimensions.bottom > 5
+        ? setIsTop(true)
+        : setIsTop(false);
+      setScrollPosition(currPos.y);
+    },
+    [navBottom]
+  );
+
+  React.useEffect(() => {
+    if (!navbarDimensions) return;
+    navBottom - scrollPosition >= ref.current.offsetTop
+      ? setIsTop(false)
+      : setIsTop(true);
+  }, [navBottom, navbarDimensions, ref, scrollPosition]);
+
+  return (
+    <Navbar
+      ref={navbarMenuRef}
+      className={` fixed-top  ${
+        !isTop ? "navbar-white" : "navbar-transparent"
+      }`}
+      expand="lg"
+    >
+      <Navbar.Brand className="brand" href={process.env.PUBLIC_URL + "/#home"}>
+        {`<${mainBody.firstName} />`}
+      </Navbar.Brand>
+      <Navbar.Toggle aria-controls="basic-navbar-nav" className="toggler" />
+      <Navbar.Collapse id="basic-navbar-nav">
+        <Nav className="mr-auto">
+          {/* {
+            <Nav.Link className="nav-link lead">
+              <Link to={process.env.PUBLIC_URL + "/blog"}>Blog</Link>
+            </Nav.Link>
+          } */}
+          {repos.show && (
+            <Nav.Link
+              className="nav-link lead"
+              href={process.env.PUBLIC_URL + "/#projects"}
+            >
+              Projects
+            </Nav.Link>
+          )}
+          <Nav.Link
+            className="nav-link lead"
+            href={about.resume}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Resume
+          </Nav.Link>
+          {about.show && (
+            <Nav.Link
+              className="nav-link lead"
+              href={process.env.PUBLIC_URL + "/#aboutme"}
+            >
+              About
+            </Nav.Link>
+          )}
+          {skills.show && (
+            <Nav.Link
+              className="nav-link lead"
+              href={process.env.PUBLIC_URL + "/#skills"}
+            >
+              Skills
+            </Nav.Link>
+          )}
+        </Nav>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+});
+
+export default Navigation;