Create project grid items

src/App.css

@@ -3,5 +3,8 @@
 }
 
 body {
-	font-family: sans-serif;
+	line-height: 1.6;
+	font-size: 1.125rem;
+	color: #333;
+	background-color: #F9F9F9;
 }

src/Grid.css

@@ -5,7 +5,7 @@
 }
 
 .grid-item {
-	background: linear-gradient(135deg, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
+	//background: linear-gradient(135deg, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
 	position: relative;
 
 	float: left;
@@ -23,6 +23,79 @@
 	padding: 1rem;
 }
 
+.menu {
+	display: flex;
+	flex-flow: column;
+}
+
+.menu .logo {
+	width: 100%;
+	padding: 1rem 5rem 0;
+}
+
+.menu section {
+	display: flex;
+	min-height: 0;
+}
+
+.menu aside {
+	flex: 1;
+	align-self: center;
+	text-align: right;
+}
+
+.menu .mug {
+	height: 100%;
+	padding: 2rem;
+}
+
+.project {
+	display: flex;
+	flex-flow: column;
+}
+
+.project header {
+	font-size: 2.25rem;
+	line-height: 1.2;
+}
+
+.project section {
+	min-height: 0;
+	flex: 1;
+	display: flex;
+}
+
+.project footer {
+	display: flex;
+	justify-content: space-between;
+	margin: 0 1em;
+	font-size: 1rem;
+	font-family: monospace;
+}
+
+.project.bottom section {
+	flex-flow: column;
+}
+
+.project.left section p {
+	align-self: center;
+}
+
+.project.left section img {
+	height: 100%;
+	padding: 1rem;
+}
+
+.project.bottom section p {
+	margin-bottom: 1rem;
+}
+
+.project.bottom section img {
+	object-fit: contain;
+	min-height: 0;
+	padding: 1rem;
+}
+
 @media all and (max-width: 120rem) {
 	.grid-item {
 		width: 25%;
@@ -49,7 +122,7 @@
 
 @media all and (max-width: 51rem) {
 	.grid-container {
-		max-width: 34rem;;
+		max-width: 34rem;
 	}
 	.grid-item {
 		width: 100%;

src/Grid.js

@@ -4,29 +4,81 @@ import './Grid.css';
 import logo from './logo.png';
 import GridItem from './GridItem';
 
+import tanner from './tanner.jpg';
+import dress1 from './dress1.jpg';
+import switch1 from './switch1.jpg';
+import pump1 from './pump1.jpg';
+import hand1 from './hand1.jpg';
+
+//function importAll(r) {
+//    return r.keys().map(x => r(x));
+//}
+
+//const images = importAll(require.context('./images'));
+
+
 class Grid extends React.Component {
 	render() {
 		return (
 			<div className='grid-container'>
-				<GridItem>
+				<GridItem type='menu'>
-					<img src={logo} className="Home-logo" alt="logo" />
+					<img src={logo} className='logo' alt='Tanner Collin logo' />
-					<p>Links</p>
+					<section>
-					<p>Links</p>
+						<aside>
-					<p>Links</p>
+							<p>Home</p>
-					<p>Links</p>
+							<p>Projects</p>
-					<p>Links</p>
+							<p>Photograhy</p>
+							<p>Art</p>
+							<p>About</p>
+							<p>Contact</p>
+						</aside>
+						<img src={tanner} className='mug' alt='Picture of Tanner' />
+					</section>
+					<footer>More info or a .onion link.</footer>
 				</GridItem>
-				<GridItem>
+				<GridItem type='project left'>
-					<h1>Project 1</h1>
+					<header>LED Dress</header>
+					<section>
+						<p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p>
+						<img src={dress1} alt='LED Dress thumbnail' />
+					</section>
+					<footer>
+						<p>Project (Hardware)</p>
+						<p>2018-10-11</p>
+					</footer>
 				</GridItem>
-				<GridItem>
+				<GridItem type='project bottom'>
-					<h1>Project 2</h1>
+					<header>Remote Control Lightswitch</header>
+					<section>
+						<img src={switch1} alt='Lightswitch thumbnail' />
+						<p>Custom circuit that lets me control a ceiling light over Wifi.</p>
+					</section>
+					<footer>
+						<p>Project (Hardware)</p>
+						<p>2018-10-11</p>
+					</footer>
 				</GridItem>
-				<GridItem>
+				<GridItem type='project bottom'>
-					<h1>Project 3</h1>
+					<header>Plant Waterer</header>
+					<section>
+						<img src={pump1} alt='Plant Waterer thumbnail' />
+						<p>Controller that waters my plant automatically every day.</p>
+					</section>
+					<footer>
+						<p>Project (Hardware)</p>
+						<p>2018-10-11</p>
+					</footer>
 				</GridItem>
-				<GridItem>
+				<GridItem type='project left'>
-					<h1>Project 4</h1>
+					<header>Hand of Ozymandias</header>
+					<section>
+						<p>Sculpture welded together out of scrap metal for practice.</p>
+						<img src={hand1} alt='Metal Hand thumbnail' />
+					</section>
+					<footer>
+						<p>Project (Hardware)</p>
+						<p>2018-10-11</p>
+					</footer>
 				</GridItem>
 			</div>
 		);

src/GridItem.js

@@ -4,7 +4,7 @@ class GridItem extends React.Component {
 	render() {
 		return (
 			<div className='grid-item'>
-				<div className='grid-item-content'>
+				<div className={'grid-item-content ' + this.props.type}>
 					{this.props.children}
 				</div>
 			</div>