create a JulienCalixte's logo

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

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>