finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: add basic project card
+224
-29
src/assets/img/karr_demo.jpg
src/assets/img/karr_demo.jpg
This is a binary file and will not be displayed.
src/assets/img/karr_demo.webp
src/assets/img/karr_demo.webp
This is a binary file and will not be displayed.
+117
-2
src/assets/styles/index.css
+117
-2
src/assets/styles/index.css
···
11
11
grid-template-areas:
12
12
"content-intro content-intro"
13
13
"content-languages content-blog"
14
+
"title-projects title-projects"
14
15
"content-projects content-projects";
15
16
gap: var(--spacing);
16
17
}
17
18
19
+
section.title-projects {
20
+
grid-area: title-projects;
21
+
display: flex;
22
+
flex-direction: row;
23
+
align-items: center;
24
+
justify-content: start;
25
+
gap: 1rem;
26
+
margin-inline: calc(var(--spacing) * 2);
27
+
margin-block: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
28
+
29
+
@media screen and (max-width: 768px) {
30
+
flex-direction: column;
31
+
}
32
+
33
+
& > * {
34
+
margin: 0;
35
+
}
36
+
37
+
& > aside {
38
+
grid-area: aside;
39
+
margin-inline: 1.5rem;
40
+
font-size: 3rem;
41
+
font-weight: bold;
42
+
43
+
@media screen and (max-width: 768px) {
44
+
font-size: 2rem;
45
+
margin-inline: 0.5rem;
46
+
}
47
+
}
48
+
49
+
& > h3 {
50
+
grid-area: h3;
51
+
margin: 0;
52
+
margin-inline-end: 2rem;
53
+
font-family: "Spagetty";
54
+
font-size: 2rem;
55
+
font-weight: bold;
56
+
}
57
+
58
+
& > p {
59
+
grid-area: intro;
60
+
margin: 0;
61
+
font-size: 1.2rem;
62
+
}
63
+
}
64
+
18
65
section.container {
19
66
&.content-intro {
20
67
--container-color: var(--rose-400);
···
66
113
}
67
114
68
115
section.container.content-projects {
69
-
--container-color: var(--rose-100);
116
+
display: grid;
117
+
grid-template-columns: repeat(2, 1fr);
118
+
grid-template-rows: auto;
119
+
grid-gap: var(--spacing);
120
+
background-color: transparent;
121
+
122
+
@media screen and (max-width: 768px) {
123
+
grid-template-columns: 1fr;
124
+
grid-template-rows: repeat(2, 1fr);
125
+
}
70
126
71
-
& > div {
127
+
.project {
72
128
display: grid;
129
+
grid-template-areas:
130
+
"img img"
131
+
"title title"
132
+
"tags tags"
133
+
"description description";
134
+
grid-template-columns: 1fr auto;
135
+
grid-template-rows: repeat(5, auto);
136
+
grid-gap: var(--spacing);
137
+
138
+
overflow: hidden;
139
+
border-radius: var(--radius);
140
+
background-color: var(--teal-300);
141
+
142
+
a {
143
+
text-decoration: none;
144
+
}
145
+
146
+
& > :not(picture) {
147
+
margin: 0 var(--spacing);
148
+
padding: 0;
149
+
}
150
+
151
+
& > picture {
152
+
grid-area: img;
153
+
154
+
width: 100%;
155
+
}
156
+
157
+
& > h3 {
158
+
grid-area: title;
159
+
160
+
font-size: 2rem;
161
+
}
162
+
163
+
& > ul {
164
+
grid-area: tags;
165
+
166
+
list-style-type: none;
167
+
display: flex;
168
+
flex-wrap: wrap;
169
+
justify-content: flex-start;
170
+
gap: calc(var(--spacing) * 0.4);
171
+
margin-top: -1rem;
172
+
173
+
& > li {
174
+
display: inline-block;
175
+
padding: 0.25rem 1rem;
176
+
border-radius: 100vw;
177
+
background-color: var(--teal-500);
178
+
color: var(--teal-100);
179
+
font-weight: lighter;
180
+
font-size: 0.8rem;
181
+
letter-spacing: 0.02em;
182
+
}
183
+
}
184
+
185
+
& > p {
186
+
grid-area: description;
187
+
}
73
188
}
74
189
}
75
190
+53
-13
src/pages/en/index.astro
+53
-13
src/pages/en/index.astro
···
2
2
import Layout from "@/layouts/Layout.astro";
3
3
import "@/assets/styles/index.css";
4
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
+
const projects = [
10
+
{
11
+
name: "Karr",
12
+
slug: "karr",
13
+
description: "Federated carpool platform for businesses",
14
+
imgs: {
15
+
jpg: karrJpg,
16
+
webp: karrWebp,
17
+
},
18
+
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
19
+
},
20
+
];
5
21
---
6
22
7
-
<Layout subtitle="Computer Science Student">
23
+
<Layout>
8
24
<article>
9
25
<section class="container layout content-intro">
10
26
<aside>👋</aside>
···
35
51
</a>
36
52
</section>
37
53
38
-
<section class="container layout content-projects">
54
+
<section class="title-projects">
39
55
<aside>💻</aside>
40
-
<h3>Projets</h3>
41
-
<div>
42
-
<p>
43
-
I'm currently working on Karr, a federated carpooling
44
-
platform for businesses. You can find my other most
45
-
interesting projects just next door. I regularly take part
46
-
in CTFs and other cybersecurity events & conferences. Feel
47
-
free to use my contact details if you wish to get in touch.
48
-
I also love playing the drums and all sorts of instruments.
49
-
</p>
50
-
</div>
56
+
<h3>Projects</h3>
57
+
<p>
58
+
Here are my most interesting projects. Click through to get more
59
+
details!
60
+
</p>
61
+
</section>
62
+
63
+
<section class="container content-projects">
64
+
{
65
+
projects.map((project) => (
66
+
<div class="project">
67
+
<picture style="view-transition-name: karr-img">
68
+
<source
69
+
srcset={project.imgs.webp.src}
70
+
type="image/webp"
71
+
/>
72
+
<img
73
+
src={project.imgs.jpg.src}
74
+
alt={project.name}
75
+
/>
76
+
</picture>
77
+
<h3>
78
+
<a href={`/projects/${project.slug}`}>
79
+
{project.name}
80
+
</a>
81
+
</h3>
82
+
<p>{project.description}</p>
83
+
<ul>
84
+
{project.tags.map((tag: string) => (
85
+
<li class="tag">{tag}</li>
86
+
))}
87
+
</ul>
88
+
</div>
89
+
))
90
+
}
51
91
</section>
52
92
</article>
53
93
</Layout>
+54
-14
src/pages/fr/index.astro
+54
-14
src/pages/fr/index.astro
···
2
2
import Layout from "@/layouts/Layout.astro";
3
3
import "@/assets/styles/index.css";
4
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
+
const projects = [
10
+
{
11
+
name: "Karr",
12
+
slug: "karr",
13
+
description: "Plateforme de covoiturage fédérée",
14
+
imgs: {
15
+
jpg: karrJpg,
16
+
webp: karrWebp,
17
+
},
18
+
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
19
+
},
20
+
];
5
21
---
6
22
7
-
<Layout subtitle="Étudiant M1 Informatique">
23
+
<Layout>
8
24
<article>
9
25
<section class="container layout content-intro">
10
26
<aside>👋</aside>
···
18
34
<section class="container content-languages">
19
35
<Icon name="pixel:globe" />
20
36
<p>
21
-
Je suis natif en 🇬🇧 <strong>Anglais</strong> et 🇫🇷 <strong
22
-
>Français</strong
37
+
Je suis natif en 🇬🇧 <strong>Anglais</strong> et 🇫🇷 <strong>
38
+
Français</strong
23
39
>.
24
40
</p>
25
41
</section>
···
35
51
</a>
36
52
</section>
37
53
38
-
<section class="container layout content-projects">
54
+
<section class="title-projects">
39
55
<aside>💻</aside>
40
56
<h3>Projets</h3>
41
-
<div>
42
-
<p>
43
-
I'm currently working on Karr, a federated carpooling
44
-
platform for businesses. You can find my other most
45
-
interesting projects just next door. I regularly take part
46
-
in CTFs and other cybersecurity events & conferences. Feel
47
-
free to use my contact details if you wish to get in touch.
48
-
I also love playing the drums and all sorts of instruments.
49
-
</p>
50
-
</div>
57
+
<p>
58
+
Voici mes projets les plus intéressants. Cliquez pour en savoir
59
+
plus !
60
+
</p>
61
+
</section>
62
+
63
+
<section class="container content-projects">
64
+
{
65
+
projects.map((project) => (
66
+
<div class="project">
67
+
<picture style="view-transition-name: karr-img">
68
+
<source
69
+
srcset={project.imgs.webp.src}
70
+
type="image/webp"
71
+
/>
72
+
<img
73
+
src={project.imgs.jpg.src}
74
+
alt={project.name}
75
+
/>
76
+
</picture>
77
+
<h3>
78
+
<a href={`/projects/${project.slug}`}>
79
+
{project.name}
80
+
</a>
81
+
</h3>
82
+
<p>{project.description}</p>
83
+
<ul>
84
+
{project.tags.map((tag: string) => (
85
+
<li class="tag">{tag}</li>
86
+
))}
87
+
</ul>
88
+
</div>
89
+
))
90
+
}
51
91
</section>
52
92
</article>
53
93
</Layout>