finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: add notice at the end of projects if odd-lengthed
+43
-13
+21
src/assets/styles/index.css
+21
src/assets/styles/index.css
···
256
256
text-wrap: balance;
257
257
}
258
258
}
259
+
260
+
.additional-project {
261
+
display: grid;
262
+
place-items: center;
263
+
font-size: var(--size-0);
264
+
width: 100%;
265
+
color: var(--foreground);
266
+
267
+
div {
268
+
display: flex;
269
+
flex-direction: column;
270
+
align-items: center;
271
+
justify-content: center;
272
+
gap: calc(var(--spacing) * 0.5);
273
+
274
+
& > * {
275
+
text-align: center;
276
+
text-wrap: balance;
277
+
}
278
+
}
279
+
}
259
280
}
260
281
261
282
@layer components {
+16
src/components/pages/index.astro
+16
src/components/pages/index.astro
···
25
25
projectsSection: {
26
26
title: string;
27
27
description: string;
28
+
additionalProjectsTitle: string;
29
+
additionalProjectsDescription: string;
28
30
};
29
31
};
30
32
}
···
34
36
const {
35
37
content: { intro, languages, blogSection, contact, projectsSection },
36
38
} = Astro.props;
39
+
40
+
const oddNumberProjects = projects.length % 2 !== 0;
37
41
---
38
42
39
43
<Layout>
···
187
191
<p>{project.subtitle[locale]}</p>
188
192
</div>
189
193
))
194
+
}
195
+
{
196
+
oddNumberProjects && (
197
+
<div class="additional-project">
198
+
<div>
199
+
<h2>{projectsSection.additionalProjectsTitle}</h2>
200
+
<p>
201
+
{projectsSection.additionalProjectsDescription}
202
+
</p>
203
+
</div>
204
+
</div>
205
+
)
190
206
}
191
207
</section>
192
208
</article>
+3
-13
src/pages/en/index.astro
+3
-13
src/pages/en/index.astro
···
19
19
title: "Projects",
20
20
description:
21
21
"Here are my most interesting projects. Click through to get more details!",
22
+
additionalProjectsTitle: "...and more to come!",
23
+
additionalProjectsDescription:
24
+
"I'll keep adding the best of my projects as I get building",
22
25
},
23
-
projects: [
24
-
{
25
-
id: "karr",
26
-
name: "Karr",
27
-
description: "Federated carpool platform for businesses",
28
-
},
29
-
{
30
-
id: "blog",
31
-
name: "Technical Blog",
32
-
description:
33
-
"Technical blog where I write articles about technology",
34
-
},
35
-
],
36
26
};
37
27
---
38
28
+3
src/pages/fr/index.astro
+3
src/pages/fr/index.astro
···
20
20
title: "Projets",
21
21
description:
22
22
"Voici mes projets les plus intéressants. Cliquez pour en savoir plus !",
23
+
additionalProjectsTitle: "...et encore plus de projets à venir!",
24
+
additionalProjectsDescription:
25
+
"Je continuerai à ajouter mes meilleurs projets.",
23
26
},
24
27
};
25
28
---