arthur/artsite
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artsite.git synced 2026-01-14 15:54:13 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Working on v2

Browse Source
This commit is contained in:
Arthur Danjou
2025-12-16 19:45:13 +01:00
parent ab4a679851
commit 064e20ddc3
109 changed files with 1343 additions and 3426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.env.example
View File

@@ -1,15 +1,2 @@
NUXT_DISCORD_ID=
NUXT_DISCORD_TOKEN=
NUXT_DISCORD_USER_ID=
NUXT_HUB_ENV=
NUXT_HUB_PROJECT_KEY=
NUXT_PUBLIC_I18N_BASE_URL=
NUXT_PUBLIC_SITE_URL=
NUXT_WAKATIME_CODING=
NUXT_WAKATIME_EDITORS=
NUXT_WAKATIME_LANGUAGES=
NUXT_WAKATIME_OS=
NUXT_WAKATIME_USER_ID=
NUXT_ARTAPI=

34
.github/workflows/nuxthub.yml vendored
View File

@@ -1,34 +0,0 @@
name: Deploy to NuxtHub
on: push
jobs:
deploy:
name: "Deploy to NuxtHub"
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write
steps:
- uses: actions/checkout@v4
- name: Install Bun
uses: oven-sh/setup-bun@v2
with:
bun-version: latest
- name: Install Node.js
uses: actions/setup-node@v4
with:
node-version: 22
- name: Install dependencies
run: bun install
- name: Ensure NuxtHub module is installed
run: bunx nuxthub@latest ensure
- name: Build & Deploy to NuxtHub
uses: nuxt-hub/action@v2
with:
project-key: artsite-v2-6mmw

6
.vscode/settings.json vendored
View File

@@ -1,6 +0,0 @@
{
"todo-tree.tree.scanMode": "workspace only",
"todo-tree.tree.disableCompactFolders": false,
"todo-tree.tree.showCountsInTree": false,
"todo-tree.tree.showBadges": true
}

3
app/app.vue
View File

@@ -8,7 +8,6 @@ useHead({
<UApp>
<NuxtLoadingIndicator color="#808080" />
<AppBackground />
<AppVisitors />
<UContainer class="z-50 relative">
<AppHeader />
<NuxtPage class="mt-12" />
@@ -18,8 +17,6 @@ useHead({
</template>
<style scoped>
@reference "@/assets/css/main.css";
.sofia {
font-family: 'Sofia Sans', sans-serif;
}

2
app/assets/css/main.css
View File

@@ -1,8 +1,6 @@
@import "tailwindcss";
@import "@nuxt/ui";
@plugin "@tailwindcss/typography";
@theme static {
--animate-wave: wave 3s infinite
}

2
app/components/AppBackground.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="pointer-events-none fixed inset-0 z-40 size-full overflow-hidden">
<div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-[4%]" />
<div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-4" />
</div>
</template>

20
app/components/AppVisitors.vue
View File

@@ -1,20 +0,0 @@
<script lang="ts" setup>
const { visitors } = useVisitors()
</script>
<template>
<ClientOnly>
<UBadge
color="green"
variant="outline"
class="shadow-xl fixed z-50 bottom-4 right-4 rounded-full px-1.5 py-0.5 bg-white ring ring-green-400 dark:bg-neutral-950 dark:ring-green-600"
>
<div class="flex items-center gap-1">
<p class="text-neutral-500">
{{ visitors }}
</p>
<div class="w-3 h-3 bg-green-200/70 dark:bg-green-800/70 rounded-full border-2 border-green-400 dark:border-green-600" />
</div>
</UBadge>
</ClientOnly>
</template>

25
app/components/content/ProseA.vue
View File

@@ -1,25 +0,0 @@
<script lang="ts" setup>
import type { PropType } from 'vue'
defineProps({
href: {
type: String,
default: '',
},
target: {
type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
default: undefined,
required: false,
},
})
</script>
<template>
<NuxtLink
:href="href"
:target="target"
class="sofia font-medium duration-300 underline-offset-2 text-md text-black dark:text-white underline decoration-gray-300 dark:decoration-neutral-700 hover:decoration-black dark:hover:decoration-white"
>
<slot />
</NuxtLink>
</template>

23
app/components/content/ProseH2.vue
View File

@@ -1,23 +0,0 @@
<script lang="ts" setup>
import { computed, useRuntimeConfig } from '#imports'
const props = defineProps<{ id?: string }>()
const { headings } = useRuntimeConfig().public.mdc
const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
</script>
<template>
<h2
:id="id"
>
<a
v-if="id && generate"
:href="`#${id}`"
class="text-xl font-bold border-transparent border-b-2 hover:border-black dark:hover:border-white duration-300"
>
<slot />
</a>
<slot v-else />
</h2>
</template>

23
app/components/content/ProseH3.vue
View File

@@ -1,23 +0,0 @@
<script lang="ts" setup>
import { computed, useRuntimeConfig } from '#imports'
const props = defineProps<{ id?: string }>()
const { headings } = useRuntimeConfig().public.mdc
const generate = computed(() => props.id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
</script>
<template>
<h2
:id="id"
>
<a
v-if="id && generate"
:href="`#${id}`"
class="text-lg font-semibold text-neutral-800 dark:text-neutral-200"
>
<slot />
</a>
<slot v-else />
</h2>
</template>

12
app/components/content/ProseImg.vue
View File

@@ -1,12 +0,0 @@
<script lang="ts" setup>
defineProps<{ src: string, caption?: string, rounded?: boolean }>()
</script>
<template>
<div class="flex flex-col justify-center items-center prose-none my-8">
<img :src="src" :alt="caption" class="w-full h-auto m-0 prose-none" :class="{ 'rounded-lg': rounded }">
<p class="mt-2 text-sm text-gray-500 dark:text-gray-300 prose-none">
{{ caption }}
</p>
</div>
</template>

5
app/components/content/ProseP.vue
View File

@@ -1,5 +0,0 @@
<template>
<p class="text-neutral-700 dark:text-neutral-300">
<slot />
</p>
</template>

2
app/components/home/Stats.vue
View File

@@ -7,7 +7,7 @@ const { locale, locales, t } = useI18n({
})
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch())
const time = useTimeAgo(new Date(stats.value!.coding.data.range.start) ?? new Date()).value.split(' ')[0]
const date = useDateFormat(new Date(stats.value!.coding.data.range.start ?? new Date()), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })

45
app/components/post/Alert.vue
View File

@@ -1,45 +0,0 @@
<script setup lang="ts">
const { t, locale } = useI18n({
useScope: 'local',
})
const closed = ref(false)
</script>
<template>
<UAlert
v-if="locale !== 'en' && !closed"
:description="t('alert.description')"
:title="t('alert.title')"
color="red"
icon="i-ph-warning-duotone"
variant="soft"
:close="{
color: 'red',
}"
@update:open="closed = true"
/>
</template>
<i18n lang="json">
{
"en": {
"alert": {
"title": "Translations alert!",
"description": "For time reasons, all article translations will only be available in English. Thank you for your understanding."
}
},
"fr": {
"alert": {
"title": "Attention aux traductions !",
"description": "Pour des raisons de temps, toutes les traductions d'articles ne seront disponibles qu'en anglais. Merci de votre compréhension."
}
},
"es": {
"alert": {
"title": "¡Atención a las traducciones!",
"description": "Por razones de tiempo, todas las traducciones de los artículos estarán disponibles solo en inglés. Gracias por su comprensión."
}
}
}
</i18n>

68
app/components/post/Footer.vue
View File

@@ -1,68 +0,0 @@
<script lang="ts" setup>
const { t } = useI18n({
useScope: 'local',
})
</script>
<template>
<div class="p-8 border bg-white/70 dark:bg-black/70 border-gray-200 dark:border-neutral-700 rounded-md">
<NuxtImg
src="/arthur.webp"
alt="Arthur Danjou"
class="w-24 h-24 rounded-full float-left mr-4 mb-4"
/>
<i18n-t
keypath="thanks"
tag="p"
class="text-neutral-600 dark:text-neutral-400 text-justify"
>
<template #linkedin>
<HomeLink
href="https://www.linkedin.com/in/arthurdanjou/"
icon="i-ph-linkedin-logo-duotone"
label="LinkedIn"
target="_blank"
class="inline-flex items-start gap-1 transform translate-y-1"
/>
</template>
<template #github>
<HomeLink
href="https://github.com/arthurdanjou"
icon="i-ph-github-logo-duotone"
label="GitHub"
target="_blank"
class="inline-flex items-start gap-1 transform translate-y-1"
/>
</template>
<template #comment>
<strong class="text-neutral-800 dark:text-neutral-200">{{ t('comment') }}</strong>
</template>
<template #name>
<strong class="text-neutral-800 dark:text-neutral-200">{{ t('name') }}</strong>
</template>
<template #jump>
<br> <br>
</template>
</i18n-t>
</div>
</template>
<i18n lang="json">
{
"en": {
"thanks": "Thanks for reading! My name is {name}, and I love writing about AI, data science, and the intersection between mathematics and programming. {jump} I've been coding and exploring math for years, and I'm always learning something new—whether it's self-hosting tools in my homelab, experimenting with machine learning models, or diving into statistical methods. {jump} I share my knowledge here because I know how valuable clear, hands-on resources can be, especially when you're just getting started or exploring something deeply technical. {jump} If you have any questions or just want to chat, feel free to reach out to me on {linkedin} or {github }. {jump} I hope you enjoyed this post and learned something useful. If you did, {comment}—it really helps and means a lot!",
"comment": "consider sharing it",
"name": "Arthur"
},
"es": {
"thanks": "¡Gracias por leer! Me llamo {name} y me encanta escribir sobre inteligencia artificial, ciencia de datos y todo lo que se encuentra en la intersección entre las matemáticas y la programación. {jump} Llevo años programando y explorando las matemáticas, y cada día aprendo algo nuevo — ya sea autoalojando herramientas en mi homelab, experimentando con modelos de aprendizaje automático o profundizando en métodos estadísticos. {jump} Comparto mis conocimientos aquí porque sé lo valiosos que pueden ser los recursos claros, prácticos y accesibles, especialmente cuando uno está empezando o explorando temas técnicos en profundidad. {jump} Si tienes alguna pregunta o simplemente quieres charlar, no dudes en dejar un comentario abajo o contactarme por {linkedin} o {github}. {jump} Espero que este artículo te haya gustado y que hayas aprendido algo útil. Si es así, {comment} — ¡me ayuda mucho y significa mucho para mí!",
"comment": "considera compartirlo",
"name": "Arthur"
},
"fr": {
"thanks": "Merci de votre lecture ! Je m'appelle {name}, et j'adore écrire sur l'intelligence artificielle, la data science, et tout ce qui se situe à l'intersection entre les mathématiques et la programmation. {jump} Je code et j'explore les maths depuis des années, et j'apprends encore de nouvelles choses chaque jour — que ce soit en auto-hébergeant des outils dans mon homelab, en expérimentant des modèles de machine learning ou en approfondissant des méthodes statistiques. {jump} Je partage mes connaissances ici parce que je sais à quel point des ressources claires, pratiques et accessibles peuvent être précieuses, surtout quand on débute ou qu'on explore un sujet technique en profondeur. {jump} Si vous avez des questions ou simplement envie d'échanger, n'hésitez pas à laisser un commentaire ci-dessous ou à me contacter sur {linkedin} ou {github}. {jump} J'espère que cet article vous a plu et qu'il vous a appris quelque chose d'utile. Si c'est le cas, {comment} — ça m'aide beaucoup et ça me fait vraiment plaisir !",
"comment": "pensez à le partager",
"name": "Arthur"
}
}
</i18n>

23
app/components/uses/Item.vue
View File

@@ -1,23 +0,0 @@
<script lang="ts" setup>
import type { UsesItem } from '#components'
defineProps({
item: {
type: Object as PropType<typeof UsesItem>,
required: true,
},
})
const { locale } = useI18n()
</script>
<template>
<li>
<p class="text-base font-semibold text-black dark:text-white">
{{ item.name }}
</p>
<p class="text-sm">
{{ locale === 'en' ? item.description.en : locale === 'es' ? item.description.es : item.description.fr }}
</p>
</li>
</template>

22
app/components/uses/List.vue
View File

@@ -1,22 +0,0 @@
<script lang="ts" setup>
defineProps({
title: {
type: Object as PropType<{ en: string, fr: string, es: string }>,
required: true,
},
})
const { locale } = useI18n()
</script>
<template>
<div class="space-y-8">
<USeparator
:label="locale === 'en' ? title.en : locale === 'es' ? title.es : title.fr"
size="xs"
/>
<ul class="space-y-8">
<slot />
</ul>
</div>
</template>

6
app/pages/index.vue
View File

@@ -14,11 +14,11 @@ const { data: page } = await useAsyncData(`/home/${locale.value}`, () => {
</script>
<template>
<main class="!max-w-none prose dark:prose-invert">
<main class="max-w-none! prose dark:prose-invert">
<ContentRenderer v-if="page" :value="page" class="mt-8 md:mt-16" />
<HomeStats />
<!-- <HomeStats />
<HomeActivity />
<HomeQuote />
<HomeCatchPhrase />
<HomeCatchPhrase /> -->
</main>
</template>

182
app/pages/projects/[slug].vue
View File

@@ -1,182 +0,0 @@
<script lang="ts" setup>
const route = useRoute()
const { data: project } = await useAsyncData(`projects/${route.params.slug}`, () =>
queryCollection('projects').path(`/projects/${route.params.slug}`).first())
const { t } = useI18n({
useScope: 'local',
})
useSeoMeta({
title: project.value?.title,
description: project.value?.description,
author: 'Arthur Danjou',
})
function top() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth',
})
}
const { copy, copied } = useClipboard({
source: `https://arthurdanjou.fr/projects/${route.params.slug}`,
copiedDuring: 4000,
})
</script>
<template>
<main v-if="project">
<div class="flex">
<NuxtLinkLocale
class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
to="/projects"
>
<UIcon
class="group-hover:-translate-x-1 transform duration-300"
name="i-ph-arrow-left-duotone"
size="20"
/>
{{ t('back') }}
</NuxtLinkLocale>
</div>
<PostAlert class="mb-8" />
<div>
<div class="flex items-end justify-between gap-2 flex-wrap">
<div class="flex items-center gap-2">
<h1
class="font-bold text-3xl text-black dark:text-white"
>
{{ project.title }}
</h1>
<UTooltip
:text="t('tooltip.favorite')" :content="{
align: 'center',
side: 'right',
sideOffset: 8,
}"
arrow
>
<UIcon
v-if="project.favorite"
name="i-ph-star-duotone"
size="24"
class="text-amber-500"
/>
</UTooltip>
</div>
<div
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
>
<UIcon name="ph:calendar-duotone" size="16" />
<p>{{ useDateFormat(project.publishedAt, 'DD MMMM YYYY').value }} </p>
</div>
</div>
<p class="mt-2 text-base">
{{ project.description }}
</p>
</div>
<div
v-if="project.cover"
class="w-full rounded-md my-8"
>
<ProseImg
:src="`/projects/${project.cover}`"
label="Project cover"
/>
</div>
<USeparator
class="my-4"
icon="i-ph-pencil-line-duotone"
/>
<ClientOnly>
<ContentRenderer
:value="project"
class="!max-w-none prose dark:prose-invert"
/>
</ClientOnly>
<div class="space-y-4 mt-8">
<PostFooter />
<div class="flex gap-4 items-center flex-wrap">
<UButton
color="neutral"
icon="i-ph-arrow-fat-lines-up-duotone"
:label="t('top')"
size="lg"
variant="outline"
@click.prevent="top()"
/>
<UButton
v-if="copied"
color="green"
icon="i-ph-check-square-duotone"
:label="t('link.copied')"
size="lg"
variant="outline"
@click.prevent="copy()"
/>
<UButton
v-else
color="neutral"
icon="i-ph-square-duotone"
:label="t('link.copy')"
size="lg"
variant="outline"
@click.prevent="copy()"
/>
</div>
</div>
</main>
</template>
<style>
.prose h2 a,
.prose h3 a,
.prose h4 a {
text-decoration: none;
}
.prose img {
margin: 0;
}
.katex-html {
display: none;
}
html {
scroll-behavior: smooth;
}
</style>
<i18n lang="json">
{
"en": {
"back": "Go back",
"link": {
"copied": "Link copied",
"copy": "Copy link"
},
"top": "Go to top"
},
"fr": {
"back": "Retourner en arrière",
"link": {
"copied": "Lien copié",
"copy": "Copier le lien"
},
"top": "Remonter en haut"
},
"es": {
"back": "Volver atrás",
"link": {
"copied": "Link copiado",
"copy": "Copiar link"
},
"top": "Ir arribaarr"
}
}
</i18n>

