Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shaifarfan/artistic
Artistic is a landing page for a photography studio. This is a well-designed and responsive landing page with dark mode feature.
https://github.com/shaifarfan/artistic
dark-mode react-context-api reactjs webcifar
Last synced: 3 months ago
JSON representation
Artistic is a landing page for a photography studio. This is a well-designed and responsive landing page with dark mode feature.
- Host: GitHub
- URL: https://github.com/shaifarfan/artistic
- Owner: ShaifArfan
- License: mit
- Created: 2021-11-20T00:21:02.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-08T03:26:10.000Z (almost 3 years ago)
- Last Synced: 2023-03-04T16:39:02.142Z (almost 2 years ago)
- Topics: dark-mode, react-context-api, reactjs, webcifar
- Language: JavaScript
- Homepage: https://wc-artistic.netlify.app/
- Size: 4.4 MB
- Stars: 32
- Watchers: 1
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Artistic 📸
**Live preview: [https://wc-artistic.netlify.app/](https://wc-artistic.netlify.app/)**
**Watch on YouTube: [https://youtu.be/DTR2IbNBfPA](https://youtu.be/DTR2IbNBfPA)**
---
### Made with ❤️ by [Shaif Arfan](https://www.instagram.com/shaifarfan08/)
Like my works and want to support me?
---
## Project Description
Artistic is a landing page for a photography studio. This is a well-designed and `responsive` landing page with `dark mode` feature. The main purpose of this project is to show how to create a landing page with `dark mode` feature using `ReactJs`.
We will be using React Context API to toggle `dark mode` feature. Hope you enjoy it!.
## What we are going to learn/use
- [ReactJs](https://reactjs.org/)
- [Styled Components](https://styled-components.com/)
- [React Context API](https://reactjs.org/docs/context.html)
- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [React Icons](https://www.npmjs.com/package/react-icons)
- [React Scroll](https://www.npmjs.com/package/react-scroll)
- More . . .
## Requirements
- Basic ReactJs knowledge
- Basic HTML, CSS knowledge
## Starter files
You can find all the starter files in `starter-files` branch. You can to go to the `starter-files` branch and `download zip` the the starter files or You can clone the project and git checkout to `starter-files` branch.
## Getting Started
The recommended way to get started with the project is Follow the [YouTube tutorial](https://youtu.be/DTR2IbNBfPA). You will find all the step-by-step guides. Or you Can start the project on your own by following the guide below.
After getting the starter files, you need to go the file directory and run
```shell
npm install
```
and after that start the dev server.
```shell
npm start
```
## Tools Used
1. Images: [Unsplash](https://unsplash.com/)
1. UI Design: [Figma](https://www.figma.com/)
1. Code Editor: [VS Code](https://code.visualstudio.com/)
## Other projects
📚 [All Web Cifar Project Tutorials](https://github.com/ShaifArfan/wc-project-tutorials)
---
## FAQ
### Q: How can i get started?
You can get started by following the [YouTube tutorial](https://youtu.be/DTR2IbNBfPA) of this project. Here is the full tutorial video link: [coming soon].
### Q: What i need to start the project?
Just open your favorite code editor and follow along with the [YouTube Tutorial](https://youtu.be/DTR2IbNBfPA).
### Q: Who the project is for?
The project is for the people who wanna get more skilled in `ReactJs`.
---
## Feedback
If you have any feedback, please reach out to us at [@web_cifar](http://instagram.com/web_cifar)
## Support
For support, join our [Community Group](http://facebook.com/groups/webcifar).
## License
[MIT](https://choosealicense.com/licenses/mit/)
Happy Coding! 🚀