commit f57dc91b19cb1b25a3c0d1a46bf80afa0c967f86 · finxol.io/portfolio

+4 -2

astro.config.mjs

···

       12
       12
        
           adapter: deno(),

     

       13
       13
        
           integrations: [preact(), icon()],

     

       14
       14
        
           i18n: {

     

       15
       15
       -
               locales: ["en", "fr"],

     

       16
       16
       -
               defaultLocale: "fr",

     

       15
       15
       +
               locales: /** @type {string[]} */ (

     

       16
       16
       +
                   /** @type {unknown} */ (config.locales)

     

       17
       17
       +
               ),

     

       18
       18
       +
               defaultLocale: config.defaultLocale,

     

       17
       19
        
               routing: {

     

       18
       20
        
                   prefixDefaultLocale: false,

     

       19
       21
        
               },

+7 -24

src/components/pages/index.astro

···

       2
       2
        
       import Layout from "@/layouts/Layout.astro";

     

       3
       3
        
       import "@/assets/styles/index.css";

     

       4
       4
        
       import { Icon } from "astro-icon/components";

     

       5
       5
       -
       import { projects as projectsMetadata } from "@/data/projects";

     

       5
       5
       +
       import { projects } from "@/data/projects";

     

       6
       6
       +
       import { locale } from "@/hooks/useLocale.astro";

     

       6
       7
        
       

     

       7
       8
        
       interface Props {

     

       8
       9
        
           content: {

     
···

       19
       20
        
                   title: string;

     

       20
       21
        
                   description: string;

     

       21
       22
        
               };

     

       22
       22
       -
               projects: Array<{

     

       23
       23
       -
                   id: string;

     

       24
       24
       -
                   name: string;

     

       25
       25
       -
                   description: string;

     

       26
       26
       -
               }>;

     

       27
       23
        
           };

     

       28
       24
        
       }

     

       29
       25
        
       

     

       30
       26
        
       const {

     

       31
       31
       -
           content: { intro, languages, blogSection, projectsSection, projects },

     

       27
       27
       +
           content: { intro, languages, blogSection, projectsSection },

     

       32
       28
        
       } = Astro.props;

     

       33
       33
       -
       

     

       34
       34
       -
       // Merge project descriptions with metadata

     

       35
       35
       -
       const projectsWithMetadata = projects.map((proj) => {

     

       36
       36
       -
           const metadata = projectsMetadata.find((p) => p.id === proj.id);

     

       37
       37
       -
           if (!metadata) {

     

       38
       38
       -
               throw new Error(`Project metadata not found for id: ${proj.id}`);

     

       39
       39
       -
           }

     

       40
       40
       -
           return {

     

       41
       41
       -
               ...metadata,

     

       42
       42
       -
               name: proj.name,

     

       43
       43
       -
               description: proj.description,

     

       44
       44
       -
           };

     

       45
       45
       -
       });

     

       46
       29
        
       ---

     

       47
       30
        
       

     

       48
       31
        
       <Layout>

     
