add design

components.d.ts

@@ -4,6 +4,9 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AboutMe: typeof import('./src/components/presentation/AboutMe.vue')['default']
+    AppHeader: typeof import('./src/components/AppHeader.vue')['default']
+    BlogPosts: typeof import('./src/components/posts/BlogPosts.vue')['default']
     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']

src/assets/base.scss

@@ -20,7 +20,7 @@
   --vt-c-text-light-1: var(--vt-c-indigo);
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.9);
 }
 
 /* semantic color variables for this project */
@@ -36,9 +36,10 @@
   --color-text: var(--vt-c-text-light-1);
 
   --section-gap: 160px;
+  --primary: hsl(229, 90%, 28%);
 }
 
-/* @media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
   :root {
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
@@ -49,8 +50,9 @@
 
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
+    --primary: hsl(229, 100%, 80%);
   }
-} */
+}
 
 *,
 *::before,
@@ -69,8 +71,22 @@ body {
   line-height: 1.6;
   font-family: "Fenix", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
     serif;
-  font-size: 15px;
+  font-size: 22px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+a {
+  color: var(--color-text);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-variant: small-caps;
+  color: var(--primary);
+}

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>

src/layouts/default.vue

@@ -1,38 +1,10 @@
 <template>
   <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>
-        </div>
-      </div>
-    </header>
-
+    <app-header />
     <slot />
   </div>
 </template>
 
-<style>
-@import "@/assets/base.css";
-
-/* #nav a.router-link-exact-active {
-  background-color: var(--color-text);
-} */
-
-#nav a {
-  display: inline-block;
-  padding: 0 1rem;
-}
-
-.default {
-  padding: 0 1rem;
-}
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-}
+<style lang="scss">
+@import "@/assets/base";
 </style>

src/layouts/post.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="post">
+    <app-header />
+
+    <article id="main-article">
+      <slot />
+    </article>
+  </div>
+</template>
+
+<style lang="scss">
+@import "@/assets/base";
+
+article#main-article {
+  max-width: 650px;
+  margin: auto;
+}
+</style>

src/pages/posts/production-flow.mdx

@@ -1,5 +1,6 @@
 ---
 title: An introduction to production flow
+layout: post
 ---
 
 # {title}