## Introduction

Lorsque mon frère, architecte de profession, a décidé de se lancer en freelance, il m'a confié la création de son site internet pour présenter ses projets. Son objectif était de se démarquer dans un secteur compétitif en mettant en valeur ses réalisations et son expertise auprès de clients potentiels. Le défi principal de ce projet était de concevoir une plateforme à la fois élégante et fonctionnelle, **pour mettre en valeur ses projets** tout en offrant une expérience utilisateur optimal.

Dans cet article, je vais vous guider à travers les étapes clés de la création du site, en commençant par la phase de design et de conception. Nous avons effectué un benchmark approfondi, en nous inspirant de plateformes comme **Pinterest** et **Dribbble** pour identifier les meilleures pratiques en matière de design d’architecture. Nous avons ensuite utilisé **Figma** pour créer une maquette visuelle intuitive, adaptée aux besoins spécifiques d'un architecte freelance.

Ensuite, je vous parlerai des choix technologiques que nous avons faits, en particulier l'utilisation de **React JS** pour développer un site performant, réactif et facilement maintenabl. Ainsi que l'utilisation du CMS Headless Strapi pour faciliter l'édition du site. Vous découvrirez également les raisons derrière ces choix et comment ils ont permis d’offrir une expérience utilisateur fluide et moderne.

## Conception 
### Recherches et benchemark
Lorsque j'ai commencé la conception du site web pour mon frère, architecte freelance, il n'y avait pas de charte graphique définie, ce qui m'a offert une grande liberté créative. Pour définir une direction claire, j'ai d'abord réalisé un benchmark sur des plateformes comme Pinterest et Dribbble, à la recherche d'inspirations visuelles adaptées aux sites de présentation de projets d'architecture. Mon objectif était de concevoir un site épuré et professionnel, mettant en valeur les réalisations de mon frère.

Je me suis rapidement rendu compte que la clé était un design sobre et sombre, afin de faire ressortir les visuels des projets architecturaux. Les images de ses réalisations devaient être l’élément central du site, permettant aux visiteurs de se concentrer sur le travail sans être distraits par une interface trop chargée. À partir des exemples analysés, j’ai vu que les designs minimalistes donnaient un résultat plus percutant, en particulier dans les secteurs créatifs comme l’architecture.

### Choix esthétiques et fonctionnels

Sans charte graphique imposée, j’ai décidé qu’il n'était pas nécessaire de créer un UI kit détaillé, estimant que cela prendrait trop de temps sans apporter de réelle valeur ajoutée au projet. L'important était d’aller à l’essentiel : un site simple, mais élégant, où les images des projets sont au cœur de l'expérience utilisateur.

J’ai opté pour une palette de couleurs sombres, principalement des tons gris foncé et noir avec une legère touche de bleu clair, offrant un contraste sophistiqué avec les images des projets. Ce choix permet de faire ressortir les visuels tout en conservant un aspect professionnel et moderne.

### Animations et interactivité

Pour rendre le site plus agréable a utilisé, j'ai ajouté quelques animations légères. Celles-ci incluent des transitions douces lors du défilement ou des effets subtils de survol sur les images. L’idée était d’apporter un dynamisme discret, créant une expérience agréable sans détourner l’attention de l’essentiel : les projets architecturaux.

### Maquettes visuelles

J’ai ensuite réalisé les maquettes visuelles sur Figma, ce qui m’a permis de formaliser ces idées en une structure concrète. Les maquettes illustrent la disposition des éléments, la hiérarchie des contenus, et l’aspect visuel général des différentes pages. Cela a permis d’assurer une cohérence dans le design avant de passer à la phase de développement. Vous pouvez consulter les maquettes complètes en annexe pour avoir une idée précise de la mise en forme finale du site.

![Vignette page accueil site d'architecture](https://api.axelgodefroy.fr/uploads/Aymeric_737970b847_9dd936975e.png)

## Développement

Pour ce projet j'ai décider d'utiliser React, j'étais plutôt a l'aise avec cette technologie, a ce moment j'utilisais

### Front-end (React JS) 
Le front-end en React est responsable de l'affichage et de l'interaction utilisateur. Il envoie des requêtes HTTP GET pour obtenir les données nécessaires à la présentation des projets architecturaux.
Ces requêtes sont adressées à l'API exposée par Strapi pour récupérer les informations sur les projets, les images, les descriptions, et d’autres contenus associés.

### API de Strapi
Strapi reçoit les requêtes HTTP du front-end et gère ces demandes en effectuant des opérations sur la base de données.
Les opérations incluent la récupération, la mise à jour, ou l'ajout de nouvelles informations. Strapi renvoie les données au front-end sous forme de réponses JSON.
L'avantage de CMS c'est qu'il est totalement personnalisable, on créer chaque entité à travers une interface simple d'utilisation. De la meme façon l'API peut être surchargée et personnalisée à souhait.

### Base de données
J'ai utiliser une base de donnée SQLite, en effet le projet ne nécessite pas vraiment de performance énorme, ni fonction spécial. Disponible sur d'autres SGBD.

### Déploiement avec Docker
Pour le déploiement, j’ai utilisé Docker pour conteneuriser les applications front-end et back-end. Docker ma permis de déployer très rapidement le projet sur un serveur peronnel sans impacté les autres projets que j'avais dèjà mis en place.

![diagram_archi_infra.webp](https://api.axelgodefroy.fr/uploads/diagram_archi_infra_d3321bdf20.webp)

> **📎 Liens utiles**
> [La conteneurisation c'est quoi ?](https://www.redhat.com/fr/topics/cloud-native-apps/what-is-containerization)
> 
> [Headless CMS : Le futur de la gestion du contenu](https://www.sortlist.fr/blog/headless-cms)

## Conclusion

La réalisation de ce projet m'a offert l'opportunité de développer de nouvelles compétences en matière de mise en place d'une architecture de développement moderne. J'ai particulièrement apprécié l'utilisation de CMS headless tels que Strapi, qui a facilité la gestion du site pour mon frère. Grâce à Strapi, j'ai pu proposer une interface de gestion simplifiée pour permettre à mon frère de mettre à jour facilement son site, sans avoir à se préoccuper de la complexité du backend.

La mise en place de l'environnement Docker pour le déploiement du site a été un véritable défi, mais cela m'a permis d'acquérir des compétences essentielles en matière de conteneurisation et de déploiement d'applications modernes.

> **Accès**
> Application terminé mais pour l'instant non public, disponible lors d'un entretien.


Vignette page accueil site d'architecture

large_Aymeric_737970b847.png

medium_Aymeric_737970b847.png

small_Aymeric_737970b847.png

thumbnail_Aymeric_737970b847.png

thumbnail_home_archi_project_thumb

Site d'Architecture

Développement Web

Webdesign

## Objectif

Pour effectuer ma deuxième année de DUT en alternance j'ai décidé de créer un CV interactif pour mettre en oeuvre les compétences que j'avais acquises en autodidacte et durant ma formation.

## Développement

Il n'y a pas vraiment de coté backend sur cette mini-application, il y a uniquement un fichier JSON qui contient les données. En effet le but était de créer cette application le plus rapidement possible pour gagner du temps sur mes recherches.

Pour le frontend c'est une application React, d'autres librairies viennent s'ajouter au framework comme Mapbox JS pour la carte interactive.

_Application accesible a l'adresse suivante : [https://axelgodefroy.fr/cv](/cv)_