diff --git a/README.md b/README.md index a8bb60a..fdfac6b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,16 @@ ## Table of contents -* [Intro](#CodeWords) -* [Screenshots](#Screenshots) -* [Getting Started](#Getting-Started) -* [How to Use](#How-to-Use) -* [Project Emphasis](#Project-Emphasis) -* [UI Design](#UI-Design) -* [Future Plans](#Future-Plans) -* [License](#License) +- [CodeWords ](#codewords-build-statushttpstravis-cicomcode-wordscodewords-ui) + - [Screenshots](#screenshots) + - [Getting Started](#getting-started) + - [How to Use](#how-to-use) + - [UI Design](#ui-design) + - [Future Plans](#future-plans) + - [Project Emphasis](#project-emphasis) + - [Front-End](#front-end) + - [Back-end](#back-end) + - [Licensing](#licensing) # CodeWords [](https://travis-ci.com/code-words/codewords-ui) diff --git a/src/components/AboutDevs/_AboutDevs.scss b/src/components/AboutDevs/_AboutDevs.scss new file mode 100644 index 0000000..83605f5 --- /dev/null +++ b/src/components/AboutDevs/_AboutDevs.scss @@ -0,0 +1,111 @@ +// ** TEMP +// .dev-pic { +// content: ""; +// background: $intel-assassin-accent; +// height: 75px; +// width: 75px; +// margin: 5px auto; +// border-radius: 50%; +// } + +.AboutDevs { + display: flex; + flex-direction: column; + justify-content: center; + background: $intel-assassin; + position: absolute; + z-index: 3; + left: 10vw; + top: 10vh; + height: 70vh; + width: 75vw; + padding: 30px; + box-shadow: 8px 8px 12px $overlay-filter, 2px 2px 10px rgba(250, 250,250, .5); + border: $intel-assassin-accent .5px inset; + border-radius: 20px; + + .divider { + content: ""; + height: 2px; + width: 100%; + border: 1px inset gray; + } + + .dev-pic { + margin: auto; + border-radius: 50%; + // border: $intel-assassin-accent 1px 1px ridge; + width: 12vh; + } + + .dev-img { + width: 10vh; + border-radius: 50%; + border: silver ridge 2px; + } + + a { + text-decoration: none; + } + + h2 { + margin: 0 0 10px 30px; + text-shadow: 2px 2px 3px black; + } + + h2, h4, h5 { + font-family: $header-font; + } +} + +.devs { + display: flex; + align-items: center; + justify-content: center; + height: 85%; + width: 100%; +} + +.dev { + display: grid; + grid-auto-flow: dense; + background: $button-default; + border-radius: 5px; + box-shadow: 3px 3px 5px $overlay-filter; + color: black; + padding: 20px; + margin: 30px; + height: 80%; + width: 25%; + + p { + overflow: scroll; + min-height: 25vh; + max-height: 25vh; + } + + h4 { + color: black; + } + + .social { + display: flex; + font-size: 3vh; + justify-content: space-evenly; + align-items: flex-end; + position: relative; + left: 20%; + width: 60%; + + a { + text-decoration: none; + color: $intel-assassin; + &:hover { + color: $player-active; + cursor: pointer; + text-shadow: 1px 1px 2px black; + } + } + } +} + diff --git a/src/components/AboutDevs/index.js b/src/components/AboutDevs/index.js new file mode 100644 index 0000000..203df6c --- /dev/null +++ b/src/components/AboutDevs/index.js @@ -0,0 +1,116 @@ +/* eslint-disable jsx-a11y/anchor-has-content */ +import React from 'react'; + +const AboutDevs = (props) => { + const devs = [ + { + name: "Jon Peterson", + gH_Link: "https://github.com/joequincy", + l_Link: "https://www.linkedin.com/in/joequincy/", + p_Link: "https://alumni.turing.io/alumni/jon-peterson", + role: "BE", + img: + "https://media.licdn.com/dms/image/C4E03AQEhILN-5s-jEw/profile-displayphoto-shrink_800_800/0?e=1571270400&v=beta&t=WBZ4ztxssw3W-PwaLADES30A7HvX-4anP6oPfkRLpYs", + summary: + "A tinkerer by nature, I enjoy hacking away on an interesting idea and learning new tricks along the way. I’m always looking for a new idea or technology to explore!" + }, + { + name: "Justin Pyktel", + gH_Link: "https://github.com/SiimonStark", + l_Link: "https://www.linkedin.com/in/justinpyktel/", + p_Link: "https://alumni.turing.io/alumni/justin-pyktel", + role: "FE", + img: + "https://media.licdn.com/dms/image/C4E03AQGFJ9zu6O-7Zw/profile-displayphoto-shrink_200_200/0?e=1571270400&v=beta&t=KmObYjlcIRPiKy0wB2itsWgIJAwBNVyHPKoXlobY_0o", + summary: + "Transitioning into the tech field I intend to keep my audience at the forefront of design choices. Creating a more enjoyable and fun experience is certainly a win win!" + }, + { + name: "Lynne Rang", + gH_Link: "https://github.com/lynnerang", + l_Link: "https://www.linkedin.com/in/lynne-rang/", + p_Link: "https://alumni.turing.io/alumni/lynne-rang", + role: "FE", + img: + "https://media.licdn.com/dms/image/C4E03AQFu8BraqA9MJA/profile-displayphoto-shrink_800_800/0?e=1571270400&v=beta&t=u4QsbYsdbK4CYp0MaKpv0I6Ky9jKs3h0b_lF_3VC8vY", + summary: + "My skills as a developer come together with a holistic understanding of what it takes to make a great product" + }, + { + name: "Rachael Drennan", + gH_Link: "https://github.com/rdren0", + l_Link: "https://www.linkedin.com/in/rachael-drennan/", + p_Link: "https://alumni.turing.io/alumni/rachael-drennan", + role: "FE/BE", + img: + "https://media.licdn.com/dms/image/C4E03AQFmgk9OS5Z88Q/profile-displayphoto-shrink_800_800/0?e=1571270400&v=beta&t=A8lyTbvCZ7IxW1ctg19Oqw0EfVq06xUh1kMK14vybSI", + summary: + "As an artist and problem solver, I was drawn to software engineering because it allows me to be both creative and analytical in my approach to a project." + } + ]; + + const randomizeDevs = () => { + // Resource: + // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array + + for (let i = devs.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [devs[i], devs[j]] = [devs[j], devs[i]]; + } + } + + const renderDevs = () => { + randomizeDevs(); + + return devs.map(dev => { + return ( +
+ ); + }) + } + + return ( +