69 |
72 |
73 | )
74 | }
75 |
76 | handleHover() {
77 | this.setState({ hover: true })
78 | }
79 | handleUnHover() {
80 | this.setState({ hover: false })
81 | }
82 | }
83 |
84 | ProjectDisplay.propTypes = {
85 | title: PropTypes.string,
86 | description: PropTypes.string,
87 | image: PropTypes.string,
88 | size: PropTypes.string,
89 | }
90 |
91 | export default ProjectDisplay
--------------------------------------------------------------------------------
/src/components/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's StaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.org/docs/static-query/
6 | */
7 |
8 | import React from "react"
9 | import PropTypes from "prop-types"
10 |
11 | import { Container, Icon } from 'rsuite'
12 | import Header from "./header"
13 | import "./layout.scss"
14 |
15 | const Layout = ({ children, siteTitle, siteLogo, contact, connect, headerBreakpoint }) => {
16 | const styles = {
17 | main: {
18 | minheight: 'calc(100vh - 185px)',
19 | },
20 | footer: {
21 | width: "100%",
22 | height: '200px',
23 | position: 'relative',
24 | display: "flex",
25 | flexDirection: 'row',
26 | justifyContent: 'space-around',
27 | alignItems: 'center',
28 | backgroundColor: 'black',
29 | color: 'white',
30 | },
31 | linkContainer: {
32 | display: 'flex',
33 | flexDirection: 'row',
34 | justifyContent: 'space-around',
35 | alignItems: 'center',
36 | },
37 | link: {
38 | margin: '0 15px',
39 | },
40 | span: {
41 | display: 'flex',
42 | flexDirection: 'row',
43 | justifyContent: 'space-between',
44 | alignItems: 'center',
45 | },
46 | contactLine: {
47 | marginBottom: '10px'
48 | }
49 | }
50 | return (
51 | {this.props.title}
70 |{this.props.description}
71 |GAP
} 82 |83 | 84 | {siteTitle} 85 | 86 |
87 |
77 |
80 | Check Out Our Work
78 |{pageData.summary}
79 |
82 | {projectData.map(project => {
83 | return (
84 |
94 | {this.state.selectedProject.metadata.date}
99 |
106 | {this.state.selectedProject.metadata.gallery.map(imageUrl => (
107 | 
112 | ))}
113 |
114 |
2 |
3 | 
4 |
5 |
7 | Gatsby Agency Portfolio 8 |
9 | 10 |11 | 12 | View Demo 13 | 14 |
15 | 16 |Portfolio client designed with creative agencies in mind.
17 | 18 | ## Getting Started 19 | 20 | This project uses Gatsby and has been boostrapped using the [Gatsby CLI](https://www.gatsbyjs.org/docs/gatsby-cli/) 21 | 22 | 1. **Install this source code.** 23 | 24 | Clone this directory to your local machine 25 | 26 | ```sh 27 | git clone https://github.com/cosmicjs/gatsby-agency-portfolio 28 | ``` 29 | 30 | Install project dependencies 31 | ```sh 32 | npm install 33 | ``` 34 | or 35 | ```sh 36 | yarn install 37 | ``` 38 | 39 | 2. **Intialize your bucket on Cosmic JS.** 40 | 41 | Click here to get started: [](https://cosmicjs.com/add-bucket?import_bucket=5cbf745a10d5c22da1f9b3e2) 42 | 43 | You will need to create a file for configuring your local runtime environment 44 | 45 | ```sh 46 | cd gatsby-agency-portfolio/ 47 | touch .env 48 | ``` 49 | 50 | Add your environment variables 51 | ```sh 52 | # inside .env at project root 53 | COSMIC_READ_KEY=your-cosmic-js-read-key 54 | COSMIC_BUCKET_SLUG=your-cosmic-bucket-slug 55 | ``` 56 | 57 | 3. **Start developing.** 58 | 59 | start the development server. 60 | 61 | ```sh 62 | gatsby develop 63 | ``` 64 | 65 | 4. **Open the source code and start editing!** 66 | 67 | Your site is now running at `http://localhost:8000`! 68 | 69 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ 70 | 71 | Open the `gatsby-agency-portfolio` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 72 | 73 | ## 🧐 What's inside? 74 | 75 | A quick look at the top-level files and directories you'll see in a Gatsby project. 76 | 77 | . 78 | ├── node_modules 79 | ├── src 80 | ├── .gitignore 81 | ├── .prettierrc 82 | ├── gatsby-browser.js 83 | ├── gatsby-config.js 84 | ├── gatsby-node.js 85 | ├── gatsby-ssr.js 86 | ├── LICENSE 87 | ├── package-lock.json 88 | ├── package.json 89 | └── README.md 90 | 91 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 92 | 93 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 94 | 95 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 96 | 97 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 98 | 99 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 100 | 101 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 102 | 103 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 104 | 105 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 106 | 107 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 108 | 109 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 110 | 111 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 112 | 113 | 12. **`README.md`**: A text file containing useful reference information about your project. 114 | 115 | ## 🎓 Learning Gatsby 116 | 117 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 118 | 119 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 120 | 121 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 122 | 123 | ## 💫 Deploy 124 | 125 | [](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) 126 | 127 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import { graphql } from "gatsby" 4 | import { Progress } from 'rsuite' 5 | const { Line } = Progress 6 | 7 | import Layout from "../components/layout" 8 | import SEO from "../components/seo" 9 | 10 | class About extends React.Component { 11 | render() { 12 | const pageData = this.props.data.cosmicjsPages.metadata 13 | const peopleData = this.props.data.allCosmicjsPeople.edges 14 | const skillData = this.props.data.allCosmicjsSkills.edges 15 | const siteData = this.props.data.cosmicjsSettings.metadata 16 | const contactData = this.props.data.cosmicjsContacts.metadata 17 | const connectData = this.props.data.allCosmicjsConnects.edges 18 | let headerBreakpoint 19 | if (typeof window !== 'undefined') { 20 | headerBreakpoint = window.innerHeight / 3 21 | } 22 | const styles = { 23 | pageHeader: { 24 | padding: '0', 25 | }, 26 | summary: { 27 | width: '25%', 28 | maxWidth: '300px', 29 | paddingRight: '50px', 30 | margin: '0 20px', 31 | textAlign: 'right', 32 | fontSize: '1.5rem', 33 | borderRight: 'thin solid black' 34 | }, 35 | description: { 36 | width: '40%', 37 | marginRight: '30px', 38 | fontSize: '1.0rem' 39 | }, 40 | skills: { 41 | maxWidth: '1000px', 42 | padding: '0 15px', 43 | marginLeft: 'auto', 44 | marginRight: 'auto' 45 | }, 46 | skillDetails: { 47 | width: '90%', 48 | marginTop: '20px', 49 | display: 'flex', 50 | flexDirection: 'row', 51 | justifyContent: 'center', 52 | alignItems: 'center', 53 | }, 54 | skillName: { 55 | width: '200px', 56 | marginRight: '50px', 57 | borderRight: 'thin solid black', 58 | }, 59 | skillDescription: { 60 | maxWidth: '300px', 61 | }, 62 | person: { 63 | width: '25%', 64 | padding: '10px', 65 | display: 'flex', 66 | flexDirection: 'column', 67 | justifyContent: 'center', 68 | alignItems: 'center', 69 | textDecoration: 'none' 70 | }, 71 | personName: { 72 | marginTop: '0', 73 | color: 'black', 74 | fontSize: '1rem' 75 | }, 76 | personTitle: { 77 | color: 'grey', 78 | fontSize: '0.8rem', 79 | } 80 | } 81 | if (pageData.splash_image) { 82 | styles.pageHeader.background = `url(${pageData.splash_image.url})` 83 | styles.pageHeader.backgroundSize = 'cover' 84 | styles.pageHeader.backgroundPosition = 'center' 85 | } 86 | 87 | return ( 88 |
99 |
105 | Who We Are
100 | {pageData.splash_phrase 101 | ?{pageData.splash_phrase}
102 | : null 103 | } 104 |{pageData.intro_summary}
108 |{pageData.intro_description}
109 |
113 |
123 | ))}
124 |
114 |
117 | {skill.node.title}
115 |{skill.node.metadata.description}
116 |
127 | {peopleData.map(person => (
128 |
144 |
129 |
139 |
142 | ))}
143 | {person.node.title}
140 |{person.node.metadata.job_title}
141 |
147 |
153 | What We Do
148 | {pageData.splash_phrase 149 | ?{pageData.splash_phrase}
150 | : null 151 | } 152 |{pageData.intro_summary}
156 |{pageData.intro_description}
157 |
165 |
182 | ))}
183 |
166 | {service.node.metadata.icon ? this.handleServiceClick(serviceData.indexOf(service))} /> : null}
167 |
181 | this.handleServiceClick(serviceData.indexOf(service))}>{service.node.title}
168 |this.handleServiceClick(serviceData.indexOf(service))}>{service.node.metadata.summary}
169 | {this.state.activeIndex === serviceData.indexOf(service) 170 | ?
171 |
178 | : null
179 | }
180 | {service.node.metadata.description}
172 |
186 |
188 | Our Clients
187 |
189 | {clientData.map(client => (
190 |
191 | 
193 |
194 | ))}
195 |
196 | {client.node.title}
192 |
193 |
194 | ))}
195 |
162 |
164 | : null
165 | }
166 | {pageData.splash_phrase}
163 |
174 |
198 |
175 |
178 | What We Do
176 |{pageData.service_description}
177 |
179 | {serviceData.map(service => (
180 |
181 |
187 | {service.node.title}
183 |{service.node.metadata.summary}
184 | 185 | ))} 186 |
188 | {projectData.map(project => (
189 |
197 |
206 |
231 |
207 |
210 | Who We Are
208 |{pageData.people_description}
209 |
211 | {peopleData.map(person => {
212 | return (
213 |
214 |
224 |
230 | {person.node.title}
225 |{person.node.metadata.job_title}
226 | 227 | ) 228 | })} 229 |
240 |
241 |
267 |
242 |
245 |
266 | Contact Us
243 |Fill out the form below if you would like to get a hold of us.
244 |