finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: add content to index page
+105
-1
+59
src/assets/styles/index.css
+59
src/assets/styles/index.css
···
1
+
section.container {
2
+
--container-color: var(--rose-400);
3
+
4
+
display: grid;
5
+
grid-template-columns: auto auto 1fr;
6
+
grid-template-areas:
7
+
"aside h3 intro"
8
+
". body body";
9
+
align-items: center;
10
+
justify-content: start;
11
+
padding: calc(var(--spacing) * 2) var(--spacing) calc(var(--spacing) * 3);
12
+
grid-column-gap: var(--spacing);
13
+
14
+
@media screen and (max-width: 768px) {
15
+
grid-template-areas:
16
+
"aside h3"
17
+
". intro"
18
+
". body";
19
+
}
20
+
21
+
& > aside {
22
+
grid-area: aside;
23
+
margin-inline: 1.5rem;
24
+
font-size: 3rem;
25
+
font-weight: bold;
26
+
27
+
@media screen and (max-width: 768px) {
28
+
font-size: 2rem;
29
+
margin-inline: 0.5rem;
30
+
}
31
+
}
32
+
33
+
& > h3 {
34
+
grid-area: h3;
35
+
margin: 0;
36
+
margin-inline-end: 2rem;
37
+
font-family: "Spagetty";
38
+
font-size: 2rem;
39
+
font-weight: bold;
40
+
}
41
+
42
+
& > p {
43
+
grid-area: intro;
44
+
margin: 0;
45
+
font-size: 1.2rem;
46
+
}
47
+
48
+
& > div {
49
+
grid-area: body;
50
+
display: flex;
51
+
flex-direction: column;
52
+
gap: var(--spacing);
53
+
}
54
+
55
+
p {
56
+
margin: 0;
57
+
font-size: 1.2rem;
58
+
}
59
+
}
+46
-1
src/pages/fr/index.astro
+46
-1
src/pages/fr/index.astro
···
1
1
---
2
+
import "@/assets/styles/index.css";
2
3
import Layout from "@/layouts/Layout.astro";
3
4
---
4
5
5
-
<Layout> Bonjour </Layout>
6
+
<Layout>
7
+
<section class="container">
8
+
<aside>👋</aside>
9
+
<h3>Bonjour!</h3>
10
+
<p>Je suis un étudiant en informatique 🇫🇷 Français.</p>
11
+
<div>
12
+
<p>
13
+
Je parle nativement 🇬🇧 <strong> Anglais </strong> et 🇫🇷 <strong>
14
+
Français
15
+
</strong>.
16
+
</p>
17
+
<p>
18
+
Some of my interests include:
19
+
<strong>
20
+
web development, infosec, cybersecurity and systems
21
+
administration.
22
+
</strong>
23
+
</p>
24
+
</div>
25
+
</section>
26
+
27
+
<section class="container">
28
+
<aside>💻</aside>
29
+
<h3>Projets</h3>
30
+
<div>
31
+
<p>
32
+
I'm currently working on Karr, a federated carpooling platform
33
+
for businesses. You can find my other most interesting projects
34
+
just next door. I regularly take part in CTFs and other
35
+
cybersecurity events & conferences. Feel free to use my contact
36
+
details if you wish to get in touch. I also love playing the
37
+
drums and all sorts of instruments.
38
+
</p>
39
+
</div>
40
+
</section>
41
+
42
+
<!-- {
43
+
Array.from({ length: 10 }, (_, i) => (
44
+
<div key={i}>
45
+
<h2>Project {i + 1}</h2>
46
+
<p>Description of project {i + 1}</p>
47
+
</div>
48
+
))
49
+
} -->
50
+
</Layout>