https://github.com/cedric-renais/nike

Ce projet a pour objectif de créer une interface web moderne et dynamique inspirée des éléments visuels et de l'identité de Nike.
https://github.com/cedric-renais/nike

next postcss prettier prettier-plugin-tailwindcss tailwind

Last synced: 5 days ago
JSON representation

Ce projet a pour objectif de créer une interface web moderne et dynamique inspirée des éléments visuels et de l'identité de Nike.

• Host: GitHub
• URL: https://github.com/cedric-renais/nike
• Owner: cedric-renais
• Created: 2024-09-05T13:04:00.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T19:55:36.000Z (4 months ago)
• Last Synced: 2024-11-16T17:18:24.031Z (about 2 months ago)
• Topics: next, postcss, prettier, prettier-plugin-tailwindcss, tailwind
• Language: JavaScript
• Homepage: https://cedric-renais-nike.vercel.app/
• Size: 910 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# Projet Nike



## 🎉 Introduction

Ce projet a pour objectif de créer une interface web moderne et dynamique inspirée des éléments visuels et de l'identité de Nike.

## 🎯 Objectif

- Apprendre Tailwind : Approfondir les connaissances en utilisant les classes utilitaires pour créer des mises en page flexibles et performantes.

- Optimiser l'Expérience Utilisateur : Assurer une interface fluide et engageante pour les visiteurs, avec une attention particulière à l'accessibilité.

- Éco-conception : Réduire l'empreinte carbone du site en allégeant le poids des pages et en optimisant les images. L’objectif est de combiner performance et respect de l’environnement, sans compromettre la qualité de l'interface.

## ⚡ Tech Stack

- Next

- Tailwind

## 📦️ Dépendances

- postcss

- prettier

- prettier-plugin-tailwindcss

## 🚀 Résultats

### Éco-conception

- Images : Réduction de 89,56% du poids du dossier images

- Fonts : Réduction de 61,93% du poids du dossier fonts

#### Éco-index

![Eco-index](./public/readme/ecoindex.webp)

#### Lighthouse Desktop

![Lighthouse Desktop](./public/readme/desktop.webp)

- #### Lighthouse Mobile

![Lighthouse Mobile](./public/readme/mobile.webp)

### Accessibilité

- Couleurs : Choix de couleurs garantissant un score AAA en termes de contraste.

#### Wave

![wave](./public/readme/wave.webp)

#