diff --git a/package-lock.json b/package-lock.json index c4512e9..6a8e3f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -803,6 +803,22 @@ } } }, + "@babel/runtime-corejs2": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.3.1.tgz", + "integrity": "sha512-YpO13776h3e6Wy8dl2J8T9Qwlvopr+b4trCEhHE+yek6yIqV8sx6g3KozdHMbXeBpjosbPi+Ii5Z7X9oXFHUKA==", + "requires": { + "core-js": "^2.5.7", + "regenerator-runtime": "^0.12.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" + } + } + }, "@babel/template": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.2.2.tgz", @@ -2814,6 +2830,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3915,6 +3936,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz", @@ -8146,6 +8175,11 @@ "array-includes": "^3.0.3" } }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -12903,6 +12937,15 @@ "object-assign": "^4.1.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "warning": "^3.0.0" + } + }, "proxy-addr": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", @@ -13103,6 +13146,25 @@ } } }, + "react-bootstrap": { + "version": "0.32.4", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.32.4.tgz", + "integrity": "sha512-xj+JfaPOvnvr3ow0aHC7Y3HaBKZNR1mm361hVxVzVX3fcdJNIrfiodbQ0m9nLBpNxiKG6FTU2lq/SbTDYT2vew==", + "requires": { + "@babel/runtime-corejs2": "^7.0.0", + "classnames": "^2.2.5", + "dom-helpers": "^3.2.0", + "invariant": "^2.2.4", + "keycode": "^2.2.0", + "prop-types": "^15.6.1", + "prop-types-extra": "^1.0.1", + "react-overlays": "^0.8.0", + "react-prop-types": "^0.4.0", + "react-transition-group": "^2.0.0", + "uncontrollable": "^5.0.0", + "warning": "^3.0.0" + } + }, "react-dev-utils": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-7.0.1.tgz", @@ -13253,6 +13315,37 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.2.tgz", "integrity": "sha512-7kEBKwU9R8fKnZJBRa5RSIfay4KJwnYvKB6gODGicUmDSAhQJ7Tdnll5S0RLtYrzRfMVXlqYw61rzrSpP4ThLQ==" }, + "react-is": { + "version": "16.7.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz", + "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==" + }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-overlays": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz", + "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==", + "requires": { + "classnames": "^2.2.5", + "dom-helpers": "^3.2.1", + "prop-types": "^15.5.10", + "prop-types-extra": "^1.0.1", + "react-transition-group": "^2.2.0", + "warning": "^3.0.0" + } + }, + "react-prop-types": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz", + "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=", + "requires": { + "warning": "^3.0.0" + } + }, "react-scripts": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.3.tgz", @@ -13308,6 +13401,17 @@ "workbox-webpack-plugin": "3.6.3" } }, + "react-transition-group": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz", + "integrity": "sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==", + "requires": { + "dom-helpers": "^3.3.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2", + "react-lifecycles-compat": "^3.0.4" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -15658,6 +15762,14 @@ } } }, + "uncontrollable": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz", + "integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==", + "requires": { + "invariant": "^2.2.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -15954,6 +16066,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watch": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz", diff --git a/package.json b/package.json index 1fb2129..3f1c878 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "react": "^16.7.0", + "react-bootstrap": "^0.32.4", "react-dom": "^16.7.0", "react-scripts": "2.1.3" }, diff --git a/src/components/AboutUs.js b/src/components/AboutUs.js index 2ecc679..4304636 100644 --- a/src/components/AboutUs.js +++ b/src/components/AboutUs.js @@ -1,9 +1,10 @@ import React, { Component } from "react"; -import bg from "../images/bg.jpeg"; -import sd from "../images/sd.jpeg"; -import sg from "../images/sg.jpeg"; -import gf from "../images/gf.jpeg"; -import yp from "../images/yp.jpeg"; +// import { Row, Col } from 'react-bootstrap'; +// import bg from "../images/bg.jpeg"; +// import sd from "../images/sd.jpeg"; +// import sg from "../images/sg.jpeg"; +// import gf from "../images/gf.jpeg"; +// import yp from "../images/yp.jpeg"; const aboutUsStyles = { @@ -46,7 +47,9 @@ const aboutUsStyles = { padding: 5, flexDirection: "column", marginTop: 20, - width: "15%", + width: 200, + height: 200, + justifyContent: "center", }, withOpacity: { padding: 5, @@ -58,22 +61,9 @@ const aboutUsStyles = { } class AboutUs extends Component { - // constructor(props) { - // super(props); - // this.state = { - // opacity: 1, - // padding: 5, - // flexDirection: "column", - // marginTop: 20, - // width: "15%", - // } - // this.mouseEnter = this.mouseEnter.bind(this); - // this.mouseLeave = this.mouseLeave.bind(this); - // this.handleClick = this.handleClick.bind(this); + // state = { + // hover: false // } - state = { - hover: false - } // mouseEnter() { // console.log("mouse entered"); @@ -89,41 +79,48 @@ class AboutUs extends Component { // this.setState({ opacity: 0.5 }) // } - componentDidMount() { - window.addEventListener("mouseover", this.handleMouseEnter); - } + // componentDidMount() { + // window.addEventListener("mouseover", this.handleMouseEnter); + // } - componentWillUnmount() { - window.removeEventListener("mouseout", this.handleMouseOut); - } + // componentWillUnmount() { + // window.removeEventListener("mouseout", this.handleMouseOut); + // } - handleMouseEnter = (event) => { - console.log(event); - // this.setState({ - // hover: true, - // }) - } + // handleMouseEnter = (event) => { + // console.log(event); + // // this.setState({ + // // hover: true, + // // }) + // } - handleMouseOut = () => { - console.log("leaving"); - this.setState({ - hover: false, - }) - } + // handleMouseOut = () => { + // console.log("leaving"); + // this.setState({ + // hover: false, + // }) + // } render() { - // let pics = ["bg", "sg", "gf", "sd", "yp"]; - - // let imageArray = images.map(image => { - // return ( - // < img - // key={image.id} - // style={this.state.hover === true ? aboutUsStyles.withOpacity : aboutUsStyles.facesIndividual} - // src={image.img} - // alt={image.id} - // /> - // ) - // }); + + let pics = ["bg", "sg", "gf", "sd", "yp"]; + let bio = ["Bahadur Ghataorhe", "Sofiane Guerfus", "Gerardo Fernandez", "Sandon Du", "Yogi Patel"]; + let contentArray = pics.map((picValue, index) => { + const fullName = bio[index]; + return ( +
+ < img + key={picValue} + style={aboutUsStyles.facesIndividual} + src={require(`../images/${picValue}.jpeg`)} + alt={picValue} + /> +
+ {`${fullName}`} +
+
+ ) + }); return (
@@ -145,42 +142,10 @@ class AboutUs extends Component { > We're a group of Junior Engineers who went to a MERN Full Stack coding bootcamp together. While there, we worked on a multitude of class projects and assignments, ranging from simple To-Do lists to complex single-page applications in React. At SevaCode, you can rest assured that you won't be getting just one set of eyes on your project, there will be 5. Each of us has certification proving our skills as Full Stack Engineers, and we hope you'll choose us for your next project.

-
- - - - - + {contentArray}