tanner/personal-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create project grid items

Browse Source
This commit is contained in:
Tanner Collin
2018-07-28 08:04:29 -06:00
parent 1bc64552c0
commit 2ce4389ce7
9 changed files with 147 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Grid.js
+67 -15
View File
@@ -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>
<img src={logo} className="Home-logo" alt="logo" />
<p>Links</p>
<p>Links</p>
<p>Links</p>
<p>Links</p>
<p>Links</p>
<GridItem type='menu'>
<img src={logo} className='logo' alt='Tanner Collin logo' />
<section>
<aside>
<p>Home</p>
<p>Projects</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>
<h1>Project 1</h1>
<GridItem type='project left'>
<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>
<h1>Project 2</h1>
<GridItem type='project bottom'>
<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>
<h1>Project 3</h1>
<GridItem type='project bottom'>
<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>
<h1>Project 4</h1>
<GridItem type='project left'>
<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>
);