add design

src/components/AppHeader.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts"></script>
+
+<template>
+  <header class="app-header">
+    <div class="wrapper">
+      <router-link to="/" class="logo">
+        <julien-calixte size="big" />
+      </router-link>
+    </div>
+  </header>
+</template>
+
+<style scoped lang="scss">
+/* #nav a.router-link-exact-active {
+  background-color: var(--color-text);
+} */
+
+.app-header {
+  padding: 0 1rem;
+
+  .wrapper {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+
+    .logo {
+      text-decoration: none;
+    }
+  }
+}
+</style>

src/components/Welcome.vue

@@ -1,23 +1,16 @@
-<script setup lang="ts">
-import { usePosts } from "@/hooks/usePosts.hook";
-
-const posts = usePosts();
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <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
-    dev/technical architecture for 1 year now.
-  </p>
+  <section class="welcome">
+    <about-me />
 
-  <section>
-    <h2>My blog posts</h2>
-    <ul>
-      <li v-for="post in posts" :key="post.href">
-        <a :href="post.href">{{ post.title }}</a>
-      </li>
-    </ul>
+    <blog-posts />
   </section>
 </template>
+
+<style scoped lang="scss">
+.welcome {
+  max-width: 800px;
+  margin: auto;
+}
+</style>

src/components/core/JulienCalixte.vue

@@ -22,6 +22,7 @@ const style = `font-size: ${fontSize[props.size]}`;
 @import url("https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
 
 .julien-calixte {
+  font-variant: normal;
   font-family: "Meow Script", cursive;
 }
 </style>

src/components/posts/BlogPosts.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { usePosts } from "@/hooks/usePosts.hook";
+
+const posts = usePosts();
+</script>
+
+<template>
+  <div class="blog-posts">
+    <h2>Last posts</h2>
+    <div v-for="post in posts" :key="post.href">
+      <h3>
+        <a :href="post.href">{{ post.title }}</a>
+      </h3>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.blog-posts {
+  h3 {
+    font-weight: bold;
+  }
+}
+</style>

src/components/presentation/AboutMe.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Hi! I'm <julien-calixte />. A mobile & web developer.</h1>
+  <section class="about-me">
+    <p>I am into building things with code.</p>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.about-me {
+}
+</style>