mirror of
https://github.com/ArthurDanjou/artsite.git
synced 2026-01-25 13:52:38 +01:00
Merge branch 'refs/heads/master' into feature_es
# Conflicts: # app/components/AppHeader.vue # app/components/content/Quote.vue # app/components/home/Map.vue # app/pages/index.vue # content/home/en.md # content/home/fr.md # nuxt.config.ts # package.json # pnpm-lock.yaml # tailwind.config.ts
This commit is contained in:
@@ -3,43 +3,43 @@ title: Arthur Danjou • Mathematics Lover and IA Enthusiast
|
||||
description: I'm Arthur, a Mathematics lover and IA enthusiast. I'm currently studying at the University of Paris-Saclay. I'm passionate about Mathematics, Computer Science, and Artificial Intelligence.
|
||||
---
|
||||
|
||||
Hey, I'm Arthur Danjou, a mathematics student at the Paris-Saclay Faculty of Science in France.
|
||||
Hey, I'm Arthur Danjou, a Mathematics student in Statistics at the Paris-Dauphine University in France.
|
||||
|
||||
With a :hover-text{hover="Technology is evolving far too quickly 🤯" position="top" text="deep understanding of emerging
|
||||
technologies"},
|
||||
I'm at the heart of a rapidly expanding field. My background in :hover-text{hover="Maths is my main passion ∑"
|
||||
position="right" text="mathematics"}
|
||||
gives me a head start in understanding the concepts and theories behind these
|
||||
:hover-text{hover="My second passion 📱" text="technologies"} and in designing them effectively.
|
||||
With a :hover-text{hover="Technology is evolving far too quickly 🤯" position="top" text="deep understanding"} of
|
||||
emerging technologies, I'm at the heart of a rapidly expanding field. My background in :hover-text{hover="Maths is my
|
||||
main passion ∑" position="right" text="mathematics"} gives me a head start in
|
||||
understanding the concepts and theories behind these :hover-text{hover="My second passion 📱" text="technologies"} and in designing them
|
||||
effectively.
|
||||
|
||||
As a software engineer and mathematics student, my :hover-text{hover="My bag of knowledge 🎒" text="expertise"} covers
|
||||
:prose-icon[TypeScript]{icon="i-logos-typescript-icon"},
|
||||
:prose-icon[Vue]{icon="i-logos:vue"},
|
||||
:prose-icon[Nuxt]{icon="i-logos:nuxt-icon"},
|
||||
:prose-icon[Adonis]{icon="i-logos:adonisjs-icon"},
|
||||
:prose-icon[Java]{icon="i-logos:java"},
|
||||
:prose-icon[Python]{icon="i-logos:python"},
|
||||
:prose-icon[R]{icon="i-logos:r-lang"},
|
||||
which enables me to :hover-text{hover="need to quickly understand the complexity of projects 🏎️" text="understand"}
|
||||
the different needs of mathematical projects and to propose the best solutions. I also learned other important
|
||||
technologies, such as
|
||||
:prose-icon[Docker]{icon="i-logos:docker-icon"},
|
||||
:prose-icon[Redis]{icon="i-logos:redis"},
|
||||
:prose-icon[MySQL]{icon="i-logos:mysql-icon"} and
|
||||
:prose-icon[Git]{icon="i-logos:git-icon"} to :hover-text{hover="All these technologies complement each other 🔗" text="complete"} my knowledge.
|
||||
:prose-icon[TypeScript]{icon="typescript-icon" color="blue"},
|
||||
:prose-icon[Vue]{icon="vue" color="green"},
|
||||
:prose-icon[Nuxt]{icon="nuxt-icon" color="emerald"},
|
||||
:prose-icon[Adonis]{icon="adonisjs-icon" color="purple"},
|
||||
:prose-icon[Java]{icon="java" color="red"},
|
||||
:prose-icon[Python]{icon="python" color="amber"},
|
||||
:prose-icon[R]{icon="r-lang" color="blue"},
|
||||
which enables me to :hover-text{hover="need to quickly understand the complexity of projects 🏎️" text="understand"} the
|
||||
different needs of mathematical projects and to propose the best solutions.
|
||||
I also learned other important technologies, such as
|
||||
:prose-icon[Docker]{icon="docker-icon" color="sky"},
|
||||
:prose-icon[Redis]{icon="redis" color="red"},
|
||||
:prose-icon[MySQL]{icon="mysql-icon" color="zinc"} and
|
||||
:prose-icon[Git]{icon="git-icon" color="orange"} to :hover-text{hover="All these technologies complement each
|
||||
other 🔗" text="
|
||||
complete"} my knowledge.
|
||||
|
||||
I'm :hover-text{hover="As tech is always evolving, I need to be up-to-date 🖥️" position="top" text="constantly"}
|
||||
learning new things, from technology to finance and entrepreneurship. I love
|
||||
:hover-text{hover="I love sharing my knowledge and helping others 🫂" text="sharing"} my knowledge and learning new
|
||||
theorems and technologies.
|
||||
I'm a :hover-text{hover="I'm constantly looking to discover new things" text="curious"} person and eager to continue
|
||||
learning and growing throughout my life.
|
||||
learning new things, from technology to finance and entrepreneurship. I love :hover-text{hover="I love sharing my
|
||||
knowledge and helping
|
||||
others 🫂" text="sharing"} my knowledge and learning new theorems and technologies. I'm a :hover-text{hover="I'm
|
||||
constantly looking to discover new things" text="curious"} person and eager to continue learning and growing throughout
|
||||
my life.
|
||||
|
||||
As well as programming, I enjoy :hover-text{hover="Sport allows me to burn off energy 🏋️♂️" text="sport"} and
|
||||
:hover-text{hover="Travelling frees me and gets me away from it all ✈️" text="travelling"}.
|
||||
My passion, commitment and eagerness to learn and progress are the qualities that enable me to succeed in my
|
||||
:hover-text{hover="Career already begun and far from over 😎" text="career"} and :hover-text{hover="Only 2 years of study
|
||||
left 💪" text="studies"}.
|
||||
:hover-text{hover="Travelling frees me and gets me away from it all ✈️" text="travelling"}. My passion, commitment and
|
||||
eagerness to learn and progress are the qualities that enable me to succeed in my :hover-text{hover="Career already
|
||||
begun and far from over 😎" text="career"} and :hover-text{hover="Only 2 years of study left 💪" text="studies"}.
|
||||
|
||||
::stats
|
||||
::
|
||||
|
||||
@@ -3,38 +3,36 @@ title: Arthur Danjou • Mathematics Lover and IA Enthusiast
|
||||
description: I'm Arthur, a Mathematics lover and IA enthusiast. I'm currently studying at the University of Paris-Saclay. I'm passionate about Mathematics, Computer Science, and Artificial Intelligence.
|
||||
---
|
||||
|
||||
Salut, je suis Arthur Danjou, étudiant en mathématiques à la faculté des sciences de Paris-Saclay en France.
|
||||
Salut, je suis Arthur Danjou, étudiant en mathématiques spécialisé en Statistiques à l'Université Paris-Dauphine en France.
|
||||
|
||||
Avec une :hover-text{hover="La technologie évolue beaucoup trop vite 🤯" position="top" text="compréhension profonde des
|
||||
technologies émergentes"},
|
||||
je suis au cœur d'un domaine en pleine expansion. Ma formation en :hover-text{hover="Les mathématiques sont ma
|
||||
principale passion ∑" position="right" text="mathématiques"}
|
||||
me donne une longueur d'avance pour comprendre les concepts et les théories qui sous-tendent ces
|
||||
:hover-text{hover="Ma deuxième passion 📱" text="technologies"} et à les concevoir efficacement.
|
||||
Avec une :hover-text{hover="La technologie évolue beaucoup trop vite 🤯" position="top" text="compréhension profonde"}
|
||||
des technologies émergentes, je suis au cœur d'un domaine en pleine expansion. Ma formation en :hover-text{hover="Les
|
||||
mathématiques sont ma principale passion ∑" position="right" text="mathématiques"} me donne une longueur d'avance pour
|
||||
comprendre les concepts et les théories qui sous-tendent ces :hover-text{hover="Ma deuxième passion 📱" text="
|
||||
technologies"} et à les concevoir efficacement.
|
||||
|
||||
En tant qu'ingénieur logiciel et étudiant en mathématiques, mon :hover-text{hover="Mon sac de connaissances 🎒" text="
|
||||
expertise"} couvre
|
||||
:prose-icon[TypeScript]{icon="i-logos-typescript-icon"},
|
||||
:prose-icon[Vue]{icon="i-logos:vue"},
|
||||
:prose-icon[Nuxt]{icon="i-logos:nuxt-icon"},
|
||||
:prose-icon[Adonis]{icon="i-logos:adonisjs-icon"},
|
||||
:prose-icon[Java]{icon="i-logos:java"},
|
||||
:prose-icon[Python]{icon="i-logos:python"},
|
||||
:prose-icon[R]{icon="i-logos:r-lang"},
|
||||
ce qui me permet de :hover-text{hover="Comprendre rapidement la complexité des projets 🏎️" text="comprendre"}
|
||||
les différents besoins des projets mathématiques et de proposer les meilleures solutions. J'ai également appris d'autres
|
||||
technologies importantes, telles que
|
||||
:prose-icon[Docker]{icon="i-logos:docker-icon"},
|
||||
:prose-icon[Redis]{icon="i-logos:redis"},
|
||||
:prose-icon[MySQL]{icon="i-logos:mysql-icon"} et
|
||||
:prose-icon[Git]{icon="i-logos:git-icon"} pour :hover-text{hover="Toutes ces technologies se complètent 🔗" text="
|
||||
:prose-icon[TypeScript]{icon="typescript-icon" color="blue"},
|
||||
:prose-icon[Vue]{icon="vue" color="green"},
|
||||
:prose-icon[Nuxt]{icon="nuxt-icon" color="emerald"},
|
||||
:prose-icon[Adonis]{icon="adonisjs-icon" color="purple"},
|
||||
:prose-icon[Java]{icon="java" color="red"},
|
||||
:prose-icon[Python]{icon="python" color="amber"},
|
||||
:prose-icon[R]{icon="r-lang" color="blue"},
|
||||
ce qui me permet de :hover-text{hover="Comprendre rapidement la complexité des projets 🏎️" text="comprendre"} les
|
||||
différents besoins des projets mathématiques et de proposer les meilleures solutions.
|
||||
J'ai également appris d'autres technologies importantes, telles que
|
||||
:prose-icon[Docker]{icon="docker-icon" color="sky"},
|
||||
:prose-icon[Redis]{icon="redis" color="red"},
|
||||
:prose-icon[MySQL]{icon="mysql-icon" color="zinc"} et
|
||||
:prose-icon[Git]{icon="git-icon" color="orange"} pour :hover-text{hover="Toutes ces technologies se complètent 🔗" text="
|
||||
compléter"} mes connaissances.
|
||||
|
||||
Je suis :hover-text{hover="Je dois toujours chercher à être à jour 🖥️" position="top" text="constamment"} dans
|
||||
l'apprentissage de nouvelles choses, de la technologie à la finance en passant par l'entrepreneuriat. J'aime
|
||||
:hover-text{hover="J'aime partager et aider les autres 🫂" text="partager"} mes connaissances et apprendre de nouveaux
|
||||
théorèmes et technologies.
|
||||
Je suis une personne :hover-text{hover="Je cherche à découvrir de nouvelles choses" text="
|
||||
théorèmes et technologies. Je suis une personne :hover-text{hover="Je cherche à découvrir de nouvelles choses" text="
|
||||
curieuse"} et désireuse de continuer à apprendre et à grandir tout au long de ma vie.
|
||||
|
||||
Outre la programmation, j'aime le :hover-text{hover="Le sport me permet de dépenser de l'énergie 🏋️♂️" text="sport"}
|
||||
|
||||
25
content/portfolio/arthome.md
Normal file
25
content/portfolio/arthome.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
slug: arthome
|
||||
title: ArtHome
|
||||
description: 🏡 ArtHome - Your personalised home page in your browser
|
||||
publishedAt: 2024/09/04
|
||||
readingTime: 1
|
||||
cover: arthome/cover.png
|
||||
tags:
|
||||
- project
|
||||
- web
|
||||
---
|
||||
|
||||
[ArtHome](https://home.arthurdanjou.fr) is a personalised page where you can create categories and tabs to have a one page with all your shortcuts on all browsers.
|
||||
|
||||
You can customize your tabs and categories with different colors and icons. Feel free to set your page in private if you want to keep secret your tabs.
|
||||
|
||||
Made with:
|
||||
|
||||
- [Nuxt](https://nuxt.com): Nuxt is an **open source framework** that makes web development intuitive and powerful.Create performant and production-grade full-stack web apps and websites with confidence.
|
||||
- [NuxtHub](https://hub.nuxt.com): Deploy and scale your Nuxt applications worldwide with NuxtHub, the Cloudflare-powered platform that ensures lightning-fast performance at low cost and with full-stack capabilities.
|
||||
- [NuxtUI](https://ui.nuxt.com): Nuxt UI simplifies the creation of stunning and responsive web applications with itscomprehensive collections of fully styled and customizable UI components designed for Nuxt.
|
||||
- [Eslint](https://eslint.org): ESLint is an open source project that helps you find and fix problems with your JavaScript code.
|
||||
- [Drizzle](https://orm.drizzle.team/): Drizzle ORM is a headless TypeScript ORM with a head
|
||||
- [Zod](https://zod.dev/): TypeScript-first schema validation with static type inference
|
||||
- and ❤️
|
||||
25
content/portfolio/artsite.md
Normal file
25
content/portfolio/artsite.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
slug: artsite
|
||||
title: ArtSite
|
||||
description: 🌍 My personal website, my portfolio, and my blog. 🚀
|
||||
publishedAt: 2024/06/01
|
||||
readingTime: 1
|
||||
cover: artsite/cover.png
|
||||
tags:
|
||||
- project
|
||||
- web
|
||||
---
|
||||
|
||||
[**ArtSite**](https://arthurdanjou.fr) is my personal website, my portfolio, and my blog. It's a place where I can share my projects, my thoughts, and my experiences. It's also a place where I can experiment with new technologies and design ideas.
|
||||
|
||||
## ⚒️ Tech stack
|
||||
|
||||
- **UI** → [Vue.js](https://vuejs.org/)
|
||||
- **Framework** → [Nuxt.js](https://nuxtjs.org/)
|
||||
- **Content** → [Nuxt Content](https://content.nuxtjs.org/)
|
||||
- **Design System** → [NuxtUI](https://nuxtui.com/)
|
||||
- **CMS & Editing** → [Nuxt Studio](https://nuxt.studio)
|
||||
- **Langage** → [Typescript](https://www.typescriptlang.org/)
|
||||
- **Deployment** → [NuxtHub](https://hub.nuxt.com/)
|
||||
- **Styling** → [Sass](https://sass-lang.com/) & [Tailwind CSS](https://tailwindcss.com/)
|
||||
- **Package Manager** → [pnpm](https://pnpm.io/)
|
||||
108
content/portfolio/how-my-website-works.md
Normal file
108
content/portfolio/how-my-website-works.md
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
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:
|
||||
- article
|
||||
- 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.
|
||||
|
||||
|
||||
|
||||
## 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:
|
||||
|
||||
### 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.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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.
|
||||
|
||||
## 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.
|
||||
|
||||
### 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!
|
||||
|
||||
### 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.
|
||||
|
||||
### Database & Deployment
|
||||
|
||||
#### NuxtHub & Cloudflare workers
|
||||
|
||||
|
||||
|
||||
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.`
|
||||
|
||||
### Writing
|
||||
|
||||
#### Nuxt Studio
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
## 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
|
||||
|
||||
## 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.
|
||||
45
content/portfolio/studies.md
Normal file
45
content/portfolio/studies.md
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
slug: studies
|
||||
title: Studies projects
|
||||
description: 🎓 Studies projects - a collection of projects done during my studies.
|
||||
publishedAt: 2023/09/01
|
||||
readingTime: 1
|
||||
tags:
|
||||
- project
|
||||
- data
|
||||
- python
|
||||
- r
|
||||
---
|
||||
|
||||
[Studies projects](https://github.com/ArthurDanjou/studies) is a collection of mathematics projects done during my studies. It includes projects in _Python_ and in _R_.
|
||||
|
||||
The projects are divided into two main categories: _L3_ and _M1_, corresponding to the third year of the bachelor's degree and the first year of the master's degree in mathematics.
|
||||
|
||||
File structure:
|
||||
- `L3`
|
||||
- `Analyse Matricielle`
|
||||
- `Analyse Multidimensionnelle`
|
||||
- `Calculs Numériques`
|
||||
- `Equations Différentielles`
|
||||
- `Méthodes Numériques`
|
||||
- `Probabilités`
|
||||
- `Projet Numérique`
|
||||
- `Statistiques`
|
||||
- `M1`
|
||||
- `Data Analysis`
|
||||
- `General Linear Models`
|
||||
- `Monte Carlo Methods`
|
||||
- `Portfolio Management`
|
||||
|
||||
Made with:
|
||||
- [Python](https://www.python.org): Python is an interpreted, high-level and general-purpose programming language.
|
||||
- [R](https://www.r-project.org): R is a programming language and free software environment for statistical computing and graphics.
|
||||
- [Jupyter](https://jupyter.org): Jupyter is a free, open-source, interactive web tool known as a computational notebook, which researchers can use to combine software code, computational output, explanatory text and multimedia resources in a single document.
|
||||
- [Pandas](https://pandas.pydata.org): Pandas is a fast, powerful, flexible and easy to use open source data analysis and data manipulation library built on top of the Python programming language.
|
||||
- [Numpy](https://numpy.org): NumPy is the fundamental package for scientific computing in Python.
|
||||
- [Scipy](https://www.scipy.org): SciPy is a free and open-source Python library used for scientific and technical computing.
|
||||
- [Matplotlib](https://matplotlib.org): Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python.
|
||||
- [RMarkdown](https://rmarkdown.rstudio.com): R Markdown is an authoring framework for data science. You can use a single R Markdown file to save and execute code and generate high-quality reports that can be shared with an audience.
|
||||
- [FactoMineR](https://factominer.free.fr/): FactoMineR is an R package dedicated to multivariate exploratory data analysis.
|
||||
- [ggplot2](https://ggplot2.tidyverse.org): ggplot2 is a system for declaratively creating graphics, based on The Grammar of Graphics.
|
||||
- and my 🧠
|
||||
95
content/portfolio/what-is-machine-learning.md
Normal file
95
content/portfolio/what-is-machine-learning.md
Normal file
@@ -0,0 +1,95 @@
|
||||
---
|
||||
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:
|
||||
- article
|
||||
- ml
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
## 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.
|
||||
|
||||
## 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$$).
|
||||
|
||||
|
||||
|
||||
Evaluation is a crucial step to verify the performance of a model. For regression problems, the R² score is a key indicator.
|
||||
|
||||
## Evaluating Models: The R² Score
|
||||
|
||||
For regression problems, the **R² score** measures the proportion of the target’s variance explained by the model:
|
||||
|
||||
$$R2 = 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.
|
||||
|
||||
|
||||
|
||||
With these concepts in mind, you are better equipped to understand and apply ML models in your projects.
|
||||
|
||||
## 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.
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "hardware"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "hardware"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "hardware"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "hardware"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"fr": "J'utilise la suite Apple comprenant Mail, Calendar, Notes, Music et Reminders pour mon organisation quotidienne."
|
||||
},
|
||||
"category": "software"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"fr": "J'utilise Discord pour discuter et parler avec mes amis et mes clients et discuter avec certains membres de la communauté."
|
||||
},
|
||||
"category": "software"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "hardware"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"fr": "J'utilise Google Chrome pour naviguer, l'outil de développement et le marché des extensions."
|
||||
},
|
||||
"category": "software"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "ide"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "hardware"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"fr": "Notion est mon outil de prise de notes, de kanban, de wikis et de brouillon tout-en-un."
|
||||
},
|
||||
"category": "software"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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."
|
||||
},
|
||||
"category": "software"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"fr": "J'utilise TypeScript, Vue 3 avec Nuxt 3, Nuxt Stack (UI, Hub, Content, Studio) & TailwindCss pour le FrontEnd. Nuxt (alimenté par Nitro) et AdonisJs sont utilisés pour le BackEnd en fonction de la complexité du projet. PostgreSQL est utilisé pour la base de données, Redis pour le caching. Docker est utilisé pour la conteneurisation. Les applications sont déployées sur NuxtHub (alimenté par CloudFlare) ou Vercel."
|
||||
},
|
||||
"category": "stack"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"fr": "Ce clavier TKL est un excellent choix pour les joueurs qui veulent un clavier compact avec de nombreuses fonctionnalités."
|
||||
},
|
||||
"category": "hardware"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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"
|
||||
},
|
||||
"category": "ide"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
"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 !"
|
||||
},
|
||||
"category": "software"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
---
|
||||
slug: how-my-website-works
|
||||
title: How my website works?
|
||||
description: My new website is using a fantastical stack and I am explaining how my playground works
|
||||
publishedAt: 2024/06/21
|
||||
readingTime: 5
|
||||
---
|
||||
|
||||
My personal website is an over-engineered 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.
|
||||
|
||||
|
||||
|
||||
## 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:
|
||||
|
||||
### 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 publish.
|
||||
|
||||
Extra friction on these processes would make me less likely to keep things up to date or share new things.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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.
|
||||
|
||||
## 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.
|
||||
|
||||
### 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!
|
||||
|
||||
### 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.
|
||||
|
||||
### Database & Deployment
|
||||
|
||||
#### NuxtHub & Cloudflare workers
|
||||
|
||||
|
||||
|
||||
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 utilize optional tools to enhance your development experience significantly.
|
||||
|
||||
One word : `If you know SQL — you know Drizzle.`
|
||||
|
||||
### Writing
|
||||
|
||||
#### Nuxt Studio
|
||||
|
||||
|
||||
|
||||
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 in the near future, 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 adds 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.
|
||||
|
||||
## 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
|
||||
|
||||
## 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 rewriting my website.
|
||||
Reference in New Issue
Block a user