feat: update jobs design

rotki · Jul 31, 2023 · c3c1ca0 · c3c1ca0
1 parent 27e8805
commit c3c1ca0
Show file tree

Hide file tree

Showing 22 changed files with 337 additions and 200 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -3,15 +3,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer utilities {
- /* Chrome, Safari and Opera */
- .no-scrollbar::-webkit-scrollbar {
- display: none;
- }
-
- .no-scrollbar {
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
- }
-}
diff --git a/components/content/ProseA.vue b/components/content/ProseA.vue
@@ -23,6 +23,6 @@ const css = useCssModule();
 
 <style module lang="scss">
 .link {
- @apply hover:text-rui-text-secondary text-rui-primary;
+ @apply text-rui-primary hover:text-rui-primary-darker font-medium;
 }
 </style>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
@@ -28,7 +28,7 @@ const css = useCssModule();
 
 <style lang="scss" module>
 .heading {
- @apply text-rui-text font-bold mt-6;
+ @apply text-rui-text font-bold mt-8 mb-6;
  @apply text-[1.05rem] sm:text-[1.2rem] md:text-[1.35rem] 2xl:text-[1.5rem];
  @apply leading-[1.4rem] sm:leading-[1.6rem] md:leading-[1.8rem] 2xl:leading-[2.2rem];
 }

diff --git a/components/content/ProseH5.vue b/components/content/ProseH5.vue
@@ -0,0 +1,5 @@
+<template>
+ <div class="text-h5 my-6">
+ <slot />
+ </div>
+</template>
diff --git a/components/content/ProseH6.vue b/components/content/ProseH6.vue
@@ -0,0 +1,5 @@
+<template>
+ <div class="text-h6 my-4 font-medium">
+ <slot />
+ </div>
+</template>
diff --git a/components/content/ProseHr.vue b/components/content/ProseHr.vue
@@ -0,0 +1,3 @@
+<template>
+ <div class="border-t border-black/[0.12] my-6" />
+</template>
diff --git a/components/content/ProseLi.vue b/components/content/ProseLi.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { RuiIcon } from '@rotki/ui-library';
+</script>
+
+<template>
+ <li class="py-1 inline-flex w-full">
+ <RuiIcon
+ name="arrow-drop-right-line"
+ class="mr-2 text-rui-text-secondary min-w-[1.5rem]"
+ size="24"
+ />
+ <span class="py-0.5">
+ <slot />
+ </span>
+ </li>
+</template>
diff --git a/components/content/ProseP.vue b/components/content/ProseP.vue
@@ -1,38 +1,5 @@
-<script setup lang="ts">
-withDefaults(
- defineProps<{
- small?: boolean;
- }>(),
- {
- small: false,
- },
-);
-
-const css = useCssModule();
-</script>
-
 <template>
- <p
- :class="[
- css.text,
- {
- [css.small]: small,
- },
- ]"
- >
+ <p class="text-rui-text-secondary text-body-1 mb-4">
  <slot />
  </p>
 </template>
-
-<style lang="scss" module>
-.text {
- @apply text-rui-grey-800 text-justify mt-4;
- @apply text-[0.7875rem] sm:text-[0.9rem] md:text-[1.0125rem] 2xl:text-[1.2375rem];
- @apply leading-[1.1375rem] sm:leading-[1.3rem] md:leading-[1.4625rem] 2xl:leading-[1.7875rem];
-}
-
-.small {
- @apply text-[0.6125rem] sm:text-[0.7rem] md:text-[0.7875rem] 2xl:text-[0.9625rem];
- @apply leading-[0.875rem] sm:leading-4 md:leading-[1.125rem] 2xl:leading-[1.375rem];
-}
-</style>
diff --git a/components/content/ProseUl.vue b/components/content/ProseUl.vue
@@ -1,38 +1,5 @@
-<script setup lang="ts">
-withDefaults(
- defineProps<{
- small?: boolean;
- }>(),
- {
- small: false,
- },
-);
-
-const css = useCssModule();
-</script>
-
 <template>
- <ul
- :class="[
- css.list,
- {
- [css.small]: small,
- },
- ]"
- >
+ <ul class="leading-5 text-body-2">
  <slot />
  </ul>
 </template>
