feat(careers): adds life at speckle section

This commit is contained in:
Dimitrie Stefanescu
2021-06-29 15:37:00 +01:00
parent 3dd3dada19
commit ddd72f2722
3 changed files with 439 additions and 110 deletions
+252
View File
@@ -1174,6 +1174,229 @@ video {
margin-bottom: 0;
}
.prose-xl {
font-size: 1.25rem;
line-height: 1.8;
}
.prose-xl p {
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.prose-xl [class~="lead"] {
font-size: 1.2em;
line-height: 1.5;
margin-top: 1em;
margin-bottom: 1em;
}
.prose-xl blockquote {
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 1.0666667em;
}
.prose-xl h1 {
font-size: 2.8em;
margin-top: 0;
margin-bottom: 0.8571429em;
line-height: 1;
}
.prose-xl h2 {
font-size: 1.8em;
margin-top: 1.5555556em;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
.prose-xl h3 {
font-size: 1.5em;
margin-top: 1.6em;
margin-bottom: 0.6666667em;
line-height: 1.3333333;
}
.prose-xl h4 {
margin-top: 1.8em;
margin-bottom: 0.6em;
line-height: 1.6;
}
.prose-xl img {
margin-top: 2em;
margin-bottom: 2em;
}
.prose-xl video {
margin-top: 2em;
margin-bottom: 2em;
}
.prose-xl figure {
margin-top: 2em;
margin-bottom: 2em;
}
.prose-xl figure > * {
margin-top: 0;
margin-bottom: 0;
}
.prose-xl figure figcaption {
font-size: 0.9em;
line-height: 1.5555556;
margin-top: 1em;
}
.prose-xl code {
font-size: 0.9em;
}
.prose-xl h2 code {
font-size: 0.8611111em;
}
.prose-xl h3 code {
font-size: 0.9em;
}
.prose-xl pre {
font-size: 0.9em;
line-height: 1.7777778;
margin-top: 2em;
margin-bottom: 2em;
border-radius: 0.5rem;
padding-top: 1.1111111em;
padding-right: 1.3333333em;
padding-bottom: 1.1111111em;
padding-left: 1.3333333em;
}
.prose-xl ol {
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.prose-xl ul {
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.prose-xl li {
margin-top: 0.6em;
margin-bottom: 0.6em;
}
.prose-xl ol > li {
padding-left: 1.8em;
}
.prose-xl ol > li::before {
left: 0;
}
.prose-xl ul > li {
padding-left: 1.8em;
}
.prose-xl ul > li::before {
width: 0.35em;
height: 0.35em;
top: calc(0.9em - 0.175em);
left: 0.25em;
}
.prose-xl > ul > li p {
margin-top: 0.8em;
margin-bottom: 0.8em;
}
.prose-xl > ul > li > *:first-child {
margin-top: 1.2em;
}
.prose-xl > ul > li > *:last-child {
margin-bottom: 1.2em;
}
.prose-xl > ol > li > *:first-child {
margin-top: 1.2em;
}
.prose-xl > ol > li > *:last-child {
margin-bottom: 1.2em;
}
.prose-xl ul ul, .prose-xl ul ol, .prose-xl ol ul, .prose-xl ol ol {
margin-top: 0.8em;
margin-bottom: 0.8em;
}
.prose-xl hr {
margin-top: 2.8em;
margin-bottom: 2.8em;
}
.prose-xl hr + * {
margin-top: 0;
}
.prose-xl h2 + * {
margin-top: 0;
}
.prose-xl h3 + * {
margin-top: 0;
}
.prose-xl h4 + * {
margin-top: 0;
}
.prose-xl table {
font-size: 0.9em;
line-height: 1.5555556;
}
.prose-xl thead th {
padding-right: 0.6666667em;
padding-bottom: 0.8888889em;
padding-left: 0.6666667em;
}
.prose-xl thead th:first-child {
padding-left: 0;
}
.prose-xl thead th:last-child {
padding-right: 0;
}
.prose-xl tbody td {
padding-top: 0.8888889em;
padding-right: 0.6666667em;
padding-bottom: 0.8888889em;
padding-left: 0.6666667em;
}
.prose-xl tbody td:first-child {
padding-left: 0;
}
.prose-xl tbody td:last-child {
padding-right: 0;
}
.prose-xl > :first-child {
margin-top: 0;
}
.prose-xl > :last-child {
margin-bottom: 0;
}
.prose-blue a {
color: #2563eb;
}
@@ -1363,6 +1586,11 @@ video {
margin: -0.75rem;
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
@@ -1512,6 +1740,10 @@ video {
margin-bottom: 5rem;
}
.mb-24 {
margin-bottom: 6rem;
}
.-mb-12 {
margin-bottom: -3rem;
}
@@ -1604,6 +1836,10 @@ video {
height: 12rem;
}
.h-52 {
height: 13rem;
}
.h-60 {
height: 15rem;
}
@@ -1612,6 +1848,14 @@ video {
height: 16rem;
}
.h-72 {
height: 18rem;
}
.h-80 {
height: 20rem;
}
.h-96 {
height: 24rem;
}
@@ -3804,6 +4048,10 @@ figcaption{
grid-column: span 2 / span 2;
}
.md\:col-span-3 {
grid-column: span 3 / span 3;
}
.md\:mx-auto {
margin-left: auto;
margin-right: auto;
@@ -3893,6 +4141,10 @@ figcaption{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
+146 -63
View File
@@ -1,82 +1,165 @@
{{!< default}}
{{#tag}}
<main class="w-default flex flex-wrap content-center mt-24">
<div class="w-3/3">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-800 dark:text-gray-100 sm:text-5xl md:text-6xl">
<span class="block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
{{name}}
</span>
@ Speckle
</h1>
<p class="text-base text-justify text-gray-500 sm:text-lg md:text-xl md:max-w-6xl mt-10">
{{description}}
</p>
</div>
{{!< default}} {{#tag}} <main class="w-default flex flex-wrap content-center mt-24">
<div class="w-3/3">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-800 dark:text-gray-100 sm:text-5xl md:text-6xl">
<span class="block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
{{name}}
</span>
@ Speckle
</h1>
<p class="text-base text-justify text-gray-800 dark:text-gray-200 sm:text-lg md:text-xl md:max-w-6xl mt-10">
{{description}}
</p>
</div>
</main>
{{/tag}}
{{/tag}}
<div class="w-default mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-2 sm:mt-24">
<div class="w-default mt-12 grid gap-5 md:grid-cols-2 lg:grid-cols-2 sm:mt-24">
{{#get "posts" filter="tags:careers"}}
{{#get "posts" filter="tags:careers"}}
{{#foreach posts visibility="all"}}
{{> cardCareers}}
{{> cardCareers}}
{{/foreach}}
{{/get}}
{{/get}}
<div class="relative rounded-xl py-10 overflow-hidden flex col-span-2 md:col-span-2 grid grid-cols-2 gap-4">
<div class="relative rounded-xl py-10 overflow-hidden col-span-2 md:col-span-2 grid grid-cols-2 gap-4">
<div class="relative px-8 col-span-2 md:col-span-1">
<div class="text-3xl font-semibold text-gray-800 dark:text-gray-200">
How to apply
<div class="relative px-8 col-span-2 md:col-span-1">
<div class="text-3xl font-semibold text-gray-600 dark:text-gray-400">
How to apply
</div>
<blockquote class="mt-4">
<div class="relative text-lg text-gray-800 dark:text-gray-200 md:flex-grow">
<p class="relative">
Send us an up-to-date CV & a quick intro
explaining your motivation for joining and
what you think your contribution to the team
can be.
</p>
</div>
<blockquote class="mt-4">
<div class="relative text-lg text-gray-600 dark:text-gray-400 md:flex-grow">
<p class="relative">
</blockquote>
Send your CV and tell us why you think you'd be a great fit for the role! We'd also
you to include a small example of how you would improve Speckle, whether it's an idea, a sketch or a Pull Request.
</p>
</div>
</blockquote>
</div>
<div class="relative px-8 col-span-2 md:col-span-1">
<div class="text-3xl font-semibold text-gray-600 dark:text-gray-400">
Didn't find the right position?
</div>
<blockquote class="mt-4">
<div class="relative text-lg text-gray-600 dark:text-gray-400 md:flex-grow">
<p class="relative">
No worries! We are always looking for
talented people who
believe in our mission and want to change
AEC.
If you're intrested in working at Speckle,
get in touch at
hello@speckle.systems
</p>
</div>
</blockquote>
</div>
</div>
<div class="relative px-8 col-span-2 md:col-span-1">
<div class="text-3xl font-semibold text-gray-800 dark:text-gray-200">
Didn't find the right position?
</div>
<blockquote class="mt-4">
<div class="relative text-lg text-gray-800 dark:text-gray-200 md:flex-grow">
<p class="relative">
No worries! We are always looking for
talented people who
believe in our mission and want to change
AEC.
If you're intrested in working at Speckle,
get in touch at
hello@speckle.systems
</p>
</div>
</blockquote>
<div class="prose prose-xl dark:prose-dark mb-10 block max-w-none col-span-2 mx-4">
<h1>Life at Speckle</h1>
<p>Wondering what it's like to work with us? Here's some of our perks.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full col-span-2 mb-24">
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1 md:col-span-2">
<div class="flex-shrink-0 ">
<img class="h-72 w-full object-cover" src="https://media4.giphy.com/media/XymXANrzgI4k6FL6zr/giphy.gif"
alt="Working from home">
</div>
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
Remote First
</p>
<p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
No office, no commute! Work from home or from wherever you fancy, 100% of the time (we do want though a 6h timezone overalp of sorts between each other).
</p>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1">
<div class="flex-shrink-0 ">
<img class="h-52 w-full object-cover" src="https://expanscape.com/assets/images/A7_6.jpg"
alt="gadget">
</div>
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
Generous Gadget Budget
</p>
<p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
You can choose your own gear - we allocate a Generous Gadget Budget (tm) to each of us to spend on the hardware and software that makes you happy.
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1">
<div class="flex-shrink-0 ">
<img class="h-52 w-full object-cover" src="https://discourse.speckle.works/uploads/default/optimized/1X/e77a5e5d33d47990227ef47d418e64d386716891_2_666x500.jpeg"
alt="izzys bunnies going to the vet">
</div>
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
Flexible Working Hours
</p>
<p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
There is no Big Brother watching you. If you need to take your bunnies to the vet, just do so.
</p>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1 md:col-span-2">
<div class="flex-shrink-0 ">
<img class="w-full h-72 object-cover" src="https://speckle.systems/content/images/2021/06/standups.png"
alt="izzys bunnies going to the vet">
</div>
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
Wonky Stand-Ups
</p>
<p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4">
Our mid-morning (10.30am, we're not really morning people) ritual is - or should be - never boring. There's a rotating chairperson-ship that has full control over the proceedings.
</p>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden col-span-1 md:col-span-3">
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
Open Source & Community: The Greater Good!
</p>
<p class="mt-3 text-base dark:text-gray-300 text-gray-700 line-clamp-3 md:line-clamp-4 prose prose-blue max-w-none">
Last, but not least: doing open source is a <a href="https://speckle.systems/blog/opensource-aec-speckle/">unique adventure</a>. We work in the open, constantly engaging with our community and users from across backgrounds, domains and cultures. Defintively not a desk job!
</p>
</div>
</div>
<div class="flex-shrink-0 ">
<img class="w-full h-80 object-cover" src="https://user-images.githubusercontent.com/7696515/123794194-7c036700-d8da-11eb-8462-2fb63b2058d4.png"
alt="izzys bunnies going to the vet">
</div>
</div>
</div>
</div>
+41 -47
View File
@@ -1,59 +1,53 @@
{{!< default}}
{{!< default}} {{#post}} <article class="relative max-w-2xl mx-auto px-4 md:px-0">
{{#post}}
{{!-- Header --}}
<article class="relative max-w-2xl mx-auto px-4 md:px-0">
<header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
{{!-- Header --}}
{{#if feature_image}}
<img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image
size="m" }} 600w, {{img_url feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w"
sizes="(max-width: 1000px) 1000px, 2000px" loading="lazy" src="{{img_url feature_image size=" xl"}}"
alt="{{title}}" />
{{/if}}
<h1>
Position: <span
class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">{{title}}</span>
</h1>
{{#if custom_excerpt}}
<p class="text-blue-500">
{{custom_excerpt}}
</p>
{{/if}}
<header class="mt-10 prose prose-lg dark:prose-dark max-w-none">
</header>
{{#if feature_image}}
<img class="gh-feature-image mx-auto" srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w,
{{img_url feature_image size="xl"}} 2000w"
sizes="(max-width: 1000px) 1000px, 2000px"
loading="lazy" src="{{img_url feature_image size="xl"}}"
alt="{{title}}" />
{{/if}}
<div class="prose prose-blue lg:prose-xl dark:prose-dark max-w-none mt-10">
{{content}}
</div>
<aside class="prose prose-blue dark:prose-dark mt-10">
<div class="mb-10 bg-blue-500 text-white rounded-lg px-4 py-10">
<h1>
Position: <span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">{{title}}</span>
<span class="text-white">How to apply</span>
</h1>
{{#if custom_excerpt}}
<p>
{{custom_excerpt}}
</p>
{{/if}}
</header>
<div class="prose prose-blue dark:prose-dark max-w-none mt-10">
{{content}}
<p>
Send your CV (hello [at] speckle [dot] systems) and tell us why you think you'd be a great fit for the role.
</p>
<p>
Include a small example of
how you would improve Speckle, whether it's an idea, a sketch or a Pull Request. We want to make sure you know
the product before you apply, all the code and docs are out there - do something amazing!
</p>
</div>
<aside class="prose prose-blue dark:prose-dark mt-10">
<div class="mb-10">
<h1>
Apply now!
</h1>
<p>
Send us (hello [at] speckle [dot] systems) an
up-to-date CV & a quick intro
explaining your motivation for joining and
what you think your contribution to the team
can be. Any supporting links or documents are
welcome.
</p>
</div>
<div class="pb-10">
{{> cardTag}}
</div>
</aside>
<div class="pb-10">
{{> cardTag}}
</div>
</aside>
</article>
{{/post}}
{{/post}}