avancing

src/components/core/JulienCalixte.vue

@@ -3,19 +3,25 @@ const fontSize = {
   small: "12px",
   normal: "inherit",
   big: "44px",
-};
-
-interface Props {
-  size?: keyof typeof fontSize;
 }
 
-const props = withDefaults(defineProps<Props>(), { size: "normal" });
+interface Props {
+  version?: "compact" | "full"
+  size?: keyof typeof fontSize
+}
 
-const style = `font-size: ${fontSize[props.size]}`;
+const props = withDefaults(defineProps<Props>(), {
+  version: "full",
+  size: "normal",
+})
+
+const style = `font-size: ${fontSize[props.size]}`
 </script>
 
 <template>
-  <span class="julien-calixte" :style="style">Julien Calixte</span>
+  <span class="julien-calixte" :style="style"
+    >Julien<template v-if="version === 'full'"> Calixte</template></span
+  >
 </template>
 
 <style scoped lang="scss">

src/components/presentation/AboutMe.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1>Hi! I'm <julien-calixte />. A mobile & web developer.</h1>
+  <h1>
+    Hi! I'm <julien-calixte version="compact" />. A mobile & web developer.
+  </h1>
   <section class="about-me">
     <p>I am into building things with code.</p>
   </section>