Implement new articles and posts

README.md

@@ -15,7 +15,7 @@
 - **Content** → [Nuxt Content](https://content.nuxtjs.org/)
 - **Design System** → [NuxtUI](https://nuxtui.com/)
 - **CMS & Editing** → [Nuxt Studio](https://nuxt.studio)
-- **Langage** → [Typescript](https://www.typescriptlang.org/)
+- **Language** → [Typescript](https://www.typescriptlang.org/)
 - **Deployment** → [NuxtHub](https://hub.nuxt.com/)
 - **Styling** → [Sass](https://sass-lang.com/) & [Tailwind CSS](https://tailwindcss.com/)
 - **Package Manager** → [pnpm](https://pnpm.io/)

app/pages/portfolio/[slug].vue

@@ -39,7 +39,10 @@ function getDetails() {
   const like = likes > 1 ? t('likes.many') : t('likes.one')
   const view = views > 1 ? t('views.many') : t('views.one')
 
-  return `${likes} ${like} · ${views} ${view}`
+  return {
+    likes: `${likes} ${like}`,
+    views: `${views} ${view}`,
+  }
 }
 
 const likeCookie = useCookie<boolean>(`post:like:${route.params.slug}`, {
@@ -79,20 +82,27 @@ async function handleLike() {
       icon="i-ph-warning-duotone"
       variant="outline"
     />
-    <p class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm">
-      {{ getDetails() }}
-    </p>
+    <div class="border-l-2 pl-2 border-gray-300 dark:border-gray-700 rounded-sm flex gap-1 items-center">
+      <UIcon name="i-ph-heart-duotone" size="16" />
+      <p>{{ getDetails().likes }} </p>·
+      <UIcon name="i-ph-eye-duotone" size="16" />
+      <p>{{ getDetails().views }}</p>
+    </div>
     <div class="mt-2">
-      <div class="flex items-end gap-2 flex-wrap">
+      <div class="flex items-end gap-4 flex-wrap">
         <h1
           class="font-bold text-3xl text-black dark:text-white"
         >
           {{ post.title }}
         </h1>
-        <p class="text-sm text-neutral-500">
-          {{ useDateFormat(post.publishedAt, 'DD MMMM YYYY', { locales: currentLocale!.code ?? 'en' }).value }} ·
-          {{ post.readingTime }}min long
-        </p>
+        <div
+          class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
+        >
+          <UIcon name="ph:calendar-duotone" size="16" />
+          <p>{{ useDateFormat(post.publishedAt, 'DD MMMM YYYY').value }} </p>·
+          <UIcon name="ph:timer-duotone" size="16" />
+          <p>{{ post.readingTime }}min long</p>
+        </div>
       </div>
       <p class="mt-4 text-base">
         {{ post.description }}

app/pages/portfolio/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { type Tag, TAGS } from '~~/types'
+
 const { t, locale } = useI18n({
   useScope: 'local',
 })
@@ -19,22 +21,18 @@ const { data: writings, refresh } = await useAsyncData('all-portfolio', () => qu
 
 watch(tagFilter, async () => await refresh())
 
-const tags = [{
-  label: 'All',
-  icon: 'i-ph-books-duotone',
-}, {
-  label: 'Articles',
-  icon: 'i-ph-pencil-line-duotone',
-  tag: 'article',
-}, {
-  label: 'Projects',
-  icon: 'i-ph-briefcase-duotone',
-  tag: 'project',
-}]
+const tags: Array<{ label: string, icon: string } & Tag> = [
+  {
+    label: 'All',
+    icon: 'i-ph-books-duotone',
+    color: 'black',
+  },
+  ...TAGS,
+]
 
 function updateTag(index: number) {
   const tag = tags[index]
-  tagFilter.value = tag?.label === 'All' ? undefined : tag?.tag
+  tagFilter.value = tag?.label.toLowerCase() === 'all' ? undefined : tag?.label.toLowerCase()
 }
 </script>
 
@@ -52,49 +50,49 @@ function updateTag(index: number) {
       icon="i-ph-warning-duotone"
       variant="outline"
     />
-    <UTabs :items="tags" @change="updateTag" />
+    <UTabs :items="tags" class="hidden md:block" @change="updateTag" />
+    <UTabs :items="tags" orientation="vertical" class="md:hidden" @change="updateTag" />
     <ul class="grid grid-cols-1 md:grid-cols-2 gap-8">
-      <li
+      <NuxtLink
         v-for="(writing, id) in writings"
         :key="id"
-        class="border p-4 shadow-sm border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500  duration-300"
+        :to="writing._path"
       >
-        <NuxtLink
-          :to="writing._path"
+        <li
+          class=" h-full border p-4 shadow-sm border-neutral-200 rounded-md hover:border-neutral-500 dark:border-neutral-700 dark:hover:border-neutral-500  duration-300"
         >
           <article class="space-y-2">
-            <div class="flex gap-2 flex-col">
-              <h1
-                class="font-bold text-lg duration-300 text-black dark:text-white"
-              >
-                {{ writing.title }}
-              </h1>
-              <div
-                class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
-              >
-                <UIcon name="ph:calendar-duotone" size="16" />
-                <p>{{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} </p>·
-                <UIcon name="ph:timer-duotone" size="16" />
-                <p>{{ writing.readingTime }}min long</p>
-              </div>
+            <h1
+              class="font-bold text-lg duration-300 text-black dark:text-white"
+            >
+              {{ writing.title }}
+            </h1>
+            <div
+              class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
+            >
+              <UIcon name="ph:calendar-duotone" size="16" />
+              <p>{{ useDateFormat(writing.publishedAt, 'DD MMMM YYYY').value }} </p>·
+              <UIcon name="ph:timer-duotone" size="16" />
+              <p>{{ writing.readingTime }}min long</p>
             </div>
             <h3>
               {{ writing.description }}
             </h3>
           </article>
-          <div class="flex gap-2 mt-2 flex-wrap">
+          <div class="flex gap-2 mt-4 flex-wrap">
             <UBadge
               v-for="tag in writing.tags"
               :key="tag"
-              color="gray"
+              :color="TAGS.find(color => color.label.toLowerCase() === tag)?.color || 'black'"
               variant="soft"
-              size="md"
+              size="sm"
+              :ui="{ rounded: 'rounded-full' }"
             >
-              {{ tag }}
+              {{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
             </UBadge>
           </div>
-        </NuxtLink>
-      </li>
+        </li>
+      </NuxtLink>
     </ul>
   </main>
 </template>

content/portfolio/arthome.md

@@ -7,7 +7,7 @@ readingTime: 1
 cover: arthome/cover.png
 tags:
   - project
-  - dev
+  - web
 ---
 
 [ArtHome](https://home.arthurdanjou.fr) is a personalised page where you can create categories and tabs to have a one page with all your shortcuts on all browsers.

content/portfolio/artsite.md

@@ -0,0 +1,25 @@
+---
+slug: artsite
+title: ArtSite
+description: 🌍 My personal website, my portfolio, and my blog. 🚀
+publishedAt: 2024/06/01
+readingTime: 1
+cover: artsite/cover.png
+tags:
+  - project
+  - web
+---
+
+[**ArtSite**](https://arthurdanjou.fr) is my personal website, my portfolio, and my blog. It's a place where I can share my projects, my thoughts, and my experiences. It's also a place where I can experiment with new technologies and design ideas.
+
+## ⚒️ Tech stack
+
+- **UI** → [Vue.js](https://vuejs.org/)
+- **Framework** → [Nuxt.js](https://nuxtjs.org/)
+- **Content** → [Nuxt Content](https://content.nuxtjs.org/)
+- **Design System** → [NuxtUI](https://nuxtui.com/)
+- **CMS & Editing** → [Nuxt Studio](https://nuxt.studio)
+- **Langage** → [Typescript](https://www.typescriptlang.org/)
+- **Deployment** → [NuxtHub](https://hub.nuxt.com/)
+- **Styling** → [Sass](https://sass-lang.com/) & [Tailwind CSS](https://tailwindcss.com/)
+- **Package Manager** → [pnpm](https://pnpm.io/)

content/portfolio/how-my-website-works.md

@@ -6,7 +6,7 @@ publishedAt: 2024/06/21
 readingTime: 5
 tags:
   - article
-  - dev
+  - web
 ---
 
 My personal website is an overengineered playground where I tinker, explore new technologies, experiment with tools, break conventional rules, and satisfy my deep curiosity about web software.

content/portfolio/studies.md

@@ -0,0 +1,45 @@
+---
+slug: studies
+title: Studies projects
+description: 🎓 Studies projects - a collection of projects done during my studies.
+publishedAt: 2023/09/01
+readingTime: 1
+tags:
+  - project
+  - data
+  - python
+  - r
+---
+
+[Studies projects](https://github.com/ArthurDanjou/studies) is a collection of mathematics projects done during my studies. It includes projects in _Python_ and in _R_.
+
+The projects are divided into two main categories: _L3_ and _M1_, corresponding to the third year of the bachelor's degree and the first year of the master's degree in mathematics.
+
+File structure:
+- `L3`
+  - `Analyse Matricielle`
+  - `Analyse Multidimensionnelle`
+  - `Calculs Numériques`
+  - `Equations Différentielles`
+  - `Méthodes Numériques`
+  - `Probabilités`
+  - `Projet Numérique`
+  - `Statistiques`
+- `M1`
+  - `Data Analysis`
+  - `General Linear Models`
+  - `Monte Carlo Methods`
+  - `Portfolio Management`
+
+Made with:
+- [Python](https://www.python.org): Python is an interpreted, high-level and general-purpose programming language.
+- [R](https://www.r-project.org): R is a programming language and free software environment for statistical computing and graphics.
+- [Jupyter](https://jupyter.org): Jupyter is a free, open-source, interactive web tool known as a computational notebook, which researchers can use to combine software code, computational output, explanatory text and multimedia resources in a single document.
+- [Pandas](https://pandas.pydata.org): Pandas is a fast, powerful, flexible and easy to use open source data analysis and data manipulation library built on top of the Python programming language.
+- [Numpy](https://numpy.org): NumPy is the fundamental package for scientific computing in Python.
+- [Scipy](https://www.scipy.org): SciPy is a free and open-source Python library used for scientific and technical computing.
+- [Matplotlib](https://matplotlib.org): Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python.
+- [RMarkdown](https://rmarkdown.rstudio.com): R Markdown is an authoring framework for data science. You can use a single R Markdown file to save and execute code and generate high-quality reports that can be shared with an audience.
+- [FactoMineR](https://factominer.free.fr/): FactoMineR is an R package dedicated to multivariate exploratory data analysis.
+- [ggplot2](https://ggplot2.tidyverse.org): ggplot2 is a system for declaratively creating graphics, based on The Grammar of Graphics.
+- and my 🧠

content/portfolio/what-is-machine-learning.md

@@ -6,7 +6,7 @@ readingTime: 3
 publishedAt: 2024/11/26
 tags:
   - article
-  - ML
+  - ml
 ---
 
 ## Introduction

public/portfolio/What is Machine Learning/.gitkeep

@@ -1 +0,0 @@
-# This is a placeholder file to keep this folder in your repository.

types.ts

@@ -1,3 +1,5 @@
+import type { BadgeColor } from '#ui/types'
+
 interface WakatimeData {
   name: string
   percent: number
@@ -45,3 +47,47 @@ export const IDEs = [
   { name: 'IntelliJ IDEA Ultimate', icon: 'intellij-idea' },
   { name: 'WebStorm', icon: 'webstorm' },
 ]
+
+export interface Tag {
+  label: string
+  icon: string
+  color: BadgeColor
+}
+
+export const TAGS = [
+  {
+    label: 'Article',
+    icon: 'i-ph-pencil-line-duotone',
+    color: 'red',
+  },
+  {
+    label: 'Project',
+    icon: 'i-ph-briefcase-duotone',
+    color: 'blue',
+  },
+  {
+    label: 'R',
+    icon: 'i-vscode-icons-file-type-r',
+    color: 'orange',
+  },
+  {
+    label: 'ML',
+    icon: 'i-ph-brain-duotone',
+    color: 'green',
+  },
+  {
+    label: 'Data',
+    icon: 'i-ph-database-duotone',
+    color: 'purple',
+  },
+  {
+    label: 'Web',
+    icon: 'i-ph-globe-duotone',
+    color: 'cyan',
+  },
+  {
+    label: 'Python',
+    icon: 'i-vscode-icons-file-type-python',
+    color: 'amber',
+  },
+].sort((a, b) => a.label.localeCompare(b.label))