personal-site/src/Grid.js

import React from 'react';
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';

import banff1 from './banff1.jpg';
import bee1 from './bee1.jpg';
import canmore1 from './canmore1.jpg';
import carshow1 from './carshow1.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 type='menu'>
					<img src={logo} className='logo' alt='' />
					<section>
						<div className='fuckcss'>
							<img src={tanner} alt='' />
						</div>
					</section>
					<footer>More info or a .onion link.</footer>
				</GridItem>
				<GridItem type='project left'>
					<header>LED Dress</header>
					<section>
						<img src={dress1} alt='' />
						<p>A dress lit up with LEDs that act as twinkling stars. Seven act as The Big Dipper, and the rest twinkle randomly.</p>
					</section>
				</GridItem>
				<GridItem type='photo'>
					<a>
						<header>Thorncliffe Car Show</header>
						<img src={carshow1} alt='' />
					</a>
				</GridItem>
				<GridItem type='project bottom'>
					<header>Remote Control Lightswitch</header>
					<section>
						<img src={switch1} alt='' />
						<p>Custom circuit that lets me control a ceiling light over Wifi.</p>
					</section>
				</GridItem>
				<GridItem type='project bottom'>
					<header>Plant Waterer</header>
					<section>
						<img src={pump1} alt='' />
						<p>Controller that waters my plant automatically every day.</p>
					</section>
				</GridItem>
				<GridItem type='photo'>
					<a>
						<header>Prince's Island Park</header>
						<img src={bee1} alt='' />
					</a>
				</GridItem>
				<GridItem type='photo'>
					<a>
						<header>Johnston Creek, Banff</header>
						<img src={banff1} alt='' />
					</a>
				</GridItem>
				<GridItem type='project left'>
					<header>Hand of Ozymandias</header>
					<section>
						<img src={hand1} alt='' />
						<p>Sculpture welded together out of scrap metal for practice.</p>
					</section>
				</GridItem>
				<GridItem type='photo'>
					<a>
						<header>VW Van in Canmore</header>
						<img src={canmore1} alt='' />
					</a>
				</GridItem>
			</div>
		);
	}
}

export default Grid;