finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: rearrange project page
+79
-15
src/assets/styles/projects/karr.css
+79
-15
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
-
". description"
10
-
". boxes";
11
gap: var(--spacing);
12
margin-inline-end: 3rem;
13
font-size: 1.1rem;
14
15
& > a {
16
grid-area: back-btn;
···
19
& > h2 {
20
grid-area: title;
21
margin: 0;
22
-
font-size: 2.5rem;
23
-
font-weight: bold;
24
}
25
26
& > p.subtitle {
27
grid-area: subtitle;
28
margin: 0;
29
-
font-size: 1.2rem;
30
}
31
32
-
& > picture,
33
-
& > img {
34
grid-area: img;
35
align-self: center;
36
justify-self: center;
···
43
44
& > p.description {
45
grid-area: description;
46
}
47
48
-
& > div.boxes {
49
-
grid-area: boxes;
50
display: grid;
51
-
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
52
gap: var(--spacing);
53
}
54
}
···
1
article {
2
display: grid;
3
+
grid-template-columns: auto auto 1fr;
4
grid-template-areas:
5
+
"back-btn title subtitle"
6
+
". img img"
7
+
". description description";
8
gap: var(--spacing);
9
+
column-gap: calc(var(--spacing) * 2);
10
+
row-gap: calc(var(--spacing) * 3);
11
+
align-items: center;
12
margin-inline-end: 3rem;
13
font-size: 1.1rem;
14
+
15
+
@media screen and (max-width: 768px) {
16
+
grid-template-areas:
17
+
"back-btn title"
18
+
"subtitle subtitle"
19
+
"img img"
20
+
"description description"
21
+
"boxes boxes";
22
+
margin-inline-end: 0;
23
+
}
24
25
& > a {
26
grid-area: back-btn;
···
29
& > h2 {
30
grid-area: title;
31
margin: 0;
32
+
font-size: 2.7rem;
33
+
font-weight: bolder;
34
+
width: min-content;
35
}
36
37
& > p.subtitle {
38
grid-area: subtitle;
39
margin: 0;
40
+
font-size: 1.5rem;
41
+
align-self: end;
42
+
margin-block-end: 0.2rem;
43
}
44
45
+
& > div {
46
grid-area: img;
47
align-self: center;
48
justify-self: center;
···
55
56
& > p.description {
57
grid-area: description;
58
+
margin: 0;
59
+
font-size: 1.2rem;
60
}
61
62
+
& > div {
63
display: grid;
64
+
grid-template-areas:
65
+
"img box1"
66
+
"img box2"
67
+
"img box3";
68
gap: var(--spacing);
69
+
70
+
@media screen and (max-width: 768px) {
71
+
flex-direction: column;
72
+
align-items: center;
73
+
}
74
+
75
+
& > img,
76
+
& > picture {
77
+
grid-area: img;
78
+
border-radius: var(--radius);
79
+
80
+
img {
81
+
object-fit: cover;
82
+
height: 100%;
83
+
}
84
+
}
85
+
86
+
div.container {
87
+
display: flex;
88
+
flex-direction: column;
89
+
align-items: center;
90
+
justify-content: center;
91
+
gap: var(--spacing);
92
+
font-size: 1.2rem;
93
+
text-align: center;
94
+
95
+
&:nth-child(1) {
96
+
grid-area: box1;
97
+
}
98
+
&:nth-child(2) {
99
+
grid-area: box2;
100
+
}
101
+
&:nth-child(3) {
102
+
grid-area: box3;
103
+
}
104
+
105
+
& > svg {
106
+
--size: 3rem;
107
+
color: var(--color-primary);
108
+
}
109
+
110
+
a {
111
+
text-decoration: none;
112
+
color: inherit;
113
+
}
114
+
115
+
--container-color: var(--teal-300);
116
+
}
117
}
118
}
-8
src/layouts/Layout.astro
-8
src/layouts/Layout.astro
+31
-23
src/pages/en/projects/karr.astro
+31
-23
src/pages/en/projects/karr.astro
···
2
import Layout from "@/layouts/Layout.astro";
3
import "@/assets/styles/projects/karr.css";
4
import { Icon } from "astro-icon/components";
5
-
import { Image } from "astro:assets";
6
7
import karrJpg from "@/assets/img/karr_demo.jpg";
8
import karrWebp from "@/assets/img/karr_demo.webp";
9
-
10
-
const homepage = Astro.url;
11
-
homepage.pathname = "/";
12
---
13
14
<Layout>
15
<article>
16
-
<a href={homepage}>
17
<Icon name="pixel:arrow-alt-circle-left" />
18
</a>
19
···
21
22
<p class="subtitle">Federated carpool platform for companies</p>
23
24
-
<picture style="view-transition-name: karr-img">
25
-
<source srcset={karrWebp.src} type="image/webp" />
26
-
<img src={karrJpg.src} alt="Karr" />
27
-
</picture>
28
29
-
<p class="description">
30
-
This entrepreneurial project was carried out for 5 months with
31
-
<a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>. The
32
-
project was discontinued after a market study revealed a
33
-
well-established competition, already subsidized by public funds.
34
-
</p>
35
36
-
<div class="boxes">
37
<div class="container">
38
-
Github repo
39
-
<a href="https://github.com/karr-mobi/karr">
40
-
https://github.com/karr-mobi/karr
41
-
</a>
42
</div>
43
<div class="container">
44
-
Github repo
45
-
<a href="https://github.com/karr-mobi/karr">
46
-
https://github.com/karr-mobi/karr
47
</a>
48
</div>
49
</div>
50
</article>
51
</Layout>
···
2
import Layout from "@/layouts/Layout.astro";
3
import "@/assets/styles/projects/karr.css";
4
import { Icon } from "astro-icon/components";
5
6
import karrJpg from "@/assets/img/karr_demo.jpg";
7
import karrWebp from "@/assets/img/karr_demo.webp";
8
---
9
10
<Layout>
11
<article>
12
+
<a href="/">
13
<Icon name="pixel:arrow-alt-circle-left" />
14
</a>
15
···
17
18
<p class="subtitle">Federated carpool platform for companies</p>
19
20
+
<div class="boxes">
21
+
<picture style="view-transition-name: karr-img">
22
+
<source srcset={karrWebp.src} type="image/webp" />
23
+
<img src={karrJpg.src} alt="Karr" />
24
+
</picture>
25
26
+
<div class="container">
27
+
<Icon name="tabler:brand-git" />
28
+
<span>
29
+
Since {new Date("10 October 2024").toLocaleDateString()}
30
+
</span>
31
+
</div>
32
33
<div class="container">
34
+
<Icon name="tabler:brand-nodejs" />
35
+
<span> NodeJS </span>
36
</div>
37
+
38
<div class="container">
39
+
<Icon name="tabler:brand-github" />
40
+
<a
41
+
href="https://github.com/karr-mobi/karr"
42
+
class="cover"
43
+
target="_blank"
44
+
rel="noopener noreferrer"
45
+
>
46
+
Github repo
47
+
<Icon name="pixel:external-link" class="external-link" />
48
</a>
49
</div>
50
</div>
51
+
52
+
<p class="description">
53
+
This entrepreneurial project was carried out for 5 months with
54
+
<a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>. The
55
+
project was discontinued after a market study revealed a
56
+
well-established competition, already subsidized by public funds.
57
+
</p>
58
</article>
59
</Layout>
+31
-19
src/pages/fr/projects/karr.astro
+31
-19
src/pages/fr/projects/karr.astro
···
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>
29
30
-
<p class="description">
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
38
-
<div class="boxes">
39
<div class="container">
40
-
Github repo
41
-
<a href="https://github.com/karr-mobi/karr">
42
-
https://github.com/karr-mobi/karr
43
-
</a>
44
</div>
45
<div class="container">
46
-
Github repo
47
-
<a href="https://github.com/karr-mobi/karr">
48
-
https://github.com/karr-mobi/karr
49
</a>
50
</div>
51
</div>
52
</article>
53
</Layout>
···
22
Plateforme de covoiturage fédérée pour entreprises
23
</p>
24
25
+
<div class="boxes">
26
+
<picture style="view-transition-name: karr-img">
27
+
<source srcset={karrWebp.src} type="image/webp" />
28
+
<img src={karrJpg.src} alt="Karr" />
29
+
</picture>
30
31
+
<div class="container">
32
+
<Icon name="tabler:brand-git" />
33
+
<span>
34
+
Depuis le {new Date("10 October 2024").toLocaleDateString()}
35
+
</span>
36
+
</div>
37
38
<div class="container">
39
+
<Icon name="tabler:brand-nodejs" />
40
+
<span> NodeJS </span>
41
</div>
42
+
43
<div class="container">
44
+
<Icon name="tabler:brand-github" />
45
+
<a
46
+
href="https://github.com/karr-mobi/karr"
47
+
class="cover"
48
+
target="_blank"
49
+
rel="noopener noreferrer"
50
+
>
51
+
Github repo
52
+
<Icon name="pixel:external-link" class="external-link" />
53
</a>
54
</div>
55
</div>
56
+
57
+
<p class="description">
58
+
Ce projet entrepreneurial a été porté pendant 5 mois avec
59
+
<a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>.
60
+
L'arrêt du projet a été décidé après une étude de marché révélant
61
+
une concurrence déjà fortement présente et subventionnée par des
62
+
fonds publics.
63
+
</p>
64
</article>
65
</Layout>