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>

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>