Personal site
staging.colinozanne.co.uk
finxol.io
portfolio
astro
1---
2import Layout from "@/layouts/Layout.astro";
3import "@/assets/styles/index.css";
4import { Icon } from "astro-icon/components";
5
6import karrJpg from "@/assets/img/karr_demo.jpg";
7import karrWebp from "@/assets/img/karr_demo.webp";
8import blogJpg from "@/assets/img/finxol_blog_home.jpg";
9import blogWebp from "@/assets/img/finxol_blog_home.webp";
10
11const projects = [
12 {
13 name: "Karr",
14 slug: "karr",
15 description: "Federated carpool platform for businesses",
16 imgs: {
17 jpg: karrJpg,
18 webp: karrWebp,
19 },
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",
32 },
33];
34---
35
36<Layout>
37 <article>
38 <section class="container layout content-intro">
39 <aside>👋</aside>
40 <h3>Hiya!</h3>
41 <p>I'm a 🇫🇷 French computer science student.</p>
42 <div>
43 <p>I love building robust and performant websites.</p>
44 </div>
45 </section>
46
47 <section class="container content-languages">
48 <Icon name="pixel:globe" />
49 <p>
50 I'm a native 🇬🇧 <strong> English </strong> and 🇫🇷 <strong>
51 French
52 </strong> speaker.
53 </p>
54 </section>
55
56 <section class="container content-blog">
57 <a
58 href="https://finxol.io"
59 target="_blank"
60 rel="noopener noreferrer"
61 >
62 <Icon name="pixel:external-link" class="external-link" />
63 <span> Check out my blog for some technical write-ups! </span>
64 </a>
65 </section>
66
67 <section class="title-projects">
68 <aside>💻</aside>
69 <h3>Projects</h3>
70 <p>
71 Here are my most interesting projects. Click through to get more
72 details!
73 </p>
74 </section>
75
76 <section class="container content-projects">
77 {
78 projects.map((project) => (
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">
86 <source
87 srcset={project.imgs.webp.src}
88 type="image/webp"
89 />
90 <img
91 src={project.imgs.jpg.src}
92 alt={project.name}
93 />
94 </picture>
95 <a href={`/projects/${project.slug}`} class="cover">
96 {project.name}
97 </a>
98 <p>{project.description}</p>
99 <ul>
100 {project.tags.map((tag: string) => (
101 <li class="tag">{tag}</li>
102 ))}
103 </ul>
104 </div>
105 ))
106 }
107 </section>
108 </article>
109</Layout>