117
app/pages/projects/index.vue
View File

@@ -1,117 +0,0 @@
<script setup lang="ts">
import { TAGS } from '~~/types'
const { t } = useI18n({
useScope: 'local',
})
useSeoMeta({
title: 'My Projects',
description: t('description'),
})
const { data: projects } = await useAsyncData('all-projects', () => {
return queryCollection('projects')
.order('favorite', 'DESC')
.order('publishedAt', 'DESC')
.all()
})
</script>
<template>
<main class="space-y-12">
<AppTitle
:description="t('description')"
:title="t('title')"
/>
<PostAlert />
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-8">
<NuxtLink
v-for="(project, id) in projects"
:key="id"
:to="project.path"
>
<li
class="flex flex-col h-full group hover:bg-neutral-200/50 duration-300 p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors justify-center"
>
<article class="space-y-2">
<div
class="flex flex-col"
>
<div class="flex items-center gap-2">
<h1 class="font-bold duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white">
{{ project.title }}
</h1>
<UTooltip
:text="t('tooltip.favorite')" :content="{
align: 'center',
side: 'right',
sideOffset: 8,
}"
arrow
>
<UIcon
v-if="project.favorite"
name="i-ph-star-duotone"
size="16"
class="text-amber-500 hover:rotate-360 duration-500"
/>
</UTooltip>
</div>
<h3 class="text-md text-neutral-500 dark:text-neutral-400 italic">
{{ project.description }}
</h3>
</div>
</article>
<div class="flex flex-col sm:flex-row sm:items-center mt-1">
<div
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
>
<ClientOnly>
<p>{{ useDateFormat(project.publishedAt, 'DD MMM YYYY').value }} </p>
</ClientOnly>
<span class="w-2" />
<div class="flex gap-2 flex-wrap">
<ClientOnly>
<UBadge
v-for="tag in project.tags.sort((a: any, b: any) => a.localeCompare(b))"
:key="tag"
variant="soft"
size="sm"
>
{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
</UBadge>
</ClientOnly>
</div>
</div>
</div>
</li>
</NuxtLink>
</ul>
</main>
</template>
<i18n lang="json">
{
"en": {
"title": "All my projects I have worked on, both academic and personal",
"description": "A collection of my projects using R, Python, or web development technologies. These projects span various domains, including data analysis, machine learning, and web applications, showcasing my skills in coding, problem-solving, and project development.",
"tooltip": {
"favorite": "This project is one of my favorites"
}
},
"fr": {
"title": "Tous mes projets auxquels j'ai travaillé, académiques et personnels",
"description": "Une collection de mes projets réalisés en R, Python, ou en développement web. Ces projets couvrent divers domaines, y compris l'analyse de données, l'apprentissage automatique et les applications web, mettant en avant mes compétences en codage, résolution de problèmes et développement de projets.",
"tooltip": {
"favorite": "Ce projet est l'un de mes favoris"
}
},
"es": {
"title": "Todos mis proyectos en los que he trabajado, académicos y personales",
"description": "Una colección de mis proyectos realizados en R, Python o tecnologías de desarrollo web. Estos proyectos abarcan diversos campos, como análisis de datos, aprendizaje automático y aplicaciones web, mostrando mis habilidades en programación, resolución de problemas y desarrollo de proyectos.",
"tooltip": {
"favorite": "Este proyecto es uno de mis favoritos"
}
}
}
</i18n>

99
app/pages/uses.vue
View File

@@ -1,99 +0,0 @@
<script setup lang="ts">
const { t } = useI18n({
useScope: 'local',
})
useSeoMeta({
title: 'Things I use',
description: t('description'),
})
const { data: items } = await useAsyncData('uses', async () => await queryCollection('uses').all())
const { data: categories } = await useAsyncData('categories', async () => await queryCollection('categories').all())
const photos = [
{
src: '/uses/jetbrains.webp',
caption: 'caption.jetbrains',
},
{
src: '/uses/pycharm.webp',
caption: 'caption.pycharm',
},
{
src: '/uses/vscode.webp',
caption: 'caption.vscode',
},
]
</script>
<template>
<main>
<AppTitle
:description="t('description')"
:title="t('title')"
/>
<div v-if="items" class="mt-12 space-y-12">
<UsesList v-for="category in categories" :key="category.id" :title="category.name">
<UsesItem
v-for="(item, id) in items.filter(item => item.category === String(category.meta.title).toLowerCase())"
:key="id"
:item="item"
/>
<div v-if="category.carousel && category.carousel === 'ides'" class="relative">
<UCarousel
v-slot="{ item }"
arrows
loop
class="rounded-lg"
:autoplay="{ delay: 4000 }"
:items="photos"
:prev="{ variant: 'ghost' }"
:next="{ variant: 'ghost' }"
prev-icon="i-lucide-chevron-left"
next-icon="i-lucide-chevron-right"
>
<ProseImg
rounded
:src="item.src"
:label="t(item.caption)"
:caption="t(item.caption)"
/>
</UCarousel>
</div>
</UsesList>
</div>
</main>
</template>
<i18n lang="json">
{
"en": {
"title": "My uses",
"description": "Software I use, gadgets I love, and other things I recommend. Here’s a big list of all of my favorite stuff.",
"caption": {
"jetbrains": "My IntelliJ IDE",
"vscode": "My Visual Studio Code IDE",
"pycharm": "My PyCharm IDE"
}
},
"fr": {
"title": "Mes usages",
"description": "Logiciels que j'utilise, gadgets que j'adore et autres choses que je recommande. Voici une grande liste de toutes mes choses préférées.",
"caption": {
"jetbrains": "Mon IDE IntelliJ Idea Ultimate",
"vscode": "Mon IDE Visual Studio Code",
"pycharm": "Mon IDE PyCharm"
}
},
"es": {
"title": "Mis aplicaciones.",
"description": "Los programas que utilizo, los gadgets que adoro y otras cosas que recomiendo. Aquí te hago una lista de todas mis cosas preferidas. ",
"caption": {
"jetbrains": "Mi IDE IntelliJ Idea Ultimate",
"vscode": "Mi IDE Visual Studio Code",
"pycharm": "Mi IDE PyCharm"
}
}
}
</i18n>

283
app/pages/writings/[slug].vue
View File

@@ -1,283 +0,0 @@
<script lang="ts" setup>
const route = useRoute()
const { data: post } = await useAsyncData(`writings/${route.params.slug}`, () =>
queryCollection('writings').path(`/writings/${route.params.slug}`).first())
const {
data: postDB,
refresh,
} = await useAsyncData(`writings/${route.params.slug}/db`, () => $fetch(`/api/posts/${route.params.slug}`, { method: 'POST' }))
const { t } = useI18n({
useScope: 'local',
})
function top() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth',
})
}
const { copy, copied } = useClipboard({
source: `https://arthurdanjou.fr/writings/${route.params.slug}`,
copiedDuring: 4000,
})
useSeoMeta({
title: post.value?.title,
description: post.value?.description,
author: 'Arthur Danjou',
})
function getDetails() {
const likes = postDB.value?.likes ?? 0
const views = postDB.value?.views ?? 0
const like = likes > 1 ? t('likes.many') : t('likes.one')
const view = views > 1 ? t('views.many') : t('views.one')
return {
likes: `${likes} ${like}`,
views: `${views} ${view}`,
}
}
const likeCookie = useCookie<boolean>(`post:like:${route.params.slug}`, {
maxAge: 7200,
})
async function handleLike() {
if (likeCookie.value)
return
await $fetch(`/api/posts/like/${route.params.slug}`, { method: 'PUT' })
await refresh()
likeCookie.value = true
}
function scrollToSection(id: string) {
const element = document.getElementById(id)
if (element) {
element.scrollIntoView({ behavior: 'smooth' })
}
}
</script>
<template>
<main v-if="post && postDB">
<div class="flex">
<NuxtLinkLocale
class="flex items-center gap-2 mb-8 group text-sm hover:text-black dark:hover:text-white duration-300"
to="/writings"
>
<UIcon
class="group-hover:-translate-x-1 transform duration-300"
name="i-ph-arrow-left-duotone"
size="20"
/>
{{ t('back') }}
</NuxtLinkLocale>
</div>
<PostAlert class="mb-8" />
<div class="border-l-2 pl-2 rounded-none border-gray-300 dark:border-neutral-700 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-4 flex-wrap">
<h1
class="font-bold text-3xl text-black dark:text-white"
>
{{ post.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(post.publishedAt, 'DD MMMM YYYY').value }} </p>·
<UIcon name="ph:timer-duotone" size="16" />
<p>{{ post.readingTime }}min long</p>
</div>
</div>
<p class="my-4 text-base">
{{ post.description }}
</p>
</div>
<div v-if="post.body.toc && post.body.toc.links.length > 0" class="pt-4 top-0 flex justify-end sticky z-50">
<UPopover
mode="click"
:content="{
align: 'end',
side: 'bottom',
sideOffset: 8,
}"
>
<UButton
:label="t('toc')"
variant="solid"
color="neutral"
class="cursor-pointer"
/>
<template #content>
<div class="p-2 z-50 flex flex-col gap-y-2">
<div
v-for="link in post!.body!.toc!.links"
:key="link.id"
class="inline"
>
<UButton
size="lg"
:label="link.text"
variant="ghost"
color="neutral"
:block="true"
class="flex justify-start items-start p-1 cursor-pointer"
@click="scrollToSection(link.id)"
/>
</div>
</div>
</template>
</UPopover>
</div>
<div
v-if="post.cover"
class="w-full rounded-md mb-8"
>
<ProseImg
:src="`/writings/${post.cover}`"
label="Writing cover"
/>
</div>
<USeparator
class="mt-4"
icon="i-ph-pencil-line-duotone"
/>
<article class="mt-8">
<ClientOnly>
<ContentRenderer
:value="post"
class="!max-w-none prose dark:prose-invert"
/>
</ClientOnly>
<div class="space-y-4 mt-8">
<PostFooter />
<div class="flex gap-4 items-center flex-wrap justify-between sm:justify-start">
<UButton
:label="(postDB?.likes ?? 0) > 1 ? `${postDB?.likes ?? 0} likes` : `${postDB?.likes ?? 0} like`"
:color="likeCookie ? 'red' : 'neutral'"
icon="i-ph-heart-duotone"
size="lg"
:variant="likeCookie ? 'solid' : 'outline'"
@click.prevent="handleLike()"
/>
<UButton
color="neutral"
icon="i-ph-arrow-fat-lines-up-duotone"
:label="t('top')"
size="lg"
variant="outline"
@click.prevent="top()"
/>
<UButton
v-if="copied"
color="green"
icon="i-ph-check-square-duotone"
:label="t('link.copied')"
size="lg"
variant="outline"
@click.prevent="copy()"
/>
<UButton
v-else
color="neutral"
icon="i-ph-square-duotone"
:label="t('link.copy')"
size="lg"
variant="outline"
@click.prevent="copy()"
/>
</div>
</div>
</article>
</main>
</template>
<style>
.prose h2 a,
.prose h3 a,
.prose h4 a {
text-decoration: none;
}
.prose img {
margin: 0;
}
.katex-html {
display: none;
}
html {
scroll-behavior: smooth;
}
</style>
<i18n lang="json">
{
"en": {
"likes": {
"one": "like",
"many": "likes"
},
"views": {
"one": "view",
"many": "views"
},
"link": {
"copied": "Link copied",
"copy": "Copy link"
},
"top": "Go to top",
"back": "Go back",
"toc": "Table of contents"
},
"fr": {
"likes": {
"one": "like",
"many": "likes"
},
"views": {
"one": "vue",
"many": "vues"
},
"link": {
"copied": "Lien copié",
"copy": "Copier le lien"
},
"top": "Remonter en haut",
"back": "Retourner en arrière",
"toc": "Table des matières"
},
"es": {
"likes": {
"one": "like",
"many": "likes"
},
"views": {
"one": "view",
"many": "views"
},
"link": {
"copied": "Link copiado",
"copy": "Copiar link"
},
"top": "Ir arribaarr",
"back": "Volver atrás",
"toc": "Tabla de contenidos"
}
}
</i18n>

