feat: add blog to project list

finxol.io a29979db bc01179d

verified
Changed files
+162 -7
src
src/assets/img/finxol_blog_home.jpg

This is a binary file and will not be displayed.

src/assets/img/finxol_blog_home.webp

This is a binary file and will not be displayed.

+1 -1
src/assets/styles/index.css
···
overflow: hidden;
border-radius: var(--radius);
-
background-color: var(--teal-300);
+
background-color: var(--container-color, var(--teal-300));
& > a {
grid-area: title;
+20 -2
src/pages/en/index.astro
···
import karrJpg from "@/assets/img/karr_demo.jpg";
import karrWebp from "@/assets/img/karr_demo.webp";
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
const projects = [
{
···
webp: karrWebp,
},
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
+
},
+
{
+
name: "Technical Blog",
+
slug: "blog",
+
description: "Technical blog where I write articles about technology",
+
imgs: {
+
jpg: blogJpg,
+
webp: blogWebp,
+
},
+
tags: ["Nuxt.js", "Markdown"],
+
colour: "--yellow-300",
},
];
---
···
<section class="container content-projects">
{
projects.map((project) => (
-
<div class="project">
-
<picture style="view-transition-name: karr-img">
+
<div
+
class="project"
+
{...(project.colour && {
+
style: `--container-color: var(${project.colour});`,
+
})}
+
>
+
<picture style="view-transition-name: project-img">
<source
srcset={project.imgs.webp.src}
type="image/webp"
+59
src/pages/en/projects/blog.astro
···
+
---
+
import Layout from "@/layouts/Layout.astro";
+
import "@/assets/styles/projects/karr.css";
+
import { Icon } from "astro-icon/components";
+
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
+
---
+
+
<Layout>
+
<article>
+
<a href="/">
+
<Icon name="pixel:arrow-alt-circle-left" />
+
</a>
+
+
<h2>Blog</h2>
+
+
<p class="subtitle">Personal technical blog</p>
+
+
<div class="boxes">
+
<picture style="view-transition-name: project-img">
+
<source srcset={blogWebp.src} type="image/webp" />
+
<img src={blogJpg.src} alt="Blog" />
+
</picture>
+
+
<div class="container">
+
<Icon name="tabler:calendar-smile" />
+
<span>
+
Since {
+
new Date("24 April 2022").toLocaleDateString("en-GB")
+
}
+
</span>
+
</div>
+
+
<div class="container">
+
<Icon name="tabler:brand-deno" />
+
<span> Deno </span>
+
</div>
+
+
<div class="container">
+
<Icon name="tabler:brand-git" />
+
<a
+
href="https://tangled.org/finxol.io/blog"
+
class="cover"
+
target="_blank"
+
rel="noopener noreferrer"
+
>
+
Github repo
+
<Icon name="pixel:external-link" class="external-link" />
+
</a>
+
</div>
+
</div>
+
+
<p class="description">
+
On this blog, I write about various topics, including web
+
development and technology.
+
</p>
+
</article>
+
</Layout>
+1 -1
src/pages/en/projects/karr.astro
···
<p class="subtitle">Federated carpool platform for companies</p>
<div class="boxes">
-
<picture style="view-transition-name: karr-img">
+
<picture style="view-transition-name: project-img">
<source srcset={karrWebp.src} type="image/webp" />
<img src={karrJpg.src} alt="Karr" />
</picture>
+21 -2
src/pages/fr/index.astro
···
import karrJpg from "@/assets/img/karr_demo.jpg";
import karrWebp from "@/assets/img/karr_demo.webp";
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
const projects = [
{
···
webp: karrWebp,
},
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
+
},
+
{
+
name: "Blog Technique",
+
slug: "blog",
+
description:
+
"Blog personnel technique sur lequel j'écris des articles sur la technologie",
+
imgs: {
+
jpg: blogJpg,
+
webp: blogWebp,
+
},
+
tags: ["Nuxt.js", "Markdown"],
+
colour: "--yellow-300",
},
];
---
···
<section class="container content-projects">
{
projects.map((project) => (
-
<div class="project">
-
<picture style="view-transition-name: karr-img">
+
<div
+
class="project"
+
{...(project.colour && {
+
style: `--container-color: var(${project.colour});`,
+
})}
+
>
+
<picture style="view-transition-name: project-img">
<source
srcset={project.imgs.webp.src}
type="image/webp"
+59
src/pages/fr/projects/blog.astro
···
+
---
+
import Layout from "@/layouts/Layout.astro";
+
import "@/assets/styles/projects/karr.css";
+
import { Icon } from "astro-icon/components";
+
+
import blogJpg from "@/assets/img/finxol_blog_home.jpg";
+
import blogWebp from "@/assets/img/finxol_blog_home.webp";
+
---
+
+
<Layout>
+
<article>
+
<a href="/">
+
<Icon name="pixel:arrow-alt-circle-left" />
+
</a>
+
+
<h2>Blog</h2>
+
+
<p class="subtitle">Blog technique personnel</p>
+
+
<div class="boxes">
+
<picture style="view-transition-name: project-img">
+
<source srcset={blogWebp.src} type="image/webp" />
+
<img src={blogJpg.src} alt="Blog" />
+
</picture>
+
+
<div class="container">
+
<Icon name="tabler:calendar-smile" />
+
<span>
+
Depuis le {
+
new Date("24 April 2022").toLocaleDateString("fr-FR")
+
}
+
</span>
+
</div>
+
+
<div class="container">
+
<Icon name="tabler:brand-deno" />
+
<span> Deno </span>
+
</div>
+
+
<div class="container">
+
<Icon name="tabler:brand-git" />
+
<a
+
href="https://tangled.org/finxol.io/blog"
+
class="cover"
+
target="_blank"
+
rel="noopener noreferrer"
+
>
+
Github repo
+
<Icon name="pixel:external-link" class="external-link" />
+
</a>
+
</div>
+
</div>
+
+
<p class="description">
+
Sur ce blog, j'écris sur des sujets variés, notamment sur le
+
développement web, et la technologie.
+
</p>
+
</article>
+
</Layout>
+1 -1
src/pages/fr/projects/karr.astro
···
</p>
<div class="boxes">
-
<picture style="view-transition-name: karr-img">
+
<picture style="view-transition-name: project-img">
<source srcset={karrWebp.src} type="image/webp" />
<img src={karrJpg.src} alt="Karr" />
</picture>