Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
67c9b70
React set up
zkhing Dec 18, 2022
63cb693
Import images and create components
zkhing Dec 22, 2022
9208238
Import images
zkhing Dec 27, 2022
a19f353
Changes js files to jsx
zkhing Dec 29, 2022
439d2e9
Use semantic html tags
zkhing Dec 29, 2022
2910a55
Install react slick and carousel library
zkhing Dec 29, 2022
4848e99
Trying to do image carousel
zkhing Dec 29, 2022
d836916
Put all relevant files under components folder
zkhing Dec 30, 2022
3111e92
Responsive image with text and button
zkhing Dec 30, 2022
ca22afb
Add react router
zkhing Jan 4, 2023
182395f
Tidy up files
zkhing Jan 4, 2023
d64adc9
Add menu page
zkhing Jan 4, 2023
48c73b0
Add teamenuitems
zkhing Jan 5, 2023
8e55f0f
Add special menu items
zkhing Jan 5, 2023
4756a83
Add reservation page
zkhing Jan 6, 2023
287a379
Changes img tag to background images
zkhing Jan 10, 2023
147459a
Some changes on header and footer
zkhing Jan 10, 2023
1edd312
Added wiseleaf css grid media query for tablet
zkhing Jan 11, 2023
c16a78b
Changes from header to navbar
zkhing Jan 11, 2023
293029d
Refactor hero section
zkhing Jan 12, 2023
338b733
Refactor reservation sections
zkhing Jan 12, 2023
7191500
Refactor on footer
zkhing Jan 12, 2023
af0b3ab
Added reservation form
zkhing Jan 14, 2023
a0bd4bd
Added form logo
zkhing Jan 18, 2023
b8211aa
Alining logo image
zkhing Jan 19, 2023
24b9ceb
latest update
zkhing Jan 20, 2023
a6482e9
Positioning form images
zkhing Jan 20, 2023
78b7457
Making images and form responsive
zkhing Jan 21, 2023
7ce2153
Refactoring code and design
zkhing Jan 24, 2023
a4b1c81
Refactor-2
zkhing Jan 28, 2023
0be5cef
Refactor-3
zkhing Jan 30, 2023
5e01060
Separate css files
zkhing Jan 30, 2023
7fedefb
Fix reserve button center
zkhing Jan 31, 2023
e964b5b
Added Header.css and Footer.css under components
zkhing Feb 1, 2023
0692bbb
Changes to image slider speed
zkhing Feb 3, 2023
96c52ee
Split Navbar element
zkhing Feb 3, 2023
b5d92ca
Adding hamburger menu
zkhing Feb 3, 2023
4288316
Hamburger menu update
zkhing Feb 6, 2023
8950c39
Complete hamburger menu
zkhing Feb 10, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
76 changes: 66 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,70 @@
### TINY LEAF
# Getting Started with Create React App

3-page website for the "Tiny Leaf" tea house.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

![Project preview screens](./preview_3%20screens.png)
## Available Scripts

The aims of this project are:
In the project directory, you can run:

- To build something beautiful and really show off your CSS skills and your eye for detail - essential front-end dev skills!
- Work with professional design files in Figma, with designs in 3 sizes and a style guide to help you set up your project
- To make it fully responsive, and to write semantic and accessible HTML
- To practise capturing user information from a booking form (something you’ll do all the time as a FE developer!)
- Continue getting comfortable working with Git and making Pull Requests
- Learn to work in an Agile way by creating your own Kanban board of tasks, estimating your tickets and planning your Sprints
### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
14 changes: 14 additions & 0 deletions README.old.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
### TINY LEAF

3-page website for the "Tiny Leaf" tea house.

![Project preview screens](./preview_3%20screens.png)

The aims of this project are:

- To build something beautiful and really show off your CSS skills and your eye for detail - essential front-end dev skills!
- Work with professional design files in Figma, with designs in 3 sizes and a style guide to help you set up your project
- To make it fully responsive, and to write semantic and accessible HTML
- To practise capturing user information from a booking form (something you’ll do all the time as a FE developer!)
- Continue getting comfortable working with Git and making Pull Requests
- Learn to work in an Agile way by creating your own Kanban board of tasks, estimating your tickets and planning your Sprints
Loading