Skip to content

Commit

Permalink
final
Browse files Browse the repository at this point in the history
  • Loading branch information
baberMatt committed Feb 3, 2021
1 parent d0e222e commit 94c0a28
Show file tree
Hide file tree
Showing 36 changed files with 1,649 additions and 91 deletions.
1 change: 1 addition & 0 deletions .eslintcache

Large diffs are not rendered by default.

499 changes: 499 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,15 @@
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.2",
"classnames": "^2.2.6",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-bootstrap": "^1.4.3",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-select": "^4.0.2",
"reactstrap": "^8.9.0",
"web-vitals": "^0.2.4"
},
"scripts": {
Expand Down
Binary file removed public/favicon.ico
Binary file not shown.
11 changes: 8 additions & 3 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@
<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="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/6acb0d9fa3.js" crossorigin="anonymous"></script>
<!--
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/
Expand All @@ -24,7 +28,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>Matt Baber</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand All @@ -39,5 +43,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</body>
</html>
Binary file removed public/logo192.png
Binary file not shown.
Binary file removed public/logo512.png
Binary file not shown.
38 changes: 0 additions & 38 deletions src/App.css

This file was deleted.

51 changes: 33 additions & 18 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,39 @@
import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from "react";
import Portfolio from "./pages/Portfolio"
import Contacts from "./Components/Contacts"
import Video from "./Assets/jumboLoopBG.mp4"
import { BrowserRouter, Router, Route, Switch } from "react-router-dom";

function App() {
// const [contactsView, setContactsView] = useState("hidden");

// function handleContactBtn(event) {
// if ( contactsView === "hidden") {
// setContactsView("showing");
// }else{
// setContactsView("hidden")
// }

// }


return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<div className="d-flex container-fluid">
<video autoPlay muted loop id="myVideo">
<source src={Video} type="video/mp4" />
</video>
<div id="header">
<h1 class="headerh1 text-center mt-5 ml-1 display-2 ">Welcome</h1>
<div class="break "></div>
<p id="headerText"class="ml-2"> Read about me, check out some of <br/>my projects,
and feel free to contact me.</p>
</div>
<Contacts />
<Portfolio />
</div>

);
}

Expand Down
8 changes: 0 additions & 8 deletions src/App.test.js

This file was deleted.

Binary file added src/Assets/baberOfTheWoods.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/coomingSoon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/jumboLoopBG.mp4
Binary file not shown.
Binary file added src/Assets/loaded.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/mattBaberResume.pdf
Binary file not shown.
Binary file added src/Assets/portrait.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/rudy.JPG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/sqlWorkbenchIcon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Assets/streamLine.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
80 changes: 80 additions & 0 deletions src/Components/AboutMe/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React, { useState, useEffect } from "react";
import { Row, Col, } from "../Grid";
import Portrait from "../../Assets/portrait.png"
import "./style.css";
import { defaultTheme } from "react-select";



function useFadeIn(fire) {
let duration = 1500;
const [opacity, setOpacity] = useState(0);
const [filter, setFilter] = useState(0);
const [time, setTime] = useState(Date.now());


useEffect(() => {
console.log("effect called")
setTime(Date.now())
let queuedFrame
const frameIn = function () {
const now = Date.now() - time;
if (now < duration) {
queuedFrame = requestAnimationFrame(frameIn)
}

switch (fire) {
case "showing":
setOpacity(Math.min(1, (now / duration)))
setFilter(Math.min(1, (duration / now) - 1))
break;
case "hidden":
setOpacity(0)
setFilter(0)
break;
default:
break;
}

}
frameIn();

return () => cancelAnimationFrame(queuedFrame)
}, [fire]);

const reset = () => setTime(Date.now());
const filterVal = `blur(${filter}em)`
return [opacity, filterVal, reset]
}

function AboutMe(props) {

const [opacity, filterVal, reset] = useFadeIn(props.showing)


return (
<div className={"aboutMe " + (!props.showing ? "" : "")}>
<Row custom>
<Col size="md-12" custom>
<div id="parent">
<div id="mask" style={{ opacity: opacity, filter: filterVal }}>
<div id="aboutMeContent" className="pl-4 mt-3 border-left d-flex flex-column justify-content-center">
<h2 className="mt-3">Hello, I'm Matt Baber</h2>
<h2>I am a Full Stack Web Developer</h2>
<hr id="hr" />
<h6>A little bit about me...</h6>
<p>I am 33 years old. I live in Euclid, Ohio with
my wife Emily, and our daughter Dottie and our dog and cat, Rudy and Snacky. My whole adult life I
have worked as a Chef, and have made the decision to leave that career path and learn how to
program.</p>
<img className="img-fluid mt-3" src={Portrait} alt="my portrait"></img>
</div>
</div>
</div>
</Col>
</Row>
</div>
);
}

export default AboutMe;
42 changes: 42 additions & 0 deletions src/Components/AboutMe/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
#hr {
border-color: white;
height: 1px;
width: 100%
}

.aboutMe {
height: 100%;
width: 100%;
}

.rowCustom{
height: 100%;
width: 100%;
}

.rowCustom{
height: 100%;
width: 100%;
}

#parent {


height: 100%;
overflow: hidden;
width: 100%;

margin: auto;
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
}



#mask {
height: 100%;
width: 100%;
}


Loading

0 comments on commit 94c0a28

Please sign in to comment.