Giter VIP home page Giter VIP logo

dd-cocktails's Introduction

Okeke&Robles-cocktail-restaurant

The purpose of this website is solely to display my UI/UX designing and Web development skills, it combines resources and ideas from different websites. This website was developed solely by Chukwuebuka Emmanuel Okeke (ME) and it does not intend to promote anything other than my skills. It was developed with Figma, Next.js, Chakra UI and Typescript. This website represents an Idea only and isn't a real place yet. For more information contact my email below.

Installation (for standard modern project) and run project

yarn
yarn next build
yarn run dev

Demo

Navbar:
This contains a custom brand logo, nav links and color mode button that chnages between light and dark mode. Screenshot 2023-02-22 at 13 32 13

Home Page:
This contains hero image section: Screenshot 2023-02-22 at 13 37 56

about section { openning hrs, location etc }: Screenshot 2023-02-22 at 13 38 32

our partners section: Screenshot 2023-02-22 at 13 40 27

contact section: Screenshot 2023-02-22 at 13 39 48

footer { this is on all pages }: Screenshot 2023-02-22 at 13 41 19

Menu Page:
This loads the menu of 3 items at first: Screenshot 2023-02-22 at 13 07 25

each image changes opacity and transforms on hover: Screenshot 2023-02-22 at 13 08 34

each item produces a modal with more information about the item on click: Screenshot 2023-02-22 at 13 07 52

Career Page:
Screenshot 2023-02-22 at 13 25 58

Color Modes:
Choose your fighter haha
( Menu light ) Screenshot 2023-02-22 at 13 42 20

( Menu dark ) Screenshot 2023-02-22 at 13 45 03

Live link

https://dd-cocktails.vercel.app/

Stack

next.js typescript chakra ui

dd-cocktails's People

Contributors

okekejr avatar

Watchers

avatar

dd-cocktails's Issues

UI improvements

Tasks:

  • add an after-effect to Nav links
  • enable smooth scrolling
  • edit links
  • add 'Home' link to routes
  • edit disclaimer, add my Github as a link to my name

partnerSection

Tasks:

  • create partner folder and component
  • search and download partner logo svgs
  • create data for partner logos
  • create a grid view for the logos
  • display them in a card

navbar2

Tasks:

  • create color mode ( dark and light mode )
  • create mobile drawer
  • create mobile toggle
  • create mobile nav links

contactSection

Tasks:

  • create contact folder and component
  • download and place the background image in the contact component
  • create texts

fonts&styles

Tasks:

  • download and add fonts " kameron and raleway "
  • create the chakra styles, color, and fonts files

CareerPage

Tasks:

  • create a career folder and index comp in the pages folder
  • create a _career comp in the _pages folder
  • add the texts and an image [ showing a happy team ]

footer

Tasks:

  • create footer folder and component
  • create copyright comp
  • create disclaimer comp & text
  • map nav links to the footer component

Navbar

Tasks:

  • cleanup project
  • create logo component
  • create routes for nav links
  • create Navbar folder
  • create Navbar

pitcher&info

Tasks:

  • create a pitcher page folder and component
  • create a section container
  • make components for each text

MenuPage

Tasks:

  • create Menu page folder and next index page.
  • create a menu page comp in _pages folder
  • create page structure
  • search and download images for the menu
  • create data for the menu page
  • create a grid structure and map data into the component
  • create function for 'load more' button

heroSection

Tasks:

  • find a quality HD image for the Hero
  • create a hero folder and hero component
  • add the image to assets/img folder
  • import image into the component using Chakra Image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.