111
app/pages/writings/index.vue
View File

@@ -1,111 +0,0 @@
<script setup lang="ts">
import { TAGS } from '~~/types'
const { t } = useI18n({
useScope: 'local',
})
useSeoMeta({
title: 'My Shelf',
description: t('description'),
})
const { data: writings } = await useAsyncData('all-writings', () => {
return queryCollection('writings')
.order('publishedAt', 'DESC')
.all()
})
const groupedWritings = computed(() => {
const grouped: Record<string, any[]> = {}
writings.value!.forEach((writing: any) => {
const year = new Date(writing.publishedAt).getFullYear().toString()
if (!grouped[year]) {
grouped[year] = []
}
grouped[year].push(writing)
})
return Object.entries(grouped).reverse()
})
</script>
<template>
<main class="space-y-12 mb-12 relative">
<AppTitle
:description="t('description')"
:title="t('title')"
/>
<PostAlert />
<div class="space-y-8">
<div v-for="year in groupedWritings" :key="year[0]" class="lg:space-y-6 relative">
<h2 class="text-4xl lg:absolute top-2 -left-16 font-bold opacity-10 select-none pointer-events-none lg:[writing-mode:vertical-rl] lg:[text-orientation:upright] pl-1 lg:pl-0">
{{ year[0] }}
</h2>
<ul class="relative grid grid-cols-1 gap-2">
<NuxtLink
v-for="(writing, id) in year[1]"
:key="id"
:to="writing.path"
>
<li
class="h-full group hover:bg-neutral-200/50 duration-300 p-1 lg:p-2 rounded-lg dark:hover:bg-neutral-800/50 transition-colors"
>
<h1
class="font-bold text-lg duration-300 text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-900 dark:group-hover:text-white"
>
{{ writing.title }}
</h1>
<h3 class="text-neutral-600 dark:text-neutral-400 italic">
{{ writing.description }}
</h3>
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-1">
<div
class="text-sm text-neutral-500 duration-300 flex items-center gap-1"
>
<ClientOnly>
<p>{{ useDateFormat(writing.publishedAt, 'DD MMM').value }} </p>
</ClientOnly>
<span>·</span>
<p>{{ writing.readingTime }}min</p>
<span class="w-2" />
<div class="flex gap-2 flex-wrap">
<ClientOnly>
<UBadge
v-for="tag in writing.tags.sort((a: any, b: any) => a.localeCompare(b))"
:key="tag"
variant="soft"
size="sm"
>
{{ TAGS.find(color => color.label.toLowerCase() === tag)?.label }}
</UBadge>
</ClientOnly>
</div>
</div>
</div>
</li>
</NuxtLink>
</ul>
</div>
</div>
</main>
</template>
<i18n lang="json">
{
"en": {
"title": "Writings on math, artificial intelligence, development, and my passions.",
"description": "All my reflections on programming, mathematics, artificial intelligence design, etc., are organized chronologically."
},
"fr": {
"title": "Écrits sur les maths, l'intelligence artificielle, le développement et mes passions.",
"description": "Toutes mes réflexions sur la programmation, les mathématiques, la conception de l'intelligence artificielle, etc., sont mises en ordre chronologique.",
"alert": {
"title": "Attentions aux traductions!",
"description": "Par soucis de temps, toutes les traductions des articles seront disponibles uniquement en anglais. Merci de votre compréhension."
}
},
"es": {
"title": "Escritos sobre matemáticas, inteligencia artificial, desarrollo y mis pasiones.",
"description": "Todas mis reflexiones sobre programación, matemáticas, diseño de inteligencia artificial, etc., están organizadas cronológicamente."
}
}
</i18n>

1779
bun.lock
View File

File diff suppressed because it is too large Load Diff

52
content.config.ts
View File

@@ -5,56 +5,4 @@ export const collections = {
type: 'page',
source: 'home/*.md',
}),
projects: defineCollection({
type: 'page',
source: 'projects/*.md',
schema: z.object({
slug: z.string(),
title: z.string(),
description: z.string(),
publishedAt: z.date(),
tags: z.array(z.string()),
cover: z.string(),
favorite: z.boolean().optional(),
}),
}),
writings: defineCollection({
type: 'page',
source: 'writings/*.md',
schema: z.object({
slug: z.string(),
title: z.string(),
description: z.string(),
publishedAt: z.date(),
readingTime: z.number(),
cover: z.string(),
tags: z.array(z.string()),
}),
}),
categories: defineCollection({
type: 'data',
source: 'uses/categories/*.json',
schema: z.object({
id: z.string(),
name: z.object({
en: z.string(),
fr: z.string(),
es: z.string(),
}),
carousel: z.string().optional(),
}),
}),
uses: defineCollection({
type: 'data',
source: 'uses/*.json',
schema: z.object({
name: z.string(),
description: z.object({
en: z.string(),
fr: z.string(),
es: z.string(),
}),
category: z.string(),
}),
}),
}

24
content/projects/arthome.md
View File

