finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: add content
+156
-72
+68
-6
src/assets/styles/index.css
+68
-6
src/assets/styles/index.css
···
1
+
p {
2
+
margin: 0;
3
+
font-size: 1.2rem;
4
+
}
5
+
6
+
article {
7
+
--spacing: 1.5rem;
8
+
9
+
display: grid;
10
+
grid-template-columns: repeat(2, 1fr);
11
+
grid-template-areas:
12
+
"content-intro content-intro"
13
+
"content-languages content-blog"
14
+
"content-projects content-projects";
15
+
gap: var(--spacing);
16
+
}
17
+
1
18
section.container {
2
-
--container-color: var(--rose-400);
19
+
&.content-intro {
20
+
--container-color: var(--rose-400);
21
+
grid-area: content-intro;
22
+
}
23
+
24
+
&.content-languages {
25
+
--container-color: var(--sky-400);
3
26
27
+
grid-area: content-languages;
28
+
display: flex;
29
+
align-items: center;
30
+
justify-content: start;
31
+
gap: 1rem;
32
+
33
+
@media screen and (max-width: 768px) {
34
+
flex-direction: column;
35
+
}
36
+
}
37
+
38
+
&.content-blog {
39
+
--container-color: var(--yellow-400);
40
+
41
+
grid-area: content-blog;
42
+
43
+
a {
44
+
display: flex;
45
+
align-items: center;
46
+
justify-content: start;
47
+
gap: 1rem;
48
+
text-decoration: none;
49
+
margin: 0;
50
+
font-size: 1.2rem;
51
+
52
+
@media screen and (max-width: 768px) {
53
+
flex-direction: column;
54
+
}
55
+
56
+
svg {
57
+
width: 1.5rem;
58
+
height: 1.5rem;
59
+
}
60
+
}
61
+
}
62
+
63
+
&.content-projects {
64
+
--container-color: var(--fuchsia-400);
65
+
66
+
grid-area: content-projects;
67
+
}
68
+
}
69
+
70
+
section.container.layout {
4
71
display: grid;
5
72
grid-template-columns: auto auto 1fr;
6
73
grid-template-areas:
···
50
117
display: flex;
51
118
flex-direction: column;
52
119
gap: var(--spacing);
53
-
}
54
-
55
-
p {
56
-
margin: 0;
57
-
font-size: 1.2rem;
58
120
}
59
121
}
+1
-3
src/layouts/Layout.astro
+1
-3
src/layouts/Layout.astro
+43
-31
src/pages/en/index.astro
+43
-31
src/pages/en/index.astro
···
1
1
---
2
+
import Layout from "@/layouts/Layout.astro";
2
3
import "@/assets/styles/index.css";
3
-
import Layout from "@/layouts/Layout.astro";
4
+
import { Icon } from "astro-icon/components";
4
5
---
5
6
6
7
<Layout>
7
-
<section class="container">
8
-
<aside>👋</aside>
9
-
<h3>Hiya!</h3>
10
-
<p>I'm a computer science student 🇫🇷 French.</p>
11
-
<div>
8
+
<article>
9
+
<section class="container layout content-intro">
10
+
<aside>👋</aside>
11
+
<h3>Hiya!</h3>
12
+
<p>I'm a 🇫🇷 French computer science student.</p>
13
+
<div>
14
+
<p>I love building robust and performant websites.</p>
15
+
</div>
16
+
</section>
17
+
18
+
<section class="container content-languages">
19
+
<Icon name="pixel:globe" />
12
20
<p>
13
-
I natively speak 🇬🇧 <strong> English </strong> and 🇫🇷 <strong>
21
+
I'm a native 🇬🇧 <strong> English </strong> and 🇫🇷 <strong>
14
22
French
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
+
</strong> speaker.
23
24
</p>
24
-
</div>
25
-
</section>
25
+
</section>
26
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>
27
+
<section class="container content-blog">
28
+
<a
29
+
href="https://finxol.io"
30
+
target="_blank"
31
+
rel="noopener noreferrer"
32
+
>
33
+
<Icon name="pixel:external-link" class="external-link" />
34
+
<span> Check out my blog for some technical write-ups! </span>
35
+
</a>
36
+
</section>
37
+
38
+
<section class="container layout content-projects">
39
+
<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>
51
+
</section>
52
+
</article>
41
53
</Layout>
+44
-32
src/pages/fr/index.astro
+44
-32
src/pages/fr/index.astro
···
1
1
---
2
+
import Layout from "@/layouts/Layout.astro";
2
3
import "@/assets/styles/index.css";
3
-
import Layout from "@/layouts/Layout.astro";
4
+
import { Icon } from "astro-icon/components";
4
5
---
5
6
6
7
<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>
8
+
<article>
9
+
<section class="container layout content-intro">
10
+
<aside>👋</aside>
11
+
<h3>Bonjour!</h3>
12
+
<p>Je suis un étudiant en informatique 🇫🇷 Français.</p>
13
+
<div>
14
+
<p>J'adore construire des sites web robustes et performants.</p>
15
+
</div>
16
+
</section>
26
17
27
-
<section class="container">
28
-
<aside>💻</aside>
29
-
<h3>Projets</h3>
30
-
<div>
18
+
<section class="container content-languages">
19
+
<Icon name="pixel:globe" />
31
20
<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.
21
+
Je suis natif en 🇬🇧 <strong>Anglais</strong> et 🇫🇷 <strong
22
+
>Français</strong
23
+
>.
38
24
</p>
39
-
</div>
40
-
</section>
25
+
</section>
26
+
27
+
<section class="container content-blog">
28
+
<a
29
+
href="https://finxol.io"
30
+
target="_blank"
31
+
rel="noopener noreferrer"
32
+
>
33
+
<Icon name="pixel:external-link" class="external-link" />
34
+
<span> Voir mon blog pour des articles techniques ! </span>
35
+
</a>
36
+
</section>
37
+
38
+
<section class="container layout content-projects">
39
+
<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>
51
+
</section>
52
+
</article>
41
53
</Layout>