-
Notifications
You must be signed in to change notification settings - Fork 1
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
ab44cf5
commit 22a7d03
Showing
3 changed files
with
135 additions
and
0 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 |
---|---|---|
@@ -0,0 +1,134 @@ | ||
<br> | ||
<div align="center"> | ||
<picture> | ||
<source media="(prefers-color-scheme: light)" srcset="https://readme-typing-svg.herokuapp.com?font=Space+Grotesk&weight=600&size=40&pause=&color=000¢er=true&vCenter=true&repeat=false&random=false&width=280&height=60&lines=CV%20Application"> | ||
<img alt="CV Application" src="https://readme-typing-svg.herokuapp.com?font=Space+Grotesk&weight=600&size=40&pause=&color=FFFFFF¢er=true&vCenter=true&repeat=false&random=false&width=280&height=60&lines=CV%20Application"> | ||
</picture> | ||
<br> | ||
|
||
**❝** Get your CV done fast and hassle-free with our intuitive tool **❞** | ||
|
||
<br> | ||
<p> | ||
❯ | ||
<a href="https://cv-application-0xabdulkhalid.vercel.app/">View Demo</a> | ||
· | ||
<a href="https://github.com/0xabdulkhalid/cv-application/issues">Report Bug</a> | ||
· | ||
<a href="https://github.com/0xabdulkhalid/cv-application/issues">Request Feature</a> | ||
❮ | ||
</p> | ||
</div> | ||
|
||
<br> | ||
|
||
<div align='center'> | ||
<img src='./design/preview.webp' alt='Mobile Preview'> | ||
</div> | ||
|
||
<br> | ||
|
||
## Project Overview | ||
|
||
- The CV Application was primarily developed to gain a better understanding of React fundamentals. | ||
|
||
- Building this application enabled me to learn about State Management, React Hooks, and leverage Vite's features for deploying production-ready applications. | ||
|
||
- Considered a warm-up project, I focused on the core concepts and did not delve into intricate details, such as the implementation of the Header and Footer. | ||
|
||
- Developed as part of the partial completion of the Odin Project's Full-Stack JavaScript Path. | ||
|
||
- Since this was my initial experience with React, the code quality may not be optimal. However, I am committed to refining my coding practices through continuous practice and building more applications with React. | ||
|
||
|
||
<br> | ||
|
||
## Installation | ||
|
||
> [!NOTE] | ||
> If you prefer not to install it locally, you can also access the [live demo](https://cv-application-0xabdulkhalid.vercel.app/) version | ||
To set up the CV Application locally, follow these steps: | ||
|
||
1. Clone the GitHub repository to your local machine: | ||
|
||
```bash | ||
git clone https://github.com/0xabdulkhalid/cv-application.git | ||
``` | ||
|
||
2. Navigate to the project's directory: | ||
```bash | ||
cd cv-application | ||
``` | ||
3. Install the project's dependencies using npm: | ||
|
||
```bash | ||
npm install | ||
``` | ||
|
||
4. Building the source for Production using Vite: | ||
|
||
```bash | ||
npm run build | ||
``` | ||
|
||
5. The build files can be found on `dist` (distribution) directory. | ||
|
||
<br> | ||
|
||
## Pagespeed Insights Score | ||
|
||
- || | ||
| :-----: | | ||
| <b>Overall Score 99.3%, Average of Mobile and Desktop</b><br>[ Mobile devices score is only shown below ] | | ||
| | | ||
| <img src='./design/pagespeed-insights-score.svg' alt=''> | | ||
| | | ||
| Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-cv-application-0xabdulkhalid-vercel-app/02v5pjdoui?form_factor=mobile) to get live score | | ||
|| | ||
|
||
<br> | ||
|
||
## Built With | ||
|
||
<div align=center> | ||
|
||
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) | ||
|
||
</div> | ||
|
||
<br> | ||
|
||
## Tools Used | ||
|
||
<div align=center> | ||
|
||
![NPM](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white) ![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white) ![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white) ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white) ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white) | ||
|
||
![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E) ![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white) ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white) | ||
|
||
</div> | ||
|
||
<br> | ||
|
||
## Let's Connect 👋 | ||
|
||
<div align=center> | ||
|
||
<a href="https://linkedin.com/in/0xabdulkhalid" > | ||
<img src="https://img.shields.io/badge/linkedin%20Profile-%2300acee.svg?color=405DE6&style=for-the-badge&logo=linkedin&logoColor=white" alt="Linkedin Profile"> | ||
</a> | ||
|
||
<a href="mailto:0xabdulkhalid@gmail.com" target="_blank"> | ||
<img src="https://img.shields.io/badge/gmail-%23EA4335.svg?style=for-the-badge&logo=gmail&logoColor=white" alt=mail/> | ||
</a> | ||
|
||
<a href="https://www.github.com/0xabdulkhalid/" > | ||
<img src="https://img.shields.io/badge/Github%20Profile-131313?style=for-the-badge&logo=github&logoColor=white" alt="Github Profile"> | ||
</a> | ||
|
||
</div> | ||
|
||
<br> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.