@@ -1,24 +0,0 @@
---
slug: arthome
title: 🏡 ArtHome
description: Your personalized browser homepage
publishedAt: 2024/09/04
readingTime: 1
cover: arthome/cover.png
tags:
- web
---
[ArtHome](https://home.arthurdanjou.fr) is a customizable browser homepage that lets you organize all your favorite links in one place.
Create categories and tabs to group your shortcuts, personalize them with icons and colors, and make the page private if you want to keep your links just for yourself. The interface is clean, responsive, and works across all modern browsers.
### 🛠️ Built with
- [Nuxt](https://nuxt.com): An open-source framework for building performant, full-stack web applications with Vue.
- [NuxtHub](https://hub.nuxt.com): A Cloudflare-powered platform to deploy and scale Nuxt apps globally with minimal latency and full-stack capabilities.
- [NuxtUI](https://ui.nuxt.com): A sleek and flexible component library that helps create beautiful, responsive UIs for Nuxt applications.
- [ESLint](https://eslint.org): A linter that identifies and fixes problems in your JavaScript/TypeScript code.
- [Drizzle ORM](https://orm.drizzle.team/): A lightweight, type-safe ORM built for TypeScript, designed for simplicity and performance.
- [Zod](https://zod.dev/): A TypeScript-first schema declaration and validation library with full static type inference.
- and a lot of ❤️

31
content/projects/artsite.md
View File

@@ -1,31 +0,0 @@
---
slug: artsite
title: 🌍 ArtSite
description: My personal website, portfolio, and blog — all in one.
publishedAt: 2024/06/01
readingTime: 1
cover: artsite/cover.png
favorite: true
tags:
- web
---
[**ArtSite**](https://arthurdanjou.fr) is my personal space on the web — a portfolio, a blog, and a digital lab where I showcase my projects, write about topics I care about, and experiment with design and web technologies.
It’s designed to be fast, accessible, and fully responsive. The site also serves as a playground to explore and test modern frontend tools.
### ⚒️ Tech Stack
- **UI** → [Vue.js](https://vuejs.org/): A progressive JavaScript framework for building interactive interfaces.
- **Framework** → [Nuxt](https://nuxt.com/): A powerful full-stack framework built on Vue, perfect for modern web apps.
- **Content System** → [Nuxt Content](https://content.nuxtjs.org/): File-based CMS to manage blog posts and pages using Markdown.
- **Design System** → [Nuxt UI](https://nuxtui.com/): Fully styled, customizable UI components tailored for Nuxt.
- **CMS & Editing** → [Nuxt Studio](https://nuxt.studio): Visual editing and content management integrated with Nuxt Content.
- **Language** → [TypeScript](https://www.typescriptlang.org/): A statically typed superset of JavaScript.
- **Styling** → [Sass](https://sass-lang.com/) & [Tailwind CSS](https://tailwindcss.com/): Utility-first CSS framework enhanced with SCSS flexibility.
- **Deployment** → [NuxtHub](https://hub.nuxt.com/): Cloudflare-powered platform for fast, scalable Nuxt app deployment.
- **Package Manager** → [pnpm](https://pnpm.io/): A fast, disk-efficient package manager for JavaScript/TypeScript projects.
- **Linter** → [ESLint](https://eslint.org/): A tool for identifying and fixing problems in JavaScript/TypeScript code.
- **ORM** → [Drizzle ORM](https://orm.drizzle.team/): A lightweight, type-safe ORM for TypeScript.
- **Validation** → [Zod](https://zod.dev/): A TypeScript-first schema declaration and validation library with full static type inference.
- **Deployment** → [NuxtHub](https://hub.nuxt.com/): A platform to deploy and scale Nuxt apps globally with minimal latency and full-stack capabilities.

18
content/projects/bikes-glm.md
View File

@@ -1,18 +0,0 @@
---
slug: bikes-glm
title: 🚲 Generalized Linear Models for Bikes prediction
description: Predicting the number of bikes rented in a bike-sharing system using Generalized Linear Models.
publishedAt: 2025/01/24
readingTime: 1
tags:
- r
- data
- maths
---
The project was done as part of the course `Generalised Linear Model` at the Paris-Dauphine PSL University. The goal of the project is to determine the best model that predicts/explains the number of bicycle rentals, based on various characteristics of the day (temperature, humidity, wind speed, etc.).
You can find the code here: [GLM Bikes Code](https://github.com/ArthurDanjou/Studies/blob/master/M1/General%20Linear%20Models/Projet/GLM%20Code%20-%20DANJOU%20%26%20DUROUSSEAU.rmd)
<iframe src="/projects/bikes-glm/Report.pdf" width="100%" height="1000px">
</iframe>

42
content/projects/breast-cancer.md
View File

@@ -1,42 +0,0 @@
---
slug: breast-cancer
title: 💉 Breast Cancer Detection
description: Prediction of breast cancer presence by comparing several supervised classification models.
publishedAt: 2025/06/06
readingTime: 2
tags:
- python
- data
- maths
---
The project was carried out as part of the `Statistical Learning` course at Paris-Dauphine PSL University. Its objective is to identify the most effective model for predicting or explaining the presence of breast cancer based on a set of biological and clinical features.
This project aims to develop and evaluate several supervised classification models to predict the presence of breast cancer based on biological features extracted from the Breast Cancer Coimbra dataset, provided by the UCI Machine Learning Repository.
The dataset contains 116 observations divided into two classes:
- 1: healthy individuals (controls)
- 2: patients diagnosed with breast cancer
There are 9 explanatory variables, including clinical measurements such as age, insulin levels, leptin, insulin resistance, among others.
The project follows a comparative approach between several algorithms:
- Logistic Regression
- k-Nearest Neighbors (k-NN)
- Naive Bayes
- Artificial Neural Network (MLP with a 16-8-1 architecture)
Model evaluation is primarily based on the F1-score, which is more suitable in a medical context where identifying positive cases is crucial. Particular attention was paid to stratified cross-validation and to handling class imbalance, notably through the use of class weights and regularization techniques (L2, early stopping).
This project illustrates a concrete application of data science techniques to a public health issue, while implementing a rigorous methodology for supervised modeling.
You can find the code here: [Breast Cancer Detection](https://github.com/ArthurDanjou/breast-cancer-detection)
<iframe src="/projects/breast-cancer/report.pdf" width="100%" height="1000px">
</iframe>

25
content/projects/monte-carlo-project.md
View File

@@ -1,25 +0,0 @@
---
slug: monte-carlo-project
title: 💻 Monte Carlo Methods Project
description: A project to demonstrate the use of Monte Carlo methods in R.
publishedAt: 2024/11/24
readingTime: 3
tags:
- r
- maths
---
This is the report for the Monte Carlo Methods Project. The project was done as part of the course `Monte Carlo Methods` at the Paris-Dauphine University. The goal was to implement different methods and algorithms using Monte Carlo methods in R.
Methods and algorithms implemented:
- Plotting graphs of functions
- Inverse c.d.f. Random Variation simulation
- Accept-Reject Random Variation simulation
- Random Variable simulation with stratification
- Cumulative density function
- Empirical Quantile Function
You can find the code here: [Monte Carlo Project Code](https://github.com/ArthurDanjou/Studies/blob/0c83e7e381344675e113c43b6f8d32e88a5c00a7/M1/Monte%20Carlo%20Methods/Project%201/003_rapport_DANJOU_DUROUSSEAU.rmd)
<iframe src="/projects/monte-carlo-project/Report.pdf" width="100%" height="1000px">
</iframe>

17
content/projects/schelling-segregation-model.md
View File

@@ -1,17 +0,0 @@
---
slug: schelling-segregation-model
title: 📊 Schelling Segregation Model
description: A Python implementation of the Schelling Segregation Model using Statistics and Data Visualization.
publishedAt: 2024/05/03
readingTime: 4
tags:
- python
- maths
---
This is the French version of the report for the Schelling Segregation Model project. The project was done as part of the course `Projet Numérique` at the Paris-Saclay University. The goal was to implement the Schelling Segregation Model in Python and analyze the results using statistics and data visualization.
You can find the code here: [Schelling Segregation Model Code](https://github.com/ArthurDanjou/Studies/blob/e1164f89bd11fc59fa79d94aa51fac69b425d68b/L3/Projet%20Num%C3%A9rique/Segregation.ipynb)
<iframe src="/projects/schelling/Projet.pdf" width="100%" height="1000px">
</iframe>

25
content/projects/sevetys.md
View File

@@ -1,25 +0,0 @@
---
slug: sevetys
title: 🐶 Data Engineer Internship
description: Summary of my internship as a Data Engineer at Sevetys
publishedAt: 2025/07/31
tags:
- python
- data
favorite: false
---
[Sevetys](https://sevetys.fr) is a leading French network of over 200 veterinary clinics, employing more than 1,300 professionals. Founded in 2017, the group provides comprehensive veterinary care for companion animals, exotic pets, and livestock, with services ranging from preventive medicine and surgery to cardiology, dermatology, and 24/7 emergency care.
Committed to digital innovation, Sevetys leverages centralized data systems to optimize clinic operations, improve patient data management, and enhance the overall client experience. This combination of medical excellence and operational efficiency supports veterinarians in delivering the highest quality care nationwide.
During my two-month internship as a Data Engineer, I focused primarily on cleaning and standardizing customer and patient data — a critical task, as this data is extensively used by clinics, Marketing, and Performance teams. Ensuring data quality was therefore essential to the company’s operations.
Additionally, I took charge of revising and enhancing an existing data quality report designed to evaluate the effectiveness of my cleaning processes. The report encompassed 47 detailed metrics assessing data completeness and consistency, providing valuable insights that helped maintain high standards across the organization.
## ⚙️ Stack
- [Microsoft Azure Cloud](https://azure.microsoft.com/)
- [PySpark](https://spark.apache.org/docs/latest/api/python/)
- [Python](https://www.python.org/)
- [GitLab]()

55
content/projects/studies.md
View File

@@ -1,55 +0,0 @@
---
slug: studies
title: 🎓 Studies Projects
description: A curated collection of mathematics and data science projects developed during my academic journey.
publishedAt: 2023/09/01
readingTime: 1
favorite: true
tags:
- data
- python
- r
---
[Studies Projects](https://github.com/ArthurDanjou/studies) is a curated collection of academic projects completed throughout my mathematics studies. The repository showcases work in both _Python_ and _R_, focusing on mathematical modeling, data analysis, and numerical methods.
The projects are organized into two main sections:
- **L3** – Third year of the Bachelor's degree in Mathematics
- **M1** – First year of the Master's degree in Mathematics
## 📁 File Structure
- `L3`
- `Analyse Matricielle`
- `Analyse Multidimensionnelle`
- `Calculs Numériques`
- `Équations Différentielles`
- `Méthodes Numériques`
- `Probabilités`
- `Projet Numérique`
- `Statistiques`
- `M1`
- `Data Analysis`
- `General Linear Models`
- `Monte Carlo Methods`
- `Numerical Methods`
- `Numerical Optimization`
- `Portfolio Management`
- `Statistical Learning`
## 🛠️ Technologies & Tools
- [Python](https://www.python.org): A high-level, interpreted programming language, widely used for data science, machine learning, and scientific computing.
- [R](https://www.r-project.org): A statistical computing environment, perfect for data analysis and visualization.
- [Jupyter](https://jupyter.org): Interactive notebooks combining code, results, and rich text for reproducible research.
- [Pandas](https://pandas.pydata.org): A data manipulation library providing data structures and operations for manipulating numerical tables and time series.
- [NumPy](https://numpy.org): Core package for numerical computing with support for large, multi-dimensional arrays and matrices.
- [SciPy](https://www.scipy.org): A library for advanced scientific computations including optimization, integration, and signal processing.
- [Scikit-learn](https://scikit-learn.org): A robust library offering simple and efficient tools for machine learning and statistical modeling, including classification, regression, and clustering.
- [TensorFlow](https://www.tensorflow.org): A comprehensive open-source framework for building and deploying machine learning and deep learning models.
- [Matplotlib](https://matplotlib.org): A versatile plotting library for creating high-quality static, animated, and interactive visualizations in Python.
- [RMarkdown](https://rmarkdown.rstudio.com): A dynamic tool for combining code, results, and narrative into high-quality documents and presentations.
- [FactoMineR](https://factominer.free.fr/): An R package focused on multivariate exploratory data analysis (e.g., PCA, MCA, CA).
- [ggplot2](https://ggplot2.tidyverse.org): A grammar-based graphics package for creating complex and elegant visualizations in R.
- and my 🧠.

9
content/uses/0.homelab-beelink.json
View File

@@ -1,9 +0,0 @@
{
"name": "Beelink EQR6 AMD Ryzen",
"description": {
"en": "I use my Beelink as the main server in my homelab, running Proxmox, to host self-hosted services, run Docker containers, and test open-source tools.",
"fr": "J’utilise mon Beelink comme premier serveur de mon homelab, avec Proxmox, pour héberger mes services en auto-hébergement, faire tourner des conteneurs Docker et tester des services open-source.",
"es": "Utilizo mi Beelink como primer servidor de mi homelab, con Proxmox, para alojar servicios autogestionados, ejecutar contenedores Docker y probar herramientas de código abierto."
},
"category": "homelab"
}

9
content/uses/0.stack-programming-languages.json
View File

@@ -1,9 +0,0 @@
{
"name": "Programming",
"description": {
"en": "Java, Python, Html, Css, JavaScript, TypeScript, SQL.",
"fr": "Java, Python, Html, Css, JavaScript, TypeScript, SQL.",
"es": "Java, Python, Html, Css, JavaScript, TypeScript, SQL."
},
"category": "stack"
}

9
content/uses/1.homelab-tp-link.json
View File

@@ -1,9 +0,0 @@
{
"name": "Switch TP-Link 5 ports",
"description": {
"en": "I use my 5-port TP-Link switch to connect my various network devices to my main server and ensure fast, stable local communication.",
"fr": "J’utilise mon switch TP-Link 5 ports pour connecter mes différents appareils réseau à mon serveur principal et assurer une communication locale rapide et stable.",
"es": "Utilizo mi switch TP-Link de 5 puertos para conectar mis distintos dispositivos de red a mi servidor principal y garantizar una comunicación local rápida y estable."
},
"category": "homelab"
}

9
content/uses/1.stack-frontend.json
View File

@@ -1,9 +0,0 @@
{
"name": "FrontEnd",
"description": {
"en": "Nuxt Stack (Framework, UI, Hub, Content, Studio), VueJS, TailwindCSS, Vite.",
"fr": "Nuxt Stack (Framework, UI, Hub, Content, Studio), VueJS, TailwindCSS, Vite.",
"es": "Nuxt Stack (Framework, UI, Hub, Content, Studio), VueJS, TailwindCSS, Vite."
},
"category": "stack"
}

9
content/uses/2.stack-backend.json
View File

@@ -1,9 +0,0 @@
{
"name": "BackEnd",
"description": {
"en": "AdonisJs, Nuxt (powered by Nitro), PostgreSQL, Redis, MariaDB.",
"fr": "AdonisJs, Nuxt (powered by Nitro), PostgreSQL, Redis, MariaDB.",
"es": "AdonisJs, Nuxt (powered by Nitro), PostgreSQL, Redis, MariaDB."
},
"category": "stack"
}

9
content/uses/3.homelab-softwares.json
View File

@@ -1,9 +0,0 @@
{
"name": "Self-Hosted Services",
"description": {
"en": "Uptime Kuma, Beszel, Traefik, Cloudflare, MySpeed, AdGuard Home, Portainer, Home Assistant, Minio, Immich, Vaultwarden, Tailscale, Palmr and Cap.so",
"fr": "Uptime Kuma, Beszel, Traefik, Cloudflare, MySpeed, AdGuard Home, Portainer, Home Assistant, Minio, Immich, Vaultwarden, Tailscale, Palmr et Cap.so",
"es": "Uptime Kuma, Beszel, Traefik, Cloudflare, MySpeed, AdGuard Home, Portainer, Home Assistant, Minio, Immich, Vaultwarden, Tailscale, Palmr y Cap.so"
},
"category": "homelab"
}

9
content/uses/3.stack-devops.json
View File

@@ -1,9 +0,0 @@
{
"name": "DevOps",
"description": {
"en": "Docker, Git, GitHub, Traefik.",
"fr": "Docker, Git, GitHub, Traefik.",
"es": "Docker, Git, GitHub, Traefik."
},
"category": "stack"
}

9
content/uses/4.stack-python.json
View File

@@ -1,9 +0,0 @@
{
"name": "Python Frameworks",
"description": {
"en": "Pytorch, Scikit-learn, Tensorflow, Numpy, Matplotlib, Pandas, Seaborn.",
"fr": "Pytorch, Scikit-learn, Tensorflow, Numpy, Matplotlib, Pandas, Seaborn.",
"es": "Pytorch, Scikit-learn, Tensorflow, Numpy, Matplotlib, Pandas, Seaborn."
},
"category": "stack"
}

9
content/uses/apple-airpods-pro.json
View File

@@ -1,9 +0,0 @@
{
"name": "Apple AirPods Pro",
"description": {
"en": "Probably my most used item after my phone and laptop. I use them for everything from listening to music to taking calls. They are super convenient and the sound quality is great.",
"fr": "Probablement l'objet que j'utilise le plus après mon téléphone et mon ordinateur portable. Je les utilise pour tout, de l'écoute de musique à la prise d'appels. Ils sont super pratiques et la qualité sonore est excellente.",
"es": "Probablemente el objeto que más utilizo después de mi móvil y mi portátil. Los utilizo para todo, para escuchar música y contentar llamadas. Son súper prácticos y la calidad sonora es excelente."
},
"category": "hardware"
}

9
content/uses/apple-ipad-air.json
View File

@@ -1,9 +0,0 @@
{
"name": "Apple iPad Air",
"description": {
"en": "I use my iPad to read books, watch movies, and browse the web, but also to take notes and write some equations during my math classes.",
"fr": "J'utilise mon iPad pour lire des livres, regarder des films et naviguer sur le web, mais aussi pour prendre des notes et écrire des équations pendant mes cours de mathématiques.",
"es": "Utilizo mi iPad para leer libros, ver películas y navegar por internet, pero también para coger apuntes y escribir ecuaciones en mis clases de matemáticas."
},
"category": "hardware"
}

9
content/uses/apple-iphone-14-pro.json
View File

@@ -1,9 +0,0 @@
{
"name": "Apple iPhone 14 Pro",
"description": {
"en": "I don't upgrade my phone every year, but when I do, I go for the best. The iPhone 14 Pro is the best phone on the market, and I'm excited to get my hands on it.",
"fr": "Je n'améliore pas mon téléphone chaque année, mais quand je le fais, je vais pour le meilleur. L'iPhone 14 Pro est le meilleur téléphone sur le marché, et je suis excité de mettre la main dessus.",
"es": "No cambio de teléfono cada año, pero cuando lo hago, voy a por lo mejor. El iPhone 14 Pro es el mejor teléfono del mercado, y estoy muy contento de tenerlo a mano."
},
"category": "hardware"
}

9
content/uses/apple-macbook-pro.json
View File

@@ -1,9 +0,0 @@
{
"name": "Apple MacBook Pro 13'",
"description": {
"en": "My main programming computer is a MacBook Pro 13' 2020 with the Apple M1 Chip and 16Go RAM. I use MacOS Sorona.",
"fr": "Mon ordinateur principal pour programmer est un MacBook Pro 13' 2020 avec la puce Apple M1 et 16Go de RAM. J'utilise MacOS Sorona.",
"es": "Mi ordenador principal para programar es un Apple MacBook Pro 13’ 2020 con el chip Apple M1 y 16Go de Ram. Utilizo MAcOs Sorona."
},
"category": "hardware"
}

9
content/uses/apple-suite.json
View File

@@ -1,9 +0,0 @@
{
"name": "Apple Suite",
"description": {
"en": "I'm using the Apple Suite including Mail, Calendar, Notes, Music and Reminders for my daily organization.",
"fr": "J'utilise la suite Apple comprenant Mail, Calendar, Notes, Music et Reminders pour mon organisation quotidienne.",
"es": "Utilizo la suite Apple que tiene Mail, Calendar, Notes, Music y Reminders para mi organización diaria."
},
"category": "software"
}

8
content/uses/categories/1.hardware.json
View File

@@ -1,8 +0,0 @@
{
"id": "hardware",
"name": {
"en": "Hardware",
"fr": "Matériel",
"es": "Material"
}
}

8
content/uses/categories/2.software.json
View File

@@ -1,8 +0,0 @@
{
"id": "software",
"name": {
"en": "Software",
"fr": "Logiciel",
"es": "Programas"
}
}

9
content/uses/categories/3.ide.json
View File

@@ -1,9 +0,0 @@
{
"id": "ide",
"name": {
"en": "IDE & Font",
"fr": "IDE & Police",
"es": "IDE y Fuente"
},
"carousel": "ides"
}

8
content/uses/categories/4.homelab.json
View File

@@ -1,8 +0,0 @@
{
"id": "homelab",
"name": {
"en": "My personal HomeLab",
"fr": "Mon HomeLab personnel",
"es": "Mi HomeLab personal"
}
}

8
content/uses/categories/5.stack.json
View File

@@ -1,8 +0,0 @@
{
"id": "stack",
"name": {
"en": "Stack",
"fr": "Stack",
"es": "Stack"
}
}

9
content/uses/dia-browser.json
View File

@@ -1,9 +0,0 @@
{
"name": "Dia Browser",
"description": {
"en": "Dia is the AI browser from The Browser Company. I can Chat with my tabs, write in my own voice, learn and plan faster, shop, and more — all with privacy that I control.",
"fr": "Dia est le navigateur IA de The Browser Company. Je peux discuter avec mes onglets, écrire avec mon propre style, apprendre et planifier plus rapidement, faire du shopping, et bien plus — tout en contrôlant ma vie privée.",
"es": "Dia es el navegador con IA de The Browser Company. Puedo chatear con mis pestañas, escribir con mi propio estilo, aprender y planificar más rápido, comprar y mucho más, todo con una privacidad que yo controlo."
},
"category": "software"
}

9
content/uses/discord.json
View File

@@ -1,9 +0,0 @@
{
"name": "Discord",
"description": {
"en": "I'm using Discord for chatting and talking with my friends and my customers and discussing with some community members.",
"fr": "J'utilise Discord pour discuter et parler avec mes amis et mes clients et discuter avec certains membres de la communauté.",
"es": "Utilizo discord para charlar y hablar con mis amigos y mis clientes y para intercambiar opiniones con algunos miembros de la comunidad."
},
"category": "software"
}

9
content/uses/gaming-computer.json
View File

@@ -1,9 +0,0 @@
{
"name": "Custom Built Gaming PC",
"description": {
"en": "I have bought a customized computer for the gaming. I have chosen an Intel Core i5-10400F, with 16Go DDR4 and my graphical card is a RTX 2060. I use Windows 11.",
"fr": "J'ai acheté un ordinateur personnalisé pour le jeu. J'ai choisi un Intel Core i5-10400F, avec 16Go DDR4 et ma carte graphique est une RTX 2060. J'utilise Windows 11.",
"es": "Compré un ordenador especializado en el juego. Elegí un Intel Core i5-10400F, con 16Go DDR4 y la targeta gráfica que utilizo es una RTX 2060. Utilizo Windows 11."
},
"category": "hardware"
}

9
content/uses/google-chrome.json
View File

@@ -1,9 +0,0 @@
{
"name": "Google Chrome",
"description": {
"en": "I'm using Google Chrome for browsing, the dev tool, and the extension market.",
"fr": "J'utilise Google Chrome pour naviguer, l'outil de développement et le marché des extensions.",
"es": "Utilizo Google Chrome cómo navegador, herramienta de desarrollo y mercado de extensiones. "
},
"category": "software"
}

9
content/uses/jetbrains-suite.json
View File

@@ -1,9 +0,0 @@
{
"name": "JetBrains Suite (IntelliJ IDEA Ultimate, PyCharm Professional, WebStorm, DataGrip)",
"description": {
"en": "I use JetBrains Suite for development for 7 years. It's the best IDEs for Java, Python, JavaScript, SQL, and more. I used this suite to develop and to create this website.",
"fr": "J'utilise la suite JetBrains pour le développement depuis 7 ans. C'est le meilleur IDE pour Java, Python, JavaScript, SQL et plus encore. J'ai utilisé cette suite pour développer et créer ce site web.",
"es": "Uso JetBrains Suite para el desarrollo desde hace 7 años. Es el mejor IDE para Java, Python, JavaScript, SQL y más. He utilizado esta suite para desarrollar y crear este sitio web."
},
"category": "ide"
}

9
content/uses/logitech-g203.json
View File

@@ -1,9 +0,0 @@
{
"name": "Logitech G203 LightSync Black",
"description": {
"en": "This gaming mouse is designed to be the perfect gaming companion. With a classic design and simple layout, this mouse is perfect for any gamer.",
"fr": "Cette souris de jeu est conçue pour être le compagnon de jeu parfait. Avec un design classique et une disposition simple, cette souris est parfaite pour tout joueur.",
"es": "Este ratón de juego está concebido para ser el compañero perfecto. Con un diseño clásico y una disposición simple, este raton es perfecto en todos los aspectos."
},
"category": "hardware"
}

9
content/uses/notion.json
View File

@@ -1,9 +0,0 @@
{
"name": "Notion & Notion Calendar",
"description": {
"en": "Notion is my all-in-one tool for note-taking, kanban boards, wikis, and drafts. I use Notion Calendar to sync my databases with my calendar.",
"fr": "Notion est mon outil de prise de notes, de kanban, de wikis et de brouillon tout-en-un. J'utilise Notion Calendar pour synchroniser mes bases de données à mon calendrier.",
"es": "Notion es mi herramienta todo en uno para tomar notas, tableros kanban, wikis y borradores. Uso Notion Calendar para sincronizar mis bases de datos con mi calendario."
},
"category": "software"
}

9
content/uses/raycast.json
View File

@@ -1,9 +0,0 @@
{
"name": "RayCast",
"description": {
"en": "Raycast is my extendable launcher replacing Apple Spotlight. It lets me complete tasks, calculate, share common links, and much more thanks to the extensions.",
"fr": "Raycast est mon lanceur extensible remplaçant Apple Spotlight. Il me permet d'accomplir des tâches, de calculer, de partager des liens communs et bien plus encore grâce aux extensions.",
"es": "RayCast es mi launcher extensible, que remplaza a Apple Spotlight. Me permite completar tareas, calcular, compartir links comunes y mucho más gracias a todas las extensiones"
},
"category": "software"
}

9
content/uses/steelseries-apex-9-tkl.json
View File

@@ -1,9 +0,0 @@
{
"name": "SteelSeries Apex 9 TKL",
"description": {
"en": "This TKL keyboard is a great choice for gamers who want a compact keyboard with a lot of features.",
"fr": "Ce clavier TKL est un excellent choix pour les joueurs qui veulent un clavier compact avec de nombreuses fonctionnalités.",
"es": "Este teclado TKL es una elección excelente para los jugadores que quieren un teclado compacto para muchas funcionalidades."
},
"category": "hardware"
}

9
content/uses/themes-fonts.json
View File

@@ -1,9 +0,0 @@
{
"name": "Theme and Font",
"description": {
"en": "My theme is Catppuccin Macchiato, a community-driven pastel theme that aims to be the middle ground between low and high contrast themes. My main fonts are Vercel Geist and JetBrains Mono",
"fr": "Mon thème est Catppuccin Macchiato, un thème pastel piloté par la communauté qui vise à être le juste milieu entre les thèmes à faible et à fort contraste. Mes polices principales sont Vercel Geist et JetBrains Mono",
"es": "Mi tema es Catppuccin Macchiato, un tema pastel impulsado por la comunidad que tiene como objetivo ser el punto intermedio entre los temas de bajo y alto contraste. Mis fuentes principales son Vercel Geist y JetBrains Mono"
},
"category": "ide"
}

9
content/uses/vscode.json
View File

@@ -1,9 +0,0 @@
{
"name": "Visual Studio Code",
"description": {
"en": "Built for flexibility and performance, Visual Studio Code is my main development environment. Lightweight yet powerful, it supports Python, JavaScript, TypeScript, SQL, and more. I rely on its extensions and AI integrations to code faster, better, and with full control over my workspace.",
"fr": "Construit pour la flexibilité et la performance, Visual Studio Code est mon environnement de développement principal. Léger mais puissant, il prend en charge Python, JavaScript, TypeScript, SQL et bien d'autres langages. J'utilise ses extensions et ses intégrations IA pour coder plus vite, mieux, et avec une grande maîtrise de mon environnement.",
"es": "Diseñado para la flexibilidad y el rendimiento, Visual Studio Code es mi entorno de desarrollo principal. Ligero pero potente, admite Python, JavaScript, TypeScript, SQL y mucho más. Aprovecho sus extensiones e integraciones con IA para programar más rápido, mejor y con un control total de mi entorno."
},
"category": "ide"
}

9
content/uses/warp.json
View File

@@ -1,9 +0,0 @@
{
"name": "Warp",
"description": {
"en": "Warp is a modern, Rust-based terminal reimagined with AI and collaborative tools for better productivity. I'm loving it so far!",
"fr": "Warp est un terminal moderne basé sur Rust réimaginé avec l'IA et des outils collaboratifs pour une meilleure productivité. Je l'adore jusqu'à présent !",
"es": "Warp es un terminal moderno, basado en Rust y modernizado con la Ia y herramientas colaborativas, para conseguir una mejor productividad. Hasta ahora me encanta !"
},
"category": "software"
}

125
content/writings/how-my-website-works.md
View File

@@ -1,125 +0,0 @@
---
slug: how-my-website-works
title: How my website works?
description: My new website is using a fantastical stack and I am explaining how my playground works
publishedAt: 2024/06/21
readingTime: 5
tags:
- 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.
While it's still fresh in my mind, I wanted to document how this version of the site works, the tools I used to build it, and the challenges I overcame to bring it to its current state.
::prose-img
---
src: /writings/website-work/website.png
label: Website
caption: Website screenshot
---
::
## 1 - Ideas and Goals
Most of the time, I work on my site for fun and without any profit motive. However, while building this latest version, I managed to keep a few key ideas and goals in mind:
### 1.1 - Reduce writing friction
This new version of my website was built with the idea that I should be able to add, edit, and delete content directly from the front-end. This means that everything needs to be backed by a database or CMS, which quickly adds complexity. But at the end of the day, adding a bookmark should be a matter of pasting a URL and clicking save. Writing a blog post should be a matter of typing some Markdown and clicking publication.
Extra friction on these processes would make me less likely to keep things up to date or share new things.
### 1.2 - A playground for ideas
I want my website to be a playground where I can safely experiment with new technologies and packages, including testing frameworks (like the new Nuxt 3 stack), improving CSS styles with Tailwind, and discovering new technologies and frameworks, in a way that allows for easy isolation and deletion. This requirement made Nuxt.js an obvious choice, thanks to its support for hybrid page rendering strategies—static, server-rendered, or client-rendered. More on this below.
### 1.3 - Fast
The new version of my website is faster than the old one, thanks to the latest version of Nuxt. This improvement enhances the overall user experience and ensures that the site remains responsive and efficient.
## 2 - FrontEnd & BackEnd with Nuxt 3
I wanted this version of my site to reflect my personality, especially because it seemed like a fun project! What would a 'personal application' look like, showcasing everything I've created? I aimed for a clean, monochrome design with plenty of 'Easter eggs' to keep things interesting.
### 2.1 - Nuxt 3
Nuxt.js is my front-end framework of choice. I particularly appreciate it for its comprehensive and complementary Vue and Nuxt ecosystem. The filesystem-based router provides an intuitive and powerful abstraction for building the route hierarchy. Nuxt.js also benefits from a large community that has thoroughly tested the framework, addressing edge cases and developing creative solutions for common Vue, data recovery, and performance issues. Whenever I encounter a problem, I turn to the Nuxt.js discussions on [GitHub](https://github.com/nuxt) or their [Discord server](https://go.nuxt.com/discord). Almost every time, I find that others have already come up with innovative solutions to similar challenges.
Nuxt.js is also fast. It optimizes performance by speeding up local builds, automatically compressing static assets, and ensuring quick deployment times. The regular project updates mean my site continually gets faster over time—at no extra cost!
### 2.2 - Styling
#### Tailwind CSS
Tailwind is my favorite CSS authoring tool... ever. It's incredibly effective. I often see debates on Twitter about whether Tailwind is the best or worst thing ever, and I prefer not to engage in that discussion. Here's my take:
Tailwind is a toolkit that makes everything great by default and fast. The magic lies in its token system and the default values built into the framework. Once I grasped the semantics of Tailwind, I was able to style my tags at the speed of thought.
Tailwind provides everything I need out of the box, but I've gradually added a bit of custom CSS to make things more unique.
#### Nuxt UI
Nuxt UI is a new tool I've been using since its release to enhance and streamline my Nuxt projects. It’s a module that offers a collection of Vue components and composables built with Tailwind CSS and Headless UI, designed to help you create beautiful and accessible user interfaces.
Nuxt UI aims to provide everything you need for the UI when building a Nuxt app, including components, icons, colors, dark mode, and keyboard shortcuts. It's an excellent tool for both beginners and experienced developers.
### 2.3 - Database & Deployment
#### NuxtHub & Cloudflare workers
::prose-img
---
src: /writings/website-work/nuxt-hub.png
label: NuxtHub
caption: NuxtHub screenshot
---
::
NuxtHub is an innovative deployment and management platform tailored for Nuxt, leveraging the power of Cloudflare. Deploy your application effortlessly with database, key-value, and blob storage—all configured seamlessly within your Cloudflare account.
NuxtHub enables cost-effective hosting of high-performance Nuxt applications across multiple environments. It simplifies the process of launching your app swiftly, eliminating concerns about server setup or complex deployment pipelines with just a single command.
#### Drizzle
Drizzle is a unique ORM that offers both relational and SQL-like query APIs, combining the best of both worlds for accessing relational data. Lightweight, performant, typesafe, and designed to be serverless-ready, Drizzle is also flexible and gluten-free—delivering a sober and seamless experience.
Drizzle isn't just a library; it's an exceptional journey 🤩. It empowers you to build your project without imposing on your structure or workflow. With Drizzle, you can define and manage database schemas in TypeScript, access your data using SQL-like or relational methods, and use optional tools to enhance your development experience significantly.
One word : `If you know SQL — you know Drizzle.`
### 2.4 - Writing
#### Nuxt Studio
::prose-img
---
src: /writings/website-work/nuxt-studio.png
label: Nuxt Studio
caption: Nuxt Studio screenshot
---
::
Nuxt Studio introduces a fresh editing experience for your Nuxt Content website, providing limitless customization and a user-friendly interface. Edit your website effortlessly with our editor reminiscent of Notion, fostering seamless collaboration between developers and copywriters. It offers a rich text editor, markdown support, and a live preview, enabling you to create and edit content with ease.
#### Markdown
I've abandoned using rich text editors on the web. They're overly complex, each with its own intricate abstractions for blocks and elements. To avoid another major rewrite soon, I've sought the simplest, most straightforward solution for publishing content on my site: plain text.
The article you're currently reading is plain text stored in MySQL, rendered using vue-markdown. You can view my custom element renderings here. I enhance my Markdown capabilities by employing plugins like remark-gfm, which add support for tables, strikethrough, footnotes, and other features.
Compromises are inevitable! I've chosen to sacrifice some features for simplicity and speed. I'm content with my decision, as it aligns with my goal of reducing friction in the writing process.
## 3 - How much everything costs
I'm often asked how much it costs to run my website. Here's a breakdown of the costs:
- NuxtHub: 0€
- Cloudflare Workers: 0€
- Nuxt Studio: 0€
Total: 0€ thanks to nuxt free plan and cloudflare free plan
## 4 - Thanks
I want to thank the Nuxt team for their hard work and dedication to the project. I also want to thank the community for their support and for providing me with the tools I needed to build this site. I want to add a special thanks to [Estéban](https://x.com/soubiran_) for solving `All` my problems and for inspiring me to rewrite my website.

185
content/writings/log-lin-reg.md
View File

@@ -1,185 +0,0 @@
---
slug: log-ling-reg
title: "Linear vs. Logistic Regression: A Comprehensive Guide to Understanding
Their Differences and Applications"
description: This article compares linear and logistic regression, highlighting
their differences and uses.
publishedAt: 2025/06/12
readingTime: 10
tags:
- maths
- ai
---
## I. Introduction
![log-vs-lin.webp](/writings/log-lin-reg/log-vs-lin.webp)
Regression analysis is a cornerstone technique in the realm of data science, pivotal for uncovering patterns within data and making informed predictions across various domains. While linear regression is widely recognized and frequently utilized, logistic regression stands as another critical method, albeit for different purposes.
This article aims to illuminate the fascinating dynamics of linear and logistic regression, highlighting not only their similarities but, crucially, their differences. Both techniques, though rooted in regression analysis, are tailored for distinct applications and possess unique characteristics.
For data analysts, researchers, and practitioners, grasping these distinctions is essential. It empowers them to choose the right regression technique tailored to their specific challenges, whether predicting continuous outcomes like house prices or classifying binary outcomes such as identifying spam emails.
In the sections that follow, we will unravel the complexities and nuances of linear and logistic regression. We begin by laying the groundwork with linear regression, exploring its core assumptions and mathematical underpinnings. Subsequently, we will explore logistic regression, detailing its unique attributes and how it diverges from linear regression.
Through practical examples and real-world case studies, we will illustrate the application of these techniques, providing clarity on their specific uses and advantages.
We will delve into the models and assumptions that differentiate linear and logistic regression. This includes examining the linear relationship assumption in linear regression and the consequences of its violation, as well as understanding how logistic regression uses the logit transformation to handle probabilities and binary outcomes.
Interpreting regression results is another critical area we will cover. We will discuss how the coefficients from linear and logistic regression models offer different insights, emphasizing their unique interpretations.
Finally, we will address the practical implementation of both regression techniques using popular statistical software. We will also touch on recent advancements and best practices in the field, equipping readers with the knowledge to excel in regression analysis.
By the end of this article, you will have a comprehensive understanding of linear and logistic regression, enabling you to tackle diverse data analysis challenges and make well-informed decisions when selecting the appropriate regression technique for your needs. Let's embark on this enlightening journey into the world of linear and logistic regression.
## II. Understanding Linear Regression
![lin-and-poly.webp](/writings/log-lin-reg/lin-and-poly.webp)
Linear regression is a cornerstone technique in statistical modeling, designed to establish a linear relationship between a dependent variable and one or more independent variables. It is instrumental in predicting numerical outcomes and understanding the influence of independent variables on the target variable.
### **Definition and Purpose**
Linear regression aims to model the relationship between a dependent variable (often referred to as the response variable) and one or more independent variables (known as predictor variables or features). The primary objective is to determine the best-fitting line or hyperplane that minimizes the sum of squared differences between the predicted and actual values. This line or hyperplane facilitates predictions and elucidates the relationships between variables.
### **Assumptions**
To ensure the validity and reliability of the model, linear regression relies on several key assumptions:
- **Linearity**: The relationship between the independent and dependent variables should be linear.
- **Independence of Errors**: The residuals (errors) should be independent.
- **Homoscedasticity**: The variance of residuals should be constant across all levels of the independent variables.
- **Normality of Errors**: The residuals should be normally distributed.
It is crucial to verify these assumptions before interpreting the results of a linear regression analysis.
### **Mathematical Foundations**
The mathematical underpinnings of linear regression are based on the principle of ordinary least squares (OLS) estimation. OLS estimates the regression coefficients that minimize the sum of squared differences between the observed and predicted values. These coefficients represent the slope and intercept of the regression line, indicating the relationship and the magnitude of influence between the independent and dependent variables.
### **Applications**
Linear regression is widely applied across various fields. It enables the prediction of numerical values based on existing data and identifies significant predictors affecting the target variable. Some common applications include:
- Predicting housing prices based on features such as square footage, number of bedrooms, and location.
- Forecasting sales figures based on marketing expenditures.
- Estimating the impact of education and experience on salary levels.
Understanding the fundamentals of linear regression is essential for building a robust foundation in regression analysis. In the following sections, we will delve into the intricacies of logistic regression and explore how it diverges from linear regression in terms of purpose, mathematical model, and interpretation of results.
## III. Understanding Logistic Regression
![log.webp](/writings/log-lin-reg/log.webp)
While linear regression excels at predicting numerical values, logistic regression is tailored for binary classification problems. It models the probability of an event occurring, enabling predictions based on that probability. In this section, we will explore the nuances of logistic regression and highlight its key differences from linear regression.
### **Definition and Purpose**
Logistic regression is a statistical technique used to model the relationship between a binary dependent variable (often referred to as the outcome variable) and one or more independent variables. Unlike linear regression, which predicts continuous values, logistic regression estimates the probability of the outcome variable belonging to a specific category or class.
### **Contrast with Linear Regression**
One of the primary differences between linear and logistic regression lies in their purposes. While linear regression predicts continuous numerical values, logistic regression is designed for binary classification tasks. Logistic regression is ideal for scenarios where the dependent variable has two possible outcomes, such as yes/no, true/false, or 0/1.
### **Mathematical Model**
The mathematical model of logistic regression differs from that of linear regression. Logistic regression applies a logit transformation to model the log-odds of the probability of the outcome variable. The logit function, also known as the sigmoid function, maps the linear combination of the independent variables to a value between 0 and 1, representing the probability of the outcome variable belonging to the positive class.
### **Applications**
Logistic regression is widely used across various fields for binary classification tasks. Common applications include:
- Predicting customer churn.
- Determining the likelihood of a patient having a particular disease based on medical indicators.
- Classifying emails as spam or legitimate.
Logistic regression can also be extended to multi-class classification problems using techniques like one-vs-rest or softmax regression.
Understanding the unique characteristics and purpose of logistic regression is crucial for determining its appropriate usage in different scenarios. In the following sections, we will explore the differences in model assumptions and the interpretation of results between linear and logistic regression, providing further insights into their distinct nature.
## **IV. Differences in Model and Assumptions**
While both linear regression and logistic regression are types of regression analysis, they differ significantly in their underlying models and assumptions. In this section, we will compare and contrast the models and assumptions of linear and logistic regression, highlighting their distinct characteristics.
### **Model Assumptions in Linear Regression**
Linear regression relies on several key assumptions to ensure the validity of the model and the reliability of the results:
- **Linearity**: Assumes a linear relationship between the dependent variable and the independent variables.
- **Independence of Errors**: The residuals (errors) should be independent.
- **Homoscedasticity**: The variance of residuals should be constant across all levels of the independent variables.
- **Normality of Errors**: The residuals should be normally distributed.
Violating these assumptions can affect the accuracy and interpretability of the results.
### **Linear Relationships in Linear Regression**
Linear regression assumes a linear relationship between the dependent variable and the independent variables. This implies that a constant change in the independent variable leads to a constant change in the dependent variable. However, in cases where a non-linear relationship exists, transformations or non-linear modeling techniques may be employed to capture the underlying patterns effectively.
### **Model Assumptions in Logistic Regression**
Logistic regression has different assumptions compared to linear regression:
- **No Linearity Assumption**: The linearity assumption is not required in logistic regression since the relationship between the independent variables and the log-odds of the outcome variable is modeled through the logit transformation.
- **Independence of Observations**: Logistic regression assumes that the observations are independent of each other.
### **Logit Transformation in Logistic Regression**
In logistic regression, the logit transformation is used to map the linear combination of the independent variables to a value between 0 and 1. This transformed value represents the probability of the outcome variable belonging to the positive class. Unlike linear regression, logistic regression allows us to model probabilities and binary outcomes effectively.
Understanding the differences in model assumptions between linear and logistic regression is essential for choosing the appropriate technique for a given problem. In the following section, we will explore the interpretation of results in both regression techniques, shedding light on how the coefficients are understood and their implications.
## **V. Interpretation of Results**
Interpreting the results of regression analysis is a crucial step in understanding the relationship between variables and deriving meaningful insights. In this section, we will explore how the interpretation of results differs between linear and logistic regression, shedding light on the unique implications of their coefficients.
### **Interpretation of Results in Linear Regression**
In linear regression, the coefficients associated with the independent variables represent the change in the dependent variable for a unit change in the corresponding independent variable, while holding other variables constant. These coefficients indicate the direction (positive or negative) and magnitude of the relationship between the independent and dependent variables. Additionally, the intercept term represents the expected value of the dependent variable when all independent variables are zero.
### **Interpretation of Results in Logistic Regression**
Interpreting the results in logistic regression differs from linear regression due to the use of the logit transformation. In logistic regression, the coefficients represent the change in the log-odds of the outcome variable for a unit change in the corresponding independent variable, while holding other variables constant. To interpret the coefficients, we can exponentiate them to obtain odds ratios, which indicate the multiplicative change in the odds of the outcome for a one-unit increase in the independent variable.
### **Understanding Odds Ratios**
In logistic regression, odds ratios provide insights into the relationship between the independent variables and the likelihood of the outcome variable belonging to the positive class. An odds ratio greater than 1 indicates that an increase in the independent variable’s value leads to higher odds of the positive outcome, while an odds ratio less than 1 suggests a decrease in the odds of the positive outcome. Additionally, odds ratios close to 1 indicate a weaker or negligible impact of the independent variable on the outcome.
### **Confidence Intervals and Significance**
Similar to linear regression, logistic regression results include confidence intervals and p-values to assess the significance of the coefficients. A statistically significant coefficient implies that the independent variable has a significant impact on the outcome variable, while a non-significant coefficient suggests a lack of evidence for a relationship.
Interpreting the results of regression analysis allows us to gain insights into the relationships between variables and draw meaningful conclusions. Understanding the unique interpretations of coefficients in linear and logistic regression enables us to make informed decisions and draw accurate inferences from the analysis. In the next section, we will provide practical examples and case studies to illustrate the distinct applications of linear and logistic regression in real-world scenarios.
## **VI. Practical Examples**
To gain a deeper understanding of the distinct applications of linear and logistic regression, let's explore practical examples and case studies that highlight their usage in real-world scenarios. By examining these examples, we can grasp how linear and logistic regression are employed to address specific challenges and derive valuable insights.
### **Linear Regression Example**
Consider a real estate agency aiming to predict housing prices based on various features such as square footage, number of bedrooms, and location. Linear regression can be applied to create a model that estimates the price of a house based on these variables. By analyzing the coefficients obtained from the linear regression model, we can determine which features have a significant impact on the house price and understand the direction of that impact.
### **Logistic Regression Example**
Imagine a healthcare provider tasked with predicting the likelihood of a patient developing a particular disease based on medical indicators such as age, blood pressure, and cholesterol levels. Logistic regression can be utilized to build a model that estimates the probability of a patient having the disease. By examining the odds ratios derived from the logistic regression model, we can identify the most influential factors that contribute to the likelihood of disease occurrence.
These examples illustrate the distinct purposes and applications of linear and logistic regression. While linear regression is suitable for predicting numerical values, logistic regression excels in binary classification tasks, such as disease prediction, spam email detection, or customer churn analysis. Understanding when to employ each technique enables us to make accurate predictions and informed decisions.
In the conclusion, we will summarize the key points discussed throughout the article and emphasize the importance of understanding the distinctions between linear and logistic regression for data analysis.
## VII. Conclusion
In this article, we have explored the similarities and differences between linear and logistic regression, two fundamental techniques in regression analysis. While both approaches fall under the umbrella of regression, they serve distinct purposes and are suited for different types of problems.
Linear regression excels at predicting numerical values and understanding the relationship between independent and dependent variables. By assuming linearity and employing ordinary least squares estimation, linear regression provides insights into the impact of predictors on the outcome variable.
On the other hand, logistic regression is specifically designed for binary classification tasks. By employing the logit transformation and modeling the probability of the outcome variable belonging to a specific class, logistic regression enables effective classification and prediction in scenarios such as disease diagnosis, customer churn analysis, and spam email detection.
Understanding the differences in model assumptions, interpretation of results, and practical applications of linear and logistic regression is crucial for data analysts, researchers, and practitioners. By appropriately selecting the regression technique that aligns with the problem at hand, one can derive accurate insights and make informed decisions.
We have also discussed recent advancements and best practices in regression analysis, including regularization techniques, model selection and validation, handling non-linearity, dealing with missing data, and interpreting complex models. By staying updated with these advancements and adhering to best practices, we can ensure the reliability and accuracy of regression models.
As regression analysis continues to evolve, it is essential to keep learning, exploring new techniques, and staying informed about emerging trends in the field. By doing so, we equip ourselves with the tools and knowledge needed to tackle complex data analysis challenges and derive meaningful insights from regression models.
In conclusion, linear and logistic regression may share some similarities, but their purposes and applications set them apart. Embracing the nuances of each technique empowers us to unlock the full potential of regression analysis and make data-driven decisions in various domains. So, whether it's predicting housing prices or classifying spam emails, understanding the distinctions between linear and logistic regression is key to harnessing the power of regression analysis.

193
content/writings/neural-network.md
View File

@@ -1,193 +0,0 @@
---
slug: neural-network
title: What is a Neural Network?
description: This article introduces neural networks, explaining their structure, training, and key concepts like activation functions and backpropagation. It includes an example with a neural network featuring two hidden layers using TensorFlow.
readingTime: 3
publishedAt: 2025/03/30
tags:
- ai
- maths
- python
---
Neural networks are a class of machine learning algorithms inspired by the functioning of biological neurons. They are widely used in artificial intelligence for image recognition, natural language processing, time series forecasting, and many other fields. Thanks to their ability to model complex relationships in data, they have become one of the pillars of **deep learning**.
## 1 - Basic Structure of a Neural Network
### 1.1 - Neurons and Biological Inspiration
Neural networks are inspired by the way the human brain processes information. Each artificial neuron mimics a biological neuron, receiving inputs, applying a transformation, and passing the result to the next layer.
### 1.2 - Layer Organization (Input, Hidden, Output)
A neural network consists of layers:
- **Input layer**: Receives raw data.
- **Hidden layers**: Perform intermediate transformations and extract important features.
- **Output layer**: Produces the final model prediction.
### 1.3 - Weights and Biases
Each neuron connection has an associated **weight** $ w $, and each neuron has a **bias** $ b $. The transformation applied at each neuron before activation is given by:
$$
z = W \cdot X + b
$$
### 1.4 - Neural Network Structure Visualization
::prose-img
---
src: /writings/neural-network/neural-network-viz.png
label: Neural Network Structure
caption: Neural Network Structure
---
::
Starting from the left, we have:
- The input layer of our model in orange.
- Our first hidden layer of neurons in blue.
- Our second hidden layer of neurons in magenta.
- The output layer (a.k.a. the prediction) of our model in green.
- The arrows that connect the dots shows how all the neurons are interconnected and how data travels from the input layer all the way through to the output layer.
## 2 - Information Propagation (Forward Pass)
### 2.1 - Linear Transformation $ z = W \cdot X + b $
Each neuron computes a weighted sum of its inputs plus a bias term before applying an activation function.
### 2.2 - Activation Functions (ReLU, Sigmoid, Softmax)
Activation functions introduce **non-linearity**, enabling networks to learn complex patterns:
- **ReLU**: $ f(z) = \max(0, z) $ (fast training, avoids vanishing gradients)
- **Sigmoid**: $ \sigma(z) = \frac{1}{1 + e^{-z}} $ (useful for binary classification)
- **Softmax**: Converts outputs into probability distributions for multi-class classification.
## 3 - Learning and Backpropagation
### 3.1 - Cost Function (MSE, Cross-Entropy)
To measure error, different loss functions are used:
- **Mean Squared Error (MSE)**:
$$
L(y, \hat{y}) = \frac{1}{n} \sum_{i=1}^{n} (y_i - \hat{y}_i)^2
$$
- **Cross-Entropy** for classification:
$$
L(y, \hat{y}) = - \sum_{i=1}^{n} y_i \log(\hat{y}_i)
$$
Where, $y$ represents the true values or labels, while $\hat{y}$represents the predicted values produced by the model. The goal is to minimize this difference during training.
### 3.2 - Gradient Descent and Weight Updates
Training consists of adjusting weights to minimize loss using **gradient descent**:
$$
w := w - \alpha \frac{\partial L}{\partial w}, \quad b := b - \alpha \frac{\partial L}{\partial b}
$$
### 3.3 - Gradient Propagation via the Chain Rule
Using **backpropagation**, the error is propagated backward through the network using the chain rule, adjusting each weight accordingly.
## 4 - Optimization and Regularization
### 4.1 - Optimization Algorithms (SGD, Adam)
- **Stochastic Gradient Descent (SGD)**: Updates weights after each sample.
- **Adam**: A more advanced optimizer that adapts learning rates per parameter.
The gradient of a function is the vector whose elements are its partial derivatives with respect to each parameter.So each element of the gradient tells us how the cost function would change if we applied a small change to that particular parameter – so we know what to tweak and by how much. To summarize, we can march towards the minimum by following these steps:
::prose-img
---
src: /writings/neural-network/gradient-descent.png
label: Gradient Descent
caption: Gradient Descent
---
::
1. Compute the gradient of our "current location" (calculate the gradient using our current parameter values).
2. Modify each parameter by an amount proportional to its gradient element and in the opposite direction of its gradient element. For example, if the partial derivative of our cost function with respect to B0 is positive but tiny and the partial derivative with respect to B1 is negative and large, then we want to decrease B0 by a tiny amount and increase B1 by a large amount to lower our cost function.
3. Recompute the gradient using our new tweaked parameter values and repeat the previous steps until we arrive at the minimum.
### 4.2 - Regularization to Avoid Overfitting (Dropout, L1/L2)
To prevent overfitting:
- **Dropout** randomly disables neurons during training.
- **L1/L2 regularization** penalizes large weights to encourage simpler models.
## 5 - Network Architectures
Multi-Layer Perceptron (MLP)
A standard feedforward neural network with multiple layers.
Convolutional Neural Networks (CNN) for Images
Specialized for image processing using convolutional filters.
Recurrent Neural Networks (RNN, LSTM, GRU) for Sequences
Useful for time series and natural language tasks.
Transformers for NLP and Vision
State-of-the-art architecture for language understanding and vision tasks.
## 6 - Training and Evaluation
### 6.1 - Data Splitting (Train/Test Split)
To evaluate performance, data is split into **training** and **test** sets.
### 6.2 - Evaluation Metrics (Accuracy, Precision, Recall, RMSE, R²)
Metrics depend on the task:
- **Accuracy, Precision, Recall** for classification.
- **RMSE, R²** for regression.
### 6.3 - Hyperparameter Tuning
Choosing the right:
- **Learning rate**
- **Batch size**
- **Number of layers and neurons**
## 7 - Example: A Neural Network with Two Hidden Layers
The following example demonstrates a simple **multi-layer perceptron (MLP)** with two hidden layers, trained to perform linear regression.
```python
import numpy as np
import tensorflow as tf
import matplotlib.pyplot as plt
# Generating data
X = np.linspace(-1, 1, 100).reshape(-1, 1)
y = 2 * X + 1 + 0.1 * np.random.randn(100, 1) # y = 2x + 1 with noise
# Defining the model
model = tf.keras.Sequential([
tf.keras.layers.Dense(10, input_shape=(1,), activation='relu'), # First hidden layer
tf.keras.layers.Dense(5, activation='relu'), # Second hidden layer
tf.keras.layers.Dense(1, activation='linear') # Output layer
])
# Compiling the model
model.compile(optimizer='adam', loss='mse')
# Training the model
model.fit(X, y, epochs=200, verbose=0)
# Predictions
predictions = model.predict(X)
# Visualizing results
plt.scatter(X, y, label="Actual Data")
plt.plot(X, predictions, color='red', label="Model Predictions")
plt.legend()
plt.show()
```
## 8 - Conclusion
Neural networks form the foundation of modern artificial intelligence. Their ability to learn from data and generalize to new situations makes them essential for applications like computer vision, automatic translation, and predictive medicine. 🚀

125
content/writings/rag-ai-agents.md
View File

@@ -1,125 +0,0 @@
---
slug: rag-ai-agents
title: "Understanding AI Agents, LLMs, and RAG: A Powerful Synergy"
description: Explore how AI agents, Large Language Models (LLMs), and Retrieval-Augmented Generation (RAG) combine to create intelligent, autonomous systems that reason, act, and interact with real-time data.
readingTime: 5
publishedAt: 2025/04/06
tags:
- ai
---
In the rapidly evolving world of artificial intelligence, the combination of Large Language Models (LLMs), AI agents, and Retrieval-Augmented Generation (RAG) is driving new possibilities for autonomous systems. These components, when integrated, create intelligent systems capable of performing complex tasks, reasoning, and interacting with the world around them. In this post, we'll dive into each of these elements and explore their synergy.
## 1 - What is an Agent?
An **AI agent** is an autonomous entity capable of perceiving its environment, making decisions, and taking actions based on its observations. In simpler terms, an agent is a system that can autonomously interact with the world or other systems to achieve a specific goal.
Agents can be divided into two broad categories:
- **Reactive Agents**: These agents respond to specific stimuli without maintaining any internal state. They simply react based on their immediate environment.
- **Proactive Agents**: These agents not only react to their environment but also plan and act based on future goals.
In modern AI, agents are often used in robotics, virtual assistants, and autonomous systems like **AutoGPT** or **LangChain**, which are capable of autonomously handling tasks like research, writing, and decision-making.
## 2 - What is a LLM?
A **Large Language Model (LLM)** is a machine learning model trained on vast amounts of text data, enabling it to understand and generate human-like language. These models, like **GPT (e.g., GPT-4)**, **Claude**, **Mistral**, and **LLaMA**, can produce coherent and contextually relevant responses to a wide range of queries.
LLMs work by predicting the next token (word or part of a word) based on the input they receive. This ability allows them to generate text, summarize documents, answer questions, and even carry on conversations that seem remarkably human.
However, LLMs have their limitations. They can sometimes generate **hallucinations** (incorrect or fabricated information), and their knowledge is **static**, meaning they can become outdated as they don’t automatically update from the web.
## 3 - Messages and Tokens
When interacting with LLMs or agents, information is transmitted through **messages** and **tokens**.
- **Messages** are the pieces of communication sent between the user and the system (or between different components of the AI system). These can be user queries, responses, or commands.
- **Tokens** are the basic units of text that an LLM processes. A token could be a word, part of a word, or even punctuation. In GPT models, a single token can represent a word like "dog" or even part of a word like "re-" in "reliable."
Managing tokens is essential because LLMs have a **token limit**, meaning they can only handle a fixed number of tokens in a single input/output sequence. This limit impacts performance and context retention. Long conversations or documents might require careful handling of token counts to maintain coherence.
## 4 - What Are Tools?
In the context of AI agents, **tools** refer to external resources or systems that the agent can access to help it accomplish tasks. These tools can include:
- **APIs** for data retrieval (like web scraping or querying databases)
- **External software** (e.g., calculation engines, email clients)
- **Search engines** to find up-to-date information
For example, an AI agent might use a **search engine** tool to retrieve the latest news articles, then generate a summary based on that real-time data. These tools allow agents to extend their capabilities beyond the static information contained within their training data.
## 5 - Thought - Actions - Observe
An AI agent typically follows a basic cycle of:
1. **Thought**: The agent processes its input and reasons through the task using models like LLMs.
| Type of Thought | Example |
|---------------------|-------------------------------------------------------------------------|
| Planning | “I need to break this task into three steps: 1) gather data, 2) analyze trends, 3) generate report” |
| Analysis | “Based on the error message, the issue appears to be with the database connection parameters” |
| Decision Making | “Given the user's budget constraints, I should recommend the mid-tier option” |
| Problem Solving | “To optimize this code, I should first profile it to identify bottlenecks” |
| Memory Integration | “The user mentioned their preference for Python earlier, so I'll provide examples in Python” |
| Self-Reflection | “My last approach didn't work well, I should try a different strategy” |
| Goal Setting | “To complete this task, I need to first establish the acceptance criteria” |
| Prioritization | “The security vulnerability should be addressed before adding new features” |
2. **Action**: The agent performs an action, such as sending a query, interacting with an API, or initiating a task.
| Type of Action | Description |
|---------------------|-----------------------------------------------------------------------|
| Information Gathering| Performing web searches, querying databases, or retrieving documents. |
| Tool Usage | Making API calls, running calculations, and executing code. |
| Environment Interaction | Manipulating digital interfaces or controlling physical devices. |
| Communication | Engaging with users via chat or collaborating with other agents. |
3. **Observe**: The agent receives feedback or new data from the environment, which informs its next set of decisions.
| Type of Observation | Example |
|-----------------------|--------------------------------------------------------------------------|
| System Feedback | Error messages, success notifications, status codes |
| Data Changes | Database updates, file system modifications, state changes |
| Environmental Data | Sensor readings, system metrics, resource usage |
| Response Analysis | API responses, query results, computation outputs |
| Time-based Events | Deadlines reached, scheduled tasks completed |
This cycle allows agents to learn, adapt, and improve over time. It also highlights the agent's ability to take actions in real-time, often guided by LLMs, which provide the reasoning and decision-making capabilities.
To better understand these steps, here's a breakdown of the types of **thought**, **action**, and **observation** an AI agent might engage in:
This **Thought → Action → Observe** cycle enables agents to make informed decisions, take meaningful actions, and adjust their behavior based on the results of those actions. Each step is critical for ensuring that the agent remains effective, adaptable, and responsive to its environment.
## 6 - What is RAG?
**Retrieval-Augmented Generation (RAG)** is a technique that enhances LLMs by integrating them with external data retrieval systems. In essence, RAG combines the power of **retrieval-based methods** (finding relevant information from external sources) with **generation-based methods** (creating text based on that information).
Here's how it works:
1. The LLM retrieves relevant data or documents using a search engine or database query.
2. The LLM then generates a response based on the retrieved information.
RAG solves a major problem with LLMs: the **outdated or incomplete information** they may have. By pulling in real-time data, RAG ensures that the generated content is relevant and grounded in current knowledge.
A classic example of RAG is when you ask an AI to summarize the latest research on a particular topic. Instead of relying on the model’s static knowledge base, the model can retrieve relevant papers or articles and generate an accurate summary.
## 7 - Synergy Between RAG and AI Agents
The combination of **RAG** and **AI agents** opens the door to highly autonomous systems capable of not only generating content but also acting on the information in real-time.
Here's how they complement each other:
- **RAG** acts as an external memory or knowledge source for AI agents, providing them with up-to-date information to improve their decision-making and outputs.
- **AI agents**, powered by LLMs, can process this information and take actions based on it, whether it's generating a response, making a decision, or interacting with other systems.
For example, imagine an AI agent that's tasked with assisting a business in handling customer inquiries. It could use RAG to retrieve relevant customer information and FAQs, then generate a response based on that data. It might then take action by sending an email or updating a CRM system based on the customer’s query.
This synergy leads to **autonomous, efficient systems** that can process, reason, and act in a dynamic environment.
## 8 - Conclusion
The combination of **RAG**, **LLMs**, and **AI agents** represents a major leap forward in the field of AI. By merging data retrieval with powerful language models and autonomous agents, we can create intelligent systems that are more accurate, adaptable, and autonomous than ever before.
As these technologies evolve, we can expect even more sophisticated systems capable of transforming industries like healthcare, finance, customer service, and beyond. The future is bright for intelligent agents powered by this synergy!
If you have questions or want to dive deeper into any of the topics covered, feel free to comment below!

113
content/writings/what-is-machine-learning.md
View File

@@ -1,113 +0,0 @@
---
slug: what-is-machine-learning
title: What is Machine Learning?
description: An introduction to machine learning, exploring its main types, key model selection criteria, and the workflow from training to evaluation, with a focus on practical insights.
readingTime: 3
publishedAt: 2024/11/26
tags:
- ai
- maths
---
## 1 - Introduction
Machine Learning (ML) is a key discipline in artificial intelligence (AI), enabling systems to learn from data to make predictions or discover patterns. It is the driving force behind many modern innovations, from personalised recommendations to autonomous vehicles.
In this article, we will cover:
1. **The types of Machine Learning**, to understand the different approaches.
2. **Three considerations for choosing a supervised learning model**, one of the most common ML paradigms.
3. **The typical ML workflow**, exploring the essential steps for developing a model.
4. **Model evaluation through the R² score**, an important metric for regression problems.
## 2 - The Types of Machine Learning
To start, it is important to understand the three main categories of machine learning:
1. **Supervised Learning** This type of learning relies on labeled data, where the model learns to map inputs $X$ to outputs $y$. Common tasks include:
- **Classification**: Assigning data to categories (e.g., spam detection).
- **Regression**: Predicting continuous values (e.g., house price estimation).
2. **Unsupervised Learning** In this case, no labels are provided, and the goal is to find structures or patterns. Common tasks include:
- **Clustering**: Grouping similar data points (e.g., customer segmentation).
- **Dimensionality Reduction**: Simplifying data while retaining key information (e.g., PCA).
- **Anomaly Detection**: Identifying unusual data points (e.g., fraud detection).
3. **Reinforcement Learning** This learning type involves an agent interacting with an environment. The agent learns by trial and error to maximize cumulative rewards, as seen in robotics and gaming.
::prose-img
---
src: /writings/ML/types.png
label: ML Model Types
caption: The different types of machine learning models
---
::
With this overview of ML types, let’s now focus on supervised learning, the most widely used approach, and explore how to choose the right model.
## 3 - Three Considerations for Choosing a Supervised Learning Model
Selecting the right supervised learning model is critical and depends on several factors:
1. **Problem Type**
- Is it a regression or classification problem?
- **Key Point**: Determine if the target variable is continuous or discrete.
2. **Problem Complexity**
- Is the relationship between input features and the target variable linear or nonlinear?
- **Key Point**: Understand whether the data allows for easy predictions or requires more complex models.
3. **Algorithmic Approach**
- Should you choose a feature-based or similarity-based model?
- **Key Point**: The choice of the model (e.g., linear regressions vs k-NN) depends on the dataset’s size and complexity.
Once the model type is defined, the next step is to delve into the full workflow of developing an ML model.
## 4 - The Typical Workflow in Machine Learning
A machine learning project generally follows these steps:
1. **Data Preparation**
- Splitting data into training and testing sets.
- Preprocessing: scaling, handling missing values, etc.
2. **Model Training**
- Fitting the model on training data: `model.fit(X, y)`.
- Optimising parameters and hyperparameters.
3. **Prediction and Evaluation**
- Making predictions on unseen data: `model.predict(X)`.
- Comparing predictions ($$\hat{y}$$) with actual values ($$y$$).
::prose-img
---
src: /writings/ML/model.png
label: Modelization in Progress
caption: Modelization in Progress
---
::
Evaluation is a crucial step to verify the performance of a model. For regression problems, the R² score is a key indicator.
## 5 - Evaluating Models: The R² Score
For regression problems, the **R² score** measures the proportion of the target’s variance explained by the model:
$$R^2 = 1 - \frac{\text{SS}_{\text{residual}}}{\text{SS}_{\text{total}}}$$ where:
- $$\text{SS}_{\text{residual}}$$ : Sum of squared residuals between actual and predicted values.
- $$\text{SS}_{\text{total}}$$ : Total sum of squares relative to the target’s mean.
A $$R^2$$ close to 1 indicates a good fit.
::prose-img
---
src: /writings/ML/r2.png
label: R² Score
caption: R² Score
---
::
With these concepts in mind, you are better equipped to understand and apply ML models in your projects.
## 6 - Conclusion
Machine learning is revolutionising how we solve complex problems using data. Supervised, unsupervised, and reinforcement learning approaches allow us to tackle a wide variety of use cases. In supervised learning, the model choice depends on the problem type, its complexity, and the appropriate algorithmic approach. Finally, a structured workflow and metrics like the R² score ensure the quality of predictions and analyses.

7
drizzle.config.ts
View File

@@ -1,7 +0,0 @@
import type { Config } from 'drizzle-kit'
export default {
dialect: 'sqlite',
schema: './server/database/schema.ts',
out: './server/database/migrations',
} satisfies Config

4
eslint.config.mjs
View File

@@ -1,5 +1,5 @@
import antfu from '@antfu/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'
export default antfu(
export default withNuxt(
// Your custom configs here
)

100
nuxt.config.ts
View File

@@ -1,5 +1,6 @@
export default defineNuxtConfig({
// Nuxt App
compatibilityDate: '2025-12-13',
app: {
pageTransition: { name: 'page', mode: 'out-in' },
head: {
@@ -14,50 +15,28 @@ export default defineNuxtConfig({
css: ['~/assets/css/main.css'],
// Nuxt Modules
modules: [
'@nuxt/content',
'@nuxthub/core',
'@nuxt/ui',
'@nuxt/content',
'@nuxt/eslint',
'@vueuse/nuxt',
'@nuxtjs/google-fonts',
'@nuxt/image',
'@nuxtjs/i18n',
'nuxt-visitors',
'nuxt-studio'
],
// Nuxt Hub
hub: {
cache: true,
kv: true,
database: true,
analytics: true,
db: 'sqlite',
},
// Nuxt Content
content: {
preview: {
api: 'https://api.nuxt.studio',
},
build: {
markdown: {
highlight: {
langs: ['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml', 'python', 'ts', 'javascript', 'r'],
theme: 'github-dark',
},
remarkPlugins: {
'remark-math': {},
},
rehypePlugins: {
'rehype-katex': {
output: 'mathml',
},
},
},
},
database: {
type: 'd1',
bindingName: 'artapi'
}
},
// Nuxt UI
ui: {
theme: {
colors: [
@@ -80,19 +59,25 @@ export default defineNuxtConfig({
},
},
// Nuxt Color Mode
studio: {
route: '/studio',
repository: {
provider: 'github',
owner: 'ArthurDanjou',
repo: 'artsite',
branch: 'master'
}
},
colorMode: {
preference: 'system',
fallback: 'light',
},
// Nuxt Devtools
devtools: {
enabled: true,
timeline: { enabled: true },
},
// Nuxt I18N
i18n: {
strategy: 'no_prefix',
locales: [
@@ -118,49 +103,26 @@ export default defineNuxtConfig({
defaultLocale: 'en',
},
// Nuxt Google Fonts
googleFonts: {
display: 'swap',
families: {
'Inter': [400, 500, 600, 700, 800, 900],
'Sofia Sans': [400],
'DM Sans': [400, 500, 600, 700, 800, 900],
'Dancing Script': [400, 700],
},
},
// fonts: {
// display: 'swap',
// families: {
// 'Inter': [400, 500, 600, 700, 800, 900],
// 'Sofia Sans': [400],
// 'DM Sans': [400, 500, 600, 700, 800, 900],
// 'Dancing Script': [400, 700],
// },
// },
// Nitro
nitro: {
experimental: {
websocket: true,
openAPI: true,
},
preset: 'cloudflare_module',
},
// Nuxt Env
runtimeConfig: {
discord: {
userId: '',
id: '',
token: '',
},
wakatime: {
userId: '',
coding: '',
editors: '',
languages: '',
os: '',
},
artapi: '',
public: {
i18n: {
baseUrl: '',
},
},
},
// Nuxt Visitors
visitors: {
// Set to true to enable tracking of visitor locations
locations: true,
},
})

71
package.json
View File

@@ -1,54 +1,45 @@
{
"name": "artsite",
"private": true,
"packageManager": "pnpm@10.13.1",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --host",
"preview": "nuxt preview",
"build": "nuxi build --preset cloudflare_module",
"dev": "nuxi dev",
"preview": "bun run build && wrangler dev",
"postinstall": "nuxt prepare",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"db:generate": "drizzle-kit generate",
"typecheck": "nuxt prepare && vue-tsc -b --noEmit"
"deploy": "bun run build && wrangler deploy",
"cf-typegen": "wrangler types",
"lint:fix": "eslint --fix ."
},
"dependencies": {
"@iconify-json/logos": "^1.2.10",
"@iconify-json/lucide": "^1.2.73",
"@iconify-json/ph": "^1.2.2",
"@iconify-json/twemoji": "^1.2.4",
"@iconify-json/vscode-icons": "^1.2.33",
"@intlify/message-compiler": "^11.1.12",
"@nuxt/content": "3.6.3",
"@nuxt/image": "^1.11.0",
"@nuxt/ui": "3.3.2",
"@nuxthub/core": "^0.9.0",
"@nuxtjs/google-fonts": "^3.2.0",
"@nuxtjs/i18n": "10.0.6",
"@vueuse/core": "^13.9.0",
"better-sqlite3": "^12.4.1",
"drizzle-orm": "^0.44.7",
"h3-zod": "^0.5.3",
"nuxt": "^4.2.1",
"nuxt-visitors": "1.2.2",
"rehype-katex": "^7.0.1",
"remark-math": "^6.0.0",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.2",
"@intlify/message-compiler": "11.2.2",
"@nuxt/content": "3.9.0",
"@nuxt/eslint": "1.12.1",
"@nuxt/ui": "4.2.1",
"@nuxthub/core": "0.10.1",
"@nuxtjs/i18n": "10.2.1",
"@vueuse/core": "^14.1.0",
"@vueuse/math": "^14.1.0",
"better-sqlite3": "12.5.0",
"drizzle-kit": "^0.31.8",
"drizzle-orm": "^0.45.1",
"nuxt": "4.2.2",
"nuxt-studio": "1.0.0-alpha.4",
"vue-use-spring": "^0.3.3",
"zod": "^4.1.12"
"zod": "4.2.1"
},
"devDependencies": {
"@antfu/eslint-config": "^5.4.1",
"@iconify-json/devicon": "^1.2.48",
"@tailwindcss/typography": "^0.5.19",
"@types/node": "^24.10.1",
"@vueuse/math": "^13.9.0",
"@vueuse/nuxt": "^13.9.0",
"drizzle-kit": "^0.31.6",
"eslint": "^9.39.1",
"@iconify-json/logos": "^1.2.10",
"@iconify-json/lucide": "1.2.81",
"@iconify-json/ph": "^1.2.2",
"@iconify-json/twemoji": "^1.2.4",
"@iconify-json/vscode-icons": "1.2.37",
"@iconify-json/devicon": "1.2.53",
"@types/node": "25.0.2",
"@vueuse/nuxt": "14.1.0",
"eslint": "9.39.2",
"typescript": "^5.9.3",
"vue-tsc": "^3.1.3",
"wrangler": "^4.47.0"
"vue-tsc": "3.1.8",
"wrangler": "4.55.0"
}
}

1
public/projects/arthome/.gitkeep
View File

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

BIN
public/projects/arthome/cover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 410 KiB

BIN
public/projects/artsite/cover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 288 KiB

BIN
public/projects/bikes-glm/Report.pdf
View File

Binary file not shown.

BIN
public/projects/breast-cancer/report.pdf
View File

Binary file not shown.

BIN
public/projects/monte-carlo-project/Report.pdf
View File

Binary file not shown.

BIN
public/projects/schelling/Projet.pdf
View File

Binary file not shown.

BIN
public/uses/jetbrains.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 298 KiB

BIN
public/uses/pycharm.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 285 KiB

BIN
public/uses/vscode.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 283 KiB

BIN
public/writings/ML/model.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 265 KiB

BIN
public/writings/ML/r2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 276 KiB

BIN
public/writings/ML/types.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 316 KiB

BIN
public/writings/log-lin-reg/lin-and-poly.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

BIN
public/writings/log-lin-reg/log-vs-lin.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
public/writings/log-lin-reg/log.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
public/writings/neural-network/gradient-descent.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 946 KiB

BIN
public/writings/neural-network/neural-network-viz.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/writings/website-work/nuxt-hub.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 357 KiB

BIN
public/writings/website-work/nuxt-studio.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 373 KiB

BIN
public/writings/website-work/website.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 268 KiB

4
server/api/activity/index.get.ts
View File

@@ -1,4 +0,0 @@
export default defineEventHandler(async (event) => {
const { discord } = useRuntimeConfig(event)
return await $fetch(`https://api.lanyard.rest/v1/users/${discord.userId}`)
})

17
server/api/posts/[slug].post.ts
View File

@@ -1,17 +0,0 @@
import { useValidatedParams, z } from 'h3-zod'
export default defineEventHandler(async (event) => {
const { slug } = await useValidatedParams(event, {
slug: z.string(),
})
return useDB().insert(tables.posts).values({
slug,
}).onConflictDoUpdate({
target: tables.posts.slug,
set: {
slug,
views: sql`${tables.posts.views}
+ 1`,
},
}).returning().get()
})

3
server/api/posts/index.get.ts
View File

@@ -1,3 +0,0 @@
export default defineEventHandler(() => {
return useDB().query.posts.findMany()
})

11
server/api/posts/like/[slug].put.ts
View File

@@ -1,11 +0,0 @@
import { useValidatedParams, z } from 'h3-zod'
export default defineEventHandler(async (event) => {
const { slug } = await useValidatedParams(event, {
slug: z.string(),
})
return useDB().update(tables.posts).set({
likes: sql`${tables.posts.likes}
+ 1`,
}).where(eq(tables.posts.slug, slug))
})

57
server/api/stats/index.get.ts
View File

@@ -1,57 +0,0 @@
import type { H3Event } from 'h3'
const cachedWakatimeCoding = defineCachedFunction(async (event: H3Event) => {
const config = useRuntimeConfig(event)
return await $fetch(`https://wakatime.com/share/${config.wakatime.userId}/${config.wakatime.coding}.json`)
}, {
maxAge: 24 * 60 * 60,
name: 'wakatime',
getKey: () => 'coding',
})
const cachedWakatimeEditors = defineCachedFunction(async (event: H3Event) => {
const config = useRuntimeConfig(event)
return await $fetch(`https://wakatime.com/share/${config.wakatime.userId}/${config.wakatime.editors}.json`)
}, {
maxAge: 24 * 60 * 60,
name: 'wakatime',
getKey: () => 'editors',
})
const cachedWakatimeOs = defineCachedFunction(async (event: H3Event) => {
const config = useRuntimeConfig(event)
return await $fetch(`https://wakatime.com/share/${config.wakatime.userId}/${config.wakatime.os}.json`)
}, {
maxAge: 24 * 60 * 60,
name: 'wakatime',
getKey: () => 'os',
})
const cachedWakatimeLanguages = defineCachedFunction(async (event: H3Event) => {
const config = useRuntimeConfig(event)
return await $fetch(`https://wakatime.com/share/${config.wakatime.userId}/${config.wakatime.languages}.json`)
}, {
maxAge: 24 * 60 * 60,
name: 'wakatime',
getKey: () => 'languages',
})
export default defineEventHandler(async (event) => {
const [coding, editors, os, languages] = await Promise.all([
cachedWakatimeCoding(event),
cachedWakatimeEditors(event),
cachedWakatimeOs(event),
cachedWakatimeLanguages(event),
])
return {
coding,
editors,
os,
languages,
}
})

17
server/database/migrations/0000_condemned_meltdown.sql
View File

@@ -1,17 +0,0 @@
CREATE TABLE `maintenances`
(
`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
`reason` text DEFAULT '',
`enabled` integer DEFAULT false NOT NULL,
`begin_at` text DEFAULT (CURRENT_DATE),
`end_at` text DEFAULT (CURRENT_DATE),
`created_at` text DEFAULT (CURRENT_DATE)
);
--> statement-breakpoint
CREATE TABLE `posts`
(
`slug` text PRIMARY KEY NOT NULL,
`likes` integer DEFAULT 0,
`views` integer DEFAULT 0,
`created_at` text DEFAULT (CURRENT_DATE)
);

1
server/database/migrations/0001_violet_katie_power.sql
View File

@@ -1 +0,0 @@
DROP TABLE `maintenances`;

Some files were not shown because too many files have changed in this diff Show More