Skip to content

Latest commit

 

History

History
196 lines (132 loc) · 11.2 KB

File metadata and controls

196 lines (132 loc) · 11.2 KB
**Documentation en français 🇫🇷** et [anglais 🇺🇸](README.md),[ukrainien 🇺🇦](README.ua.md), [norvégien 🇳🇴](README.no.md),[slovène 🇸🇮](README.si.md)

<hr/><hr/>

# Mon portfolio

Ce site est mon portfolio et contient de nombreuses informations me concernant en tant que développeuse ainsi que mes projets.

## Contenu

- [Présentation du projet](#project-overview)
- [Technologies et bibliothèques utilisées](#technologies-and-libraries-used)
- [Fonctionnalités implémentées dans le projet](#implemented-in-the-project-the-following-functionality)
- [Maquettes](#mockups)
- [Captures d'écran](#screenshots)
- [Documentation par défaut de Next.js](#default-documentation-of-nextjs)
  - [Démarrage](#getting-started)
  - [En savoir plus](#learn-more)
  - [Déployer sur Vercel](#deploy-on-vercel)

## Présentation du projet

Avec ce site, vous pouvez découvrir mes compétences, consulter mes certificats et me contacter en m'envoyant un e-mail via le formulaire.

## Technologies et bibliothèques utilisées

Le projet a été réalisé en utilisant les technologies et bibliothèques suivantes :

![Next.js](https://img.shields.io/badge/Next.js-13.4.19-mediumslateblue) ![Typescript](https://img.shields.io/badge/Typescript-5.1.6-aquamarine) ![Next-intl](https://img.shields.io/badge/Next%20intl-3.0.0.beta.18-rosybrown) ![Next-theme](https://img.shields.io/badge/Next%20theme-0.2.1-moccasin) ![React](https://img.shields.io/badge/React.js-18.2.0-teal) ![React-dom](https://img.shields.io/badge/React%20dom-18.2.0-azure) ![React-hook-form](https://img.shields.io/badge/React%20hook%20form-7.47.0-orange) ![React-hook-form-persist](https://img.shields.io/badge/React%20hook%20form%20persist-3.0.0-thistle) ![React-hook-form-resolvers](https://img.shields.io/badge/React%20hook%20form%20resolvers-3.3.2-beige) ![React-three-drei](https://img.shields.io/badge/React%20three%20drei-9.88.0-darkslateblue) ![React-three-fiber](https://img.shields.io/badge/React%20three%20fiber-8.14.5-mistyrose) ![React-scroll](https://img.shields.io/badge/React%20scroll-1.9.0-khaki) ![React-tilt](https://img.shields.io/badge/React%20tilt-1.0.2-slategrey) ![React-responsive](https://img.shields.io/badge/React%20responsive-9.0.2-darkslateblue) ![React-icons](https://img.shields.io/badge/React%20icons-4.11.0-lavender) ![Three.js](https://img.shields.io/badge/Three.js-0.156.1-plum) ![Framer-motion](https://img.shields.io/badge/Framer%20motion-10.16.4-peachpuff) ![Axios](https://img.shields.io/badge/Axios-1.6.0-darkturquoise) ![Buffer](https://img.shields.io/badge/Buffer-6.0.3-blueviolet) ![Postcss](https://img.shields.io/badge/Postcss-8.4.29-lightsteelblue) ![Dotenv](https://img.shields.io/badge/Dotenv-16.3.1-goldenrod) ![File-loader](https://img.shields.io/badge/File%20loader-6.2.0-lightskyblue) ![Lottie-web](https://img.shields.io/badge/Lottie%20web-5.12.2-mediumaquamarine) ![Sharp](https://img.shields.io/badge/Sharp-0.32.6-purple) ![Swiper](https://img.shields.io/badge/Swiper-10.3.1-lavenderblush) ![Url-loader](https://img.shields.io/badge/Url%20loader-4.1.1-lightseagreen) ![Wouter](https://img.shields.io/badge/Wouter-2.12.0-moccasin) ![Yup](https://img.shields.io/badge/Yup-1.3.2-sienna) ![Uuid-by-string](https://img.shields.io/badge/Uuid%20by%20string-1.3.2-lightpink)

## Fonctionnalités implémentées

- SEO
- Navigation du site
- Changement de thème
- Mise en page adaptative
- Différents carrousels / sliders
- Accessibilité améliorée
- Chargement optimisé des ressources
- Localisation et internationalisation (L10n et i18n)
- Envoi d'informations via des formulaires (validation incluse)
- Gestion de contenu simple (tous les textes sont dans des fichiers `messages/*.json`)

## Maquettes

![home page](/public/mockups/home.webp)
![about page](/public/mockups/about.webp)
![skills page](/public/mockups/skills.webp)
![projects page](/public/mockups/projects.webp)
![contacts page](/public/mockups/contacts.webp)

## Captures d'écran

![home page](/public/images/opengraph/en/home.webp)
![about page](/public/images/opengraph/en/about.webp)
![skills page](/public/images/opengraph/en/skills.webp)
![projects page](/public/images/opengraph/en/projects.webp)
![contacts page](/public/images/opengraph/en/contacts.webp)

# Documentation par défaut de Next.js

Ceci est un projet [Next.js](https://nextjs.org/) initialisé avec [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Démarrage

Exécutez d'abord le serveur de développement :

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

Ouvrez [http://localhost:3000](http://localhost:3000) dans votre navigateur pour voir le résultat.

Vous pouvez commencer à modifier la page en éditant `app/page.tsx`. La page se mettra à jour automatiquement.

Ce projet utilise [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) pour optimiser et charger automatiquement la police Geologica depuis Google.

## En savoir plus

Pour en savoir plus sur Next.js, consultez :

- [Documentation Next.js](https://nextjs.org/docs) - informations sur les fonctionnalités et l'API Next.js.
- [Learn Next.js](https://nextjs.org/learn) - tutoriel interactif Next.js.

Vous pouvez également consulter le [dépôt GitHub de Next.js](https://github.com/vercel/next.js/) - vos retours et contributions sont les bienvenus !

## Déployer sur Vercel

Le moyen le plus simple de déployer votre application Next.js est d'utiliser la [plateforme Vercel](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).

Consultez la [documentation de déploiement Next.js](https://nextjs.org/docs/deployment) pour plus de détails.
**Documentation en [Ukrainien 🇺🇦](README.ua.md)** et [Norvégien 🇳🇴](README.no.md)

<hr/><hr/>

# Mon portfolio

Ce site est mon portfolio et contient de nombreuses informations me concernant en tant que développeuse ainsi que mes projets.

## Contenu

- [Présentation du projet](#project-overview)
- [Technologies et bibliothèques utilisées](#technologies-and-libraries-used)
- [Fonctionnalités implémentées dans le projet](#implemented-in-the-project-the-following-functionality)
- [Maquettes](#mockups)
- [Captures d'écran](#screenshots)
- [Documentation par défaut de Next.js](#default-documentation-of-nextjs)
  - [Démarrage](#getting-started)
  - [En savoir plus](#learn-more)
  - [Déployer sur Vercel](#deploy-on-vercel)

## Présentation du projet

Avec ce site, vous pouvez découvrir mes compétences, consulter mes certificats et me contacter en m'envoyant un e-mail via le formulaire.

## Technologies et bibliothèques utilisées

Le projet a été réalisé en utilisant les technologies et bibliothèques suivantes :

![Next.js](https://img.shields.io/badge/Next.js-13.4.19-mediumslateblue) ![Typescript](https://img.shields.io/badge/Typescript-5.1.6-aquamarine) ![Next-intl](https://img.shields.io/badge/Next%20intl-3.0.0.beta.18-rosybrown) ![Next-theme](https://img.shields.io/badge/Next%20theme-0.2.1-moccasin) ![React](https://img.shields.io/badge/React.js-18.2.0-teal) ![React-dom](https://img.shields.io/badge/React%20dom-18.2.0-azure) ![React-hook-form](https://img.shields.io/badge/React%20hook%20form-7.47.0-orange) ![React-hook-form-persist](https://img.shields.io/badge/React%20hook%20form%20persist-3.0.0-thistle) ![React-hook-form-resolvers](https://img.shields.io/badge/React%20hook%20form%20resolvers-3.3.2-beige) ![React-three-drei](https://img.shields.io/badge/React%20three%20drei-9.88.0-darkslateblue) ![React-three-fiber](https://img.shields.io/badge/React%20three%20fiber-8.14.5-mistyrose) ![React-scroll](https://img.shields.io/badge/React%20scroll-1.9.0-khaki) ![React-tilt](https://img.shields.io/badge/React%20tilt-1.0.2-slategrey) ![React-responsive](https://img.shields.io/badge/React%20responsive-9.0.2-darkslateblue) ![React-icons](https://img.shields.io/badge/React%20icons-4.11.0-lavender) ![Three.js](https://img.shields.io/badge/Three.js-0.156.1-plum) ![Framer-motion](https://img.shields.io/badge/Framer%20motion-10.16.4-peachpuff) ![Axios](https://img.shields.io/badge/Axios-1.6.0-darkturquoise) ![Buffer](https://img.shields.io/badge/Buffer-6.0.3-blueviolet) ![Postcss](https://img.shields.io/badge/Postcss-8.4.29-lightsteelblue) ![Dotenv](https://img.shields.io/badge/Dotenv-16.3.1-goldenrod) ![File-loader](https://img.shields.io/badge/File%20loader-6.2.0-lightskyblue) ![Lottie-web](https://img.shields.io/badge/Lottie%20web-5.12.2-mediumaquamarine) ![Sharp](https://img.shields.io/badge/Sharp-0.32.6-purple) ![Swiper](https://img.shields.io/badge/Swiper-10.3.1-lavenderblush) ![Url-loader](https://img.shields.io/badge/Url%20loader-4.1.1-lightseagreen) ![Wouter](https://img.shields.io/badge/Wouter-2.12.0-moccasin) ![Yup](https://img.shields.io/badge/Yup-1.3.2-sienna) ![Uuid-by-string](https://img.shields.io/badge/Uuid%20by%20string-1.3.2-lightpink)

## Fonctionnalités implémentées

- SEO
- Navigation du site
- Changement de thème
- Mise en page adaptative
- Différents carrousels / sliders
- Accessibilité améliorée
- Chargement optimisé des ressources
- Localisation et internationalisation (L10n et i18n)
- Envoi d'informations via des formulaires (validation incluse)
- Gestion de contenu simple (tous les textes sont dans des fichiers `messages/*.json`)

## Maquettes

![home page](/public/mockups/home.webp)
![about page](/public/mockups/about.webp)
![skills page](/public/mockups/skills.webp)
![projects page](/public/mockups/projects.webp)
![contacts page](/public/mockups/contacts.webp)

## Captures d'écran

![home page](/public/images/opengraph/en/home.webp)
![about page](/public/images/opengraph/en/about.webp)
![skills page](/public/images/opengraph/en/skills.webp)
![projects page](/public/images/opengraph/en/projects.webp)
![contacts page](/public/images/opengraph/en/contacts.webp)

# Documentation par défaut de Next.js

Ceci est un projet [Next.js](https://nextjs.org/) initialisé avec [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Démarrage

Exécutez d'abord le serveur de développement :

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

Ouvrez [http://localhost:3000](http://localhost:3000) dans votre navigateur pour voir le résultat.

Vous pouvez commencer à modifier la page en éditant `app/page.tsx`. La page se mettra à jour automatiquement.

Ce projet utilise [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) pour optimiser et charger automatiquement la police Geologica depuis Google.

## En savoir plus

Pour en savoir plus sur Next.js, consultez :

- [Documentation Next.js](https://nextjs.org/docs) - informations sur les fonctionnalités et l'API Next.js.
- [Learn Next.js](https://nextjs.org/learn) - tutoriel interactif Next.js.

Vous pouvez également consulter le [dépôt GitHub de Next.js](https://github.com/vercel/next.js/) - vos retours et contributions sont les bienvenus !

## Déployer sur Vercel

Le moyen le plus simple de déployer votre application Next.js est d'utiliser la [plateforme Vercel](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).

Consultez la [documentation de déploiement Next.js](https://nextjs.org/docs/deployment) pour plus de détails.