Created
March 7, 2018 03:55
-
-
Save scottiedog45/8257e6d5d72f735303be368384e5afa0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import Link from 'gatsby-link' | |
import styled from 'styled-components' | |
// import js from '../icons/js.png' | |
// import html from '../icons/html5.png' | |
// import css from '../icons/css.svg.png' | |
// import jquery from '../icons/jquery.svg.png' | |
import chai from '../icons/chai.png' | |
import css from '../icons/css.png' | |
import express from '../icons/expressjslogo.png' | |
import styledcomponents from '../icons/styled-components.png' | |
import githublogo from '../icons/github-512 (1).png' | |
import html from '../icons/html5.png' | |
import jest from '../icons/jest.png' | |
import jquery from '../icons/jquery.png' | |
import js from '../icons/js.png' | |
import redux from '../icons/redux.png' | |
import mocha from '../icons/mocha (1).png' | |
import node from '../icons/node.png' | |
import react from '../icons/react.png' | |
import reduxForm from '../icons/redux form.png' | |
const Button = styled.button` | |
border-color: black; | |
background-color: inherit; | |
border-style: solid; | |
border-width: 1px; | |
`; | |
const Panel = styled.div` | |
`; | |
const Panel1= Panel.extend` | |
padding-top: 3em; | |
`; | |
const ProjectTitle = styled.p` | |
font-size: 1.5em; | |
margin-bottom: 0px; | |
`; | |
const Panel2 = Panel.extend` | |
`; | |
const Panel3 = Panel.extend` | |
`; | |
const Panel4 = Panel.extend` | |
`; | |
const ButtonWrapper = styled.div` | |
display: flex; | |
justify-content: space-around; | |
`; | |
const Subtitle = styled.p` | |
text-align: center; | |
font-size: 20px; | |
margin-top: 20px; | |
`; | |
const Bio = styled.p` | |
` | |
const Description = styled.p` | |
margin-top: 20px; | |
`; | |
const Url = styled.a` | |
text-decoration: none; | |
cursor: pointer; | |
`; | |
const IconWrapper = styled.div` | |
display: flex; | |
justify-content: space-around; | |
`; | |
const Icon = styled.img` | |
height: 40px; | |
`; | |
const Footer = styled.div` | |
`; | |
const FooterIcon = Icon.extend` | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
`; | |
const Name = styled.p` | |
display: block; | |
text-align: center; | |
font-size: 4em; | |
padding-top: 2em; | |
padding-bottom: 1em; | |
`; | |
const IndexPage = () => ( | |
<div> | |
<Panel> | |
<Name> | |
Scott O'Toole, web-dev | |
</Name> | |
<Subtitle> | |
Hey there! My name is Scott, and I'm your web developer. | |
</Subtitle> | |
<ButtonWrapper> | |
<Button> | |
Who am I? | |
</Button> | |
<Button> | |
See my work | |
</Button> | |
</ButtonWrapper> | |
</Panel> | |
<Panel1> | |
<Bio> | |
I'm a recent graduate of the Front End | |
Web Development bootcamp at Thinkful. I love how web development | |
combines quantitative and qualitative problem solving skills, which | |
is why I've chosen it as a career path. I'm excited by innovation, | |
and always driven to find solutions that are efficient and artistic. | |
<br /> <br /> | |
My curiosity has led me on adventures through several career fields | |
including classical music performance, artistic administration, actuarial | |
science, and now... coding! I feel most at home in front of my laptop, either | |
learning a slick new library or designing the website for a business. At some | |
point I drank the CrossFit kool-aid, so if my computer is off you can also find | |
me in a local gym racking up some burpees! | |
</Bio> | |
</Panel1> | |
<hr /> | |
<Panel> | |
<ProjectTitle> | |
Piqnic | |
</ProjectTitle> | |
<Url> | |
www.piqnic.com | |
</Url> | |
<Description> | |
Description: An app that helps you quickly plan a picnic. | |
</Description> | |
<IconWrapper> | |
<p>Tech Used:</p> | |
<Icon src={html} alt={'html logo'} /> | |
<Icon src={css} alt={'css logo'} /> | |
<Icon src={js} alt={'js logo'} /> | |
<Icon src={jquery} alt={'jquery logo'} /> | |
</IconWrapper> | |
</Panel> | |
<hr /> | |
<Panel> | |
<ProjectTitle> | |
hai·koo | |
</ProjectTitle> | |
<Url> | |
www.haikoo.com | |
</Url> | |
<Description> | |
An app that syllable-checks your haiku, and let's you post and vote on other haikus! | |
</Description> | |
<IconWrapper> | |
<Icon src={html} alt={'html logo'} /> | |
<Icon src={css} alt={'css logo'} /> | |
<Icon src={js} alt={'js logo'} /> | |
<Icon src={jquery} alt={'jquery logo'} /> | |
<Icon src={mocha} alt={'mocha logo'} /> | |
<Icon src={chai} alt={'chai logo'} /> | |
<Icon src={express} alt={'express logo'} /> | |
<Icon src={node} alt={'node logo'} /> | |
</IconWrapper> | |
</Panel> | |
<hr /> | |
<Panel> | |
<ProjectTitle> | |
Leev | |
</ProjectTitle> | |
<Url> | |
www.leev.com | |
</Url> | |
<Description> | |
Leev uses a simple interface to help you track your group's leave data. | |
</Description> | |
<IconWrapper> | |
<Icon src={html} alt={'html logo'} /> | |
<Icon src={styledcomponents} alt={'styled components logo'} /> | |
<Icon src={js} alt={'js logo'} /> | |
<Icon src={react} alt={'react logo'} /> | |
<Icon src={redux} alt={'redux logo'} /> | |
<Icon src={reduxForm} alt={'redux form logo'} /> | |
<Icon src={mocha} alt={'mocha logo'} /> | |
<Icon src={jest} alt={'jest logo'} /> | |
<Icon src={chai} alt={'chai logo'} /> | |
<Icon src={express} alt={'express logo'} /> | |
<Icon src={node} alt={'node logo'} /> | |
</IconWrapper> | |
</Panel> | |
<hr /> | |
<Footer> | |
<Link to="/contactMe/">Holla atcha boi</Link> | |
<FooterIcon src={githublogo} alt={'github logo'} /> | |
</Footer> | |
</div> | |
) | |
export default IndexPage |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment