├── .gitignore ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json └── src ├── components ├── blogSquare.css ├── blogSquare.js ├── layout.css ├── layout.js ├── navigation.css ├── navigation.js └── seo.js ├── pages ├── 2018-12-25-five-books-which-will-improve-your-career │ └── index.md ├── 2018-12-25-five-mistakes-youre-making-in-your-technical-interviews │ └── index.md ├── 404.js ├── index.js ├── podcasting.js ├── speaking.js └── writing.js └── templates └── blogPost.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | public -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | Gatsby 5 | 6 |

7 |

8 | Gatsby's default starter 9 |

10 | 11 | Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the default starter. 20 | 21 | ```sh 22 | # create a new Gatsby site using the default starter 23 | gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```sh 31 | cd my-default-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | _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)._ 40 | 41 | Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 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”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 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. 68 | 69 | 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. 70 | 71 | 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). 72 | 73 | 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. 74 | 75 | 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. 76 | 77 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 78 | 79 | 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).** 80 | 81 | 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. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 88 | 89 | - **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. 90 | 91 | - **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. 92 | 93 | ## 💫 Deploy 94 | 95 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) 96 | 97 | 98 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: `Emma Wedekind's BLog`, 4 | description: `This is where I show off my cool projects.`, 5 | author: `@emmawedekind`, 6 | }, 7 | plugins: [ 8 | `gatsby-plugin-react-helmet`, 9 | { 10 | resolve: `gatsby-plugin-google-fonts`, 11 | options: { 12 | fonts: [ 13 | `Oxygen`, 14 | ], 15 | display: 'swap' 16 | } 17 | }, 18 | `gatsby-transformer-sharp`, 19 | `gatsby-plugin-sharp`, 20 | { 21 | resolve: 'gatsby-source-filesystem', 22 | options: { 23 | path: `${__dirname}/src/pages`, 24 | name: 'pages', 25 | }, 26 | }, 27 | 'gatsby-transformer-remark', 28 | { 29 | resolve: `gatsby-plugin-manifest`, 30 | options: { 31 | name: `gatsby-starter-default`, 32 | short_name: `starter`, 33 | start_url: `/`, 34 | background_color: `#663399`, 35 | theme_color: `#663399`, 36 | display: `minimal-ui`, 37 | }, 38 | }, 39 | // this (optional) plugin enables Progressive Web App + Offline functionality 40 | // To learn more, visit: https://gatsby.dev/offline 41 | // `gatsby-plugin-offline`, 42 | ], 43 | } -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | exports.createPages = ({ boundActionCreators, graphql }) => { 4 | const { createPage } = boundActionCreators 5 | 6 | const postTemplate = path.resolve('src/templates/blogPost.js') 7 | 8 | return graphql(` 9 | { 10 | allMarkdownRemark { 11 | edges { 12 | node { 13 | html 14 | id 15 | frontmatter { 16 | path 17 | title 18 | date 19 | author 20 | } 21 | } 22 | } 23 | } 24 | } 25 | `).then(res => { 26 | if (res.errors) { 27 | return Promise.reject(res.errors) 28 | } 29 | 30 | res.data.allMarkdownRemark.edges.forEach(({ node }) => { 31 | createPage({ 32 | path: node.frontmatter.path, 33 | component: postTemplate, 34 | }) 35 | }) 36 | }) 37 | } -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-default", 3 | "private": true, 4 | "description": "A simple starter to get up and developing quickly with Gatsby", 5 | "version": "0.1.0", 6 | "author": "Kyle Mathews ", 7 | "dependencies": { 8 | "gatsby": "^2.13.62", 9 | "gatsby-image": "^2.2.8", 10 | "gatsby-plugin-google-fonts": "^1.0.1", 11 | "gatsby-plugin-manifest": "^2.2.5", 12 | "gatsby-plugin-offline": "^2.2.6", 13 | "gatsby-plugin-react-helmet": "^3.1.3", 14 | "gatsby-plugin-sharp": "^2.2.11", 15 | "gatsby-source-filesystem": "^2.1.9", 16 | "gatsby-transformer-remark": "^2.6.14", 17 | "gatsby-transformer-sharp": "^2.2.6", 18 | "prop-types": "^15.7.2", 19 | "react": "^16.9.0", 20 | "react-dom": "^16.9.0", 21 | "react-helmet": "^5.2.1" 22 | }, 23 | "devDependencies": { 24 | "prettier": "^1.18.2" 25 | }, 26 | "keywords": [ 27 | "gatsby" 28 | ], 29 | "license": "MIT", 30 | "scripts": { 31 | "build": "gatsby build", 32 | "develop": "gatsby develop", 33 | "format": "prettier --write \"**/*.{js,jsx,json,md}\"", 34 | "start": "npm run develop", 35 | "serve": "gatsby serve", 36 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 41 | }, 42 | "bugs": { 43 | "url": "https://github.com/gatsbyjs/gatsby/issues" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/blogSquare.css: -------------------------------------------------------------------------------- 1 | .blogSquare { 2 | position: relative; 3 | display: flex; 4 | margin-bottom: 50px; 5 | flex-direction: column; 6 | padding-bottom: 50px; 7 | border-bottom: 1px solid #efefef; 8 | } 9 | 10 | .blogSquare__title { 11 | font-weight: 200; 12 | margin: 0; 13 | font-size: 1.5em; 14 | } 15 | 16 | .blogSquare__date { 17 | margin: 5px 0px 15px; 18 | font-size: 0.8em; 19 | font-weight: bold; 20 | } 21 | 22 | .blogSquare__readMore { 23 | font-size: 0.8em; 24 | display: inline-block; 25 | } -------------------------------------------------------------------------------- /src/components/blogSquare.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from "gatsby"; 3 | 4 | import './blogSquare.css' 5 | 6 | const BlogSquare = ({ title, date, path, description }) => ( 7 |
8 | 12 |

