mirror of
https://github.com/ArthurDanjou/artchat.git
synced 2026-01-14 11:54:03 +01:00
feat: add new articles on AI agents and machine learning
- Created a new article on "Understanding AI Agents, LLMs, and RAG" detailing the synergy between AI agents, LLMs, and Retrieval-Augmented Generation. - Added an introductory article on "What is Machine Learning?" covering types, model selection, workflow, and evaluation metrics. chore: setup ESLint and Nuxt configuration - Added ESLint configuration for code quality. - Initialized Nuxt configuration with various modules and settings for the application. chore: initialize package.json and TypeScript configuration - Created package.json for dependency management and scripts. - Added TypeScript configuration for the project. feat: implement API endpoints for activity and stats - Developed API endpoint to fetch user activity from Lanyard. - Created a stats endpoint to retrieve Wakatime coding statistics with caching. feat: add various assets and images - Included multiple images and assets for articles and projects. - Added placeholder files to maintain directory structure. refactor: define types for chat, lanyard, time, and wakatime - Created TypeScript types for chat messages, Lanyard activities, time formatting, and Wakatime statistics.
This commit is contained in:
15
.env.example
Normal file
15
.env.example
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
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=
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Nuxt dev/build outputs
|
||||||
|
.output
|
||||||
|
.data
|
||||||
|
.nuxt
|
||||||
|
.nitro
|
||||||
|
.cache
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Node dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Misc
|
||||||
|
.DS_Store
|
||||||
|
.fleet
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Local env files
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
75
README.md
Normal file
75
README.md
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
# Nuxt Minimal Starter
|
||||||
|
|
||||||
|
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Make sure to install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Server
|
||||||
|
|
||||||
|
Start the development server on `http://localhost:3000`:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm dev
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Production
|
||||||
|
|
||||||
|
Build the application for production:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm build
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Locally preview production build:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm run preview
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm preview
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn preview
|
||||||
|
|
||||||
|
# bun
|
||||||
|
bun run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||||
11
app/app.config.ts
Normal file
11
app/app.config.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
export default defineAppConfig({
|
||||||
|
ui: {
|
||||||
|
container: {
|
||||||
|
base: 'max-w-4xl',
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
primary: 'neutral',
|
||||||
|
neutral: 'neutral',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
35
app/app.vue
Normal file
35
app/app.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
useHead({
|
||||||
|
link: [{ rel: 'icon', type: 'image/webp', href: '/favicon.webp' }],
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UApp>
|
||||||
|
<NuxtLoadingIndicator color="#808080" />
|
||||||
|
<AppBackground />
|
||||||
|
<AppVisitors />
|
||||||
|
<UContainer class="z-50 relative">
|
||||||
|
<NuxtPage class="mt-12" />
|
||||||
|
</UContainer>
|
||||||
|
</UApp>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@reference "@/assets/css/main.css";
|
||||||
|
|
||||||
|
.page-enter-active,
|
||||||
|
.page-leave-active {
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-enter-from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(5px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
46
app/assets/css/main.css
Normal file
46
app/assets/css/main.css
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@import "@nuxt/ui";
|
||||||
|
|
||||||
|
@plugin '@tailwindcss/typography';
|
||||||
|
|
||||||
|
@theme static {
|
||||||
|
--animate-wave: wave 3s infinite
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--ui-black: #000000;
|
||||||
|
--ui-white: #ffffff;
|
||||||
|
--ui-bg-black: #0a0a0a;
|
||||||
|
--ui-bg-white: #f8f8f8;
|
||||||
|
--ui-bg: #f8f8f8;
|
||||||
|
|
||||||
|
--ui-container: var(--container-6xl);
|
||||||
|
|
||||||
|
--ui-font-family: 'DM Sans', sans-serif;
|
||||||
|
transition-duration: 0.7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--ui-black: #000000;
|
||||||
|
--ui-white: #ffffff;
|
||||||
|
--ui-bg-white: #f8f8f8;
|
||||||
|
--ui-bg-black: #0a0a0a;
|
||||||
|
--ui-bg: #0a0a0a;
|
||||||
|
|
||||||
|
--ui-container: var(--container-6xl);
|
||||||
|
|
||||||
|
--ui-font-family: 'DM Sans', sans-serif;
|
||||||
|
transition-duration: 0.7s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wave {
|
||||||
|
0%,
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
transform: rotate(-12deg);
|
||||||
|
}
|
||||||
|
25%, 75% {
|
||||||
|
transform: rotate(3deg) scale(1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
32
app/components/AppBackground.vue
Normal file
32
app/components/AppBackground.vue
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.noise {
|
||||||
|
animation: noise 2s steps(10) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes noise {
|
||||||
|
0%, 20%, 40%, 60%, 80%, 100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
transform: translate(-5%, -10%);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: translate(5%, 10%);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-15%, 5%);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
transform: translate(10%, -5%);
|
||||||
|
}
|
||||||
|
90% {
|
||||||
|
transform: translate(5%, -10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
25
app/components/AppTitle.vue
Normal file
25
app/components/AppTitle.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
class="text-3xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100"
|
||||||
|
>
|
||||||
|
{{ title }}
|
||||||
|
</h1>
|
||||||
|
<p class="mt-4 text-base">
|
||||||
|
{{ description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
20
app/components/AppVisitors.vue
Normal file
20
app/components/AppVisitors.vue
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
const { visitors } = useVisitors()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ClientOnly>
|
||||||
|
<UBadge
|
||||||
|
color="green"
|
||||||
|
variant="outline"
|
||||||
|
class="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>
|
||||||
208
app/components/chat/CommandPalette.vue
Normal file
208
app/components/chat/CommandPalette.vue
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
const searchTerm = ref('')
|
||||||
|
const open = ref(false)
|
||||||
|
|
||||||
|
const { t } = useI18n({ useScope: 'local' })
|
||||||
|
|
||||||
|
const messages = computed(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: t('chat.theme.label'),
|
||||||
|
kbds: ['T'],
|
||||||
|
icon: 'i-ph-lightbulb-filament-duotone',
|
||||||
|
prompt: t('chat.theme.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.language.label'),
|
||||||
|
kbds: ['L'],
|
||||||
|
icon: 'i-ph-translate-duotone',
|
||||||
|
prompt: t('chat.language.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.activity.label'),
|
||||||
|
icon: 'i-ph-activity',
|
||||||
|
prompt: t('chat.activity.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.about.label'),
|
||||||
|
icon: 'i-ph-person-arms-spread-duotone',
|
||||||
|
prompt: t('chat.about.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.projects.label'),
|
||||||
|
icon: 'i-ph-code-duotone',
|
||||||
|
prompt: t('chat.projects.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.writings.label'),
|
||||||
|
icon: 'i-ph-books-duotone',
|
||||||
|
prompt: t('chat.writings.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.experiences.label'),
|
||||||
|
icon: 'i-ph-briefcase-duotone',
|
||||||
|
prompt: t('chat.experiences.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.skills.label'),
|
||||||
|
icon: 'i-ph-rocket-duotone',
|
||||||
|
prompt: t('chat.skills.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.stack.label'),
|
||||||
|
icon: 'i-ph-stack-duotone',
|
||||||
|
prompt: t('chat.stack.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.status.label'),
|
||||||
|
icon: 'i-ph-warning-duotone',
|
||||||
|
prompt: t('chat.status.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.resume.label'),
|
||||||
|
icon: 'i-ph-address-book-duotone',
|
||||||
|
prompt: t('chat.resume.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.contact.label'),
|
||||||
|
icon: 'i-ph-envelope-duotone',
|
||||||
|
prompt: t('chat.contact.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.hobbies.label'),
|
||||||
|
icon: 'i-ph-heart-duotone',
|
||||||
|
prompt: t('chat.hobbies.prompt'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('chat.credits.label'),
|
||||||
|
icon: 'i-ph-star-duotone',
|
||||||
|
prompt: t('chat.credits.prompt'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
function onSelect(event: any) {
|
||||||
|
searchTerm.value = ''
|
||||||
|
open.value = false
|
||||||
|
// send Message
|
||||||
|
}
|
||||||
|
defineShortcuts({
|
||||||
|
meta_enter: () => {
|
||||||
|
open.value = !open.value
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav class="fixed bottom-0 left-1/2 z-50 -translate-x-1/2 pb-4">
|
||||||
|
<UFieldGroup>
|
||||||
|
<UModal v-model:open="open">
|
||||||
|
<UButton
|
||||||
|
:label="t('buttons.new')"
|
||||||
|
variant="solid"
|
||||||
|
color="neutral"
|
||||||
|
size="xl"
|
||||||
|
icon="i-ph-paper-plane-tilt-duotone"
|
||||||
|
>
|
||||||
|
<template #trailing>
|
||||||
|
<UKbd value="meta" />
|
||||||
|
<UKbd value="enter" />
|
||||||
|
</template>
|
||||||
|
</UButton>
|
||||||
|
|
||||||
|
<template #content>
|
||||||
|
<UCommandPalette
|
||||||
|
v-model:search-term="searchTerm"
|
||||||
|
close
|
||||||
|
:placeholder="t('buttons.new')"
|
||||||
|
:groups="[{ id: 'messages', items: messages }]"
|
||||||
|
@update:model-value="onSelect"
|
||||||
|
@update:open="open = $event"
|
||||||
|
>
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex items-center justify-between gap-2">
|
||||||
|
<UIcon name="i-simple-icons-nuxtdotjs" class="size-5 text-dimmed ml-1" />
|
||||||
|
<div class="flex items-center gap-1">
|
||||||
|
<UButton color="neutral" variant="ghost" :label="t('cmd.send')" class="text-dimmed" size="xs">
|
||||||
|
<template #trailing>
|
||||||
|
<UKbd value="enter" />
|
||||||
|
</template>
|
||||||
|
</UButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UCommandPalette>
|
||||||
|
</template>
|
||||||
|
</UModal>
|
||||||
|
<UButton
|
||||||
|
:label="t('buttons.clear')"
|
||||||
|
variant="solid"
|
||||||
|
color="error"
|
||||||
|
leading-icon="i-ph-trash-duotone"
|
||||||
|
size="xl"
|
||||||
|
/>
|
||||||
|
</UFieldGroup>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n lang="json">
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"buttons": {
|
||||||
|
"new": "Send new message",
|
||||||
|
"clear": "Clear conversation"
|
||||||
|
},
|
||||||
|
"cmd": {
|
||||||
|
"send": "Send message"
|
||||||
|
},
|
||||||
|
"chat": {
|
||||||
|
"theme": {
|
||||||
|
"label": "Switch Theme",
|
||||||
|
"prompt": ""
|
||||||
|
},
|
||||||
|
"language": {
|
||||||
|
"label": "Change Language",
|
||||||
|
"prompt": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"buttons": {
|
||||||
|
"new": "Envoyer un nouveau message",
|
||||||
|
"clear": "Effacer la conversation"
|
||||||
|
},
|
||||||
|
"cmd": {
|
||||||
|
"send": "Envoyer le message"
|
||||||
|
},
|
||||||
|
"chat": {
|
||||||
|
"theme": {
|
||||||
|
"label": "Changer de thème",
|
||||||
|
"prompt": ""
|
||||||
|
},
|
||||||
|
"language": {
|
||||||
|
"label": "Changer de langue",
|
||||||
|
"prompt": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"buttons": {
|
||||||
|
"new": "Enviar un nuevo mensaje",
|
||||||
|
"clear": "Borrar conversación"
|
||||||
|
},
|
||||||
|
"cmd": {
|
||||||
|
"send": "Enviar el mensaje"
|
||||||
|
},
|
||||||
|
"chat": {
|
||||||
|
"theme": {
|
||||||
|
"label": "Cambiar tema",
|
||||||
|
"prompt": ""
|
||||||
|
},
|
||||||
|
"language": {
|
||||||
|
"label": "Cambiar idioma",
|
||||||
|
"prompt": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</i18n>
|
||||||
13
app/components/chat/Loading.vue
Normal file
13
app/components/chat/Loading.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
37
app/components/chat/MessageContainer.vue
Normal file
37
app/components/chat/MessageContainer.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
const props = withDefaults(defineProps<{
|
||||||
|
user?: 'user' | 'arthur'
|
||||||
|
}>(), {
|
||||||
|
user: 'user',
|
||||||
|
})
|
||||||
|
|
||||||
|
const isArthur = computed(() => props.user === 'arthur')
|
||||||
|
|
||||||
|
const { locale, locales } = useI18n({
|
||||||
|
useScope: 'local',
|
||||||
|
})
|
||||||
|
const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value))
|
||||||
|
const formatted = computed(() => useDateFormat(useNow(), 'D MMMM YYYY, HH:mm', { locales: currentLocale.value?.code ?? 'en' }).value)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="group flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col-reverse gap-4 items-start md:flex-row-reverse">
|
||||||
|
<UCard
|
||||||
|
:variant="isArthur ? 'soft' : 'solid'"
|
||||||
|
class="rounded-xl p-2 mt-1"
|
||||||
|
:class="isArthur ? 'w-full bg-transparent !p-0' : 'bg-sky-300 md:max-w-3/4'"
|
||||||
|
:ui="{ body: isArthur ? 'p-0 sm:p-0' : 'sm:p-2', header: isArthur ? 'p-0 sm:p-0' : 'sm:p-2', footer: isArthur ? 'p-0 sm:p-0' : 'sm:p-2' }"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</UCard>
|
||||||
|
<div v-if="isArthur" class="flex items-center gap-2">
|
||||||
|
<UAvatar src="/arthur.webp" size="lg" />
|
||||||
|
<span class="md:hidden">Arthur DANJOU</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="opacity-0 group-hover:opacity-100 duration-500 flex" :class="isArthur ? 'justify-start ml-12' : 'justify-end'">
|
||||||
|
{{ formatted }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
13
app/components/chat/Prompt.vue
Normal file
13
app/components/chat/Prompt.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
34
app/components/content/HoverText.vue
Normal file
34
app/components/content/HoverText.vue
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { PropType } from 'vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
text: {
|
||||||
|
type: [String, Number],
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ClientOnly>
|
||||||
|
<UTooltip
|
||||||
|
:popper="{ placement: position }"
|
||||||
|
:delay-duration="4"
|
||||||
|
:content="{
|
||||||
|
align: 'center',
|
||||||
|
side: position,
|
||||||
|
sideOffset: 8,
|
||||||
|
}"
|
||||||
|
:text="hover"
|
||||||
|
>
|
||||||
|
<strong class="leading-3 cursor-help">{{ text }}</strong>
|
||||||
|
</UTooltip>
|
||||||
|
</ClientOnly>
|
||||||
|
</template>
|
||||||
25
app/components/content/ProseA.vue
Normal file
25
app/components/content/ProseA.vue
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
<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
Normal file
23
app/components/content/ProseH2.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<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
Normal file
23
app/components/content/ProseH3.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<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>
|
||||||
40
app/components/content/ProseIcon.vue
Normal file
40
app/components/content/ProseIcon.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: 'gray',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const colorVariants = {
|
||||||
|
gray: 'text-gray-500/80 decoration-gray-400/40',
|
||||||
|
red: 'text-red-500/80 decoration-red-400/40',
|
||||||
|
yellow: 'text-yellow-500/80 decoration-yellow-400/40',
|
||||||
|
green: 'text-green-500/80 decoration-green-400/40',
|
||||||
|
blue: 'text-blue-500/80 decoration-blue-400/40',
|
||||||
|
indigo: 'text-indigo-500/80 decoration-indigo-400/40',
|
||||||
|
purple: 'text-purple-500/80 decoration-purple-400/40',
|
||||||
|
pink: 'text-pink-500/80 decoration-pink-400/40',
|
||||||
|
sky: 'text-sky-500/80 decoration-sky-400/40',
|
||||||
|
zinc: 'text-zinc-500/80 decoration-zinc-400/40',
|
||||||
|
orange: 'text-orange-500/80 decoration-orange-400/40',
|
||||||
|
amber: 'text-amber-500/80 decoration-amber-400/40',
|
||||||
|
emerald: 'text-emerald-500/80 decoration-emerald-400/40',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span class="inline-flex items-center transform translate-y-1 gap-1">
|
||||||
|
<UIcon :name="icon" size="16" />
|
||||||
|
<span
|
||||||
|
:class="colorVariants[color as keyof typeof colorVariants]"
|
||||||
|
class="sofia font-semibold underline-offset-2 underline"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
12
app/components/content/ProseImg.vue
Normal file
12
app/components/content/ProseImg.vue
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<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
Normal file
5
app/components/content/ProseP.vue
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<p class="text-neutral-700 dark:text-neutral-300">
|
||||||
|
<slot />
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
38
app/components/home/Link.vue
Normal file
38
app/components/home/Link.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineProps({
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
blanked: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<NuxtLink
|
||||||
|
:href="href"
|
||||||
|
:target="blanked ? '_blank' : '_self'"
|
||||||
|
class="sofia flex gap-1 items-center group"
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
v-if="icon"
|
||||||
|
:name="icon"
|
||||||
|
size="20"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="duration-300 underline-offset-2 font-semibold text-md text-black dark:text-white underline decoration-gray-300 dark:decoration-neutral-700 group-hover:decoration-black dark:group-hover:decoration-white"
|
||||||
|
>
|
||||||
|
{{ label }}
|
||||||
|
</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</template>
|
||||||
45
app/components/post/Alert.vue
Normal file
45
app/components/post/Alert.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<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
Normal file
68
app/components/post/Footer.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<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>
|
||||||
191
app/components/tool/Activity.vue
Normal file
191
app/components/tool/Activity.vue
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { UseTimeAgoMessages } from '@vueuse/core'
|
||||||
|
import type { Activity } from '~~/types'
|
||||||
|
import { activityMessages, IDEs } from '~~/types'
|
||||||
|
|
||||||
|
const { locale, locales, t } = useI18n({
|
||||||
|
useScope: 'local',
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch<Activity>('/api/activity'))
|
||||||
|
|
||||||
|
useIntervalFn(async () => await refresh(), 5000)
|
||||||
|
const codingActivity = computed(() => {
|
||||||
|
const activities = activity.value!.data.activities.filter(activity => IDEs.some(ide => ide.name === activity.name)).map(activity => ({
|
||||||
|
...activity,
|
||||||
|
name: activity.assets?.small_text === 'Cursor' ? 'Cursor' : activity.name,
|
||||||
|
}))
|
||||||
|
|
||||||
|
return activities.length > 1
|
||||||
|
? activities[Math.floor(Math.random() * activities.length)]
|
||||||
|
: activities[0]
|
||||||
|
})
|
||||||
|
|
||||||
|
const currentLocale = computed(() => locales.value.find((l: { code: string }) => l.code === locale.value))
|
||||||
|
|
||||||
|
const isActive = computed(() => {
|
||||||
|
if (!codingActivity.value)
|
||||||
|
return
|
||||||
|
|
||||||
|
const { name, details, state } = codingActivity.value
|
||||||
|
|
||||||
|
return name === 'Visual Studio Code' || name === 'Cursor'
|
||||||
|
? !details.includes('Idling')
|
||||||
|
: state.toLowerCase().includes('editing')
|
||||||
|
})
|
||||||
|
|
||||||
|
const getActivity = computed(() => {
|
||||||
|
if (!codingActivity.value)
|
||||||
|
return
|
||||||
|
|
||||||
|
const { name, details, state, timestamps } = codingActivity.value
|
||||||
|
|
||||||
|
const project = details
|
||||||
|
? details
|
||||||
|
.charAt(0)
|
||||||
|
.toUpperCase()
|
||||||
|
+ details
|
||||||
|
.slice(1)
|
||||||
|
.replace('Workspace:', '')
|
||||||
|
.trim()
|
||||||
|
: ''
|
||||||
|
|
||||||
|
const stateWord = state && state.split(' ').length >= 2 ? state.split(' ')[1] : t('secret')
|
||||||
|
const ago = useTimeAgo(timestamps.start, {
|
||||||
|
messages: activityMessages[locale.value as keyof typeof activityMessages] as UseTimeAgoMessages,
|
||||||
|
}).value
|
||||||
|
const formatDate = (date: number, format: string) => useDateFormat(date, format, { locales: currentLocale.value?.code ?? 'en' }).value
|
||||||
|
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
project,
|
||||||
|
state: stateWord,
|
||||||
|
start: {
|
||||||
|
ago,
|
||||||
|
formated: {
|
||||||
|
date: formatDate(timestamps.start, 'D MMMM'),
|
||||||
|
time: formatDate(timestamps.start, 'HH:mm'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section v-if="getActivity" class="space-y-4">
|
||||||
|
<div class="prose dark:prose-invert flex items-center gap-2">
|
||||||
|
<div>
|
||||||
|
{{ isActive ? t('working') : t('idling', {
|
||||||
|
editor: getActivity.name,
|
||||||
|
}) }}
|
||||||
|
</div>
|
||||||
|
<UTooltip :text="isActive ? t('tooltip.online') : t('tooltip.idling')">
|
||||||
|
<div class="relative flex h-3 w-3">
|
||||||
|
<div
|
||||||
|
v-if="isActive"
|
||||||
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
:class="isActive ? 'bg-green-500' : 'bg-amber-500'"
|
||||||
|
class="relative inline-flex rounded-full h-3 w-3"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</UTooltip>
|
||||||
|
</div>
|
||||||
|
<ClientOnly>
|
||||||
|
<UCard variant="outline" class="md:max-w-1/2" :ui="{ body: 'flex gap-8 items-center' }">
|
||||||
|
<UIcon
|
||||||
|
:name="IDEs.find(ide => ide.name === getActivity!.name)!.icon"
|
||||||
|
size="64"
|
||||||
|
/>
|
||||||
|
<div class="">
|
||||||
|
<div class="font-bold text-xl">
|
||||||
|
{{ getActivity.name }}
|
||||||
|
</div>
|
||||||
|
<div v-if="isActive">
|
||||||
|
{{ getActivity.state!.split(' ').map((word: string) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ') }}
|
||||||
|
</div>
|
||||||
|
<div>{{ getActivity.project }}</div>
|
||||||
|
<div class="italic text-xs">
|
||||||
|
{{ getActivity.start.ago }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-end text-sm">
|
||||||
|
<i18n-t keypath="started" tag="p">
|
||||||
|
<template #date>
|
||||||
|
{{ getActivity.start.formated.date }}
|
||||||
|
</template>
|
||||||
|
<template #hour>
|
||||||
|
{{ getActivity.start.formated.time }}
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</UCard>
|
||||||
|
</ClientOnly>
|
||||||
|
</section>
|
||||||
|
<section v-else class="flex md:items-start gap-2">
|
||||||
|
<i18n-t
|
||||||
|
keypath="offline"
|
||||||
|
tag="p"
|
||||||
|
class="not-prose"
|
||||||
|
>
|
||||||
|
<template #maths>
|
||||||
|
<i>{{ t('maths') }}</i>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
<UTooltip :text="t('tooltip.offline')">
|
||||||
|
<div class="relative flex h-3 w-3 mt-2">
|
||||||
|
<div
|
||||||
|
class="relative inline-flex rounded-full h-3 w-3 bg-red-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</UTooltip>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n lang="json">
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"offline": "I'm currently offline. Come back later to see what I'm working on. {maths}",
|
||||||
|
"working": "I'm actually online!",
|
||||||
|
"idling": "I'm idling on my computer with {editor} running in background.",
|
||||||
|
"maths": "I am probably doing some maths or sleeping.",
|
||||||
|
"tooltip": {
|
||||||
|
"online": "I'm online 👋",
|
||||||
|
"offline": "I'm offline 🫥",
|
||||||
|
"idling": "I'm sleeping 😴"
|
||||||
|
},
|
||||||
|
"started": "Started the {date} at {hour}",
|
||||||
|
"secret": "Secret Project"
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"offline": "Je suis actuellement hors ligne. Revenez plus tard pour voir sur quoi je travaille. {maths}",
|
||||||
|
"working": "Je travaille actuellement en ligne !",
|
||||||
|
"idling": "Je suis en veille sur mon ordinateur avec {editor} en arrière-plan.",
|
||||||
|
"maths": "Je suis probablement en train de faire des maths ou en train de dormir.",
|
||||||
|
"tooltip": {
|
||||||
|
"online": "Je suis connecté 👋",
|
||||||
|
"offline": "Je suis déconnecté 🫥",
|
||||||
|
"idling": "Je dors 😴"
|
||||||
|
},
|
||||||
|
"started": "Commencé le {date} à {hour}",
|
||||||
|
"secret": "Projet Secret"
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"offline": "Ahora mismo estoy desconectado. Vuelve más tarde para ver en lo que estoy trabajando. {maths}",
|
||||||
|
"working": "Estoy trabajando en línea.",
|
||||||
|
"idling": "Estoy en reposo en mi ordenador con {editor} en segundo plano.",
|
||||||
|
"maths": "Estoy probablemente haciendo matemáticas o durmiendo.",
|
||||||
|
"tooltip": {
|
||||||
|
"online": "Estoy conectado 👋",
|
||||||
|
"offline": "Estoy desconectado 🫥",
|
||||||
|
"idling": "Estoy durmiendo 😴"
|
||||||
|
},
|
||||||
|
"started": "Comenzado el {date} a {hour}",
|
||||||
|
"secret": "Proyecto Secreto"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</i18n>
|
||||||
75
app/components/tool/Language.vue
Normal file
75
app/components/tool/Language.vue
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { en, es, fr } from '@nuxt/ui/locale'
|
||||||
|
|
||||||
|
const { locale, setLocale, locales, t } = useI18n({ useScope: 'local' })
|
||||||
|
const currentLocale = computed(() => locales.value.filter(l => l.code === locale.value)[0])
|
||||||
|
watch(locale, () => changeLocale(locale.value))
|
||||||
|
|
||||||
|
async function changeLocale(newLocale: string | undefined) {
|
||||||
|
document.body.style.animation = 'switch-on .2s'
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 200))
|
||||||
|
|
||||||
|
await setLocale(newLocale as 'en' | 'fr' | 'es')
|
||||||
|
document.body.style.animation = 'switch-off .5s'
|
||||||
|
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 200))
|
||||||
|
document.body.style.animation = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
defineShortcuts({
|
||||||
|
l: () => locale.value = currentLocale.value!.code === 'en' ? 'fr' : currentLocale.value!.code === 'fr' ? 'es' : 'en',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="space-y-4">
|
||||||
|
<div class="prose dark:prose-invert">
|
||||||
|
<p>{{ t('response.control') }}</p>
|
||||||
|
<ul>
|
||||||
|
<li>{{ t('response.choose') }}</li>
|
||||||
|
<i18n-t keypath="response.kbd" tag="li">
|
||||||
|
<template #kbd>
|
||||||
|
<UKbd>L</UKbd>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<ClientOnly>
|
||||||
|
<UCard variant="outline" class="md:max-w-1/2" :ui="{ body: 'flex justify-between items-center gap-2' }">
|
||||||
|
<p class="block">
|
||||||
|
{{ t('change') }}
|
||||||
|
</p>
|
||||||
|
<ULocaleSelect v-model="locale" :locales="[en, es, fr]" @update:model-value="changeLocale" />
|
||||||
|
</UCard>
|
||||||
|
</ClientOnly>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n lang="json">
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"change": "Change language",
|
||||||
|
"response": {
|
||||||
|
"control": "I added the language switch control above so you can switch directly.",
|
||||||
|
"choose": "Choose English, French, or Spanish",
|
||||||
|
"kbd": "Press {kbd} on your keyboard"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"change": "Changer de langue",
|
||||||
|
"response": {
|
||||||
|
"control": "J'ai ajouté le contrôle de changement de langue ci-dessus pour que vous puissiez changer directement.",
|
||||||
|
"choose": "Choisissez Anglais, Français ou Espagnol",
|
||||||
|
"kbd": "Appuyez sur {kbd} de votre clavier"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"change": "Cambiar idioma",
|
||||||
|
"response": {
|
||||||
|
"control": "He añadido el control de cambio de idioma arriba para que puedas cambiar directamente.",
|
||||||
|
"choose": "Elige Inglés, Francés o Español",
|
||||||
|
"kbd": "Presiona {kbd} en tu teclado"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</i18n>
|
||||||
13
app/components/tool/Location.vue
Normal file
13
app/components/tool/Location.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- TODO: Implement location component -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
108
app/components/tool/Stats.vue
Normal file
108
app/components/tool/Stats.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { Stats } from '~~/types'
|
||||||
|
|
||||||
|
const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
|
||||||
|
|
||||||
|
const { locale, locales, t } = useI18n({
|
||||||
|
useScope: 'local',
|
||||||
|
})
|
||||||
|
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
|
||||||
|
|
||||||
|
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' })
|
||||||
|
const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section v-if="stats && stats.coding && stats.editors && stats.os && stats.languages && time && date && hours">
|
||||||
|
<div class="prose dark:prose-invert">
|
||||||
|
<i18n-t
|
||||||
|
keypath="stats"
|
||||||
|
tag="p"
|
||||||
|
>
|
||||||
|
<template #time>
|
||||||
|
{{ time }}
|
||||||
|
</template>
|
||||||
|
<template #date>
|
||||||
|
<HoverText
|
||||||
|
:hover="t('tooltip.date')"
|
||||||
|
:text="date"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #hours>
|
||||||
|
<HoverText
|
||||||
|
:hover="t('tooltip.hours')"
|
||||||
|
:text="hours"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
<ul>
|
||||||
|
<i18n-t
|
||||||
|
keypath="editors"
|
||||||
|
tag="li"
|
||||||
|
>
|
||||||
|
<template #editors>
|
||||||
|
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
<i18n-t
|
||||||
|
keypath="os"
|
||||||
|
tag="li"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-if="stats.os.data[0]"
|
||||||
|
#os
|
||||||
|
>
|
||||||
|
{{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%)
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
<i18n-t
|
||||||
|
keypath="languages"
|
||||||
|
tag="li"
|
||||||
|
>
|
||||||
|
<template #languages>
|
||||||
|
{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator')) }}
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n lang="json">
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"stats": "I collect some data for {time} years, started the {date}. I've coded for a total of {hours} hours.",
|
||||||
|
"editors": "My top editors are {editors}",
|
||||||
|
"os": "My best OS is {os}",
|
||||||
|
"languages": "My favorite languages are {languages}",
|
||||||
|
"separator": " and ",
|
||||||
|
"tooltip": {
|
||||||
|
"date": "That was so long ago 🫣",
|
||||||
|
"hours": "That's a lot 😮"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"stats": "Je collecte des données depuis {time} ans, commencé le {date}. J'ai codé un total de {hours} heures.",
|
||||||
|
"editors": "Mes meilleurs éditeurs sont {editors}",
|
||||||
|
"os": "Mon meilleur OS est {os}",
|
||||||
|
"languages": "Mes langages préférés sont {languages}",
|
||||||
|
"separator": " et ",
|
||||||
|
"tooltip": {
|
||||||
|
"date": "C'était il y a si longtemps 🫣",
|
||||||
|
"hours": "C'est beaucoup 😮"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"stats": "Recopilo datos desde hace {time} años, empecé el {date}. He programado durante un total de {hours} horas.",
|
||||||
|
"editors": "Mis mejores editores son {editors}.",
|
||||||
|
"os": "Mi mejor OS es {os}.",
|
||||||
|
"languages": "Mis lenguajes favoritos son {languages}.",
|
||||||
|
"separator": " y ",
|
||||||
|
"tooltip": {
|
||||||
|
"date": "hace tato tiempo…🫣",
|
||||||
|
"hours": "es mucho 😮"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</i18n>
|
||||||
153
app/components/tool/Theme.vue
Normal file
153
app/components/tool/Theme.vue
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
const colorMode = useColorMode()
|
||||||
|
const { t } = useI18n({ useScope: 'local' })
|
||||||
|
|
||||||
|
const isDark = computed({
|
||||||
|
get: () => colorMode.value === 'dark',
|
||||||
|
set: (val: boolean) => {
|
||||||
|
colorMode.preference = val ? 'dark' : 'light'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const dark = computed({
|
||||||
|
get: () => colorMode.value === 'dark',
|
||||||
|
set: () => {},
|
||||||
|
})
|
||||||
|
|
||||||
|
function toggleDark(event: MouseEvent | { clientX: number, clientY: number }) {
|
||||||
|
// @ts-expect-error experimental API
|
||||||
|
const isAppearanceTransition = document.startViewTransition
|
||||||
|
&& !window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||||||
|
|
||||||
|
if (!isAppearanceTransition) {
|
||||||
|
isDark.value = !isDark.value
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const x = event.clientX
|
||||||
|
const y = event.clientY
|
||||||
|
const endRadius = Math.hypot(
|
||||||
|
Math.max(x, innerWidth - x),
|
||||||
|
Math.max(y, innerHeight - y),
|
||||||
|
)
|
||||||
|
const transition = document.startViewTransition(async () => {
|
||||||
|
isDark.value = !isDark.value
|
||||||
|
await nextTick()
|
||||||
|
})
|
||||||
|
transition.ready
|
||||||
|
.then(() => {
|
||||||
|
const clipPath = [
|
||||||
|
`circle(0px at ${x}px ${y}px)`,
|
||||||
|
`circle(${endRadius}px at ${x}px ${y}px)`,
|
||||||
|
]
|
||||||
|
document.documentElement.animate(
|
||||||
|
{
|
||||||
|
clipPath: colorMode.value === 'dark'
|
||||||
|
? [...clipPath].reverse()
|
||||||
|
: clipPath,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
duration: 400,
|
||||||
|
easing: 'ease-out',
|
||||||
|
pseudoElement: colorMode.value === 'dark'
|
||||||
|
? '::view-transition-old(root)'
|
||||||
|
: '::view-transition-new(root)',
|
||||||
|
},
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
defineShortcuts({
|
||||||
|
t: () => toggleDark({ clientX: window.innerWidth, clientY: 0 }),
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="space-y-4">
|
||||||
|
<div class="prose dark:prose-invert">
|
||||||
|
<p>{{ t('response.control') }}</p>
|
||||||
|
<ul>
|
||||||
|
<li>{{ t('response.choose') }}</li>
|
||||||
|
<i18n-t keypath="response.kbd" tag="li">
|
||||||
|
<template #kbd>
|
||||||
|
<UKbd>T</UKbd>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<ClientOnly>
|
||||||
|
<UCard variant="outline" class="md:max-w-1/2" :ui="{ body: 'flex justify-between items-center' }">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<UIcon v-if="dark" name="i-ph-moon-duotone" size="24" />
|
||||||
|
<UIcon v-else name="i-ph-sun-duotone" size="24" />
|
||||||
|
<span>{{ t('switch') }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span class="text-xs text-muted">{{ t('light') }}</span>
|
||||||
|
<USwitch
|
||||||
|
v-model="dark"
|
||||||
|
color="neutral"
|
||||||
|
size="lg"
|
||||||
|
aria-label="switch theme"
|
||||||
|
@click.prevent="toggleDark"
|
||||||
|
/>
|
||||||
|
<span class="text-xs text-muted">{{ t('dark') }}</span>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
</ClientOnly>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n lang="json">
|
||||||
|
{
|
||||||
|
"en": {
|
||||||
|
"switch": "Switch theme",
|
||||||
|
"light": "Light",
|
||||||
|
"dark": "Dark",
|
||||||
|
"response": {
|
||||||
|
"control": "I added the theme toggle control above so you can switch directly.",
|
||||||
|
"choose": "Choose Light (sun icon) or Dark (moon icon)",
|
||||||
|
"kbd": "Press {kbd} on your keyboard"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"fr": {
|
||||||
|
"switch": "Changer de thème",
|
||||||
|
"light": "Clair",
|
||||||
|
"dark": "Sombre",
|
||||||
|
"response": {
|
||||||
|
"control": "J'ai ajouté le contrôle de basculement de thème ci-dessus afin que vous puissiez basculer directement.",
|
||||||
|
"choose": "Choisissez Clair (icône de soleil) ou Sombre (icône de lune)",
|
||||||
|
"kbd": "Appuyez sur {kbd} sur votre clavier"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"es": {
|
||||||
|
"switch": "Cambiar tema",
|
||||||
|
"light": "Claro",
|
||||||
|
"dark": "Oscuro",
|
||||||
|
"response": {
|
||||||
|
"control": "He añadido el control de alternancia de tema arriba para que puedas cambiar directamente.",
|
||||||
|
"choose": "Elige Claro (icono de sol) u Oscuro (icono de luna)",
|
||||||
|
"kbd": "Presiona {kbd} en tu teclado"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</i18n>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
::view-transition-old(root),
|
||||||
|
::view-transition-new(root) {
|
||||||
|
animation: none;
|
||||||
|
mix-blend-mode: normal;
|
||||||
|
}
|
||||||
|
::view-transition-old(root) {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
::view-transition-new(root) {
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.dark::view-transition-old(root) {
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
.dark::view-transition-new(root) {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
13
app/components/tool/Weather.vue
Normal file
13
app/components/tool/Weather.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- TODO: Implement weather component -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
13
app/error.vue
Normal file
13
app/error.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<UApp class="relative flex h-screen flex-col items-center justify-center">
|
||||||
|
<div class="flex flex-col items-center justify-center min-h-screen">
|
||||||
|
<h1 class="text-center font-serif text-[14rem] italic">
|
||||||
|
404
|
||||||
|
</h1>
|
||||||
|
<p class="text-center flex gap-1">
|
||||||
|
I think you're lost, let's go back
|
||||||
|
<HomeLink label="home" href="/" />
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</UApp>
|
||||||
|
</template>
|
||||||
45
app/pages/index.vue
Normal file
45
app/pages/index.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
useSeoMeta({
|
||||||
|
title: 'Arthur Danjou - AI enjoyer and Maths student',
|
||||||
|
description: 'Developer enjoying Artificial Intelligence and Machine Learning. Mathematics Student at Paris Dauphine-PSL University specialised in Statistics',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="!max-w-none">
|
||||||
|
<AppVisitors />
|
||||||
|
<ChatCommandPalette />
|
||||||
|
<div class="space-y-8">
|
||||||
|
<ChatMessageContainer>
|
||||||
|
Hello Arthur, tell me about you!
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer user="arthur">
|
||||||
|
I am an AI enjoyer and a Maths student.
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer>
|
||||||
|
I want to switch the theme
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer user="arthur">
|
||||||
|
<ToolTheme />
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer>
|
||||||
|
I want to change the language of the chat
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer user="arthur">
|
||||||
|
<ToolLanguage />
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer>
|
||||||
|
Show me the stats of Arthur
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer user="arthur">
|
||||||
|
<ToolStats />
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer>
|
||||||
|
What is Arthur doing?
|
||||||
|
</ChatMessageContainer>
|
||||||
|
<ChatMessageContainer user="arthur">
|
||||||
|
<ToolActivity />
|
||||||
|
</ChatMessageContainer>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
17
app/stores/chat.ts
Normal file
17
app/stores/chat.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import type { ChatMessage } from '~~/types'
|
||||||
|
|
||||||
|
export const useChatStore = defineStore('chat', () => {
|
||||||
|
const messages = ref<ChatMessage[]>([])
|
||||||
|
let id = 0
|
||||||
|
|
||||||
|
function addMessage(message: ChatMessage) {
|
||||||
|
messages.value.push({ ...message, id: id++ })
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearMessages() {
|
||||||
|
messages.value = []
|
||||||
|
id = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return { messages, addMessage, clearMessages }
|
||||||
|
})
|
||||||
61
content.config.ts
Normal file
61
content.config.ts
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { defineCollection, z } from '@nuxt/content'
|
||||||
|
|
||||||
|
export const collections = {
|
||||||
|
main: defineCollection({
|
||||||
|
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.string(),
|
||||||
|
readingTime: z.number().optional(),
|
||||||
|
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.string(),
|
||||||
|
readingTime: z.number(),
|
||||||
|
cover: z.string().optional(),
|
||||||
|
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
Normal file
24
content/projects/arthome.md
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
31
content/projects/artsite.md
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
18
content/projects/bikes-glm.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
42
content/projects/breast-cancer.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
25
content/projects/monte-carlo-project.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
17
content/projects/schelling-segregation-model.md
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
25
content/projects/sevetys.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
55
content/projects/studies.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
9
content/uses/0.homelab-beelink.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/0.stack-programming-languages.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/1.homelab-tp-link.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/1.stack-frontend.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/2.stack-backend.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/3.homelab-softwares.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/3.stack-devops.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/4.stack-python.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/apple-airpods-pro.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/apple-ipad-air.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/apple-iphone-14-pro.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/apple-macbook-pro.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/apple-suite.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
8
content/uses/categories/1.hardware.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"id": "hardware",
|
||||||
|
"name": {
|
||||||
|
"en": "Hardware",
|
||||||
|
"fr": "Matériel",
|
||||||
|
"es": "Material"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
content/uses/categories/2.software.json
Normal file
8
content/uses/categories/2.software.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"id": "software",
|
||||||
|
"name": {
|
||||||
|
"en": "Software",
|
||||||
|
"fr": "Logiciel",
|
||||||
|
"es": "Programas"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
content/uses/categories/3.ide.json
Normal file
9
content/uses/categories/3.ide.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"id": "ide",
|
||||||
|
"name": {
|
||||||
|
"en": "IDE & Font",
|
||||||
|
"fr": "IDE & Police",
|
||||||
|
"es": "IDE y Fuente"
|
||||||
|
},
|
||||||
|
"carousel": "ides"
|
||||||
|
}
|
||||||
8
content/uses/categories/4.homelab.json
Normal file
8
content/uses/categories/4.homelab.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"id": "homelab",
|
||||||
|
"name": {
|
||||||
|
"en": "My personal HomeLab",
|
||||||
|
"fr": "Mon HomeLab personnel",
|
||||||
|
"es": "Mi HomeLab personal"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
content/uses/categories/5.stack.json
Normal file
8
content/uses/categories/5.stack.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"id": "stack",
|
||||||
|
"name": {
|
||||||
|
"en": "Stack",
|
||||||
|
"fr": "Stack",
|
||||||
|
"es": "Stack"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
content/uses/dia-browser.json
Normal file
9
content/uses/dia-browser.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/discord.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/gaming-computer.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/google-chrome.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/jetbrains-suite.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/logitech-g203.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/notion.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/raycast.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/steelseries-apex-9-tkl.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/themes-fonts.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/vscode.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
9
content/uses/warp.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"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
Normal file
125
content/writings/how-my-website-works.md
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
185
content/writings/log-lin-reg.md
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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
Normal file
193
content/writings/neural-network.md
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
125
content/writings/rag-ai-agents.md
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
---
|
||||||
|
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
Normal file
113
content/writings/what-is-machine-learning.md
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
---
|
||||||
|
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.
|
||||||
6
eslint.config.mjs
Normal file
6
eslint.config.mjs
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
// @ts-check
|
||||||
|
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||||
|
|
||||||
|
export default withNuxt(
|
||||||
|
// Your custom configs here
|
||||||
|
)
|
||||||
139
nuxt.config.ts
Normal file
139
nuxt.config.ts
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
export default defineNuxtConfig({
|
||||||
|
compatibilityDate: '2025-07-20',
|
||||||
|
|
||||||
|
// Nuxt App
|
||||||
|
app: {
|
||||||
|
pageTransition: { name: 'page', mode: 'out-in' },
|
||||||
|
head: {
|
||||||
|
templateParams: {
|
||||||
|
separator: '•',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rootAttrs: {
|
||||||
|
class: 'bg-[var(--ui-bg)]',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
css: ['~/assets/css/main.css'],
|
||||||
|
|
||||||
|
// Nuxt Modules
|
||||||
|
modules: [
|
||||||
|
'@nuxt/ui',
|
||||||
|
'@nuxt/content',
|
||||||
|
'@vueuse/nuxt',
|
||||||
|
'@nuxtjs/google-fonts',
|
||||||
|
'@nuxt/image',
|
||||||
|
'nuxt-visitors',
|
||||||
|
'motion-v/nuxt',
|
||||||
|
'@pinia/nuxt',
|
||||||
|
'@nuxtjs/i18n',
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
// 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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Nuxt Color Mode
|
||||||
|
colorMode: {
|
||||||
|
preference: 'system',
|
||||||
|
fallback: 'light',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Nuxt Devtools
|
||||||
|
devtools: {
|
||||||
|
enabled: true,
|
||||||
|
timeline: { enabled: true },
|
||||||
|
},
|
||||||
|
|
||||||
|
// Nuxt I18N
|
||||||
|
i18n: {
|
||||||
|
strategy: 'no_prefix',
|
||||||
|
locales: [
|
||||||
|
{
|
||||||
|
label: 'English',
|
||||||
|
code: 'en',
|
||||||
|
language: 'en-EN',
|
||||||
|
icon: 'i-twemoji-flag-united-kingdom',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Français',
|
||||||
|
code: 'fr',
|
||||||
|
language: 'fr-FR',
|
||||||
|
icon: 'i-twemoji-flag-france',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Español',
|
||||||
|
code: 'es',
|
||||||
|
language: 'es-ES',
|
||||||
|
icon: 'i-twemoji-flag-spain',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
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],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Nitro
|
||||||
|
nitro: {
|
||||||
|
experimental: {
|
||||||
|
websocket: true,
|
||||||
|
openAPI: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Nuxt Env
|
||||||
|
runtimeConfig: {
|
||||||
|
discord: {
|
||||||
|
userId: '',
|
||||||
|
id: '',
|
||||||
|
token: '',
|
||||||
|
},
|
||||||
|
wakatime: {
|
||||||
|
userId: '',
|
||||||
|
coding: '',
|
||||||
|
editors: '',
|
||||||
|
languages: '',
|
||||||
|
os: '',
|
||||||
|
},
|
||||||
|
public: {
|
||||||
|
i18n: {
|
||||||
|
baseUrl: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// Nuxt Visitors
|
||||||
|
visitors: {
|
||||||
|
// Set to true to enable tracking of visitor locations
|
||||||
|
locations: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
41
package.json
Normal file
41
package.json
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "nuxt-app",
|
||||||
|
"type": "module",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"build": "nuxt build",
|
||||||
|
"dev": "nuxt dev",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"preview": "nuxt preview",
|
||||||
|
"postinstall": "nuxt prepare"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@iconify-json/devicon": "^1.2.43",
|
||||||
|
"@iconify-json/logos": "^1.2.9",
|
||||||
|
"@iconify-json/lucide": "^1.2.66",
|
||||||
|
"@iconify-json/ph": "^1.2.2",
|
||||||
|
"@iconify-json/twemoji": "^1.2.4",
|
||||||
|
"@iconify-json/vscode-icons": "^1.2.30",
|
||||||
|
"@nuxt/content": "3.6.3",
|
||||||
|
"@nuxt/eslint": "1.9.0",
|
||||||
|
"@nuxt/ui": "^4.0.0-alpha.1",
|
||||||
|
"@nuxtjs/i18n": "10.0.6",
|
||||||
|
"@pinia/nuxt": "^0.11.2",
|
||||||
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
|
"eslint": "^9.0.0",
|
||||||
|
"nuxt": "^4.0.3",
|
||||||
|
"rehype-katex": "^7.0.1",
|
||||||
|
"remark-math": "^6.0.0",
|
||||||
|
"remark-parse": "^11.0.0",
|
||||||
|
"remark-rehype": "^11.1.2",
|
||||||
|
"typescript": "^5.6.3",
|
||||||
|
"vue": "^3.5.20",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.3.0",
|
||||||
|
"@vueuse/math": "14.0.0-alpha.0",
|
||||||
|
"@vueuse/nuxt": "^13.9.0",
|
||||||
|
"vue-tsc": "^3.0.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/arthur.webp
Normal file
BIN
public/arthur.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
public/favicon.webp
Normal file
BIN
public/favicon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
BIN
public/noise.png
Normal file
BIN
public/noise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
1
public/projects/arthome/.gitkeep
Normal file
1
public/projects/arthome/.gitkeep
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# This is a placeholder file to keep this folder in your repository.
|
||||||
BIN
public/projects/arthome/cover.png
Normal file
BIN
public/projects/arthome/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
BIN
public/projects/artsite/cover.png
Normal file
BIN
public/projects/artsite/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
public/projects/bikes-glm/Report.pdf
Normal file
BIN
public/projects/bikes-glm/Report.pdf
Normal file
Binary file not shown.
BIN
public/projects/breast-cancer/report.pdf
Normal file
BIN
public/projects/breast-cancer/report.pdf
Normal file
Binary file not shown.
BIN
public/projects/monte-carlo-project/Report.pdf
Normal file
BIN
public/projects/monte-carlo-project/Report.pdf
Normal file
Binary file not shown.
BIN
public/projects/schelling/Projet.pdf
Normal file
BIN
public/projects/schelling/Projet.pdf
Normal file
Binary file not shown.
BIN
public/uses/jetbrains.webp
Normal file
BIN
public/uses/jetbrains.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
public/uses/pycharm.webp
Normal file
BIN
public/uses/pycharm.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 KiB |
BIN
public/uses/vscode.webp
Normal file
BIN
public/uses/vscode.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
BIN
public/writings/ML/model.png
Normal file
BIN
public/writings/ML/model.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
public/writings/ML/r2.png
Normal file
BIN
public/writings/ML/r2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
public/writings/ML/types.png
Normal file
BIN
public/writings/ML/types.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
BIN
public/writings/log-lin-reg/lin-and-poly.webp
Normal file
BIN
public/writings/log-lin-reg/lin-and-poly.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/writings/log-lin-reg/log-vs-lin.webp
Normal file
BIN
public/writings/log-lin-reg/log-vs-lin.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/writings/log-lin-reg/log.webp
Normal file
BIN
public/writings/log-lin-reg/log.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
public/writings/neural-network/gradient-descent.png
Normal file
BIN
public/writings/neural-network/gradient-descent.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 946 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user