Skip to content

Commit 7871bcd

Browse files
mathieumuremathieumure
authored
feat(lyonjs100): add job-board page (#455)
1 parent 830d746 commit 7871bcd

File tree

7 files changed

+220
-28
lines changed

7 files changed

+220
-28
lines changed

‎app/lyonjs-100/content.mdx

+10
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Image from 'next/image';
66
import cinema from './cinema.jpg';
77
import styles from './LyonJS100.module.css';
88
import { ButtonLink } from '../../modules/atoms/button/Button';
9+
import { lyonJS100Jobs } from '../../data/lyonjs100-jobs';
10+
import { ListOfJobs } from '../../modules/jobs/ListOfJobs';
911

1012
<div className={styles.hero}>
1113
<Image className={styles.background} src={cinema} width={1200} alt="" />
@@ -51,10 +53,18 @@ Un grand merci à nos sponsors pour leur soutien continu.
5153
Nous sommes reconnaissants de leur contribution à cet événement spécial.
5254
Certains de nos sponsors seront présents durant la journée, n'hésitez pas à aller à leur rencontre pour en apprendre plus sur leurs activités.
5355

56+
Nos sponsors sont également à la recherche de nouveaux talents, alors n'hésitez pas à consulter les offres d'emploi disponibles sur notre site.
57+
5458
<Sponsors title="🥇Sponsors Gold" sponsors={gold} />
5559
<Sponsors title="🥈Sponsors Silver" sponsors={silver} />
5660
<Sponsors title="🥉Sponsors Bronze" sponsors={bronze} />
5761

62+
## Recrutement
63+
64+
Nos sponsors ont des offres d'emploi à vous proposer. N'hésites pas à les consulter, postuler ou les contacters si vous êtes intéressé·es.
65+
66+
<ListOfJobs jobs={lyonJS100Jobs} />
67+
5868
## Infos
5969

6070
Pour toute question ou demande de sponsoring, veuillez nous contacter à l'adresse suivante : [[email protected]](mailto:[email protected]).

‎data/lyonjs100-jobs.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { indy, malt, zenika } from './sponsors';
2+
import { kolecto, fulll, _365talents } from './lyonjs100-sponsors';
3+
import { Job } from '../modules/jobs/jobs.types';
4+
5+
/** 3 jobs max per gold sponsors */
6+
const goldSponsorJobs: Array<Job> = [];
7+
8+
/** 1 job max per silver sponsors */
9+
const silverSponsorJobs: Array<Job> = [
10+
{
11+
title: 'Engineering Manager',
12+
url: 'https://jobs.indy.fr/jobs/5370711-engineering-manager',
13+
sponsor: indy,
14+
type: 'CDI',
15+
description: `**Missions** :
16+
* Au sein de l'équipe Tech & Product d'Indy composée de 75 personnes réparties en 2 tribes avec dans chacunes d'elles 5-6 squads.
17+
* Pour rejoindre notre squad Tetris (dans la tribe premium) en charge de rendre hyper fluide et intuitif les déclarations fiscales de nos clients.
18+
* Rôle de Tech Lead dans une squad composée de 3 développeurs fullstack et d'1 Product Manager
19+
* A la fois de manager de l'équipe de développeurs et garant technique des développements de ta squad.
20+
21+
**Profile** :
22+
- Posture de servant-leader, l'équipe est la priorité.
23+
- Tu considères que le travail est bien fait quand ta squad se sent bien et est performante.
24+
- Tu as évolué dans une entreprise customer-oriented et ton appétence pour le produit se traduit en solutions efficaces pour les utilisateurs.
25+
- Tu es capable de faire monter en compétence ta squad sur le plan individuel et collectif.
26+
- Tu as une légitimité technique grâce à tes connaissances en d’architecture, en test et sur des sujets DevOps ou Monitoring.
27+
- Tu veux rester proche de l’opérationnel en participant à la delivery et aux code-reviews`,
28+
},
29+
];
30+
31+
export const lyonJS100Jobs = [...goldSponsorJobs, ...silverSponsorJobs];

‎data/lyonjs100-sponsors.ts

+27-28
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
11
import { Sponsor } from '../modules/event/types';
22
import { bedrock, cleverCloud, indy, malt, theodo, wanadev, zenika } from './sponsors';
33

4-
export const gold: Array<Sponsor> = [
5-
malt,
6-
{
7-
name: 'Fulll',
8-
url: 'https://www.fulll.fr/',
9-
logo: '/sponsors/fulll.webp',
10-
},
11-
{
12-
name: 'Kolecto',
13-
url: 'https://www.kolecto.fr/',
14-
logo: '/sponsors/kolecto.svg',
15-
},
16-
{ name: 'Akawaka', url: 'https://www.akawaka.fr/', logo: '/sponsors/akawaka.svg' },
17-
];
18-
19-
export const silver: Array<Sponsor> = [
20-
{ name: '365 Talent', url: 'https://www.365talents.com/fr/', logo: '/sponsors/365Talent.svg' },
21-
zenika,
22-
bedrock,
23-
indy,
24-
theodo,
25-
];
26-
27-
export const bronze = [
28-
cleverCloud,
29-
wanadev,
30-
{ name: 'Feelinjob', url: 'https://www.feelinjob.com/', logo: '/sponsors/feelinjob.svg' },
31-
];
4+
export const fulll: Sponsor = {
5+
name: 'Fulll',
6+
url: 'https://www.fulll.fr/',
7+
logo: '/sponsors/fulll.webp',
8+
};
9+
10+
export const kolecto: Sponsor = {
11+
name: 'Kolecto',
12+
url: 'https://www.kolecto.fr/',
13+
logo: '/sponsors/kolecto.svg',
14+
};
15+
16+
export const feelinjob = { name: 'Feelinjob', url: 'https://www.feelinjob.com/', logo: '/sponsors/feelinjob.svg' };
17+
18+
export const akawaka: Sponsor = { name: 'Akawaka', url: 'https://www.akawaka.fr/', logo: '/sponsors/akawaka.svg' };
19+
20+
export const _365talents: Sponsor = {
21+
name: '365 Talent',
22+
url: 'https://www.365talents.com/fr/',
23+
logo: '/sponsors/365Talent.svg',
24+
};
25+
26+
export const gold: Array<Sponsor> = [malt, fulll, kolecto];
27+
28+
export const silver: Array<Sponsor> = [_365talents, zenika, bedrock, indy, akawaka, theodo];
29+
30+
export const bronze = [cleverCloud, wanadev, feelinjob];

‎modules/jobs/ListOfJobs.module.css

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.container {
2+
gap: 2rem;
3+
display: grid;
4+
grid-template-columns: 1fr;
5+
}
6+
7+
.card {
8+
display: flex;
9+
position: relative;
10+
flex-direction: column;
11+
background: var(--background-card);
12+
margin: auto;
13+
padding: 16px;
14+
border-radius: 12px;
15+
align-items: center;
16+
gap: 18px;
17+
transition:
18+
background-color 100ms,
19+
border-color 100ms;
20+
border: 1px solid transparent;
21+
max-width: 800px;
22+
height: 100%;
23+
}
24+
25+
.card:hover {
26+
background-color: var(--background-card-hover);
27+
border-color: var(--border-light);
28+
}
29+
30+
.header {
31+
display: flex;
32+
justify-content: space-between;
33+
align-items: center;
34+
width: 100%;
35+
margin-bottom: -18px;
36+
max-height: 24px;
37+
}
38+
39+
.title {
40+
font-size: 1.5rem;
41+
margin-top: 1rem;
42+
margin-bottom: 0;
43+
align-self: flex-start;
44+
}
45+
46+
.type,
47+
.sponsor {
48+
font-size: 1rem;
49+
align-self: flex-start;
50+
}
51+
52+
.description {
53+
font-size: 0.9rem;
54+
align-self: flex-start;
55+
color: var(--white-0);
56+
min-height: 72px;
57+
margin-top: 2rem;
58+
margin-bottom: 1rem;
59+
flex-grow: 1;
60+
}
61+
62+
.description p,
63+
.description ul {
64+
margin-bottom: 10px;
65+
}
66+
67+
.description ul {
68+
list-style: initial;
69+
margin-left: 20px;
70+
}
71+
72+
.header .logo {
73+
display: none;
74+
position: absolute;
75+
top: 16px;
76+
right: 16px;
77+
width: 7rem;
78+
max-height: 80px;
79+
}
80+
81+
.logo {
82+
width: 5rem;
83+
height: auto;
84+
margin-bottom: 1rem;
85+
}
86+
87+
@media screen and (min-width: 600px) {
88+
.header .logo {
89+
display: block;
90+
}
91+
92+
.header .sponsor {
93+
display: none;
94+
}
95+
96+
.card > .logo {
97+
display: none;
98+
}
99+
}
100+
101+
@media screen and (min-width: 956px) {
102+
.container {
103+
grid-template-columns: 1fr 1fr;
104+
}
105+
}

‎modules/jobs/ListOfJobs.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Job } from './jobs.types';
2+
import styles from './ListOfJobs.module.css';
3+
import { H2 } from '../atoms/remark/Titles';
4+
import React from 'react';
5+
import { ButtonLink } from '../atoms/button/Button';
6+
import dynamic from 'next/dynamic';
7+
8+
const ReactMarkdown = dynamic(() => import('react-markdown').then((module) => module.default));
9+
10+
type Props = {
11+
jobs: Array<Job>;
12+
};
13+
export const ListOfJobs = ({ jobs }: Props) => {
14+
return (
15+
<ul className={styles.container}>
16+
{jobs.map((job, index) => {
17+
return (
18+
<li key={index}>
19+
<article className={styles.card}>
20+
<div className={styles.header}>
21+
<p className={styles.type}>{job.type}</p>
22+
<p className={styles.sponsor}>{job.sponsor.name}</p>
23+
<img className={styles.logo} src={job.sponsor.logo} alt={job.sponsor.name} />
24+
</div>
25+
<H2 className={styles.title}>{job.title}</H2>
26+
<ReactMarkdown className={styles.description}>{job.description}</ReactMarkdown>
27+
<img className={styles.logo} src={job.sponsor.logo} alt={job.sponsor.name} />
28+
<ButtonLink href={job.url} target="_blank" rel="noreferrer noopener" className={styles.participate}>
29+
Voir l'annonce <span aria-hidden="true">&rarr;</span>
30+
</ButtonLink>
31+
</article>
32+
</li>
33+
);
34+
})}
35+
</ul>
36+
);
37+
};

‎modules/jobs/jobs.types.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Sponsor } from '../event/types';
2+
3+
export type Job = {
4+
title: string;
5+
sponsor: Sponsor;
6+
type: string;
7+
description: string;
8+
url: string;
9+
};

‎modules/lyonjs100/HomeAnnouncement.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
right: 0;
3737
display: flex;
3838
justify-content: center;
39+
gap: 1rem;
3940
}
4041

4142
@media screen and (min-width: 768px) {

0 commit comments

Comments
 (0)