finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: improve project page
+98
-10
+45
src/assets/styles/projects/karr.css
+45
src/assets/styles/projects/karr.css
···
1
+
article {
2
+
display: grid;
3
+
grid-template-columns: auto 1fr;
4
+
align-items: center;
5
+
grid-template-areas:
6
+
"back-btn title"
7
+
". subtitle"
8
+
". img"
9
+
". body";
10
+
gap: var(--spacing);
11
+
margin-inline-end: 3rem;
12
+
font-size: 1.1rem;
13
+
14
+
& > a {
15
+
grid-area: back-btn;
16
+
}
17
+
18
+
& > h2 {
19
+
grid-area: title;
20
+
margin: 0;
21
+
font-size: 2.5rem;
22
+
font-weight: bold;
23
+
}
24
+
25
+
& > p.subtitle {
26
+
grid-area: subtitle;
27
+
margin: 0;
28
+
font-size: 1.2rem;
29
+
}
30
+
31
+
& > picture {
32
+
grid-area: img;
33
+
align-self: center;
34
+
justify-self: center;
35
+
36
+
&,
37
+
img {
38
+
border-radius: var(--radius);
39
+
}
40
+
}
41
+
42
+
& > * {
43
+
grid-area: body;
44
+
}
45
+
}
+25
-5
src/pages/en/projects/karr.astro
+25
-5
src/pages/en/projects/karr.astro
···
1
1
---
2
2
import Layout from "@/layouts/Layout.astro";
3
+
import "@/assets/styles/projects/karr.css";
4
+
import { Icon } from "astro-icon/components";
3
5
4
6
import karrJpg from "@/assets/img/karr_demo.jpg";
5
7
import karrWebp from "@/assets/img/karr_demo.webp";
8
+
9
+
const homepage = Astro.url;
10
+
homepage.pathname = "/";
6
11
---
7
12
8
13
<Layout>
9
-
Karr
14
+
<article>
15
+
<a href={homepage}>
16
+
<Icon name="pixel:arrow-alt-circle-left" />
17
+
</a>
10
18
11
-
<picture style="view-transition-name: karr-img">
12
-
<source srcset={karrWebp.src} type="image/webp" />
13
-
<img src={karrJpg.src} alt="Karr" />
14
-
</picture>
19
+
<h2>Karr</h2>
20
+
21
+
<p class="subtitle">Federated carpool platform for companies</p>
22
+
23
+
<picture style="view-transition-name: karr-img">
24
+
<source srcset={karrWebp.src} type="image/webp" />
25
+
<img src={karrJpg.src} alt="Karr" />
26
+
</picture>
27
+
28
+
<p>
29
+
This entrepreneurial project was carried out for 5 months with
30
+
<a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>. The
31
+
project was discontinued after a market study revealed a
32
+
well-established competition, already subsidized by public funds.
33
+
</p>
34
+
</article>
15
35
</Layout>
+28
-5
src/pages/fr/projects/karr.astro
+28
-5
src/pages/fr/projects/karr.astro
···
1
1
---
2
2
import Layout from "@/layouts/Layout.astro";
3
+
import "@/assets/styles/projects/karr.css";
4
+
import { Icon } from "astro-icon/components";
3
5
4
6
import karrJpg from "@/assets/img/karr_demo.jpg";
5
7
import karrWebp from "@/assets/img/karr_demo.webp";
8
+
9
+
const homepage = Astro.url;
10
+
homepage.pathname = "/";
6
11
---
7
12
8
13
<Layout>
9
-
Karr
14
+
<article>
15
+
<a href={homepage}>
16
+
<Icon name="pixel:arrow-alt-circle-left" />
17
+
</a>
18
+
19
+
<h2>Karr</h2>
20
+
21
+
<p class="subtitle">
22
+
Plateforme de covoiturage fédérée pour entreprises
23
+
</p>
24
+
25
+
<picture style="view-transition-name: karr-img">
26
+
<source srcset={karrWebp.src} type="image/webp" />
27
+
<img src={karrJpg.src} alt="Karr" />
28
+
</picture>
10
29
11
-
<picture style="view-transition-name: karr-img">
12
-
<source srcset={karrWebp.src} type="image/webp" />
13
-
<img src={karrJpg.src} alt="Karr" />
14
-
</picture>
30
+
<p>
31
+
Ce projet entrepreneurial a été porté pendant 5 mois avec
32
+
<a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>.
33
+
L'arrêt du projet a été décidé après une étude de marché révélant
34
+
une concurrence déjà fortement présente et subventionnée par des
35
+
fonds publics.
36
+
</p>
37
+
</article>
15
38
</Layout>