From 64500c312e6f40f91ff016d99c9c2619256e9fd2 Mon Sep 17 00:00:00 2001 From: Ghataorhe Date: Mon, 28 Jan 2019 23:20:31 -0800 Subject: [PATCH 1/2] aligns picture divs to names, maps over both --- package-lock.json | 120 ++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/components/AboutUs.js | 114 +++++++++++++++++++----------------- 3 files changed, 180 insertions(+), 55 deletions(-) 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..6b49eda 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, @@ -71,9 +74,9 @@ class AboutUs extends Component { // 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 +92,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 imageArray = pics.map((value, index) => { + const picsBio = bio[index]; + return ( +
+ < img + key={value} + style={aboutUsStyles.facesIndividual} + src={require(`../images/${value}.jpeg`)} + alt={value} + /> +
+ {`${picsBio}`} +
+
+ ) + }); return (
@@ -145,42 +155,36 @@ 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.

-
- bg sd sg gf + alt="yp" + /> */}
From 48630bfd294d6edacbe118fcb7c9209addce217a Mon Sep 17 00:00:00 2001 From: Ghataorhe Date: Mon, 28 Jan 2019 23:29:54 -0800 Subject: [PATCH 2/2] cleans up code, leaves styling functionality for later --- src/components/AboutUs.js | 55 ++++++--------------------------------- 1 file changed, 8 insertions(+), 47 deletions(-) diff --git a/src/components/AboutUs.js b/src/components/AboutUs.js index 6b49eda..4304636 100644 --- a/src/components/AboutUs.js +++ b/src/components/AboutUs.js @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { Row, Col } from 'react-bootstrap'; +// import { Row, Col } from 'react-bootstrap'; // import bg from "../images/bg.jpeg"; // import sd from "../images/sd.jpeg"; // import sg from "../images/sg.jpeg"; @@ -61,19 +61,6 @@ 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 // } @@ -118,18 +105,18 @@ class AboutUs extends Component { let pics = ["bg", "sg", "gf", "sd", "yp"]; let bio = ["Bahadur Ghataorhe", "Sofiane Guerfus", "Gerardo Fernandez", "Sandon Du", "Yogi Patel"]; - let imageArray = pics.map((value, index) => { - const picsBio = bio[index]; + let contentArray = pics.map((picValue, index) => { + const fullName = bio[index]; return (
< img - key={value} + key={picValue} style={aboutUsStyles.facesIndividual} - src={require(`../images/${value}.jpeg`)} - alt={value} + src={require(`../images/${picValue}.jpeg`)} + alt={picValue} />
- {`${picsBio}`} + {`${fullName}`}
) @@ -158,33 +145,7 @@ class AboutUs extends Component {
- {imageArray} - {/* bg - sd - sg - gf - yp */} + {contentArray}