+
+ );
+};
export default DesktopMenu;
diff --git a/src/components/ui/MobileMenu.tsx b/src/components/ui/MobileMenu.tsx
index 8bee0ed..85e7b4d 100644
--- a/src/components/ui/MobileMenu.tsx
+++ b/src/components/ui/MobileMenu.tsx
@@ -44,14 +44,17 @@ const MobileMenu = ({ menuItems, isOpen, closeMobileMenu }: Props) => {
{menuItems.map((menuItem) => {
- const isLinkActive = router.asPath.includes(menuItem.href);
+ const isLinkActive = router.asPath == menuItem.href;
const isExternal = menuItem.href.startsWith('http');
return (
-
+
{menuItem.label}
{isExternal && }
diff --git a/src/components/ui/Spoller.tsx b/src/components/ui/Spoller.tsx
new file mode 100644
index 0000000..e435db4
--- /dev/null
+++ b/src/components/ui/Spoller.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { SpollerItem, SpollerItemTitle, SpollerItemBody, SpollerItemCaret } from './styled/Spoller.styled';
+import PlusIcon from '../../assets/icons/plus';
+import MinusIcon from '../../assets/icons/minus';
+import { cx } from 'linaria';
+
+type Spoller = {
+ children: string;
+ title: string;
+};
+
+const Spoller = ({ children, title }: Spoller) => {
+ const [spoller, setSpoller] = useState(false);
+ const toggleSpollerHandler = () => {
+ setSpoller(!spoller);
+ };
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+};
+export default Spoller;
diff --git a/src/components/ui/styled/Button.styled.tsx b/src/components/ui/styled/Button.styled.tsx
index 0545536..dcf8efc 100644
--- a/src/components/ui/styled/Button.styled.tsx
+++ b/src/components/ui/styled/Button.styled.tsx
@@ -5,6 +5,7 @@ export const StyledButton = styled.button<{ color?: string }>`
--bgColor: ${appTheme.light.colors.ctaBg};
--borderColor: ${({ color }) => (!!color ? color : 'transparent')};
position: relative;
+ z-index: 1;
height: fit-content;
cursor: pointer;
line-height: 100%;
@@ -72,4 +73,25 @@ export const StyledButton = styled.button<{ color?: string }>`
color: ${appTheme.dark.colors.font200};
--bgColor: ${appTheme.dark.colors.ctaBg};
}
+
+ &.small {
+ height: 62px;
+ font-size: 14px;
+ padding: 0 40px;
+ letter-spacing: 0.095em;
+ ${media.brp1440} {
+ height: 54px;
+ }
+ ${media.brp1280} {
+ height: 44px;
+ font-size: 12px;
+ padding: 0 24px;
+ }
+ ${media.brp768} {
+ height: 38px;
+ font-size: 10px;
+ padding: 0 16px;
+ letter-spacing: 0.04em;
+ }
+ }
`;
diff --git a/src/components/ui/styled/DesktopMenu.styled.tsx b/src/components/ui/styled/DesktopMenu.styled.tsx
index ecc3a59..d589e0d 100644
--- a/src/components/ui/styled/DesktopMenu.styled.tsx
+++ b/src/components/ui/styled/DesktopMenu.styled.tsx
@@ -36,7 +36,7 @@ export const Header = styled.header`
transform: translateY(0);
}
}
-
+
&.disable-animation {
transition: none;
}
@@ -104,6 +104,22 @@ export const MenuItem = styled.li`
color: ${appTheme.light.colors.font50};
margin-right: 32px;
white-space: nowrap;
+ position: relative;
+ &.active {
+ color: ${appTheme.light.colors.font200};
+ ${tmSelectors.dark} {
+ color: ${appTheme.dark.colors.font300};
+ }
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -10px;
+ left: 0;
+ width: 100%;
+ height: 1px;
+ background: linear-gradient(90deg, #cacad2 1.5%, rgba(202, 202, 210, 0) 91.74%);
+ }
+ }
&:last-child {
margin-right: unset;
}
@@ -120,16 +136,24 @@ export const MenuItem = styled.li`
export const SocialsContainer = styled.section`
display: flex;
align-items: center;
- & a {
- margin-right: 8px;
- &:last-child {
- margin-right: unset;
- }
+ gap: 8px;
+ .icon {
+ width: 1em;
+ height: 1em;
+ font-size: 18px;
+ }
+ .icon-twitter {
+ font-size: 16px;
}
`;
export const SocialItem = styled.div`
font-size: 0px;
+ width: 32px;
+ height: 32px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
& svg {
fill: ${appTheme.light.colors.font50};
}
diff --git a/src/components/ui/styled/MobileMenu.styled.tsx b/src/components/ui/styled/MobileMenu.styled.tsx
index 8354b13..db38adc 100644
--- a/src/components/ui/styled/MobileMenu.styled.tsx
+++ b/src/components/ui/styled/MobileMenu.styled.tsx
@@ -49,9 +49,13 @@ export const MobileMenuContent = styled.div`
export const MobileMenuItemsList = styled.ul`
list-style-type: none;
- padding: 114px 24px 0 32px;
+ padding: 134px 24px 0 32px;
display: flex;
flex-direction: column;
+ ${media.brp768} {
+ padding-left: 0;
+ padding-right: 0;
+ }
`;
export const MobileMenuItem = styled.li`
@@ -110,7 +114,7 @@ export const MobileMenuFooter = styled.section`
align-items: center;
justify-content: space-between;
padding: 0 24px 46px;
- ${media.brp428} {
- padding: 0 24px 32px;
+ ${media.brp768} {
+ padding: 0 0 32px;
}
`;
diff --git a/src/components/ui/styled/Spoller.styled.tsx b/src/components/ui/styled/Spoller.styled.tsx
new file mode 100644
index 0000000..9690ef5
--- /dev/null
+++ b/src/components/ui/styled/Spoller.styled.tsx
@@ -0,0 +1,132 @@
+import { styled } from '@linaria/react';
+import { appTheme, media, tmSelectors } from '../../../themes';
+
+export const SpollerItem = styled.div`
+ position: relative;
+ padding: 22px 0 21px;
+ border-bottom: 1px solid ${appTheme.light.colors.border200};
+ ${tmSelectors.dark} {
+ border-color: ${appTheme.dark.colors.border200};
+ }
+ &.is-active {
+ .spoller-caret {
+ background: ${appTheme.light.colors.bgTexture300};
+ ${tmSelectors.dark} {
+ background: ${appTheme.dark.colors.bgTexture300};
+ }
+ .minus {
+ display: block;
+ }
+ .plus {
+ display: none;
+ }
+ }
+ .spoller-body {
+ display: block;
+ }
+ }
+ &:hover {
+ .spoller-caret {
+ background: ${appTheme.light.colors.bgTexture300};
+ ${tmSelectors.dark} {
+ background: ${appTheme.dark.colors.bgTexture300};
+ }
+ }
+ }
+ ${media.brp768} {
+ padding: 16px 0 16px;
+ }
+`;
+
+export const SpollerItemTitle = styled.button`
+ width: 100%;
+ border: none;
+ background: transparent;
+ font-family: 'EncodeSans', sans-serif;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 0;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 150%;
+ text-align: left;
+ letter-spacing: 0.03em;
+ cursor: pointer;
+ color: ${appTheme.light.colors.font150};
+ ${tmSelectors.dark} {
+ color: ${appTheme.dark.colors.font100};
+ }
+ ${media.brp768} {
+ font-size: 14px;
+ }
+`;
+
+export const SpollerItemCaret = styled.span`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: none;
+ width: 28px;
+ height: 28px;
+ border-radius: 5px;
+ border: 1px solid ${appTheme.light.colors.bgTexture200};
+ background: ${appTheme.light.colors.bgTexture250};
+ box-shadow: 0px 0.714px 1.429px 0px rgba(16, 24, 40, 0.05);
+ ${tmSelectors.dark} {
+ border-color: ${appTheme.dark.colors.border300};
+ background: ${appTheme.dark.colors.bgTexture250};
+ }
+ svg {
+ stroke: ${appTheme.light.colors.font400};
+ ${tmSelectors.dark} {
+ stroke: ${appTheme.dark.colors.font400};
+ }
+ }
+ .minus {
+ display: none;
+ }
+ ${media.brp768} {
+ width: 20px;
+ height: 20px;
+ svg {
+ width: 8px;
+ height: 8px;
+ }
+ }
+`;
+
+export const SpollerItemBody = styled.div`
+ padding: 4px 40px 2px 0;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 150%;
+ letter-spacing: 0.03em;
+ display: none;
+
+ color: ${appTheme.light.colors.font400};
+ ${tmSelectors.dark} {
+ color: ${appTheme.dark.colors.font50};
+ }
+ p:not(:last-child) {
+ margin-bottom: 15px;
+ }
+ a {
+ text-decoration: underline;
+ color: ${appTheme.light.colors.font150};
+ ${tmSelectors.dark} {
+ color: ${appTheme.dark.colors.font250};
+ }
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ &.is-active {
+ display: block;
+ }
+ ${media.brp768} {
+ font-size: 14px;
+ }
+`;
diff --git a/src/config.ts b/src/config.ts
index d6375a5..e77b8d2 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,9 +1,8 @@
-import MediumIcon from './assets/socials/medium';
+import LinkedinIcon from './assets/socials/linkedin';
import TwitterIcon from './assets/socials/twitter';
import { MenuItemType, SocialsEnum } from './types/commonTypes';
-export const BANNER_LINK =
- 'https://www.notion.so/Nomic-Foundation-jobs-991b37c547554f75b89a95f437fd5056';
+export const BANNER_LINK = 'https://www.notion.so/Nomic-Foundation-jobs-991b37c547554f75b89a95f437fd5056';
export const bannerContent = {
text: 'Announcing the Nomic Foundation',
@@ -19,6 +18,10 @@ export const menuItemsList: MenuItemType[] = [
label: 'Who we are',
href: '/who-we-are',
},
+ {
+ label: 'jobs',
+ href: '/jobs',
+ },
{
label: 'Hardhat',
href: 'https://hardhat.org/',
@@ -27,22 +30,18 @@ export const menuItemsList: MenuItemType[] = [
label: 'Building Blocks',
href: '/',
},
- // {
- // label: 'Jobs',
- // href: '/',
- // },
];
export const SOCIALS_LINKS = {
- [SocialsEnum.MEDIUM]: 'https://medium.com/nomic-foundation-blog',
+ [SocialsEnum.LINKEDIN]: 'https://www.linkedin.com/company/nomic-foundation/',
[SocialsEnum.TWITTER]: 'https://twitter.com/NomicFoundation',
};
export const socialsItems = [
{
- name: SocialsEnum.MEDIUM,
- href: SOCIALS_LINKS[SocialsEnum.MEDIUM],
- Icon: MediumIcon,
+ name: SocialsEnum.LINKEDIN,
+ href: SOCIALS_LINKS[SocialsEnum.LINKEDIN],
+ Icon: LinkedinIcon,
},
{
name: SocialsEnum.TWITTER,
diff --git a/src/content/jobs.ts b/src/content/jobs.ts
new file mode 100644
index 0000000..0f05f11
--- /dev/null
+++ b/src/content/jobs.ts
@@ -0,0 +1,281 @@
+import JobsHeroImgLarge from '../../public/img/jobs-hero-img-large.webp';
+import JobsHeroImgVertical from '../../public/img/jobs-hero-img-vertical.webp';
+import JobsHeroImgHorizontal from '../../public/img/jobs-hero-img-horizontal.webp';
+import CultureAssets from '../assets/culture';
+import BenefitsAssets from '../assets/benefits';
+
+const { CulturePictureMap, CulturePictureMapDark, CulturePictureStar, CulturePictureStarDark } = CultureAssets;
+
+const {
+ BenefitsPictureWorkSchedule,
+ BenefitsPictureWorkScheduleDark,
+ BenefitsPictureUnlimitedPTO,
+ BenefitsPictureUnlimitedPTODark,
+ BenefitsPictureStipend,
+ BenefitsPictureStipendDark,
+ BenefitsPictureLearningAndDevelopment,
+ BenefitsPictureLearningAndDevelopmentDark,
+ BenefitsPictureVesting,
+ BenefitsPictureVestingDark,
+} = BenefitsAssets;
+
+export const HERO_BLOCK_CONTENT = {
+ cta: {
+ href: '/what-we-do',
+ label: 'See current openings',
+ },
+ title: 'Our users are building the decentralized future',
+ subtitle: 'Careers at Nomic Foundation',
+ text: 'The Nomic Foundation is a non-profit advancing the Ethereum ecosystem. We build runtimes, compilers, build systems, and deployment solutions that are used by tens of thousands of users. Our focus is on empowering developers to decentralize the world. You can help.',
+
+ imgLarge: { src: JobsHeroImgLarge.src, alt: '' },
+ imgVertical: { src: JobsHeroImgVertical.src, alt: '' },
+ imgHorizontal: { src: JobsHeroImgHorizontal.src, alt: '' },
+};
+
+export const WHY_NOMIC_BLOCK_CONTENT = {
+ title: 'Why join Nomic',
+ items: [
+ {
+ title: 'Your impact',
+ text: 'At Nomic, every person makes a difference. You will clearly see the impact that you contribute to our mission and Ethereum itself. Your team’s top-level results will be meaningfully different due to your contributions, and you will be able to pinpoint the exact contribution you made to upgrading a nascent industry’s stack.',
+ },
+ {
+ title: 'Deep technical challenges',
+ text: 'We tackle deep developer infrastructure projects that are usually only available in larger organizations. We build runtimes and compilers used by tens of thousands of users.',
+ },
+ {
+ title: 'Mission-driven value creation',
+ text: 'Your contributions will directly impact an ecosystem that is shaping the future of finance, data, and ownership. You won’t be working on optimizing a revenue stream to increase shareholder profits; you’ll create value for the Ethereum community and developer ecosystem.',
+ },
+ {
+ title: 'Lean and robust',
+ text: 'We run robust engineering practices and lightweight processes that provide us with structure and fast decision-making. Your time will be spent on technical challenges, coding, and launching features.',
+ },
+ ],
+};
+
+export const OUR_VALUES_BLOCK_CONTENT = {
+ title: 'Our values',
+ items: [
+ {
+ title: 'Crypto & Ethereum belief',
+ text: 'We believe in blockchain technology as a force for change that will produce meaningful value for society through innovation. We believe in Ethereum as a movement and technology, and we are aligned with its values. We actively participate in the community, and we aim to contribute to the long-term growth of the ecosystem.',
+ },
+ {
+ title: 'Social Impact',
+ text: 'We care about creating value for the world and Ethereum’s community in a meaningful way.',
+ },
+ {
+ title: 'Developer Experience',
+ text: 'We consider a smooth building experience essential for ecosystem growth, and we take pride and pleasure in making software easier to build.',
+ },
+ {
+ title: 'Time is Precious',
+ text: "We are respectful of people's time, including that of our users, the Ethereum community, external contributors, and our own team members and organization. Aiming for fast and efficient is our default.",
+ },
+ {
+ title: 'High Standards',
+ text: 'We aim to take the hard path without compromising quality or losing our sense of pragmatism.',
+ },
+ {
+ title: 'Level Up',
+ text: "We always try to improve at all levels: individually, in our projects, and as a team. Beginner's mindset.",
+ },
+ {
+ title: 'Instigate Change',
+ text: "When we see room for improvement, we point it out and seek iteration, even if it's outside our direct responsibilities or areas of expertise.",
+ },
+ {
+ title: 'Autonomy',
+ text: 'To create space for deep focus, schedule flexibility, and effective async remote collaboration, we strive for autonomy in how we approach work and collaboration.',
+ },
+ {
+ title: 'Kindness',
+ text: 'We value and only hire people who embody respect, compassion, empathy, and kindness.',
+ },
+ ],
+};
+
+export const CULTURE_BLOCK_CONTENT = {
+ title: 'Culture',
+ suptitle:
+ 'We are an impact-driven remote team of 16 individuals coming from different walks of life. We look for alignment on mission and values as key aspects when we hire.',
+ reviews: [
+ {
+ text: 'Flexibility. Being able to work at any time, as long as I coordinate with my team, is super nice. Working alongside such a group of crazy smart people is really inspiring. It constantly reminds me that there’s so much to learn, and I love it.',
+ name: 'Luis Schaab',
+ profession: 'Software Engineer',
+ },
+ {
+ text: 'The team is as welcoming as it is diverse, so whether it’s technical or cultural, I feel like I’m learning new things constantly which is really amazing.',
+ name: 'Zoey Morgan',
+ profession: 'Software Engineer',
+ },
+ {
+ text: 'Working at a non-profit means being 100% focused on the value we are creating, which is great. And the team is amazing: smart, kind, and fun people, even if they don’t share enough pictures of their pets.',
+ name: 'Franco Victorio',
+ profession: 'Software Engineer',
+ },
+ ],
+
+ contents: [
+ {
+ title: 'Remote-first',
+ text: 'Our team is fully remote, and we hire within UTC+2 to UTC-4 time zones. We work asynchronously and autonomously, relying on trust and great communication. This allows everyone to create a working schedule that integrates well with other important aspects of their lives. Hiring across many countries allows us to naturally integrate diverse perspectives.',
+ Picture: CulturePictureMap,
+ PictureDark: CulturePictureMapDark,
+ stats: [
+ {
+ title: '10 countries',
+ },
+ {
+ title: '11 nationalities',
+ },
+ {
+ title: '13 languages',
+ },
+ ],
+ },
+ {
+ title: 'Team Retreats',
+ text: "While we love remote, time together in person is really important. Twice a year, we set aside about a week for our in-person retreats. We've had great times in places like Malaga, Patagonia, and Tuscany. During these trips we focus on work that’s well-suited for being in person, but we also have fun! Expect some hiking, yoga, kayaking, cooking, and even wine tasting. These retreats help us bond, share experiences, and build deeper relationships with one another.",
+ Picture: CulturePictureStar,
+ PictureDark: CulturePictureStarDark,
+ },
+ ],
+};
+
+export const BENEFITS_BLOCK_CONTENT = {
+ title: 'Benefits',
+ items: [
+ {
+ Picture: BenefitsPictureWorkSchedule,
+ PictureDark: BenefitsPictureWorkScheduleDark,
+ title: 'Remote and flexible working arrangements',
+ },
+ {
+ Picture: BenefitsPictureUnlimitedPTO,
+ PictureDark: BenefitsPictureUnlimitedPTODark,
+ title: 'Unlimited PTO',
+ },
+ {
+ Picture: BenefitsPictureStipend,
+ PictureDark: BenefitsPictureStipendDark,
+ title: 'Stipend to set up your home office',
+ },
+ {
+ Picture: BenefitsPictureLearningAndDevelopment,
+ PictureDark: BenefitsPictureLearningAndDevelopmentDark,
+ title: 'Annual learning & development budget',
+ },
+ {
+ Picture: BenefitsPictureVesting,
+ PictureDark: BenefitsPictureVestingDark,
+ title: 'Vesting ETH package in your comp',
+ },
+ ],
+};
+
+export const HIRING_PROCESS_BLOCK_CONTENT = {
+ title: 'Hiring Process',
+ stepTitleFirst: 'Week 1',
+ stepTitleSecond: 'Week 2',
+ items: [
+ {
+ list: [
+ {
+ title: 'Application',
+ },
+ ],
+ },
+ {
+ list: [
+ {
+ title: 'Intro call',
+ },
+ {
+ title: 'Technical Screen',
+ },
+ ],
+ },
+ {
+ list: [
+ {
+ title: 'Project Review',
+ },
+ {
+ title: 'Architecture',
+ },
+ {
+ title: 'Coding',
+ },
+ ],
+ },
+ {
+ list: [
+ {
+ title: 'Leaderships Interviews',
+ },
+ ],
+ },
+ {
+ list: [
+ {
+ title: 'Offer',
+ },
+ {
+ title: 'Reference Checks',
+ },
+ ],
+ },
+ ],
+};
+
+export const FAQ_BLOCK_CONTENT = {
+ title: 'FAQ',
+ questions: [
+ {
+ title: 'How long does the interview process take?',
+ text: '
It takes about 2 weeks to complete to core interviews and move forward to the offer & reference checks
',
+ },
+ {
+ title: 'Which locations do you hire in?',
+ text: '
We hire in locations within UTC+1 to UTC-4 time zones. Although we work asynchronously, hiring in these time zones allows for 3-4 hours of overlap between team members.
',
+ },
+ {
+ title: 'How can I best prepare for interviewing with Nomic Foundation?',
+ text: '
If you’re reading this you’re on your way there! We encourage you to get familiar with Nomic and our core values. Additionally, looking into our open source projects will give you an idea of what we are building. Once you get invited to interview with us, our talent team will share more information about the interviews, what to expect, and how to prepare.
We use deel.com to employ team members in various locations in a compliant way. Depending on where you are based, you would be able to choose to be employed through a local entity, or as a direct contractor.
Once you’re part of the team, you’ll quickly find out that we work mostly asynchronously. In practice, this means that we rely heavily on written communication (Slack and Notion). Our aim is to maximize the time we spend on deep, uninterrupted, focused work. Nevertheless, we kick off each week on a Monday with a short team call. Every 2 weeks we schedule an unstructured team social, and we meet in person twice a year.
',
+ },
+
+ {
+ title: 'How are the teams structured?',
+ text: '
Our teams are small, up to 4-5 people each. All engineers. We have team leads who also write code. The Engineering team is led by the Head of Engineering.
',
+ },
+ {
+ title: 'What kind of development processes does the Engineering team follow?',
+ text: '
We loosely follow Scrum for sprint planning and OKRs for quarterly and yearly planning.
',
+ },
+ {
+ title: 'Why is Nomic a non-profit?',
+ text: '
The kind of open source infrastructure that we build aren’t really businesses. Orgs that tend to build such things are massive and they work on these things to support their core businesses. We saw the big need in Ethereum for us to work on this kind of project and it wouldn’t be realistic to do it as a for-profit company. If we remained a for-profit company, we’d have to focus to building things that could generate revenue. The things we work on are public goods for the Ethereum ecosystem and as such they don’t align well with for-profit organizations.
Through ecosystem donations from players who have built on top of our tools and understand the importance of developer experience, given that Ethereum’s core value proposition is a software development platform.
',
+ },
+ {
+ title: 'How do you operate as a non-profit?',
+ text: '
The same as any other tech startup, with the different incentives, motivations, and success definition.
',
+ },
+
+ {
+ title: 'How does being a non-profit influence goal setting and roadmap planning?',
+ text: '
The ultimate goal is impact and not revenue or profit - that’s the only difference. We care about what value we create for the users and not whether or not we’re capturing it.