finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: add fare and travel projects
+96
-9
src/assets/img/fare-home.jpg
src/assets/img/fare-home.jpg
This is a binary file and will not be displayed.
src/assets/img/fare-home.webp
src/assets/img/fare-home.webp
This is a binary file and will not be displayed.
src/assets/img/travelblog.jpg
src/assets/img/travelblog.jpg
This is a binary file and will not be displayed.
src/assets/img/travelblog.webp
src/assets/img/travelblog.webp
This is a binary file and will not be displayed.
+5
-3
src/assets/styles/index.css
+5
-3
src/assets/styles/index.css
···
192
192
193
193
overflow: hidden;
194
194
border-radius: var(--radius);
195
-
background-color: var(--container-color, var(--teal-300));
195
+
--container-color: var(--teal-300);
196
+
background-color: var(--container-color);
196
197
197
198
& > a {
198
199
grid-area: title;
···
220
221
display: flex;
221
222
flex-wrap: wrap;
222
223
justify-content: flex-start;
224
+
align-items: center;
223
225
gap: calc(var(--spacing) * 0.4);
224
226
margin-top: -1rem;
225
227
226
228
& > li {
227
-
display: inline-block;
228
229
padding: 0.25rem 1rem;
229
230
border-radius: 100vw;
230
-
background-color: var(--teal-700);
231
+
background-color: oklch(from var(--container-color) 0.45 c h);
231
232
color: var(--teal-100);
232
233
font-weight: lighter;
233
234
font-size: var(--size--2);
···
237
238
238
239
& > p {
239
240
grid-area: description;
241
+
text-wrap: balance;
240
242
}
241
243
}
242
244
}
+1
src/assets/styles/main.css
+1
src/assets/styles/main.css
+1
-2
src/assets/styles/projects/projects.css
+1
-2
src/assets/styles/projects/projects.css
+5
-2
src/components/pages/index.astro
+5
-2
src/components/pages/index.astro
···
104
104
<Icon name="pixel:envelope" />
105
105
Email
106
106
<a
107
-
href="mailto:finxol.io@gmail.com"
107
+
href={`mailto:contact@${config.domains[locale].replace(
108
+
/https?:\/\//,
109
+
"",
110
+
)}`}
108
111
target="_blank"
109
112
rel="noopener noreferrer"
110
113
class="external-link cover"
···
170
173
<a href={`/projects/${project.slug}`} class="cover">
171
174
{project.title[locale]}
172
175
</a>
173
-
<p>{project.subtitle[locale]}</p>
174
176
<ul>
175
177
{project.tags.map((tag: string) => (
176
178
<li class="tag">{tag}</li>
177
179
))}
178
180
</ul>
181
+
<p>{project.subtitle[locale]}</p>
179
182
</div>
180
183
))
181
184
}
+7
-2
src/components/pages/project.astro
+7
-2
src/components/pages/project.astro
···
5
5
import { projects } from "@/data/projects";
6
6
import type { ProjectMetadata } from "@/data/projects";
7
7
import type { Locale } from "@/hooks/useLocale.astro";
8
-
9
8
import { config } from "@/config";
9
+
10
10
interface Props {
11
11
content: {
12
12
projectId: string;
···
41
41
42
42
<p class="subtitle">{content.subtitle[locale]}</p>
43
43
44
-
<div class="boxes">
44
+
<div
45
+
class="boxes"
46
+
{...project.colour && {
47
+
style: `--container-color: var(${project.colour});`,
48
+
}}
49
+
>
45
50
<picture style="view-transition-name: project-img">
46
51
<source srcset={project.imgs.webp.src} type="image/webp" />
47
52
<img src={project.imgs.jpg.src} alt={content.title[locale]} />
+50
src/data/projects.ts
+50
src/data/projects.ts
···
1
1
import type { ImageMetadata } from "astro";
2
2
3
+
import fareJpg from "@/assets/img/fare-home.jpg";
4
+
import fareWebp from "@/assets/img/fare-home.webp";
3
5
import karrJpg from "@/assets/img/karr_demo.jpg";
4
6
import karrWebp from "@/assets/img/karr_demo.webp";
5
7
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
6
8
import blogWebp from "@/assets/img/finxol_blog_home.webp";
7
9
import recaroPitchJpg from "@/assets/img/viscircle_recaro_pitch.jpg";
8
10
import recaroPitchWebp from "@/assets/img/viscircle_recaro_pitch.webp";
11
+
import travelBlogJpg from "@/assets/img/travelblog.jpg";
12
+
import travelBlogWebp from "@/assets/img/travelblog.webp";
9
13
import { config } from "@/config.ts";
10
14
11
15
export type Localised = Record<(typeof config.locales)[number], string>;
···
30
34
31
35
export const projects: ProjectMetadata[] = [
32
36
{
37
+
slug: "fare-asso",
38
+
title: {
39
+
fr: "FARE",
40
+
en: "FARE",
41
+
},
42
+
subtitle: {
43
+
fr:
44
+
"Maintenance et développement du site de la Fédération des Association du Réseau Étudiant de Haute Bretagne",
45
+
en:
46
+
"Maintenance and development of the FARE Student Association Federation (Fédération des Association du Réseau Étudiant de Haute Bretagne) website",
47
+
},
48
+
imgs: {
49
+
jpg: fareJpg,
50
+
webp: fareWebp,
51
+
},
52
+
tags: ["Next.js", "Supabase", "Dokploy"],
53
+
colour: "--indigo-300",
54
+
startDate: new Date("10 December 2025"),
55
+
runtime: "NextJs",
56
+
runtimeIcon: "tabler:brand-nextjs",
57
+
repoUrl: "https://fare-asso.fr",
58
+
repoIcon: "tabler:link",
59
+
},
60
+
{
33
61
slug: "karr",
34
62
title: {
35
63
fr: "Karr",
···
94
122
runtime: "Vue.js",
95
123
runtimeIcon: "tabler:brand-vue",
96
124
repoUrl: "https://clients.viscircle.com/Recaro/pitch2023/",
125
+
repoIcon: "tabler:link",
126
+
},
127
+
{
128
+
slug: "travel-blog",
129
+
title: {
130
+
fr: "Blog de voyage",
131
+
en: "Travel Blog",
132
+
},
133
+
subtitle: {
134
+
fr: "Blog personnel sur mes voyages",
135
+
en: "Personal blog where I write about my travels",
136
+
},
137
+
imgs: {
138
+
jpg: travelBlogJpg,
139
+
webp: travelBlogWebp,
140
+
},
141
+
tags: ["Ghost"],
142
+
colour: "--indigo-300",
143
+
startDate: new Date("29 May 2023"),
144
+
runtime: "Ghost",
145
+
runtimeIcon: "tabler:writing-sign",
146
+
repoUrl: "https://colinswanderlustchronicles.com/",
97
147
repoIcon: "tabler:link",
98
148
},
99
149
];
+1
src/layouts/Layout.astro
+1
src/layouts/Layout.astro
+13
src/pages/en/projects/fare-asso.astro
+13
src/pages/en/projects/fare-asso.astro
+13
src/pages/fr/projects/fare-asso.astro
+13
src/pages/fr/projects/fare-asso.astro