{title}

13 |

{date}

14 |

{description}

15 |

Read more

16 | 17 |
18 | ) 19 | 20 | export default BlogSquare -------------------------------------------------------------------------------- /src/components/layout.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | -ms-text-size-adjust: 100%; 4 | -webkit-text-size-adjust: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-osx-font-smoothing: grayscale; 10 | } 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | main, 19 | menu, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | audio, 26 | canvas, 27 | progress, 28 | video { 29 | display: inline-block; 30 | } 31 | audio:not([controls]) { 32 | display: none; 33 | height: 0; 34 | } 35 | progress { 36 | vertical-align: baseline; 37 | } 38 | [hidden], 39 | template { 40 | display: none; 41 | } 42 | a { 43 | background-color: transparent; 44 | -webkit-text-decoration-skip: objects; 45 | } 46 | a:active, 47 | a:hover { 48 | outline-width: 0; 49 | } 50 | abbr[title] { 51 | border-bottom: none; 52 | text-decoration: underline; 53 | text-decoration: underline dotted; 54 | } 55 | b, 56 | strong { 57 | font-weight: inherit; 58 | font-weight: bolder; 59 | } 60 | dfn { 61 | font-style: italic; 62 | } 63 | h1 { 64 | font-size: 2em; 65 | margin: 0.67em 0; 66 | } 67 | mark { 68 | background-color: #ff0; 69 | color: #000; 70 | } 71 | small { 72 | font-size: 80%; 73 | } 74 | sub, 75 | sup { 76 | font-size: 75%; 77 | line-height: 0; 78 | position: relative; 79 | vertical-align: baseline; 80 | } 81 | sub { 82 | bottom: -0.25em; 83 | } 84 | sup { 85 | top: -0.5em; 86 | } 87 | img { 88 | border-style: none; 89 | } 90 | svg:not(:root) { 91 | overflow: hidden; 92 | } 93 | code, 94 | kbd, 95 | pre, 96 | samp { 97 | font-family: monospace, monospace; 98 | font-size: 1em; 99 | } 100 | figure { 101 | margin: 1em 40px; 102 | } 103 | hr { 104 | box-sizing: content-box; 105 | height: 0; 106 | overflow: visible; 107 | } 108 | button, 109 | input, 110 | optgroup, 111 | select, 112 | textarea { 113 | font: inherit; 114 | margin: 0; 115 | } 116 | optgroup { 117 | font-weight: 700; 118 | } 119 | button, 120 | input { 121 | overflow: visible; 122 | } 123 | button, 124 | select { 125 | text-transform: none; 126 | } 127 | [type="reset"], 128 | [type="submit"], 129 | button, 130 | html [type="button"] { 131 | -webkit-appearance: button; 132 | } 133 | [type="button"]::-moz-focus-inner, 134 | [type="reset"]::-moz-focus-inner, 135 | [type="submit"]::-moz-focus-inner, 136 | button::-moz-focus-inner { 137 | border-style: none; 138 | padding: 0; 139 | } 140 | [type="button"]:-moz-focusring, 141 | [type="reset"]:-moz-focusring, 142 | [type="submit"]:-moz-focusring, 143 | button:-moz-focusring { 144 | outline: 1px dotted ButtonText; 145 | } 146 | fieldset { 147 | border: 1px solid silver; 148 | margin: 0 2px; 149 | padding: 0.35em 0.625em 0.75em; 150 | } 151 | legend { 152 | box-sizing: border-box; 153 | color: inherit; 154 | display: table; 155 | max-width: 100%; 156 | padding: 0; 157 | white-space: normal; 158 | } 159 | textarea { 160 | overflow: auto; 161 | } 162 | [type="checkbox"], 163 | [type="radio"] { 164 | box-sizing: border-box; 165 | padding: 0; 166 | } 167 | [type="number"]::-webkit-inner-spin-button, 168 | [type="number"]::-webkit-outer-spin-button { 169 | height: auto; 170 | } 171 | [type="search"] { 172 | -webkit-appearance: textfield; 173 | outline-offset: -2px; 174 | } 175 | [type="search"]::-webkit-search-cancel-button, 176 | [type="search"]::-webkit-search-decoration { 177 | -webkit-appearance: none; 178 | } 179 | ::-webkit-input-placeholder { 180 | color: inherit; 181 | opacity: 0.54; 182 | } 183 | ::-webkit-file-upload-button { 184 | -webkit-appearance: button; 185 | font: inherit; 186 | } 187 | html { 188 | font: 112.5%/1.45em georgia, serif; 189 | box-sizing: border-box; 190 | overflow-y: scroll; 191 | } 192 | * { 193 | box-sizing: inherit; 194 | } 195 | *:before { 196 | box-sizing: inherit; 197 | } 198 | *:after { 199 | box-sizing: inherit; 200 | } 201 | body { 202 | color: hsla(0, 0%, 0%, 0.8); 203 | font-family: georgia, serif; 204 | font-weight: normal; 205 | word-wrap: break-word; 206 | font-kerning: normal; 207 | -moz-font-feature-settings: "kern", "liga", "clig", "calt"; 208 | -ms-font-feature-settings: "kern", "liga", "clig", "calt"; 209 | -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; 210 | font-feature-settings: "kern", "liga", "clig", "calt"; 211 | } 212 | img { 213 | max-width: 100%; 214 | margin-left: 0; 215 | margin-right: 0; 216 | margin-top: 0; 217 | padding-bottom: 0; 218 | padding-left: 0; 219 | padding-right: 0; 220 | padding-top: 0; 221 | margin-bottom: 1.45rem; 222 | } 223 | h1 { 224 | margin-left: 0; 225 | margin-right: 0; 226 | margin-top: 0; 227 | padding-bottom: 0; 228 | padding-left: 0; 229 | padding-right: 0; 230 | padding-top: 0; 231 | margin-bottom: 1.45rem; 232 | color: inherit; 233 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 234 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 235 | font-weight: bold; 236 | text-rendering: optimizeLegibility; 237 | font-size: 2.25rem; 238 | line-height: 1.1; 239 | } 240 | h2 { 241 | margin-left: 0; 242 | margin-right: 0; 243 | margin-top: 0; 244 | padding-bottom: 0; 245 | padding-left: 0; 246 | padding-right: 0; 247 | padding-top: 0; 248 | margin-bottom: 1.45rem; 249 | color: inherit; 250 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 251 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 252 | font-weight: bold; 253 | text-rendering: optimizeLegibility; 254 | font-size: 1.62671rem; 255 | line-height: 1.1; 256 | } 257 | h3 { 258 | margin-left: 0; 259 | margin-right: 0; 260 | margin-top: 0; 261 | padding-bottom: 0; 262 | padding-left: 0; 263 | padding-right: 0; 264 | padding-top: 0; 265 | margin-bottom: 1.45rem; 266 | color: inherit; 267 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 268 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 269 | font-weight: bold; 270 | text-rendering: optimizeLegibility; 271 | font-size: 1.38316rem; 272 | line-height: 1.1; 273 | } 274 | h4 { 275 | margin-left: 0; 276 | margin-right: 0; 277 | margin-top: 0; 278 | padding-bottom: 0; 279 | padding-left: 0; 280 | padding-right: 0; 281 | padding-top: 0; 282 | margin-bottom: 1.45rem; 283 | color: inherit; 284 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 285 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 286 | font-weight: bold; 287 | text-rendering: optimizeLegibility; 288 | font-size: 1rem; 289 | line-height: 1.1; 290 | } 291 | h5 { 292 | margin-left: 0; 293 | margin-right: 0; 294 | margin-top: 0; 295 | padding-bottom: 0; 296 | padding-left: 0; 297 | padding-right: 0; 298 | padding-top: 0; 299 | margin-bottom: 1.45rem; 300 | color: inherit; 301 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 302 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 303 | font-weight: bold; 304 | text-rendering: optimizeLegibility; 305 | font-size: 0.85028rem; 306 | line-height: 1.1; 307 | } 308 | h6 { 309 | margin-left: 0; 310 | margin-right: 0; 311 | margin-top: 0; 312 | padding-bottom: 0; 313 | padding-left: 0; 314 | padding-right: 0; 315 | padding-top: 0; 316 | margin-bottom: 1.45rem; 317 | color: inherit; 318 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 319 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 320 | font-weight: bold; 321 | text-rendering: optimizeLegibility; 322 | font-size: 0.78405rem; 323 | line-height: 1.1; 324 | } 325 | hgroup { 326 | margin-left: 0; 327 | margin-right: 0; 328 | margin-top: 0; 329 | padding-bottom: 0; 330 | padding-left: 0; 331 | padding-right: 0; 332 | padding-top: 0; 333 | margin-bottom: 1.45rem; 334 | } 335 | ul { 336 | margin-left: 1.45rem; 337 | margin-right: 0; 338 | margin-top: 0; 339 | padding-bottom: 0; 340 | padding-left: 0; 341 | padding-right: 0; 342 | padding-top: 0; 343 | margin-bottom: 1.45rem; 344 | list-style-position: outside; 345 | list-style-image: none; 346 | } 347 | ol { 348 | margin-left: 1.45rem; 349 | margin-right: 0; 350 | margin-top: 0; 351 | padding-bottom: 0; 352 | padding-left: 0; 353 | padding-right: 0; 354 | padding-top: 0; 355 | margin-bottom: 1.45rem; 356 | list-style-position: outside; 357 | list-style-image: none; 358 | } 359 | dl { 360 | margin-left: 0; 361 | margin-right: 0; 362 | margin-top: 0; 363 | padding-bottom: 0; 364 | padding-left: 0; 365 | padding-right: 0; 366 | padding-top: 0; 367 | margin-bottom: 1.45rem; 368 | } 369 | dd { 370 | margin-left: 0; 371 | margin-right: 0; 372 | margin-top: 0; 373 | padding-bottom: 0; 374 | padding-left: 0; 375 | padding-right: 0; 376 | padding-top: 0; 377 | margin-bottom: 1.45rem; 378 | } 379 | p { 380 | margin-left: 0; 381 | margin-right: 0; 382 | margin-top: 0; 383 | padding-bottom: 0; 384 | padding-left: 0; 385 | padding-right: 0; 386 | padding-top: 0; 387 | margin-bottom: 1.45rem; 388 | } 389 | figure { 390 | margin-left: 0; 391 | margin-right: 0; 392 | margin-top: 0; 393 | padding-bottom: 0; 394 | padding-left: 0; 395 | padding-right: 0; 396 | padding-top: 0; 397 | margin-bottom: 1.45rem; 398 | } 399 | pre { 400 | margin-left: 0; 401 | margin-right: 0; 402 | margin-top: 0; 403 | margin-bottom: 1.45rem; 404 | font-size: 0.85rem; 405 | line-height: 1.42; 406 | background: hsla(0, 0%, 0%, 0.04); 407 | border-radius: 3px; 408 | overflow: auto; 409 | word-wrap: normal; 410 | padding: 1.45rem; 411 | } 412 | table { 413 | margin-left: 0; 414 | margin-right: 0; 415 | margin-top: 0; 416 | padding-bottom: 0; 417 | padding-left: 0; 418 | padding-right: 0; 419 | padding-top: 0; 420 | margin-bottom: 1.45rem; 421 | font-size: 1rem; 422 | line-height: 1.45rem; 423 | border-collapse: collapse; 424 | width: 100%; 425 | } 426 | fieldset { 427 | margin-left: 0; 428 | margin-right: 0; 429 | margin-top: 0; 430 | padding-bottom: 0; 431 | padding-left: 0; 432 | padding-right: 0; 433 | padding-top: 0; 434 | margin-bottom: 1.45rem; 435 | } 436 | blockquote { 437 | margin-left: 1.45rem; 438 | margin-right: 1.45rem; 439 | margin-top: 0; 440 | padding-bottom: 0; 441 | padding-left: 0; 442 | padding-right: 0; 443 | padding-top: 0; 444 | margin-bottom: 1.45rem; 445 | } 446 | form { 447 | margin-left: 0; 448 | margin-right: 0; 449 | margin-top: 0; 450 | padding-bottom: 0; 451 | padding-left: 0; 452 | padding-right: 0; 453 | padding-top: 0; 454 | margin-bottom: 1.45rem; 455 | } 456 | noscript { 457 | margin-left: 0; 458 | margin-right: 0; 459 | margin-top: 0; 460 | padding-bottom: 0; 461 | padding-left: 0; 462 | padding-right: 0; 463 | padding-top: 0; 464 | margin-bottom: 1.45rem; 465 | } 466 | iframe { 467 | margin-left: 0; 468 | margin-right: 0; 469 | margin-top: 0; 470 | padding-bottom: 0; 471 | padding-left: 0; 472 | padding-right: 0; 473 | padding-top: 0; 474 | margin-bottom: 1.45rem; 475 | } 476 | hr { 477 | margin-left: 0; 478 | margin-right: 0; 479 | margin-top: 0; 480 | padding-bottom: 0; 481 | padding-left: 0; 482 | padding-right: 0; 483 | padding-top: 0; 484 | margin-bottom: calc(1.45rem - 1px); 485 | background: hsla(0, 0%, 0%, 0.2); 486 | border: none; 487 | height: 1px; 488 | } 489 | address { 490 | margin-left: 0; 491 | margin-right: 0; 492 | margin-top: 0; 493 | padding-bottom: 0; 494 | padding-left: 0; 495 | padding-right: 0; 496 | padding-top: 0; 497 | margin-bottom: 1.45rem; 498 | } 499 | b { 500 | font-weight: bold; 501 | } 502 | strong { 503 | font-weight: bold; 504 | } 505 | dt { 506 | font-weight: bold; 507 | } 508 | th { 509 | font-weight: bold; 510 | } 511 | li { 512 | margin-bottom: calc(1.45rem / 2); 513 | } 514 | ol li { 515 | padding-left: 0; 516 | } 517 | ul li { 518 | padding-left: 0; 519 | } 520 | li > ol { 521 | margin-left: 1.45rem; 522 | margin-bottom: calc(1.45rem / 2); 523 | margin-top: calc(1.45rem / 2); 524 | } 525 | li > ul { 526 | margin-left: 1.45rem; 527 | margin-bottom: calc(1.45rem / 2); 528 | margin-top: calc(1.45rem / 2); 529 | } 530 | blockquote *:last-child { 531 | margin-bottom: 0; 532 | } 533 | li *:last-child { 534 | margin-bottom: 0; 535 | } 536 | p *:last-child { 537 | margin-bottom: 0; 538 | } 539 | li > p { 540 | margin-bottom: calc(1.45rem / 2); 541 | } 542 | code { 543 | font-size: 0.85rem; 544 | line-height: 1.45rem; 545 | } 546 | kbd { 547 | font-size: 0.85rem; 548 | line-height: 1.45rem; 549 | } 550 | samp { 551 | font-size: 0.85rem; 552 | line-height: 1.45rem; 553 | } 554 | abbr { 555 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 556 | cursor: help; 557 | } 558 | acronym { 559 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 560 | cursor: help; 561 | } 562 | abbr[title] { 563 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); 564 | cursor: help; 565 | text-decoration: none; 566 | } 567 | thead { 568 | text-align: left; 569 | } 570 | td, 571 | th { 572 | text-align: left; 573 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); 574 | font-feature-settings: "tnum"; 575 | -moz-font-feature-settings: "tnum"; 576 | -ms-font-feature-settings: "tnum"; 577 | -webkit-font-feature-settings: "tnum"; 578 | padding-left: 0.96667rem; 579 | padding-right: 0.96667rem; 580 | padding-top: 0.725rem; 581 | padding-bottom: calc(0.725rem - 1px); 582 | } 583 | th:first-child, 584 | td:first-child { 585 | padding-left: 0; 586 | } 587 | th:last-child, 588 | td:last-child { 589 | padding-right: 0; 590 | } 591 | tt, 592 | code { 593 | background-color: hsla(0, 0%, 0%, 0.04); 594 | border-radius: 3px; 595 | font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", 596 | "Liberation Mono", Menlo, Courier, monospace; 597 | padding: 0; 598 | padding-top: 0.2em; 599 | padding-bottom: 0.2em; 600 | } 601 | pre code { 602 | background: none; 603 | line-height: 1.42; 604 | } 605 | code:before, 606 | code:after, 607 | tt:before, 608 | tt:after { 609 | letter-spacing: -0.2em; 610 | content: " "; 611 | } 612 | pre code:before, 613 | pre code:after, 614 | pre tt:before, 615 | pre tt:after { 616 | content: ""; 617 | } 618 | @media only screen and (max-width: 480px) { 619 | html { 620 | font-size: 100%; 621 | } 622 | } 623 | 624 | .layout { 625 | display: flex; 626 | } 627 | 628 | .main { 629 | width: 100%; 630 | height: 100vh; 631 | display: flex; 632 | flex-direction: column; 633 | padding: 80px 120px; 634 | } -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import { useStaticQuery, graphql } from "gatsby" 4 | 5 | import Navigation from "../components/navigation" 6 | 7 | import "./layout.css" 8 | 9 | const Layout = ({ children }) => { 10 | const data = useStaticQuery(graphql` 11 | query SiteTitleQuery { 12 | site { 13 | siteMetadata { 14 | title 15 | } 16 | } 17 | } 18 | `) 19 | 20 | return ( 21 |
22 | 23 |
{children}
24 |
25 | ) 26 | } 27 | 28 | Layout.propTypes = { 29 | children: PropTypes.node.isRequired, 30 | } 31 | 32 | export default Layout 33 | -------------------------------------------------------------------------------- /src/components/navigation.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | padding: 24px; 3 | width: 300px; 4 | } 5 | 6 | .nav__list { 7 | list-style: none; 8 | padding: 0; 9 | margin: 0; 10 | font-family: 'Oxygen', sans-serif; 11 | } 12 | 13 | .nav__link { 14 | text-decoration: none; 15 | color: #4A4A4A; 16 | } 17 | 18 | .navigation__link--active { 19 | font-weight: bold; 20 | } -------------------------------------------------------------------------------- /src/components/navigation.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "gatsby"; 3 | 4 | import "./navigation.css"; 5 | 6 | const Navigation = () => ( 7 | 16 | ) 17 | 18 | export default Navigation; -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SEO component that queries for data with 3 | * Gatsby's useStaticQuery React hook 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import Helmet from "react-helmet" 11 | import { useStaticQuery, graphql } from "gatsby" 12 | 13 | function SEO({ description, lang, meta, title }) { 14 | const { site } = useStaticQuery( 15 | graphql` 16 | query { 17 | site { 18 | siteMetadata { 19 | title 20 | description 21 | author 22 | } 23 | } 24 | } 25 | ` 26 | ) 27 | 28 | const metaDescription = description || site.siteMetadata.description 29 | 30 | return ( 31 | 72 | ) 73 | } 74 | 75 | SEO.defaultProps = { 76 | lang: `en`, 77 | meta: [], 78 | description: ``, 79 | } 80 | 81 | SEO.propTypes = { 82 | description: PropTypes.string, 83 | lang: PropTypes.string, 84 | meta: PropTypes.arrayOf(PropTypes.object), 85 | title: PropTypes.string.isRequired, 86 | } 87 | 88 | export default SEO 89 | -------------------------------------------------------------------------------- /src/pages/2018-12-25-five-books-which-will-improve-your-career/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/five-books-which-will-improve-your-career' 3 | date: '2018-12-25' 4 | title: '5 Books Which Will Improve Your Career ' 5 | author: 'Emma Wedekind' 6 | description: 'I read. A lot. And I love reading books that will positively impact my career. I am the type of person who is motivated by digesting motivational books and podcasts.' 7 | --- 8 | 9 | ![Books](https://images.unsplash.com/photo-1457369804613-52c61a468e7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60) 10 | I read. A lot. And I love reading books that will positively impact my career. I'm the type of person who is motivated by digesting motivational books and podcasts. 11 | 12 | The following five books changed my outlook on not only my career, but my life. They've motivated me to be my best self and achieve my biggest goals. 13 | 14 | If you've read any of the following books, feel free to let me know your thoughts down below! Otherwise, happy reading 🤓📖 15 | 16 | ## 1. Originals: How Non-Conformists Move the World 17 | 18 | **Adam Grant** 19 | ![Originals](https://images.gr-assets.com/books/1445791874l/25614523.jpg) 20 | In Originals, Adam Grant delves into the study of how "originals", or people who are seen as influential in their respective industries, develop their originality. What's the most effective way to create original ideas and share them with the world? Guess you'll have to read the book to find out 😉. 21 | 22 | ## 2. Growth Hacker Marketing: A Primer on the Future of PR, Marketing, and Advertising 23 | 24 | **Ryan Holiday** 25 | ![Growth Hacker Marketing](https://images.gr-assets.com/books/1382075918l/18454317.jpg) 26 | If you're not into reading big books, then this just may be the one for you! Coming in at a whopping 56 pages, Growth Hacker Marketing teaches you the skills you need to effectively market your products, without spending thousands of dollars on marketing. How have notable companies such as Facebook, Evernote, and Airbnb built their empire without traditional methods of marketing? Ryan Holiday spills all their secrets. 27 | 28 | ## 3. The Power of Habit: Why We Do What We Do in Life and Business 29 | 30 | **Charles Duhigg** 31 | ![The Power of Habit](https://images.gr-assets.com/books/1366758683l/12609433.jpg) 32 | 33 | The Power of Habit is one of my favorite books of 2018. Using riveting anecdotes, the author uncovers the secret behind effectively, and permanently, altering habits. What makes a habit? How do you break bad habits and adopt healthy ones? You can leverage the tips from this book to improve your every day life. 34 | 35 | ## 4. Hooked: How to Build Habit-Forming Products 36 | 37 | **Nir Eyal** 38 | ![Hooked](https://images.gr-assets.com/books/1407112405l/22668729.jpg) 39 | Hooked examines the concept behind habit-forming products. What lures customers back for more? Nir Eyal explains his four-step process for developing a habit-forming product that will leave customers wanting more. 40 | 41 | ## 5. Lean UX: Applying Lean Principles to Improve User Experience 42 | 43 | **Jeff Gothelf & Josh Seiden** 44 | ![Lean UX](https://images.gr-assets.com/books/1381355830l/13436116.jpg) 45 | Interaction design is a steadily growing field, and it's nearly impossible to build a successful product without a truly great user experience. Lean UX teaches you how to focus on the design experience rather than the deliverables in order to produce the most effective product. 46 | -------------------------------------------------------------------------------- /src/pages/2018-12-25-five-mistakes-youre-making-in-your-technical-interviews/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: '/five-mistakes-youre-making-in-your-technical-interviews' 3 | date: '2018-12-25' 4 | title: '5 Mistakes You Are Making In Your Technical Interview And How To Avoid Them' 5 | author: 'Emma Wedekind' 6 | description: 'Technical interviews are the most nerve-wracking experiences in any engineers career. Often, you are so worried about impressing the interviewers that you forget to relax and be yourself.' 7 | --- 8 | 9 | ![People at table](https://images.unsplash.com/photo-1536139825125-2026747cd156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60) 10 | 11 | Technical interviews are the most nerve-wracking experiences in any engineer's career. Often, you're so worried about impressing the interviewers that you forget to relax and be yourself. 12 | 13 | So today let's delve into five mistakes you may be making in your interviews, and how to avoid them! 14 | 15 | # 1. You don't ask any questions 16 | 17 | How often have you encountered this scenario: 18 | 19 | _You're sitting in the chair across from your interviewers. They ask you to solve an algorithmic coding question. You have absolutely no idea where to start._ 20 | 21 | This scenario, sadly, is not uncommon; we've all been in this situation. But the biggest mistake you can make is to not ask any questions. 22 | 23 | If you don't thoroughly understand the problem, or you're uncertain if particular limitations exist... ask! 24 | 25 | Most interviewers are rooting for you; they want you to succeed! By asking questions about the problem, you not only show that you're thinking about all aspects of the issue, but you're giving the interviewer a chance to help you. Interviewers will often times provide hints, or help guide you, if you ask the right questions. 26 | 27 | Let's take another scenario: 28 | 29 | _Your interview is wrapping up. You think it went great! The interviewers then ask if you have any questions for them. You say no, and go on your merry way._ 30 | 31 | Never, ever leave an interview without asking the interviewers a question. I typically have one to three questions ready to ask for every interview. 32 | 33 | When you leave an interview without asking any questions, it signals to the interviewers that you're either not invested in this position, or you were so confident that you didn't feel the need to do any research. 34 | 35 | Companies like to see that you've taken time to research them (even if you only spent five minutes Googling.) 36 | 37 | Here are some questions you may want to ask: 38 | 39 | - I saw that your company recently acquired X; how will this impact Y? 40 | - What is the work/life balance? 41 | - What opportunities do you provide for furthering your skill sets and education? i.e. Books, conference allowances, access to online educational platforms. 42 | - What does your typical day look like? 43 | - Why did you choose to work for the company? 44 | - What is your favorite thing about working here? 45 | 46 | # 2. You solve for the most optimized solution first 47 | 48 | Many candidates make the assumption that they have to provide the most optimized, performant solution to an algorithmic coding question. And while this is true, to a certain extent, it doesn't have to be your first solution. 49 | 50 | It is totally fine to start with a brute-force solution, and work your way to an optimized one. 51 | 52 | Let's take an example. 53 | 54 | Let's say you were asked to return the number of pairs of letters in an array. 55 | 56 | Since you have no idea where to begin, let's go ahead and create a brute-force solution. 57 | 58 | ![Coding example 1](https://thepracticaldev.s3.amazonaws.com/i/90c1gt2sxpj6xv3gdv8j.png) 59 | 60 | What is this example doing? 61 | 62 | - We've created an object, called alphabetDictionary which holds each letter of the alphabet, and a number, initialized to 0, which indicates how many times we've encountered this letter in the array. 63 | - Next, we iterate through the length of the array and for each letter, increment the value in the alphabetDictionary. 64 | - Third step is to iterate through the alphabetDictionary and see how many times each letter was found. If the letter was found an even amount of times, divide it by two (to get the correct number of pairs) and add that to the numPairs variable. If the letter was found more than twice, but isn't an even number, subtract one off of the total count (to make it even), then divide by two (to get the number of pairs) and add it to the numPairs variable. 65 | - Then, just return numPairs. 66 | 67 | This is extremely verbose, but it works! Let's see if we can get a more elegant solution. 68 | 69 | Since we don't care which letters were found in pairs, we can initialize alphabetDictionary to an empty object. Thus, we only add a value if the letter was found. 70 | 71 | ![Code example 2](https://thepracticaldev.s3.amazonaws.com/i/fcdbysmq4kp8c46h9ghi.png) 72 | 73 | It's important to note that both of these algorithms have exactly the same runtime O(n), however we were able to make the second snippet a bit more elegant. 74 | 75 | You can use the technique of enhancing your brute-force method to come up with the most optimized coding solution. 76 | 77 | # 3. You work through problems in your head 78 | 79 | When you're deriving a solution for a coding example, it's imperative that you talk through your thought process. The interviewer cannot possibly read your mind; it's up to you to communicate your thoughts. 80 | 81 | Even if you're unsure of the solution, talk through all of the things you do know. What are you missing? 82 | 83 | By talking through these points you're more likely to find a viable solution, and the interviewer gets some insight into how you problem solve. 84 | 85 | The interviewer cares more about your ability to problem solve than they do about you achieving the 100% correct solution. 86 | 87 | # 4. You aren't honest about your experience with certain technologies 88 | 89 | Many candidates, upon reading a job application requesting knowledge of specific technologies or languages, will buff up their technical experience. 90 | 91 | Never list a technology, framework, or language that you could not answer technical interview questions about. 92 | 93 | If an interviewer asks you "Have you worked with React?" and you say "Yes I have", you'd better be able to answer questions about the library. 94 | 95 | There is no quicker way to shoot yourself in the foot than by listing proficiency of a technology you have baseline knowledge of. 96 | 97 | Instead, you're welcome to say "I've taken a few introductory React courses, but haven't worked with it in any professional setting. It's something I truly would like to learn." 98 | 99 | This shows your willingness to learn new skills, while being realistic about your current skillset. Interviewers will appreciate your self-awareness. 100 | 101 | # 5. You prefer to BS your way through a problem than admit you don't know the answer 102 | 103 | If you don't know the answer to a theoretical question, don't BS your way through it. One of the quickest ways you can show your interviewer respect is by being considerate of their time. If you don't know the answer, it's okay to admit it. 104 | 105 | Instead of pretending to know the answer, I like to respond with: "To be honest, I'm not sure, but if I had to make an educated guess, I would say..." This shows the interviewer that you're trustworthy and honest. 106 | 107 | Honesty is always the best policy. 108 | 109 | --- 110 | 111 | Technical interviews don't have to be scary. If you prepare and give it your all, you will succeed. Take each question one by one and don't get overwhelmed. Remember to breathe and start by breaking it down into manageable chunks and you'll be on your way to landing that developer job! 112 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import Layout from "../components/layout" 4 | import SEO from "../components/seo" 5 | 6 | const NotFoundPage = () => ( 7 | 8 | 9 |

NOT FOUND

10 |

You just hit a route that doesn't exist... the sadness.

11 |
12 | ) 13 | 14 | export default NotFoundPage 15 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | import Layout from "../components/layout" 5 | import SEO from "../components/seo" 6 | 7 | const IndexPage = () => ( 8 | 9 | 10 |

I'm Emma

11 |

{`&& I'm a Software Engineer.`}

12 | 13 |

Who I am

14 |

This is random text about who I am. I'm a super cool person, in case you didn't know.

15 | 16 |

What I do

17 |

This is random text about what I do. I do a lot of things.

18 | 19 |
20 | ) 21 | 22 | export default IndexPage 23 | -------------------------------------------------------------------------------- /src/pages/podcasting.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout" 4 | 5 | const PodcastingPage = () => ( 6 | 7 |

