From 45a575aa7353928e6767918b62768b6348649d45 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 5 Mar 2022 18:15:48 +0100
Subject: [PATCH] create a JulienCalixte's logo

---
 components.d.ts                       |  1 +
 src/components/Welcome.vue            |  2 +-
 src/components/core/JulienCalixte.vue | 27 +++++++++++++++++++++++++++
 src/layouts/default.vue               |  7 +++++++
 4 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/core/JulienCalixte.vue

diff --git a/components.d.ts b/components.d.ts
index d10d98b..6c7e81d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -5,6 +5,7 @@
 declare module 'vue' {
   export interface GlobalComponents {
     Island: typeof import('./node_modules/.pnpm/iles@0.7.32_sass@1.49.9/node_modules/iles/dist/client/app/components/Island.vue')['default']
+    JulienCalixte: typeof import('./src/components/core/JulienCalixte.vue')['default']
     ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
     Welcome: typeof import('./src/components/Welcome.vue')['default']
   }
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index 449338e..8eff128 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -5,7 +5,7 @@ const posts = usePosts();
 </script>
 
 <template>
-  <h1>Hi! I'm Julien. A mobile & web developer.</h1>
+  <h1>Hi! I'm <julien-calixte />. A mobile & web developer.</h1>
   <p>
     I am into building things with code. I love creating offline first
     Progressive Web Apps. I've been doing programmation for 5 years and lead
diff --git a/src/components/core/JulienCalixte.vue b/src/components/core/JulienCalixte.vue
new file mode 100644
index 0000000..af1d1f4
--- /dev/null
+++ b/src/components/core/JulienCalixte.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const fontSize = {
+  small: "12px",
+  normal: "inherit",
+  big: "44px",
+};
+
+interface Props {
+  size?: keyof typeof fontSize;
+}
+
+const props = withDefaults(defineProps<Props>(), { size: "normal" });
+
+const style = `font-size: ${fontSize[props.size]}`;
+</script>
+
+<template>
+  <span class="julien-calixte" :style="style">Julien Calixte</span>
+</template>
+
+<style scoped lang="scss">
+@import url("https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
+
+.julien-calixte {
+  font-family: "Meow Script", cursive;
+}
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index d69aa91..ef528b4 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -2,6 +2,7 @@
   <div class="default">
     <header>
       <div class="wrapper">
+        <julien-calixte size="big" />
         <div id="nav">
           <router-link to="/">Home</router-link>
           <router-link to="/about">About</router-link>
@@ -28,4 +29,10 @@
 .default {
   padding: 0 1rem;
 }
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
 </style>