|
|
|
@ -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> |
|
|
|
|
); |
|
|
|
|