Podcasting Page

8 |
9 | ) 10 | 11 | export default PodcastingPage; -------------------------------------------------------------------------------- /src/pages/speaking.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout" 4 | 5 | const SpeakingPage = () => ( 6 | 7 |

Speaking Page

8 |
9 | ) 10 | 11 | export default SpeakingPage; -------------------------------------------------------------------------------- /src/pages/writing.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, graphql } from "gatsby"; 3 | 4 | import Layout from "../components/layout" 5 | import BlogSquare from "../components/blogSquare"; 6 | 7 | const WritingPage = ({ data }) => ( 8 | 9 |

Writing Page

10 | {data.allMarkdownRemark.edges.map(post => ( 11 | 12 | ))} 13 |
14 | ) 15 | 16 | export const pageQuery = graphql` 17 | query BlogIndexQuery { 18 | allMarkdownRemark { 19 | edges { 20 | node { 21 | id 22 | frontmatter { 23 | path 24 | title 25 | author 26 | date 27 | description 28 | } 29 | } 30 | } 31 | } 32 | } 33 | ` 34 | 35 | export default WritingPage; -------------------------------------------------------------------------------- /src/templates/blogPost.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | import { Link, graphql } from 'gatsby' 4 | 5 | import Layout from '../components/layout' 6 | 7 | export default function Template({ data }) { 8 | const post = data.markdownRemark 9 | 10 | return ( 11 | 12 | 23 | Back to blogs 24 | 25 |

30 | {post.frontmatter.title} 31 |

32 |

39 | Posted by {post.frontmatter.author} on {post.frontmatter.date} 40 |

41 |
42 | 43 | ) 44 | } 45 | 46 | export const postQuery = graphql` 47 | query BlogPostByPath($path: String!) { 48 | markdownRemark(frontmatter: { path: { eq: $path } }) { 49 | html 50 | frontmatter { 51 | path 52 | title 53 | author 54 | date 55 | } 56 | } 57 | } 58 | ` --------------------------------------------------------------------------------