···

       82
       65
        
       

     

       83
       66
        
               <section class="container content-projects">

     

       84
       67
        
                   {

     

       85
       85
       -
                       projectsWithMetadata.map((project) => (

     

       68
       68
       +
                       projects.map((project) => (

     

       86
       69
        
                           <div

     

       87
       70
        
                               class="project"

     

       88
       71
        
                               {...(project.colour && {

     
···

       96
       79
        
                                   />

     

       97
       80
        
                                   <img

     

       98
       81
        
                                       src={project.imgs.jpg.src}

     

       99
       99
       -
                                       alt={project.name}

     

       82
       82
       +
                                       alt={project.title[locale]}

     

       100
       83
        
                                   />

     

       101
       84
        
                               </picture>

     

       102
       85
        
                               <a href={`/projects/${project.slug}`} class="cover">

     

       103
       103
       -
                                   {project.name}

     

       86
       86
       +
                                   {project.title[locale]}

     

       104
       87
        
                               </a>

     

       105
       105
       -
                               <p>{project.description}</p>

     

       88
       88
       +
                               <p>{project.description[locale]}</p>

     

       106
       89
        
                               <ul>

     

       107
       90
        
                                   {project.tags.map((tag: string) => (

     

       108
       91
        
                                       <li class="tag">{tag}</li>

+2 -2

src/components/pages/project.astro

···

       18
       18
        
       

     

       19
       19
        
       const { content } = Astro.props;

     

       20
       20
        
       

     

       21
       21
       -
       const project = projects.find((p) => p.id === content.projectId);

     

       21
       21
       +
       const project = projects.find((p) => p.slug === content.projectId);

     

       22
       22
        
       if (!project) {

     

       23
       23
        
           throw new Error(`Project not found: ${content.projectId}`);

     

       24
       24
        
       }

     
···

       44
       44
        
                   </picture>

     

       45
       45
        
       

     

       46
       46
        
                   <div class="container">

     

       47
       47
       -
                       <Icon name={project.dateIcon} />

     

       47
       47
       +
                       <Icon name="tabler:brand-git" />

     

       48
       48
        
                       <span>

     

       49
       49
        
                           {content.datePrefix}

     

       50
       50
        
                           {project.startDate.toLocaleDateString(locale)}

+1

src/config.ts

···

       1
       1
        
       export const config = {

     

       2
       2
        
         defaultLocale: "fr",

     

       3
       3
       +
         locales: ["fr", "en"],

     

       3
       4
        
         domains: {

     

       4
       5
        
           fr: "https://next.colinozanne.fr",

     

       5
       6
        
           en: "https://next.colinozanne.co.uk",

+24 -5

src/data/projects.ts

···

       4
       4
        
       import karrWebp from "@/assets/img/karr_demo.webp";

     

       5
       5
        
       import blogJpg from "@/assets/img/finxol_blog_home.jpg";

     

       6
       6
        
       import blogWebp from "@/assets/img/finxol_blog_home.webp";

     

       7
       7
       +
       import recaroPitchJpg from "@/assets/img/viscircle_recaro_pitch.jpg";

     

       8
       8
       +
       import recaroPitchWebp from "@/assets/img/viscircle_recaro_pitch.webp";

     

       9
       9
       +
       import { config } from "@/config.ts";

     

       10
       10
       +
       

     

       11
       11
       +
       type Localised = Record<(typeof config.locales)[number], string>;

     

       7
       12
        
       

     

       8
       13
        
       export interface ProjectMetadata {

     

       9
       9
       -
         id: string;

     

       10
       14
        
         slug: string;

     

       15
       15
       +
         title: Localised;

     

       16
       16
       +
         description: Localised;

     

       11
       17
        
         imgs: {

     

       12
       18
        
           jpg: ImageMetadata;

     

       13
       19
        
           webp: ImageMetadata;

     
···

       15
       21
        
         tags: string[];

     

       16
       22
        
         colour?: string;

     

       17
       23
        
         startDate: Date;

     

       18
       18
       -
         dateIcon: string;

     

       19
       24
        
         runtime: string;

     

       20
       25
        
         runtimeIcon: string;

     

       21
       26
        
         repoUrl: string;

     
···

       24
       29
        
       

     

       25
       30
        
       export const projects: ProjectMetadata[] = [

     

       26
       31
        
         {

     

       27
       27
       -
           id: "karr",

     

       28
       32
        
           slug: "karr",

     

       33
       33
       +
           title: {

     

       34
       34
       +
             fr: "Karr",

     

       35
       35
       +
             en: "Karr",

     

       36
       36
       +
           },

     

       37
       37
       +
           description: {

     

       38
       38
       +
             fr: "Plateforme de covoiturage fédérée pour les entreprises",

     

       39
       39
       +
             en: "Federated carpool platform for businesses",

     

       40
       40
       +
           },

     

       29
       41
        
           imgs: {

     

       30
       42
        
             jpg: karrJpg,

     

       31
       43
        
             webp: karrWebp,

     

       32
       44
        
           },

     

       33
       45
        
           tags: ["Next.js", "Hono", "OpenAuth", "CI"],

     

       34
       46
        
           startDate: new Date("10 October 2024"),

     

       35
       35
       -
           dateIcon: "tabler:brand-git",

     

       36
       47
        
           runtime: "NodeJS",

     

       37
       48
        
           runtimeIcon: "tabler:brand-nodejs",

     

       38
       49
        
           repoUrl: "https://github.com/karr-mobi/karr",

     

       39
       50
        
           repoIcon: "tabler:brand-github",

     

       40
       51
        
         },

     

       41
       52
        
         {

     

       42
       42
       -
           id: "blog",

     

       43
       53
        
           slug: "blog",

     

       54
       54
       +
           title: {

     

       55
       55
       +
             fr: "Blog Technique",

     

       56
       56
       +
             en: "Technical Blog",

     

       57
       57
       +
           },

     

       58
       58
       +
           description: {

     

       59
       59
       +
             fr:

     

       60
       60
       +
               "Blog personnel technique sur lequel j'écris des articles sur la technologie",

     

       61
       61
       +
             en: "Technical blog where I write articles about technology",

     

       62
       62
       +
           },

     

       44
       63
        
           imgs: {

     

       45
       64
        
             jpg: blogJpg,

     

       46
       65
        
             webp: blogWebp,

+7

src/hooks/useLocale.astro

···

       1
       1
       +
       ---

     

       2
       2
       +
       import { config } from "@/config";

     

       3
       3
       +
       

     

       4
       4
       +
       export type Locale = (typeof config.locales)[number];

     

       5
       5
       +
       

     

       6
       6
       +
       export const locale = (Astro.currentLocale as Locale) || config.defaultLocale;

     

       7
       7
       +
       ---