added new contact section

Nathan1258 · Jan 23, 2024 · d7dcba6 · d7dcba6 · vercel · Jan 23, 2024
commit d7dcba6
Show file tree

Hide file tree

Showing 48 changed files with 20,478 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/portfolio.iml b/.idea/portfolio.iml
diff --git a/README.md b/README.md
@@ -0,0 +1,62 @@
+<div align="center">
+  <img alt="Logo" src="https://raw.githubusercontent.com/nathan1258/ellisn-portfolio/master/src/assets/logo.png" width="100" />
+</div>
+<h1 align="center">
+  ellisn.com - portfolio
+</h1>
+<p align="center">
+  Built with React and <a href="https://styled-components.com/" target="_blank">Styled Components.</a> Hosted with <a href="https://www.vercel.com/" target="_blank">Vercel</a>
+</p>
+<p align="center">
+  <img src="https://vercelbadge.vercel.app/api/nathan1258/ellisn-portfolio?style=for-the-badge" alt="Vercel Status" />
+</p>
+
+![demo](https://raw.githubusercontent.com/nathan1258/ellisn-portfolio/master/src/assets/preview.png)
+
+## 🚨 Forking this repo
+
+**Yes** you can fork, make changes and use this project for your own portfolios or sites, **with attribution**.
+
+I'm starting to share my projects and would like to start contributing to GitHub more - so here you go. However, please give credit if you do use anything - it has taken a long time to design and create.
+
+### TL;DR
+
+Yes, you can fork this repo. Please give proper credit to me (and any other's) by linking back to [ellisn.com](https://ellisn.com) and their respective sites. Thanks!
+
+## 🛠 Installation & Set Up
+
+1. Clone the repo
+
+   ```sh
+   clone https://github.com/Nathan1258/ellisn-portfolio.git
+   ```
+
+2. Install packages
+
+   ```sh
+   yarn install
+   ```
+
+3. Start the development server
+
+   ```sh
+   yarn start
+   ```
+
+## 🚀 Building and Running for Production
+
+1. Generate a full static production build
+
+   ```sh
+   npm run build
+   ```
+
+1. Preview the site as it will appear once deployed
+
+   ```sh
+   npm run serve
+   ```
+
+## 🥇 Contributions
+
+[Typewriting effect](https://github.com/tameemsafi/typewriterjs)
diff --git a/package.json b/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "portfolio",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@vercel/analytics": "^0.1.5",
+    "framer-motion": "^7.6.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.12.1",
+    "react-scripts": "5.0.1",
+    "styled-components": "^5.3.6",
+    "typewriter-effect": "^2.19.0",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "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/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!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="Nathan Ellis' online portfolio" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      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>Nathan Ellis</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,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: 
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,42 @@
+.App {
+  text-align: center;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,92 @@
+import "./App.css";
+import { Home } from "./components/home";
+import { MyWork } from "./components/mywork";
+import { About } from "./components/about";
+import { Contact } from "./components/contact";
+import { Navbar } from "./components/navbar";
+import { Footer } from "./components/footer";
+import React, { useState, useEffect } from "react";
+
+import { inject } from "@vercel/analytics";
+
+import styled, { ThemeProvider } from "styled-components";
+import { lightTheme, darkTheme, GlobalStyles } from "./theme";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+
+import { CloudNotify } from "./components/projects/cloudnotify";
+import { Upsend } from "./components/projects/upsend";
+
+const AppContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  scroll-behavior: smooth;
+`;
+
+function App() {
+  inject();
+
+  const [theme, setTheme] = useState("light");
+  const isDarkTheme = theme === "dark";
+  const toggleTheme = () => {
+    const updatedTheme = isDarkTheme ? "light" : "dark";
+    setTheme(updatedTheme);
+    localStorage.setItem("theme", updatedTheme);
+  };
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme");
+    const prefersDark =
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+    if (savedTheme && ["dark", "light"].includes(savedTheme)) {
+      setTheme(savedTheme);
+    } else if (prefersDark) {
+      setTheme("dark");
+    }
+  }, []);
+
+  useEffect(() => {
+    // Check for the hash in the URL and scroll to the corresponding element
+    const hash = window.location.hash;
+    if (hash) {
+      const element = document.querySelector(hash);
+      if (element) {
+        element.scrollIntoView();
+      }
+    }
+  }, []);
+
+  return (
+    <Router>
+      <AppContainer>
+        <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
+          <>
+            <GlobalStyles />
+            <Navbar isDarkTheme={isDarkTheme} toggleTheme={toggleTheme} />
+
+            <Routes>
+              <Route path="/" element={<PageWrapper />}></Route>
+              <Route path="/projects/cloud-notify" element={<CloudNotify />} />
+              <Route path="/projects/upsend" element={<Upsend />} />
+            </Routes>
+
+            <Footer />
+          </>
+        </ThemeProvider>
+      </AppContainer>
+    </Router>
+  );
+}
+
+const PageWrapper = () => {
+  return (
+    <div>
+      <Home />
+      <About />
+      <MyWork />
+       <Contact />
+    </div>
+  );
+};
+
+export default App;
diff --git a/src/assets/cloudnotify.png b/src/assets/cloudnotify.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/preview.png b/src/assets/preview.png