-
-<style lang="scss" module>
-.list {
- @apply pl-8 list-disc mt-4;
- @apply text-[0.7875rem] sm:text-[0.9rem] md:text-[1.0125rem] 2xl:text-[1.2375rem];
- @apply leading-[1.1375rem] sm:leading-[1.3rem] md:leading-[1.4625rem] 2xl:leading-[1.7875rem];
-}
-
-.small {
- @apply text-[0.6125rem] sm:text-[0.7rem] md:text-[0.7875rem] 2xl:text-[0.9625rem];
- @apply leading-[0.875rem] sm:leading-4 md:leading-[1.125rem] 2xl:leading-[1.375rem];
-}
-</style>
diff --git a/components/footer/PageFooter.vue b/components/footer/PageFooter.vue
@@ -8,15 +8,6 @@ withDefaults(
  },
 );
 
-withDefaults(
- defineProps<{
- landing?: boolean;
- }>(),
- {
- landing: false,
- },
-);
-
 const { t } = useI18n();
 
 const year = new Date().getFullYear().toString();

diff --git a/composables/markdown.ts b/composables/markdown.ts
@@ -1,13 +1,16 @@
 import { get, set } from '@vueuse/core';
+import { groupBy } from 'graphql/jsutils/groupBy';
 import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types';
 import type { ComputedRef, Ref } from 'vue';
 import { logger } from '~/utils/logger';
 import { replacePathPrefix } from '~/utils/api';
 import { GITHUB_CONTENT_PREFIX } from '~/utils/constants';
 
