-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7e7f951
commit 1cf9277
Showing
1 changed file
with
155 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,157 @@ | ||
| # React CV Generator | ||
| <br> | ||
| <a name="readme-top"></a> | ||
| <h1 align="center"> | ||
| 🎯 React CV Application Generator <a name="about-project"></a> | ||
| </h1> | ||
|
|
||
| <p align=""> | ||
|
|
||
|      | ||
|
|
||
| <div align=""> | ||
| <h1></h1> | ||
| </div> | ||
| # 📗 Table of Contents | ||
|
|
||
| - [📖 About the Project](#about-project) | ||
|
|
||
| - [💻 Built With](#built-with) | ||
| - [Tech Stack](#tech-stack) | ||
| - [Key Features](#key-features) | ||
| - [👁 Live Demo](#live-demo) | ||
| - [💻 Getting Started](#getting-started) | ||
| - [Setup](#setup) | ||
| - [Prerequisites](#prerequisites) | ||
| - [Install](#install) | ||
| - [Usage](#usage) | ||
| - [Run tests](#run-tests) | ||
| - [Deployment](#deployment) | ||
| - [👥 Authors](#authors) | ||
| - [🔭 Future Features](#future-features) | ||
| - [🤝 Contributing](#contributing) | ||
| - [⭐️ Show your support](#support) | ||
| - [🙏 Acknowledgements](#acknowledgements) | ||
| - [❓ FAQ (OPTIONAL)](#faq) | ||
| - [📝 License](#license) | ||
|
|
||
| ## CV Application Generator Capstone Project <a name="about-project"></a> | ||
|
|
||
| **CV Application Generator** is a React project to create a CV.This application will help users to create and customize their CVs in a quick and easy way. It includes three sections: | ||
| * General information (name, email, phone number) | ||
| * Educational experience (school name, title of study, date of study) | ||
| * Practical experience (company name, position title, main responsibilities of your jobs, date from and until when you worked for that company) | ||
|
|
||
|
|
||
| ## 💻 Built With <a name="built-with"></a> | ||
|
|
||
| ### Tech Stack <a name="tech-stack"></a> | ||
|
|
||
| <a href="https://reactjs.org/" style="background-color: #61DAFB; color: white; padding: 4px 8px; border-radius: 4px;"><img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/react.svg" alt="React" width="24" height="24"> React</a> | ||
| <a href="https://getbootstrap.com/" style="background-color: #7952B3; color: white; padding: 4px 8px; border-radius: 4px;"><img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/bootstrap.svg" alt="Bootstrap" width="24" height="24"> Bootstrap</a> | ||
| <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" style="background-color: #F16529; color: white; padding: 4px 8px; border-radius: 4px;"><img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/html5.svg" alt="HTML5" width="24" height="24"> HTML</a> | ||
| <a href="https://developer.mozilla.org/en-US/docs/Web/CSS" style="background-color: #2965F1; color: white; padding: 4px 8px; border-radius: 4px;"><img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/css3.svg" alt="CSS3" width="24" height="24"> CSS</a> | ||
| <a href="https://developer.mozilla.org/en-US/docs/Web/javascript" style="background-color: #F0DB4F; color: black; padding: 4px 8px; border-radius: 4px;"><img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/javascript.svg" alt="JavaScript" width="24" height="24"> JavaScript</a> | ||
|
|
||
| ### Key Features <a name="key-features"></a> | ||
| - **General information** | ||
| - **Educational experience** | ||
| - **Practical experience** | ||
| ## 👁 Live Demo <a name="live-demo"></a> | ||
| <a href="https://melkamu372.github.io/CV-Application-generator/" target="_blank"> | ||
| <img src="https://img.shields.io/badge/live-%231E77B5.svg?&style=for-the-badge&width=50%" alt="live" /> | ||
| </a> | ||
|
|
||
| ## 💻 Getting Started <a name="getting-started"></a> | ||
|
|
||
| To get a local copy up and running, follow these steps. | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| In order to run this project you need: | ||
|
|
||
| - You need to have NodeJS installed | ||
| - A Web Browser Google Chrome, Firefox, etc | ||
| - A Code Editor VSCode, Atom etc | ||
|
|
||
| ### Setup | ||
|
|
||
| Clone this repository to your desired folder: | ||
|
|
||
| ``` | ||
| https://github.com/melkamu372/CV-Application-generator.git | ||
| ``` | ||
|
|
||
| ### Usage | ||
|
|
||
| ##### To run the project, execute the following command: <a style="float: right;margin-right:1.5rem" href="#readme-top">Back to top</a> | ||
|
|
||
| 1. npm install | ||
| 2. npm run dev | ||
| 3. open by following the link | ||
|
|
||
| ### Run tests | ||
|
|
||
| To run tests, run the following command: | ||
|
|
||
| N/A | ||
|
|
||
| ### Deployment | ||
|
|
||
| You can deploy this project using one of the following hosting. | ||
|
|
||
| While we have been using GitHub Pages to deploy our static webpages till now, and we can definitely continue to do so with hacky ways, it’s far easier to let a PaaS (Platform as a Service) do the same for us! There are a lot of options to host such sites, and the Vite hosting docs go over the most popular ones among them. | ||
|
|
||
| Not only do some of these get rid of additional steps after pushing our code to GitHub as these services have tools that automatically deploy on push, but you also don’t have to worry about other issues further down the curriculum, like routers and build steps. We shall use a few selected options for now. Once you are done with the assignment, choose one of the following options, and deploy! | ||
|
|
||
| * **GitHub Pages:** | ||
| * GitHub Pages is a static site hosting service that is integrated with GitHub. It allows you to host your static website directly from your GitHub repository. | ||
| * To deploy your React app to GitHub Pages, you will need to create a new repository and initialize it with a `README.md` file. Then, you will need to create a `public/` directory in the root of your repository and place your React app files in that directory. Finally, you will need to add a `CNAME` file to the root of your repository and specify the domain name where you want to deploy your website. | ||
| * Once you have made these changes, you can push your changes to GitHub and your website will be deployed automatically. | ||
|
|
||
| * **Netlify:** | ||
| * Netlify is another popular static site hosting service. It offers a number of features that make it easy to deploy and manage your React app, such as automatic build and deploy, continuous integration and continuous delivery (CI/CD), and staging environments. | ||
| * To deploy your React app to Netlify, you will need to create an account and connect your GitHub repository. Then, you will need to select the repository that contains your React app and click on the "Deploy" button. Netlify will then build and deploy your app automatically. | ||
|
|
||
| * **Vercel:** | ||
| * Vercel is another popular static site hosting service that is specifically designed for React apps. It offers a number of features that make it easy to deploy and manage your React app, such as automatic build and deploy, preview environments, and performance optimization. | ||
| * To deploy your React app to Vercel, you will need to create an account and connect your GitHub repository. Then, you will need to select the repository that contains your React app and click on the "Deploy" button. Vercel will then build and deploy your app automatically. | ||
|
|
||
| Once you have deployed your React app to one of these platforms, you will be able to access it at the URL that is provided by the platform. | ||
|
|
||
| ## 👥 Authors <a name="authors"></a> | ||
|
|
||
| **Melkamu Tessema** <a style="float: right;margin-right:1.5rem" href="#readme-top">Back to top</a> | ||
|
|
||
| <div align=""> | ||
| <a href="https://github.com/https://github.com/melkamu372" target="_blank"> | ||
| <img src=https://img.shields.io/badge/github-%2324292e.svg?&style=for-the-badge&logo=github&logoColor=white alt=github style="margin-bottom: 5px;" /> | ||
| </a> | ||
| <a href="https://linkedin.com/in/https://www.linkedin.com/in/melkamu372/" target="_blank"> | ||
| <img src=https://img.shields.io/badge/linkedin-%231E77B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white alt=linkedin style="margin-bottom: 5px;" /> | ||
| </a> | ||
| </div> | ||
| ## 🔭 Future Features <a name="future-features"></a> | ||
|
|
||
| - [ ] **Add back end** | ||
|
|
||
| ## 🤝 Contributing <a name="contributing"></a> | ||
|
|
||
| Contributions, issues, and feature requests are welcome! | ||
|
|
||
| Feel free to check the [issues page](../../issues/). | ||
|
|
||
| ## ⭐️ Show your support <a name="support"></a> | ||
|
|
||
| If you like this project give me a star. <a style="float: right;margin-right:1.5rem" href="#readme-top">Back to top</a> | ||
|
|
||
| ## 🙏 Acknowledgments <a name="acknowledgements"></a> | ||
| I would like to thank every who continues supporting me. | ||
|
|
||
| ## 📝 License <a name="license"></a> | ||
|
|
||
| This project is [MIT](./MIT.md) licensed. <a style="float: right;margin-right:1.5rem" href="#readme-top">Back to top</a> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| The main goal of this project was to build a CV generator using React | ||
| I'm also working on a React CV generator application. This application will help users create and customize their CVs in a quick and easy way. | ||
|
|