add job page (codesandbox#1853)

* add job page

* add more things

* add more things

* fix infra

* add new intro

* make it 400

* Tweaks

* chnage careers

* Some tweaks

* fix mobile

* Small fixes to contact us

* fix mobile

* Add apply anyway

* Remove 'of 3'

* add blog post

* gatsby images fix

* add spacing in ol

* Updates

* update image

Author: SaraVieira

packages/common/src/components/Navigation/index.tsx

@@ -147,18 +147,22 @@ export default class Navigation extends React.PureComponent {
             <Item href="/docs">Docs</Item>
 
             <Item href="/blog">Blog</Item>
+
             <Item
               href="https://github.com/CompuIves/codesandbox-client"
               target="_blank"
               rel="noopener noreferrer"
+              hideOn={970}
             >
               GitHub
             </Item>
+
+            <Item href="/jobs">Careers</Item>
           </Left>
 
           <Right>
             {!user && (
-              <Item hideOn={730} href="/signin">
+              <Item hideOn={875} href="/signin">
                 Sign In
               </Item>
             )}

packages/homepage/content/articles/images/investment-featured.png

@@ -0,0 +1,53 @@
+---
+featuredImage: "./images/investment-featured.png"
+slug: "CodeSandbox-Raises-2-4M-Seed-Round-led-by-Kleiner-Perkins"
+authors: ["Ives van Hoorne"]
+photo: "https://avatars0.githubusercontent.com/u/587016?s=460&v=4"
+title: "CodeSandbox Raises $2.4M Seed Round led by Kleiner Perkins"
+description: "We're super excited to share that we've raised a seed round from Kleiner Perkins, Arches Capital, and the founders of Figma, Framer, Netlify, ZEIT, Sourcegraph and Catawiki!"
+date: 05/07/2019
+---
+
+## Our Story
+
+Two years ago we released CodeSandbox as the result of a side project while I was studying at the university. At the time there was no easy way to start or share modern JavaScript projects, and I needed this when working at Catawiki.
+
+Thus CodeSandbox was born. CodeSandbox is an online code editor that allows you to create a new web application in a single click. We handle setting up the development environment, the tooling and the provisioning for you. This way you can focus on creating the application instead of all the tooling. You can always share your project by just sharing the URL, and we have integrations with popular deployment targets like ZEIT and Netlify and source control providers like GitHub.
+
+It turned out that I wasn’t the only one who wanted to have something like this. CodeSandbox quickly grew in usage, and with every new release, we got a new surge of encouragement from the community. Now, two years later, over 2 million projects have been created and we have over 1.2 million visitors per month!
+
+![Amount of sandboxes created in the past two years](./images/sandboxes-created.png)
+
+We never could’ve imagined this kind of adoption and support from so many people in such a short time: Thanks to everyone involved for being so supportive!
+
+## The Round
+
+We've always said that we are an online code editor, but we think we can be much more than that. We want to become a platform that not only makes it easier and faster for everyone to create applications, but it should be a place that people go to to share, collaborate and learn as well. To make this possible we decided to raise money from a group of likeminded people.
+
+We raised money from an incredible group of people, many of whom have been advising us for some time now. Like us, our investors believe that the process of creating software can be more accessible, productive and effective by recreating the tooling to do so. Instantly sharing our work should be easier now than ever before.
+
+We’re proud to announce a seed round of $2.4M, led by [Kleiner Perkins](https://kleinerperkins.com/about). Kleiner Perkins has invested in many companies that are improving the flow of developing applications, like Figma and Netlify. Among the investors are [Arches Capital](https://arches.capital/), Christian Bach & Mathias Biilmann (Founders [Netlify](https://www.netlify.com/)), Dylan Field (Co-Founder [Figma](https://www.figma.com/)), Guillermo Rauch (Founder [ZEIT](https://zeit.co/)), Koen Bok (Co-Founder [Framer](https://www.framer.com/)), Marco Jansen (Co-Founder and former CTO [Catawiki](https://www.catawiki.nl/)), Petri Parvinen ([Angel Investor](http://www.arctum.fi)) and Quinn Slack (Co-Founder [Sourcegraph](https://sourcegraph.com/)).
+
+![Our seed investors](./images/seed-investors.png)
+
+We’re super excited to raise this round from such a smart group of people, we can’t wait to continue building!
+
+## What does this mean for CodeSandbox and you?
+
+We'll continue to ship features inspired by our core values:
+
+1.  Lower the learning curve
+2.  Encourage sharing and discovery
+3.  Give the experience of a local editor
+
+What will change is the capacity and speed we can deliver new product features and give everyone a more useful experience on CodeSandbox. Our roadmap includes making CodeSandbox more community friendly, supporting larger projects, improving specific workflows (like the workflow of a library maintainer) and extending integrations.
+
+We really believe that we can make building applications easier, faster and more collaborative, and we'll do everything with lowering the bar of entry in mind.
+
+Not only are we looking for your feedback, this also means you can work with us. So if you’re interested in working on CodeSandbox please send us a message [from here](https://codesandbox.io/jobs)!
+
+## Thank You
+
+There are so many people who have helped CodeSandbox to this point, and we’re incredibly grateful. We’d like to thank [our 125(!) contributors](https://github.com/codesandbox/codesandbox-client#contributors), everyone using CodeSandbox and everyone who has advised and helped us to this point!
+
+We can’t wait to explore this new chapter with you!

packages/homepage/content/articles/images/sandboxes-created.png

@@ -0,0 +1,38 @@
+---
+title: "Front-end engineer"
+slug: "frontend-engineer"
+description: "At CodeSandbox we work on a wide variety of tools that is used by frontend engineers. We are a small team with a big impact in the development tooling space. We're also using a modern frontend technology stack (React, TypeScript, even vanilla JS!) that is [open source](https://github.com/codesandbox)!"
+link: "https://airtable.com/shrYgsLKkdfchPlmZ"
+---
+
+At CodeSandbox we work on a wide variety of tools that is used by frontend engineers. We are a small team with a big impact in the development tooling space. We're lso using a modern frontend technology stack (React, TypeScript, even vanilla JS!) that is [open source](https://github.com/codesandbox)!
+
+## Role
+
+As a front-end engineer you will be responsible for a wide range of projects. You can work on the code editor, community pages, our libraries or on things like a JavaScript bundler that runs in the browser! Everything that you build will be open source, and many other front-end developers will use the tools that you build.
+
+## Responsibilities
+
+- Work on the main editor and build new features and fixes
+- Work on community pages
+- Work on some of our libraries like `sandpack`
+- Interact with the community to make sure they get the best of CodeSandbox
+- Anything you think will be beneficial, you will shape the future of CodeSandbox
+
+## We'll be looking for
+
+We're looking for someone with love for developer tooling and a good sense of what a good UI/UX looks and works like. We're a young company, so you'll have the chance to make a lot of impact, wherever you want to work.
+
+- Strong familiarity with JavaScript, CSS and React.
+- Familiarity with node
+- Ability to take initiative.
+- UI/UX passion is valued
+- Willingness to work in the open and talk to the community of CodeSandbox
+
+## Our offer
+
+You'll be able to make great impact in a small team with strong ties in the development tooling.
+
+- Flexible holidays, workplace, hours
+- Work equipment of your choice
+- Commuter benefits & global gatherings covered

packages/homepage/content/articles/images/seed-investors.png

@@ -0,0 +1,33 @@
+---
+title: "Back-end / Infrastructure engineer"
+slug: "backend-infrastructure-engineer"
+description: "As a backend engineer you’re key to our success. You'll work on building the infrastructure to support and determine our growth."
+link: "https://airtable.com/shrYgsLKkdfchPlmZ"
+---
+
+## Role
+
+At CodeSandbox we spin up Docker containers for every container sandbox, this is why, as a backend engineer, you're key to our functionality. You'll be part of a small team working on the infrastructure to support and determine our growth. You'll work on setting up and automating the infrastructure so people using CodeSandbox won't even realize it's there.
+
+## Responsibilities
+
+- Design and implement supporting Node.js microservices
+- Design and implement CI/CD pipelines
+- Close collaboration with other engineers to determine our infrastructural needs
+
+## We'll be looking for
+
+- 4+ years in a similar role where scalability's key
+- Experience with containers and container orchestration - Docker, Kubernetes
+- Experience with Jenkins and preferably other CI/CD platforms
+- Familiarity with security best practices in the industry
+- Experience building APIs and Node.js, TypeScript microservices
+- Nice to have: experience with main IaaS platforms such as GCP, AWS
+
+## Our offer
+
+You'll be able to make great impact in a small team with strong ties in the industry.
+
+- Flexible holidays, workplace, hours
+- Work equipment of your choice
+- Commuter benefits & global gatherings covered

packages/homepage/content/articles/seed-round.md

@@ -0,0 +1,34 @@
+---
+title: "UI/UX Designer"
+slug: "ux-ui-designer"
+description: "As a designer you'll be working closely with our engineers to implement and improve interaction opportunities that embody our [core values](https://codesandbox.io/docs/#our-values) and support our growing community of engineers, designers and teachers."
+link: "https://airtable.com/shrYgsLKkdfchPlmZ"
+---
+
+## Role
+
+As a designer you'll be working closely with our engineers to implement and improve interaction opportunities that embody our [core values](https://codesandbox.io/docs/#our-values) and support our growing community of engineers, designers and teachers.
+
+## Responsibilities
+
+- Continue to improve the quality and effectiveness of our UI
+- User research based design implementations
+- Co-create our design system
+- Establish best practices and design guidelines
+
+## We'll be looking for
+
+- 3+ years in a design role
+- Preferably Javascript, React, HTML, CSS skills
+- Thorough understanding of software development process
+- Modern design tooling fluency
+- Demonstrably shipped solutions to complex UI problems
+- Ideally, you have worked on or helped build a design system
+
+## Our offer
+
+You'll be able to make great impact in a small team with strong ties in the industry.
+
+- Flexible holidays, workplace, hours
+- Work equipment of your choice
+- Commuter benefits & global gatherings covered

packages/homepage/content/jobs/frontend.md

@@ -84,7 +84,7 @@ module.exports = {
         fonts: [
           `Poppins:600,700,800`,
           `source sans pro:300,400,500,600,700`,
-          'open sans:400',
+          'open sans:300,400',
         ],
       },
     },

packages/homepage/content/jobs/infra.md

@@ -42,6 +42,7 @@ exports.createPages = async ({ graphql, actions }) => {
 
   const docsTemplate = resolve(__dirname, './src/templates/docs.js');
   const blogTemplate = resolve(__dirname, './src/templates/post.js');
+  const jobTemplate = resolve(__dirname, './src/templates/job.js');
 
   // Redirect /index.html to root.
   createRedirect({
@@ -108,7 +109,7 @@ exports.createPages = async ({ graphql, actions }) => {
       const id = edge.node.id;
 
       createPage({
-        path: 'blog/' + slug,
+        path: 'post/' + slug,
         component: blogTemplate,
         context: {
           id,
@@ -166,6 +167,38 @@ exports.createPages = async ({ graphql, actions }) => {
       createArticlePage(url || slug);
     }
   });
+
+  // JOBS
+
+  const allJobs = await graphql(
+    `
+      {
+        allMarkdownRemark(
+          filter: { fileAbsolutePath: { regex: "/jobs/" } }
+          limit: 1000
+        ) {
+          edges {
+            node {
+              id
+              frontmatter {
+                slug
+              }
+            }
+          }
+        }
+      }
+    `
+  );
+
+  if (allJobs.data) {
+    allJobs.data.allMarkdownRemark.edges.forEach(edge => {
+      createPage({
+        path: 'job/' + edge.node.frontmatter.slug,
+        component: jobTemplate,
+        context: { id: edge.node.id },
+      });
+    });
+  }
 };
 
 exports.onCreateWebpackConfig = ({