Personal site staging.colinozanne.co.uk
portfolio astro

feat: add blog to project list

finxol.io a29979db bc01179d

verified
+162 -7
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
··· 137 137 138 138 overflow: hidden; 139 139 border-radius: var(--radius); 140 - background-color: var(--teal-300); 140 + background-color: var(--container-color, var(--teal-300)); 141 141 142 142 & > a { 143 143 grid-area: title;
+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
··· 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
··· 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
··· 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
··· 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
··· 23 23 </p> 24 24 25 25 <div class="boxes"> 26 - <picture style="view-transition-name: karr-img"> 26 + <picture style="view-transition-name: project-img"> 27 27 <source srcset={karrWebp.src} type="image/webp" /> 28 28 <img src={karrJpg.src} alt="Karr" /> 29 29 </picture>