Skip to content

Created Team Pics component for Home-page #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maryharebear merged 2 commits into from
Jun 5, 2020
Merged

Created Team Pics component for Home-page #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6dfb83
Created Team Pics component for Home-page
trumanjchan May 30, 2020
1279538
Made the TeamPics Component Responsive!
trumanjchan Jun 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/images/lorenzo.jpg
View file
Open in desktop
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/images/mary.jpg
View file
Open in desktop
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/images/truman.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 117 additions & 0 deletions src/components/TeamPics/teampics.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
/* HEXAGON DESIGN code taken from and edited: https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids */

body {
#grid {
position: relative;
width: 70%; /* Scales original sizes */
margin: 0 auto;
padding: 0 0 5% 0; /* Padding under Grid component (under last row of hexagons) */
}

.clear:after {
content: "";
display: block;
clear: both;
}

/* Parallelogram */
#grid li {
list-style-type: none;
position: relative;
float: left;
width: 14.85714285714286%; /* Directly related to original hexagon size */
padding: 0% 0% 17% 0%; /* Directly related to original hexagon size */
-o-transform: rotate(-60deg) skewY(30deg);
-moz-transform: rotate(-60deg) skewY(30deg);
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
background: #fd005f;
overflow: hidden;
visibility: hidden;
}

#grid li .hexagon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fdbf00;
-o-transform: skewY(-30deg) rotate(60deg);
-moz-transform: skewY(-30deg) rotate(60deg);
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
overflow: hidden;
}

/* Makes all children of li visable */
#grid li * {
visibility: visible;
}

/* Makes every 2 child have padding on left and right of itself */
#grid li:nth-child(2n + 2) {
margin: 0 1%;
}

/* Translates each child in the second row to the right a little bit, and moves them down. */
#grid li:nth-child(6n + 7),
#grid li:nth-child(6n + 8),
#grid li:nth-child(6n + 9),
#grid li:nth-child(6n + 10),
#grid li:nth-child(6n + 11),
#grid li:nth-child(6n + 12) {
margin-top: -3.35%;
margin-bottom: 0%;
-o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}

/* 7th child (2nd row): Move into interlocking position, which moves the rest of the children in the row. */
#grid li:nth-child(6n + 7) {
margin-left: 0.4%;
}

h1,
h2,
h3,
h4,
p {
color: black;
}

h1 {
font-weight: bold;
}

.Header {
padding: 3% 0% 2% 5%;

/* Media Queries taken from and edited: https://www.w3schools.com/css/css_rwd_mediaqueries.asp */

/* Small devices (phones, portrait tablets, and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
font-size: 20px;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
font-size: 25px;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
font-size: 35px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
font-size: 40px;
}
}
}
119 changes: 119 additions & 0 deletions src/components/TeamPics/teampics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import React from 'react';

import TRUMAN from '../../assets/images/truman.jpg';
import LORENZO from '../../assets/images/lorenzo.jpg';
import MARY from '../../assets/images/mary.jpg';
//import SHIV from '../../assets/images/shiv.jpg';
//import ATHENA from '../../assets/images/athena.jpg';
//import ADRIAN from '../../assets/images/adrian.jpg';
//import BUSHER from '../../assets/images/busher.jpg';
//import TUZETTE from '../../assets/images/tuzette.jpg';
//import MANJOT from '../../assets/images/manjot.jpg';
//import KACEY from '../../assets/images/kacey.jpg';
//import SID from '../../assets/images/sid.jpg';
//import INTISER from '../../assets/images/intiser.jpg';

import './teampics.scss';


/* Outline for this component largely taken from: https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids */


const Test: React.FC = () => {
return (
<body>
<div className="Header">
<h1>Our Team</h1>
</div>

<ul id="grid" className="clear">
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/trumanjfchan/">
<img className="Picture" src={TRUMAN} alt="Truman" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/lorenzo-scaturchio-62203b160/">
<img className="Picture" src={LORENZO} alt="Lorenzo" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/maryfrancine/">
<img className="Picture" src={MARY} alt="Mary" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/shiv248/">
<img className="Picture" src={TRUMAN} alt="Shiv" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/athena-siaotong/">
<img className="Picture" src={TRUMAN} alt="Athena" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/adriandarian/">
<img className="Picture" src={TRUMAN} alt="Adrian" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/busher-bridi/">
<img className="Picture" src={TRUMAN} alt="Busher" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/tuzette-vu-500550100/">
<img className="Picture" src={TRUMAN} alt="Tuzette" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/manjot-singh-0a41a8195/">
<img className="Picture" src={TRUMAN} alt="Manjot" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/kacey-su-351950176/">
<img className="Picture" src={TRUMAN} alt="Kacey" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/sidharth-babu/">
<img className="Picture" src={TRUMAN} alt="Sid" />
</a>
</div>
</li>
<li>
<div className="hexagon">
<a href="https://www.linkedin.com/in/intiseraziz/">
<img className="Picture" src={TRUMAN} alt="Intiser" />
</a>
</div>
</li>
</ul>
</body>
);
};

export default Test;
2 changes: 2 additions & 0 deletions src/pages/Home/home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import React from 'react';

import Title from '../../components/Title/title';
import Navbar from '../../components/NavBar/navbar';
import TeamPics from '../../components/TeamPics/teampics';
import Footer from '../../components/Footer/footer';

const Home: React.FC = () => {
return (
<div className="">
<Navbar />
<Title />
<TeamPics />
<Footer />
</div>
);
Expand Down