-interface JobMarkdownContent extends MarkdownParsedContent {
+export interface JobMarkdownContent extends MarkdownParsedContent {
  link?: string;
  open: boolean;
+ category: string;
+ tags: string[];
 }
 
 /**
@@ -18,6 +21,12 @@ export const useMarkdownContent = () => {
  const openJobs: ComputedRef<JobMarkdownContent[]> = computed(() =>
  get(jobs).filter((job) => job.open),
  );
+ const groupedOpenJobsByCategory: ComputedRef<
+ Record<string, readonly JobMarkdownContent[]>
+ > = computed(() =>
+ Object.fromEntries(groupBy(get(openJobs), (item) => item.category)),
+ );
+
  const firstJob: ComputedRef<JobMarkdownContent | null> = computed(
  () => get(openJobs)[0] ?? null,
  );
@@ -89,6 +98,7 @@ export const useMarkdownContent = () => {
  return {
  jobs,
  openJobs,
+ groupedOpenJobsByCategory,
  firstJob,
  loadJob,
  loadJobs,

diff --git a/content/jobs/1.backend.md b/content/jobs/1.backend.md
@@ -1,20 +1,22 @@
 ---
-title: python backend developer
-description: We are looking for a UI/UX designer
+title: Python Backend Developer
+description: We’re looking for an excellent command of python engineer to join our team.
 open: true
+category: Software Development
+tags: ['full-time', 'remote']
 ---
 
-## Python Backend Developer
-
-## What is rotki?
+##### What is rotki?
 
 Rotki helps manage accounts and blockchain transactions. It’s local-first,
 privacy focused and all open source. We are long time contributors to the
 Ethereum ecosystem and general crypto space. In order to support more
 blockchains (Cosmos, Roll Ups, etc.), and to continue to ship new features
 we need the help of a backend Python developer.
 
-## How your work with us will look like?
+---
+
+##### How your work with us will look like?
 
 You will be developing new features, supporting more exchanges, more
 blockchains, and more DeFi protocols. There is also always a lot of
@@ -32,11 +34,15 @@ This is an early stage open source company, so there is an opportunity to
 take on a variety of tasks beyond the app, such as the backend of the
 website, and our API.
 
-## Requirements:
+---
+
+##### Requirements:
 
 * Excellent command of python.
 
-## Bonus points:
+---
+
+##### Bonus points:
 
 * Write tests for features you code and bugs you fix. Not strict TDD,
  but we’re always looking to increase test coverage
@@ -51,14 +57,18 @@ website, and our API.
  etc.
 * Sharing our values on open source, data ownership and privacy
 
-## Non-technical bonus points:
+---
+
+##### Non-technical bonus points:
 
 * 4 hours daily overlap with European working hours 0900 CET - 1700 CET
  for smoother teamwork
 * Can work independently, but co-operates well with other team members.
 * Proactive and customer-oriented
 
-## What we offer:
+---
+
+##### What we offer:
 
 * A full-time position, but are open to part-time contributors as well.
  If located in Germany we can provide full employment with insurance
@@ -72,15 +82,15 @@ website, and our API.
  know other fascinating projects from the field (travel expenses are on
  us)
 
-## Apply
+> ###### How to apply?
 
-We are looking for both senior and junior developers, so if you are coding
+> We are looking for both senior and junior developers, so if you are coding
 in Python, don’t hesitate to apply!
 
-Send your CV, a link to your GitHub profile and a cover letter to
+> Send your CV, a link to your GitHub profile and a cover letter to
 careers@rotki.com. In the cover letter tell us what you think of rotki’s
 codebase and include a link to a project you worked on and are most proud
 about and tell us why.
 
-If you have any questions hit us up on discord:
-[https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}
+> If you have any questions hit us up on discord:
+> [https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}
diff --git a/content/jobs/2.frontend.md b/content/jobs/2.frontend.md
@@ -1,12 +1,12 @@
 ---
-title: vue/typescript frontend developer
-description: We are looking for a passionate Vue.js developer with excellent knowledge of Typescript.
+title: Vue.js/TypeScript Developer
+description: We’re looking for a passionate Vue.js developer with excellent knowledge of Typescript.
 open: true
+category: Software Development
+tags: ['full-time', 'remote']
 ---
 
-## Vue.js/TypeScript Developer - Role requirements
-
-## What is rotki?
+##### What is rotki?
 
 Rotki helps manage accounts and blockchain transactions. It’s local-first,
 privacy focused and all open source. We are long time contributors to the
@@ -16,7 +16,9 @@ we need the help of a Vue.js/Typescript developer. Our project is open
 source, so feel free to take a look at our codebase here:
 [https://github.com/rotki/rotki](https://github.com/rotki/rotki){target="_blank"}
 
-## How your work with us will look like?
+---
+
+##### How your work with us will look like?
 
 We are looking for a passionate Vue.js developer with excellent knowledge
 of Typescript. Your primary focus will be to assist in implementing new
@@ -28,7 +30,9 @@ the best experience to our users. We are looking for candidates that share
 our values on opensource and privacy and are focused on building robust
 applications that provide value to our users.
 
-## Technical requirements:
+---
+
+##### Technical requirements:
 
 * Excellent knowledge of TypeScript.
 * Excellent knowledge of Vue.js & Vuex (or pinia)
@@ -37,12 +41,16 @@ applications that provide value to our users.
 * Any experience building modular Vue.js applications with reusable
  components
 
-## Bonus points:
+---
+
+##### Bonus points:
 
 * Python backend development experience
 * DevOps experience
 
-## Non-technical bonus points:
+---
+
+##### Non-technical bonus points:
 
 * 4 hours daily overlap with European working hours 1000 CET - 1800 CET
  for smoother teamwork
@@ -54,7 +62,9 @@ applications that provide value to our users.
 * Located in Berlin or somewhere close. 2 other full time members of
  Rotki are here and meeting face to face is valuable.
 
-## What we offer:
+---
+
+##### What we offer:
 
 * A full-time position, but are open to part-time contributors as well.
  If located in Germany we can provide full employment with insurance
@@ -68,12 +78,12 @@ applications that provide value to our users.
  know other fascinating projects from the field (travel expenses are on
  us)
 
-## Apply
+> ###### How to apply?
 
-Send your CV, a link to your GitHub profile and a cover letter to
+> Send your CV, a link to your GitHub profile and a cover letter to
 careers@rotki.com. In the cover letter tell us what you think of rotki’s
 codebase and include a link to a project you worked on and are most proud
 about and tell us why.
 
-If you have any questions hit us up on discord:
-[https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}
+> If you have any questions hit us up on discord:
+> [https://discord.gg/aGCxHG7](https://discord.gg/aGCxHG7){target="_blank"}