https://github.com/clementmadiot/coffee_react

Responsive Coffee Shop Website Using ReactJS, Tailwind CSS & Framer Motion
https://github.com/clementmadiot/coffee_react

Last synced: 12 days ago
JSON representation

Responsive Coffee Shop Website Using ReactJS, Tailwind CSS & Framer Motion

• Host: GitHub
• URL: https://github.com/clementmadiot/coffee_react
• Owner: ClementMadiot
• Created: 2024-09-10T14:52:53.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-18T09:30:21.000Z (3 months ago)
• Last Synced: 2024-09-18T13:19:54.881Z (3 months ago)
• Language: JavaScript
• Homepage: https://coder-coffe-cm.netlify.app/
• Size: 5.07 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  
Coders Coffee



## 
 📋 Summary

- ✨ [Introduction](#introduction)

- 🛠 [Technology Used](#tech-stack)

- 🚀 [Launch App](#launch-app)

- 🎨 [Styling](#style)

## 
 ✨ Introduction

**[ENG]** Complete Responsive Coffee shop Website using ReactJS and Tailwind CSS. Animated with Framer motion and react-tilt  

**[FR]** Site Web entièrement réactif pour un café utilisant ReactJS et Tailwind CSS. Animé avec Framer motion et react-tilt

## 
 🛠 Technology Used

- [TailwindCSS](https://tailwindcss.com/docs/installation)

- [react-icon](https://www.npmjs.com/package/react-icons)

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

- [react-tilt](https://www.npmjs.com/package/react-tilt?activeTab=readme)

A tiny request Animation Frame powered 60 fps light weight parallax hover tilt effect for ReactJS.

- [framer-motion](https://www.npmjs.com/package/framer-motion)

Framer Motion is an open source, production-ready library that’s designed for all creative developers.

## 
 🚀 Launch App


**Cloning the Repository**

```bash

git clone {git remote URL}

```


**installation**

> After cloning the repository, run the command `npm install` to install the project's dependencies.

> Once the dependencies are installed, start the project with the command `npm run dev`.

## 
 🎨 Styling

Global styling are defined using TailwindCSS in the tailwind.config.js file.

````

theme: {

    extend: {

      colors: {

        primary: "#f19509",

        primaryDark: "#e86f00",

        lightOrange: "#f1dabf",

        darkGray: "#1a1f25",

        lightGray: "#272c35",

      },

      container: {

        center: true,

        padding: {

          DEFAULT: "1rem",

          sm: "2rem",

        },

      },

      screens: {

        vsm: "425px",

      }

    },

  },

````