https://github.com/umkl/octagon-landing
🚀 Landing page for a fictional restaurant called Octagon.
https://github.com/umkl/octagon-landing
javascript react-spring reactjs scss typescript
Last synced: 2 months ago
JSON representation
🚀 Landing page for a fictional restaurant called Octagon.
- Host: GitHub
- URL: https://github.com/umkl/octagon-landing
- Owner: umkl
- License: gpl-3.0
- Created: 2021-07-05T18:23:03.000Z (almost 5 years ago)
- Default Branch: prod
- Last Pushed: 2023-12-08T09:19:41.000Z (over 2 years ago)
- Last Synced: 2025-01-19T16:28:35.215Z (over 1 year ago)
- Topics: javascript, react-spring, reactjs, scss, typescript
- Language: TypeScript
- Homepage: https://octagon.netlify.app/
- Size: 72.7 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Octagon-landing
> Disclaimer: This project is a submission for a parttime job as an Frontend Developer at VortexData - Thus the restaurant _Octagon_ is just fictional.
## Execute the Project
> I assume npm was installed correctly and it's environment-variables are set
> I also assume bash is being used
### Execute the Google Drive Project
Simply execute the following command in order to start the Webserver.
```
npm start
```
### Execute the Github Project(Production branch)
Clone the GitHub repository with `git clone`.
```
git clone https://github.com/ungarmichael/octagon-landing.git
```
```
cd octagon-landing
```
For installing all necessary dependencies run:
```
npm i
```
For creating a production-version of the project run:
```
npm run build
```
For starting the server(production version):
```
npm start
```
Now the Project can be viewed on `http://localhost:3000`.
## Further Project Details
### Design
The Mockup was created using Figma and can be viewed [here](https://www.figma.com/file/7gjL6YkZ6Yg5CegX9p9AZ9/Landing-Page?node-id=0%3A1).
Illustrations where copied from [undraw.co](https://undraw.co) and [vecteezy.com](https://es.vecteezy.com) and manipulated according to the scenario by myself using [affinity designer](https://affinity.serif.com/en-gb/designer/), [affinity photo](https://affinity.serif.com/en-gb/photo/) and for certain use-cases [adobe illustrator](https://www.adobe.com/products/illustrator.html).
### Development
* Languages used
* _Typescript_
* _NodeJS_
* Frameworks used
* _ReactJS_
* _NextJS_
* Libraries used
* _react-spring_
* _react-superellipse_
* _resize-observer-polyfill_
* _gray-matter_
* _remark_
* _react-visibility-sensor_
* other libraries can be viewed in the _/package.json_ file
* CSS-extensions
* _Sass_ combined with
* inline_media
* Version-control
* _Git_
If you encounter any unwanted behaviours, please report them to
-> ungarmichael.mail@gmail.com.