Skip to content

Commit e32e7ac

Browse files
feat: add team members, descriptions and contacts (#29)
* feat: add team members, descriptions and contacts * start adding pastMembers * chore: adding other members --------- Co-authored-by: garciagenrique <[email protected]>
1 parent 8c9a0d5 commit e32e7ac

File tree

10 files changed

+216
-5
lines changed

10 files changed

+216
-5
lines changed

docusaurus.config.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ const config = {
6767
prism: {
6868
// theme: prismThemes.dracula,
6969
additionalLanguages: ['bash','ini'],
70+
theme: prismThemes.github,
71+
darkTheme: prismThemes.dracula,
7072
},
7173
// Replace with your project's social card
7274
image: 'img/logo.png',
@@ -83,6 +85,11 @@ const config = {
8385
// position: 'left',
8486
// label: 'Get started',
8587
// },
88+
{
89+
to: '/team',
90+
label: 'About us',
91+
},
92+
8693
{
8794
type: 'doc', // This is a preset regarding the type of document, please update if needed
8895
docId: 'auth', // The ID of the corresponding document. This should match with what you wrote in the document header.
@@ -212,10 +219,6 @@ const config = {
212219
],
213220
copyright: `Copyright © ${new Date().getFullYear()} VRE-Hub. Built with Docusaurus.`,
214221
},
215-
prism: {
216-
theme: prismThemes.github,
217-
darkTheme: prismThemes.dracula,
218-
},
219222
}),
220223
};
221224

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@docusaurus/core": "3.7.0",
1818
"@docusaurus/preset-classic": "3.7.0",
1919
"@docusaurus/theme-live-codeblock": "^3.7.0",
20+
"@fortawesome/fontawesome-free": "^6.7.2",
2021
"@mdx-js/react": "^3.0.0",
2122
"clsx": "^2.0.0",
2223
"prism-react-renderer": "^2.3.0",

