Skip to content

Commit d0a112a

Browse files
pautvapautva
authored
Merge pull request #30 from pautva/team-section
Team section update
2 parents 6f19e26 + 1006b82 commit d0a112a

File tree

9 files changed

+319
-75
lines changed

9 files changed

+319
-75
lines changed

‎src/components/CommunityComponent.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@
2121
contributions! Help us make environmental data tools and services better
2222
for everyone.
2323
</p>
24-
<p class="mt-2 md:mt-4 text-gray-500 dark:text-neutral-500">
24+
<!-- <p class="mt-2 md:mt-4 text-gray-500 dark:text-neutral-500">
2525
You can find more details how to contribute to this toolkit on our
2626
GitHub page here: <a
2727
href="https://pautva.github.io/co-creation-toolkit/"
2828
class="hover:underline focus:underline decoration-2"
2929
target="_blank">https://pautva.github.io/co-creation-toolkit/</a
3030
>
31-
</p>
31+
</p> -->
3232
</div>
3333
<!-- End Col -->
3434

‎src/components/GetInvolved.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Icon Blocks -->
2-
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
2+
<div id="how-to-get-involved" class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
33
<!-- heading start -->
44
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
55
<div>

‎src/components/Team.astro‎

Lines changed: 289 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,290 @@
1-
<div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
2-
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
3-
<div>
4-
<p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
5-
Co-Creation Toolkit
6-
</p>
7-
</div>
8-
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">
9-
<span class="relative inline-block">
10-
<svg viewBox="0 0 52 24" fill="currentColor" class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
11-
<defs>
12-
<pattern id="247432cb-6e6c-4bec-9766-564ed7c230dc" x="0" y="0" width=".135" height=".30">
13-
<circle cx="1" cy="1" r=".3"></circle>
14-
</pattern>
15-
</defs>
16-
<rect fill="url(#247432cb-6e6c-4bec-9766-564ed7c230dc)" width="52" height="24"></rect>
17-
</svg>
18-
<span class="relative">Team</span>
19-
</span>
20-
</h2>
21-
<p class="md:text-lg mt-4">
22-
We are a collective of passionate individuals driven by a shared goal: to use UX methods and practices to make environmental data more usable, accessible, and impactful.
23-
</p>
24-
</div>
25-
<!-- <div class="grid row-gap-8 gap-x-32 gap-y-10 mx-auto sm:row-gap-10 lg:max-w-screen-lg sm:grid-cols-2 lg:grid-cols-3">
26-
<div class="flex">
27-
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="/co-creation-toolkit/assets/avatars/cw-avatar.png" alt="Person" />
28-
<div class="flex flex-col justify-center">
29-
<p class="text-lg font-bold">Name Surname</p>
30-
<p class="text-sm">Role</p>
31-
</div>
32-
</div>
33-
<div class="flex">
34-
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="/co-creation-toolkit/assets/avatars/pt-avatar.png" alt="Person" />
35-
<div class="flex flex-col justify-center">
36-
<p class="text-lg font-bold">Name Surname</p>
37-
<p class="text-sm">Role</p>
38-
</div>
39-
</div>
40-
<div class="flex">
41-
<img class="object-cover w-20 h-20 mr-4 rounded-full shadow" src="/co-creation-toolkit/assets/avatars/sr-avatar.png" alt="Person" />
42-
<div class="flex flex-col justify-center">
43-
<p class="text-lg font-bold">Name Surname</p>
44-
<p class="text-sm">Role</p>
45-
</div>
46-
</div>
47-
</div> -->
1+
<div
2+
class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20"
3+
>
4+
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
5+
<div>
6+
<p
7+
class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400"
8+
>
9+
Co-Creation Toolkit
10+
</p>
11+
</div>
12+
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">
13+
<span class="relative inline-block">
14+
<svg
15+
viewBox="0 0 52 24"
16+
fill="currentColor"
17+
class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block"
18+
>
19+
<defs>
20+
<pattern
21+
id="247432cb-6e6c-4bec-9766-564ed7c230dc"
22+
x="0"
23+
y="0"
24+
width=".135"
25+
height=".30"
26+
>
27+
<circle cx="1" cy="1" r=".3"></circle>
28+
</pattern>
29+
</defs>
30+
<rect
31+
fill="url(#247432cb-6e6c-4bec-9766-564ed7c230dc)"
32+
width="52"
33+
height="24"></rect>
34+
</svg>
35+
<span class="relative">Team</span>
36+
</span>
37+
</h2>
38+
<p class="md:text-lg mt-4">
39+
We are a collective of passionate individuals driven by a shared goal: to
40+
use co-creation and UX methods and practices to make environmental data
41+
more accessible, usable, and impactful.
42+
</p>
4843
</div>
44+
<!-- New team section -->
45+
<!-- Team -->
46+
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
47+
<!-- Grid -->
48+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
49+
<div
50+
class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-neutral-900 dark:border-neutral-700"
51+
>
52+
<div class="flex items-center gap-x-4">
53+
<img
54+
class="rounded-full size-20"
55+
src="/co-creation-toolkit/assets/avatars/pt-profile.png"
56+
alt="Avatar"
57+
/>
58+
<div class="grow">
59+
<h3 class="font-small text-gray-800 dark:text-neutral-200">
60+
Paulius Tvaranavičius
61+
</h3>
62+
<p
63+
class="text-xs uppercase text-gray-500 dark:text-neutral-500 mt-2"
64+
>
65+
UX Designer / BGS
66+
</p>
67+
</div>
68+
</div>
69+
70+
<p class="mt-3 text-gray-500 dark:text-neutral-500">
71+
UX Designer with a background in human-computer interaction and
72+
psychology. I enjoy creating digital products, running design sprint
73+
workshops, and applying human-centred research and design methods to
74+
solve challenging problems that usually involve environmental data.
75+
I'm also the maintainer of this toolkit.
76+
</p>
77+
</div>
78+
<!-- End Col -->
79+
80+
<div
81+
class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-neutral-900 dark:border-neutral-700"
82+
>
83+
<div class="flex items-center gap-x-4">
84+
<img
85+
class="rounded-full size-20"
86+
src="/co-creation-toolkit/assets/avatars/cw-profile.png"
87+
alt="Avatar"
88+
/>
89+
<div class="grow">
90+
<h3 class="font-medium text-gray-800 dark:text-neutral-200">
91+
Carl Watson
92+
</h3>
93+
<p
94+
class="text-xs uppercase text-gray-500 dark:text-neutral-500 mt-2"
95+
>
96+
Head of Analysis and Design / BGS
97+
</p>
98+
</div>
99+
</div>
100+
101+
<p class="mt-3 text-gray-500 dark:text-neutral-500">
102+
Experienced business analyst and agile project manager. I specialise
103+
in integrating user research, UX design, and service design principles
104+
into the development of environmental data services. My focus is on
105+
requirements gathering and facilitating co-creation to ensure projects
106+
meet user needs, delivering impactful and user-centered outcomes.
107+
</p>
108+
</div>
109+
<!-- End Col -->
110+
111+
<div
112+
class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-neutral-900 dark:border-neutral-700"
113+
>
114+
<div class="flex items-center gap-x-4">
115+
<img
116+
class="rounded-full size-20"
117+
src="/co-creation-toolkit/assets/avatars/pt-profile.jpg"
118+
alt="Avatar"
119+
/>
120+
<div class="grow">
121+
<h3 class="font-medium text-gray-800 dark:text-neutral-200">
122+
Poppy Townsend
123+
</h3>
124+
<p
125+
class="text-xs uppercase text-gray-500 dark:text-neutral-500 mt-2"
126+
>
127+
Community Manager / CEDA
128+
</p>
129+
</div>
130+
</div>
131+
132+
<p class="mt-3 text-gray-500 dark:text-neutral-500">
133+
Community Manager at CEDA. I bring experience in environmental science
134+
communication, impact evaluation, and data management to help connect
135+
the Co-Creation Toolkit with its users. I focus on gathering user
136+
feedback, promoting the toolkit, and fostering a community of practice
137+
around user-centered design for environmental data.
138+
</p>
139+
</div>
140+
<!-- End Col -->
141+
142+
<div
143+
class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-neutral-900 dark:border-neutral-700"
144+
>
145+
<div class="flex items-center gap-x-4">
146+
<img
147+
class="rounded-full size-20"
148+
src="/co-creation-toolkit/assets/avatars/sr-profile.png"
149+
alt="Avatar"
150+
/>
151+
<div class="grow">
152+
<h3 class="font-medium text-gray-800 dark:text-neutral-200">
153+
Shwetha Raveendran
154+
</h3>
155+
<p
156+
class="text-xs uppercase text-gray-500 dark:text-neutral-500 mt-2"
157+
>
158+
UX Designer / BGS
159+
</p>
160+
</div>
161+
</div>
162+
163+
<p class="mt-3 text-gray-500 dark:text-neutral-500">
164+
UX/UI Designer at BGS, specialising in co-creating user-centered
165+
environmental data services. I bring expertise in user research, UI
166+
design, prototyping, and translating user needs into effective
167+
solutions.
168+
</p>
169+
</div>
170+
<!-- End Col -->
171+
172+
<div
173+
class="flex flex-col rounded-xl p-4 md:p-6 bg-white border border-gray-200 dark:bg-neutral-900 dark:border-neutral-700"
174+
>
175+
<div class="flex items-center gap-x-4">
176+
<img
177+
class="rounded-full size-20"
178+
src="/co-creation-toolkit/assets/avatars/dg-profile.jpg"
179+
alt="Avatar"
180+
/>
181+
<div class="grow">
182+
<h3 class="font-medium text-gray-800 dark:text-neutral-200">
183+
David Green
184+
</h3>
185+
<p
186+
class="text-xs uppercase text-gray-500 dark:text-neutral-500 mt-2"
187+
>
188+
Senior Design Researcher / CEH
189+
</p>
190+
</div>
191+
</div>
192+
193+
<p class="mt-3 text-gray-500 dark:text-neutral-500">
194+
I am a Design Researcher with a background in documentary making,
195+
digital arts, and experience-centered design. I am interested in
196+
applying this knowledge to the design of new systems and services to
197+
support environmental science.
198+
</p>
199+
200+
<!-- Social Brands -->
201+
<!-- <div class="mt-3 space-x-1">
202+
<a
203+
class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
204+
href="#"
205+
>
206+
<svg
207+
class="shrink-0 size-3.5"
208+
xmlns="http://www.w3.org/2000/svg"
209+
width="16"
210+
height="16"
211+
fill="currentColor"
212+
viewBox="0 0 16 16"
213+
>
214+
<path
215+
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"
216+
></path>
217+
</svg>
218+
</a>
219+
<a
220+
class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
221+
href="#"
222+
>
223+
<svg
224+
class="shrink-0 size-3.5"
225+
xmlns="http://www.w3.org/2000/svg"
226+
width="16"
227+
height="16"
228+
fill="currentColor"
229+
viewBox="0 0 16 16"
230+
>
231+
<path
232+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
233+
></path>
234+
</svg>
235+
</a>
236+
<a
237+
class="inline-flex justify-center items-center size-8 text-sm font-semibold rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
238+
href="#"
239+
>
240+
<svg
241+
class="shrink-0 size-3.5"
242+
xmlns="http://www.w3.org/2000/svg"
243+
width="16"
244+
height="16"
245+
fill="currentColor"
246+
viewBox="0 0 16 16"
247+
>
248+
<path
249+
d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"
250+
></path>
251+
</svg>
252+
</a>
253+
</div> -->
254+
<!-- End Social Brands -->
255+
</div>
256+
<!-- End Col -->
257+
258+
<a
259+
class="col-span-full lg:col-span-1 group flex flex-col justify-center text-center rounded-xl p-4 md:p-6 border border-dashed border-gray-200 hover:shadow-2xs focus:outline-hidden focus:shadow-2xs dark:border-neutral-700"
260+
href="#how-to-get-involved"
261+
>
262+
<h3 class="text-lg text-gray-800 dark:text-neutral-200">
263+
Get Involved!
264+
</h3>
265+
<div>
266+
<span
267+
class="inline-flex items-center gap-x-2 link-color decoration-2 group-hover:underline group-focus:underline font-medium"
268+
>
269+
Contribute to this toolkit
270+
<svg
271+
class="shrink-0 size-4"
272+
xmlns="http://www.w3.org/2000/svg"
273+
width="24"
274+
height="24"
275+
viewBox="0 0 24 24"
276+
fill="none"
277+
stroke="currentColor"
278+
stroke-width="2"
279+
stroke-linecap="round"
280+
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
281+
>
282+
</span>
283+
</div>
284+
</a>
285+
<!-- End Col -->
286+
</div>
287+
<!-- End Grid -->
288+
</div>
289+
<!-- End Team -->
290+
</div>

0 commit comments

Comments
 (0)