finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: add blog to project list
+162
-7
src/assets/img/finxol_blog_home.jpg
src/assets/img/finxol_blog_home.jpg
This is a binary file and will not be displayed.
src/assets/img/finxol_blog_home.webp
src/assets/img/finxol_blog_home.webp
This is a binary file and will not be displayed.
+1
-1
src/assets/styles/index.css
+1
-1
src/assets/styles/index.css
+20
-2
src/pages/en/index.astro
+20
-2
src/pages/en/index.astro
···
5
5
6
6
import karrJpg from "@/assets/img/karr_demo.jpg";
7
7
import karrWebp from "@/assets/img/karr_demo.webp";
8
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
9
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
8
10
9
11
const projects = [
10
12
{
···
16
18
webp: karrWebp,
17
19
},
18
20
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
21
+
},
22
+
{
23
+
name: "Technical Blog",
24
+
slug: "blog",
25
+
description: "Technical blog where I write articles about technology",
26
+
imgs: {
27
+
jpg: blogJpg,
28
+
webp: blogWebp,
29
+
},
30
+
tags: ["Nuxt.js", "Markdown"],
31
+
colour: "--yellow-300",
19
32
},
20
33
];
21
34
---
···
63
76
<section class="container content-projects">
64
77
{
65
78
projects.map((project) => (
66
-
<div class="project">
67
-
<picture style="view-transition-name: karr-img">
79
+
<div
80
+
class="project"
81
+
{...(project.colour && {
82
+
style: `--container-color: var(${project.colour});`,
83
+
})}
84
+
>
85
+
<picture style="view-transition-name: project-img">
68
86
<source
69
87
srcset={project.imgs.webp.src}
70
88
type="image/webp"
+59
src/pages/en/projects/blog.astro
+59
src/pages/en/projects/blog.astro
···
1
+
---
2
+
import Layout from "@/layouts/Layout.astro";
3
+
import "@/assets/styles/projects/karr.css";
4
+
import { Icon } from "astro-icon/components";
5
+
6
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
7
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
8
+
---
9
+
10
+
<Layout>
11
+
<article>
12
+
<a href="/">
13
+
<Icon name="pixel:arrow-alt-circle-left" />
14
+
</a>
15
+
16
+
<h2>Blog</h2>
17
+
18
+
<p class="subtitle">Personal technical blog</p>
19
+
20
+
<div class="boxes">
21
+
<picture style="view-transition-name: project-img">
22
+
<source srcset={blogWebp.src} type="image/webp" />
23
+
<img src={blogJpg.src} alt="Blog" />
24
+
</picture>
25
+
26
+
<div class="container">
27
+
<Icon name="tabler:calendar-smile" />
28
+
<span>
29
+
Since {
30
+
new Date("24 April 2022").toLocaleDateString("en-GB")
31
+
}
32
+
</span>
33
+
</div>
34
+
35
+
<div class="container">
36
+
<Icon name="tabler:brand-deno" />
37
+
<span> Deno </span>
38
+
</div>
39
+
40
+
<div class="container">
41
+
<Icon name="tabler:brand-git" />
42
+
<a
43
+
href="https://tangled.org/finxol.io/blog"
44
+
class="cover"
45
+
target="_blank"
46
+
rel="noopener noreferrer"
47
+
>
48
+
Github repo
49
+
<Icon name="pixel:external-link" class="external-link" />
50
+
</a>
51
+
</div>
52
+
</div>
53
+
54
+
<p class="description">
55
+
On this blog, I write about various topics, including web
56
+
development and technology.
57
+
</p>
58
+
</article>
59
+
</Layout>
+1
-1
src/pages/en/projects/karr.astro
+1
-1
src/pages/en/projects/karr.astro
···
18
18
<p class="subtitle">Federated carpool platform for companies</p>
19
19
20
20
<div class="boxes">
21
-
<picture style="view-transition-name: karr-img">
21
+
<picture style="view-transition-name: project-img">
22
22
<source srcset={karrWebp.src} type="image/webp" />
23
23
<img src={karrJpg.src} alt="Karr" />
24
24
</picture>
+21
-2
src/pages/fr/index.astro
+21
-2
src/pages/fr/index.astro
···
5
5
6
6
import karrJpg from "@/assets/img/karr_demo.jpg";
7
7
import karrWebp from "@/assets/img/karr_demo.webp";
8
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
9
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
8
10
9
11
const projects = [
10
12
{
···
16
18
webp: karrWebp,
17
19
},
18
20
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
21
+
},
22
+
{
23
+
name: "Blog Technique",
24
+
slug: "blog",
25
+
description:
26
+
"Blog personnel technique sur lequel j'écris des articles sur la technologie",
27
+
imgs: {
28
+
jpg: blogJpg,
29
+
webp: blogWebp,
30
+
},
31
+
tags: ["Nuxt.js", "Markdown"],
32
+
colour: "--yellow-300",
19
33
},
20
34
];
21
35
---
···
63
77
<section class="container content-projects">
64
78
{
65
79
projects.map((project) => (
66
-
<div class="project">
67
-
<picture style="view-transition-name: karr-img">
80
+
<div
81
+
class="project"
82
+
{...(project.colour && {
83
+
style: `--container-color: var(${project.colour});`,
84
+
})}
85
+
>
86
+
<picture style="view-transition-name: project-img">
68
87
<source
69
88
srcset={project.imgs.webp.src}
70
89
type="image/webp"
+59
src/pages/fr/projects/blog.astro
+59
src/pages/fr/projects/blog.astro
···
1
+
---
2
+
import Layout from "@/layouts/Layout.astro";
3
+
import "@/assets/styles/projects/karr.css";
4
+
import { Icon } from "astro-icon/components";
5
+
6
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
7
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
8
+
---
9
+
10
+
<Layout>
11
+
<article>
12
+
<a href="/">
13
+
<Icon name="pixel:arrow-alt-circle-left" />
14
+
</a>
15
+
16
+
<h2>Blog</h2>
17
+
18
+
<p class="subtitle">Blog technique personnel</p>
19
+
20
+
<div class="boxes">
21
+
<picture style="view-transition-name: project-img">
22
+
<source srcset={blogWebp.src} type="image/webp" />
23
+
<img src={blogJpg.src} alt="Blog" />
24
+
</picture>
25
+
26
+
<div class="container">
27
+
<Icon name="tabler:calendar-smile" />
28
+
<span>
29
+
Depuis le {
30
+
new Date("24 April 2022").toLocaleDateString("fr-FR")
31
+
}
32
+
</span>
33
+
</div>
34
+
35
+
<div class="container">
36
+
<Icon name="tabler:brand-deno" />
37
+
<span> Deno </span>
38
+
</div>
39
+
40
+
<div class="container">
41
+
<Icon name="tabler:brand-git" />
42
+
<a
43
+
href="https://tangled.org/finxol.io/blog"
44
+
class="cover"
45
+
target="_blank"
46
+
rel="noopener noreferrer"
47
+
>
48
+
Github repo
49
+
<Icon name="pixel:external-link" class="external-link" />
50
+
</a>
51
+
</div>
52
+
</div>
53
+
54
+
<p class="description">
55
+
Sur ce blog, j'écris sur des sujets variés, notamment sur le
56
+
développement web, et la technologie.
57
+
</p>
58
+
</article>
59
+
</Layout>
+1
-1
src/pages/fr/projects/karr.astro
+1
-1
src/pages/fr/projects/karr.astro