src/css/custom.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* bundles Infima by default. Infima is a CSS framework designed to
44
* work well for content-centric websites.
55
*/
6-
6+
@import "@fortawesome/fontawesome-free/css/all.min.css";
77
/* You can override the default Infima variables here. */
88
:root {
99
--ifm-color-primary: #1653ff;

src/pages/team.jsx

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import React from 'react';
2+
import Layout from '@theme/Layout';
3+
import styles from './team.module.css';
4+
5+
// Add your summary by copy-pasting the code contained in the curly braces below. Adapt the text to your needs.
6+
const teamMembers = [
7+
{
8+
name: 'Enrique Garcia',
9+
image: require('@site/static/img/team/enrique.jpg').default,
10+
11+
linkedin: 'https://www.linkedin.com/in/garciagenrique/',
12+
github: 'https://github.com/garciagenrique',
13+
description: `Enrique is a CERN IT fellow working for EU-funded projects, from where the Virtual Research Environment project started.
14+
He contributes to the Rucio jupyterlab extension, plugin used by the VRE analysis facility to access the ESCAPE data lake.
15+
He holds a degree in Physics from Universidad Autonoma de Madrid, and a MSc in Astrophysics from Universidad Complutense de Madrid.`,
16+
},
17+
{
18+
name: 'Giovanni Guerrieri',
19+
image: require('@site/static/img/team/gio.jpg').default,
20+
21+
linkedin: 'https://www.linkedin.com/in/giovanniguerrieri',
22+
github: 'https://github.com/soap2g',
23+
gitlab: 'https://gitlab.cern.ch/gguerrie',
24+
description: `Giovanni Guerrieri is a physicist managing the infrastructure and the development of the ATLAS Open Data project.
25+
He's part of the CERN-IT department, working on Distributed Data Management systems, Analysis Facilities, and Open Science.
26+
He's also involved in various European initiatives, such as the ESCAPE Collaboration, the OSCARS project, and EOSC.
27+
He holds a PhD in particle physics from the University of Trieste.`,
28+
},
29+
];
30+
31+
const pastMembers = [
32+
{
33+
name: 'Ruben Perez',
34+
image: require('@site/static/img/team/neutral.jpg').default,
35+
linkedin: 'https://www.linkedin.com/in/rubenperezmercado/',
36+
github: 'https://github.com/rubenperezm',
37+
description: `Ruben contributed to the VRE by developing the Reana Jupyterlab extension.`
38+
},
39+
{
40+
name: 'Michael Zengel',
41+
image: require('@site/static/img/team/neutral.jpg').default,
42+
linkedin: 'https://www.linkedin.com/in/michael-zengel-0003aa230/',
43+
github: 'https://github.com/mrzengel',
44+
description: `Michael is the main contributor to the Zenodo Jupyterlab extension.`
45+
},
46+
{
47+
name: 'Elena Gazzarrini',
48+
image: require('@site/static/img/team/elena.jpg').default,
49+
github: 'https://github.com/egazzarr/',
50+
linkedin: 'https://www.linkedin.com/in/egazzarrini/',
51+
description: `Elena holds a MSci degree in Physics from King's College London and is a Fellow in the
52+
CERN IT department since 2021. Her work focuses on driving the EU-funded Virtual Research Environment project, a platform to facilitate Particle Physics and Astrophysics analyses. She deploys and maintains a K8s Rucio instance
53+
for the project's data management framework, accessible by scientists form the Rucio jupyterlab
54+
extension. Her contributions to the Rucio code were therefore mainly targeted at the jupyterlab extension,
55+
along with enabling access to Rucio from, CERN's reproducible analysis platform.`,
56+
},
57+
{
58+
name: 'Domenic Gosein',
59+
image: require('@site/static/img/team/neutral.jpg').default,
60+
linkedin: 'https://www.linkedin.com/in/goseind/',
61+
github: 'https://github.com/goseind',
62+
description: ``
63+
},
64+
{
65+
name: 'Alba Vendrell',
66+
image: require('@site/static/img/team/neutral.jpg').default,
67+
linkedin: 'https://www.linkedin.com/in/alba-v-0092471a0/',
68+
github: 'https://github.com/albavemo',
69+
description: ``
70+
},
71+
{
72+
name: 'Agisilaos Kounelis',
73+
image: require('@site/static/img/team/neutral.jpg').default,
74+
linkedin: 'https://www.linkedin.com/in/kounelisagis/',
75+
github: 'https://github.com/kounelisagis',
76+
description: ``
77+
},
78+
{
79+
name: 'Rizart Dona',
80+
image: require('@site/static/img/team/rizart.jpg').default,
81+
linkedin: 'https://www.linkedin.com/in/rizart-dona/',
82+
github: 'https://github.com/rizart',
83+
description: ``
84+
},
85+
{
86+
name: 'Riccardo di Maria',
87+
image: require('@site/static/img/team/neutral.jpg').default,
88+
linkedin: 'https://www.linkedin.com/in/riccardo-di-maria-phd-6967a1160/',
89+
description: ``
90+
}
91+
];
92+
93+
const TeamPage = () => {
94+
return (
95+
<Layout title="Team" description="Meet the team behind the project.">
96+
<section className={styles.teamSection}>
97+
<div className={styles.container}>
98+
<h1 className={styles.title}>The ESCAPE VRE Team</h1>
99+
{teamMembers.map((person, idx) => (
100+
<div key={idx} className={styles.personCard}>
101+
{person.image && (
102+
<div className={styles.personImage}>
103+
<img src={person.image} alt={`Picture of ${person.name}`} />
104+
</div>
105+
)}
106+
<div className={styles.personInfo}>
107+
<h2>
108+
{person.name}
109+
{person.email && (
110+
<a href={`mailto:${person.email}`} className="fa fa-envelope" title="Email"></a>
111+
)}
112+
{person.linkedin && (
113+
<a href={person.linkedin} className="fa-brands fa-linkedin" title="LinkedIn" target="_blank" rel="noreferrer"></a>
114+
)}
115+
{person.github && (
116+
<a href={person.github} className="fa-brands fa-github" title="GitHub" target="_blank" rel="noreferrer"></a>
117+
)}
118+
{person.gitlab && (
119+
<a href={person.gitlab} className="fa-brands fa-gitlab" title="GitLab@CERN" target="_blank" rel="noreferrer"></a>
120+
)}
121+
</h2>
122+
<p>{person.description}</p>
123+
</div>
124+
</div>
125+
))}
126+
</div>
127+
<div className={styles.container}>
128+
<h1 className={styles.title}>Former team members</h1>
129+
{pastMembers.map((person, idx) => (
130+
<div key={idx} className={styles.personCard}>
131+
{person.image && (
132+
<div className={styles.personImage}>
133+
<img src={person.image} alt={`Picture of ${person.name}`} />
134+
</div>
135+
)}
136+
<div className={styles.personInfo}>
137+
<h2>
138+
{person.name}
139+
{person.email && (
140+
<a href={`mailto:${person.email}`} className="fa fa-envelope" title="Email"></a>
141+
)}
142+
{person.linkedin && (
143+
<a href={person.linkedin} className="fa-brands fa-linkedin" title="LinkedIn" target="_blank" rel="noreferrer"></a>
144+
)}
145+
{person.github && (
146+
<a href={person.github} className="fa-brands fa-github" title="GitHub" target="_blank" rel="noreferrer"></a>
147+
)}
148+
{person.gitlab && (
149+
<a href={person.gitlab} className="fa-brands fa-gitlab" title="GitLab@CERN" target="_blank" rel="noreferrer"></a>
150+
)}
151+
</h2>
152+
<p>{person.description}</p>
153+
</div>
154+
</div>
155+
))}
156+
</div>
157+
</section>
158+
</Layout>
159+
);
160+
};
161+
162+
export default TeamPage;

src/pages/team.module.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
2+
.teamSection {
3+
padding: 2rem;
4+
}
5+
6+
.container {
7+
max-width: 960px;
8+
margin: auto;
9+
}
10+
11+
.title {
12+
font-size: 2rem;
13+
text-align: center;
14+
margin-bottom: 2rem;
15+
}
16+
17+
/* .personCard {
18+
display: flex;
19+
align-items: flex-start;
20+
margin-bottom: 2rem;
21+
gap: 1rem;
22+
} */
23+
.personCard {
24+
display: grid;
25+
grid-template-columns: 160px 1fr; /* Fixed image, flexible text */
26+
gap: 1rem;
27+
margin-bottom: 2rem;
28+
align-items: start; /* Top-align */
29+
}
30+
31+
.personImage img {
32+
width: 200px;
33+
border-radius: 8px;
34+
}
35+
36+
.personInfo h2 {
37+
display: flex;
38+
align-items: center;
39+
gap: 0.5rem;
40+
}
41+
42+
.personInfo a {
43+
margin-left: 0.5rem;
44+
font-size: 1rem;
45+
}

static/img/team/elena.jpg

36.8 KB
Loading

static/img/team/enrique.jpg

53.7 KB
Loading

static/img/team/gio.jpg

84.8 KB
Loading

static/img/team/neutral.jpg

1.24 MB
Loading

static/img/team/rizart.jpg

17.6 KB
Loading

0 commit comments

Comments
 (0)