diff --git a/README.md b/README.md
index 58beeac..f0a0cae 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,51 @@
-# Getting Started with Create React App
+# My Personal Website
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This is the Source Code [**Web Guider**](https://web-guider.vercel.app/) Website.
-## Available Scripts
+---
-In the project directory, you can run:
+# Discreption
-### `npm start`
+[**Web Guider**] Website is an Website that contain some of packages and libs and VS Code Extensions that help you as a frontend or backend developer and speed your developemtn process.
-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.
+# App Features
-### `npm test`
+- Reponsive
+- Nice Design with Tailwind Framework
+- Speed & Good Performance
+- A lot of Extensions and Packages
-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`
+# Languages & Technologies
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Lauages That used in this Web App:
-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.
+### Technolohies that used in this App:
-### `npm run eject`
+
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+### Other Libs & Packages:
-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.
+- [**Preline UI**](https://preline.co/docs/index.html)
+- [**Raact Router**](https://reactrouter.com/)
+- [**React Icons**](https://react-icons.github.io/react-icons/)
+- [**React Syntax Highlighter**](https://www.npmjs.com/package/react-syntax-highlighter)
-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.
+# Web App Screenshot
-## 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)
+![Web Guider]()
diff --git a/src/db/backend.json b/src/db/backend.json
index 7f81685..6e50acb 100644
--- a/src/db/backend.json
+++ b/src/db/backend.json
@@ -109,6 +109,105 @@
"npmUrl": "https://www.npmjs.com/package/axios",
"offecialUrl": "https://axios-http.com/",
"installCommand": "npm i axios"
+ },
+ {
+ "id": 1,
+ "modalId": "lodash",
+ "name": "Lodash",
+ "description": "This Library you must use it, It is Great Library that have a lot of functions that will ease your work with javascript..",
+ "npmUrl": "https://www.npmjs.com/package/lodash",
+ "offecialUrl": "https://lodash.com/",
+ "installCommand": "npm i lodash"
+ },
+ {
+ "id": 2,
+ "modalId": "yargs",
+ "name": "Yargs",
+ "description": "Yargs helps you build interactive command line tools, by parsing arguments and generating an elegant user interface.",
+ "npmUrl": "https://www.npmjs.com/package/yargs",
+ "offecialUrl": "http://yargs.js.org/",
+ "installCommand": "npm i yargs"
+ },
+ {
+ "id": 3,
+ "modalId": "multer",
+ "name": "Multer",
+ "description": "The Most popular Library that will help you in File upload handling, You can use it in some easy steps in You project.",
+ "npmUrl": "https://www.npmjs.com/package/multer",
+ "installCommand": "npm i multer"
+ },
+ {
+ "id": 4,
+ "modalId": "telegraf",
+ "name": "Telegraf",
+ "description": "Telegraf is a NPM package that give you ability to make telegram bot, It have tens of features that will give you ability to make your great telegram bot.",
+ "npmUrl": "https://www.npmjs.com/package/telegraf",
+ "offecialUrl": "https://telegraf.js.org/",
+ "installCommand": "npm i telegraf"
+ },
+ {
+ "id": 5,
+ "modalId": "nightmare",
+ "name": "Telegraf",
+ "description": "Great NPM library that you can use it in you web scraping work, It have a nice features that will give you what you need.",
+ "npmUrl": "https://www.npmjs.com/package/nightmare",
+ "installCommand": "npm i nightmare"
+ },
+ {
+ "id": 6,
+ "modalId": "bcrypt",
+ "name": "bcrypt",
+ "description": "Nice Pckage that used in Authuntication and Authorization process, It used to hash password which give your application more security layer.",
+ "npmUrl": "https://www.npmjs.com/package/bcrypt",
+ "installCommand": "npm i bcrypt"
+ },
+ {
+ "id": 7,
+ "modalId": "shortid",
+ "name": "Short ID",
+ "description": "Great NPM Package that make short and random text to use it in your projects, You can use it in URL Shortner Application for Example.",
+ "npmUrl": "https://www.npmjs.com/package/shortid",
+ "installCommand": "npm i shortid"
+ },
+ {
+ "id": 8,
+ "modalId": "image-downloader",
+ "name": "Image Downloader",
+ "description": "Nice package that you can use it in to download images from web, It have easy way to implement in your Application.",
+ "npmUrl": "https://www.npmjs.com/package/image-downloader",
+ "installCommand": "npm i image-downloader"
+ },
+ {
+ "id": 9,
+ "modalId": "cors",
+ "name": "CORS",
+ "description": "One of the most popular problem in api calling from a nother origin is CORS problem, By this package you can control in origins that can make requests to your websites.",
+ "npmUrl": "https://www.npmjs.com/package/cors",
+ "installCommand": "npm i cors"
+ },
+ {
+ "id": 10,
+ "modalId": "jsonwebtoken",
+ "name": "Json Web Token",
+ "description": "One of the most popular pacjage that used to implement Authuntication and Authorization process in web Applications.",
+ "npmUrl": "https://www.npmjs.com/package/jsonwebtoken",
+ "installCommand": "npm i jsonwebtoken"
+ },
+ {
+ "id": 11,
+ "modalId": "chalk",
+ "name": "Chalk",
+ "description": "Nice NPM Package that help you to edit Terminal text styles like changing text background ot text colors.",
+ "npmUrl": "https://www.npmjs.com/package/chalk",
+ "installCommand": "npm i chalk"
+ },
+ {
+ "id": 12,
+ "modalId": "validator",
+ "name": "Validator",
+ "description": "A library of string validators and sanitizers, It have a lot of valitor schemas like email, password, ...etc.",
+ "npmUrl": "https://www.npmjs.com/package/validator",
+ "installCommand": "npm i validator"
}
],
"websites": [],
@@ -119,6 +218,27 @@
"name": "Roboto 3T",
"description": "Robot 3T is an nice Programm that help You to manage MongoDB local databases on Your machine which ease DB's Manage Process.",
"offecialUrl": "https://robomongo.org/"
+ },
+ {
+ "id": 0,
+ "modalId": "vscode",
+ "name": "VS Code",
+ "description": "The most populer code editor that every developer should used it at least once, It have all features that speed your development process.",
+ "offecialUrl": "https://code.visualstudio.com/"
+ },
+ {
+ "id": 1,
+ "modalId": "sublime-text",
+ "name": "Sublime Text",
+ "description": "Another nice Code Editor that have nice and great features that will help you in your work as a Programmer.",
+ "offecialUrl": "https://www.sublimetext.com/"
+ },
+ {
+ "id": 2,
+ "modalId": "atom",
+ "name": "Atom",
+ "description": "Atom is one of my favourite code Editors that I was using it in Starting Journey, It have a lot of features that will speed your work.",
+ "offecialUrl": "https://atom.io/"
}
]
}
diff --git a/src/db/frontend.json b/src/db/frontend.json
index 22c8b74..429c347 100644
--- a/src/db/frontend.json
+++ b/src/db/frontend.json
@@ -213,7 +213,7 @@
{
"id": 10,
"modalId": "qrcode.react",
- "name": "Qrcode React",
+ "name": "QR Code React",
"description": "Nice Package that used to Create QR Code, It's usage is very simple but have a great benefit.",
"npmUrl": "https://www.npmjs.com/package/qrcode.react",
"installCommand": "npm i qrcode.react"
@@ -225,6 +225,59 @@
"description": "One of my favourite package that use in this project it give you ability to add code blocks in frontend applications, It support a lot of languages and tens of great themes that make your project looks good.",
"npmUrl": "https://www.npmjs.com/package/react-syntax-highlighter",
"installCommand": "npm i react-syntax-highlighter"
+ },
+ {
+ "id": 12,
+ "modalId": "framer-motion",
+ "name": "Framer Motion",
+ "description": "Nice Library that help you to implement advanced animations in your website, So if you dealing a lot with animations you should use it to ease you work.",
+ "npmUrl": "https://www.npmjs.com/package/framer-motion",
+ "offecialUrl": "https://www.framer.com/motion/",
+ "installCommand": "npm i framer-motion"
+ },
+ {
+ "id": 13,
+ "modalId": "react-typed",
+ "name": "React Typed",
+ "description": "Creat NPM Package that will help you to add Typing Writer Effect, which will add nice feature to your website.",
+ "npmUrl": "https://www.npmjs.com/package/react-typed",
+ "installCommand": "npm i react-typed"
+ },
+ {
+ "id": 14,
+ "modalId": "styled-components",
+ "name": "Styled Components",
+ "description": "The best package in my opinion to implement css in js that you can use it in your frontend application.",
+ "npmUrl": "https://www.npmjs.com/package/styled-components",
+ "offecialUrl": "https://styled-components.com/",
+ "installCommand": "npm i styled-components"
+ },
+ {
+ "id": 15,
+ "modalId": "chart-js-2",
+ "name": "Chart JS 2",
+ "description": "Nice npm package that will ease your work with chartjs library if you use React JS.",
+ "npmUrl": "https://www.npmjs.com/package/react-chartjs-2",
+ "offecialUrl": "https://react-chartjs-2.js.org/",
+ "installCommand": "npm i react-chartjs-2"
+ },
+ {
+ "id": 16,
+ "modalId": "howler",
+ "name": "Howler",
+ "description": "Great library that will help you in if you dealing with Audio in your Applications, It have great features and methods that ease Audio handling Process.",
+ "npmUrl": "https://www.npmjs.com/package/howler",
+ "offecialUrl": "https://howlerjs.com/",
+ "installCommand": "npm i howler"
+ },
+ {
+ "id": 17,
+ "modalId": "lodash",
+ "name": "Lodash",
+ "description": "This Library you must use it, It is Great Library that have a lot of functions that will ease your work with javascript..",
+ "npmUrl": "https://www.npmjs.com/package/lodash",
+ "offecialUrl": "https://lodash.com/",
+ "installCommand": "npm i lodash"
}
],
"websites": [
@@ -232,9 +285,59 @@
"id": 0,
"modalId": "fancy-border-radius-generator",
"name": "Fancy Border Rdaius Generator",
- "description": "Awesome website to Create any CSS Border Radius shape shape by Easy way.",
- "offecialUrl": "https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"
+ "description": "Awesome website to Create any CSS Border Radius shapes by Easy way, WHich will speed your development process.",
+ "offecialUrl": "https://9elements.github.io/fancy-border-radius/"
+ },
+ {
+ "id": 1,
+ "modalId": "hero-icons",
+ "name": "Heroicon",
+ "description": "Nice website that will give you beatiful icons as svg format to implement in your application without installing libraries like Fontawesome.",
+ "offecialUrl": "https://heroicons.com/"
+ },
+ {
+ "id": 2,
+ "modalId": "css-gradient-generator",
+ "name": "CSS Gradient Generator",
+ "description": "Great Website that help you to make CSS gradients by easy way, which speed your development process.",
+ "offecialUrl": "https://cssgradient.io/"
+ },
+ {
+ "id": 3,
+ "modalId": "browser-frame",
+ "name": "Browser Frame",
+ "description": "Nice website that help you to put your Images in nice frames like Chrome, Safari and Mozilla Browsers and with different themes Like Dark and Light Theme.",
+ "offecialUrl": "https://browserframe.com/"
+ },
+ {
+ "id": 4,
+ "modalId": "getwaves",
+ "name": "Getwaves",
+ "description": "Getwaves is great website that will give you svg wave and with different shapes to implement it in your website.",
+ "offecialUrl": "https://getwaves.io/"
}
],
- "programms": []
+ "programms": [
+ {
+ "id": 0,
+ "modalId": "vscode",
+ "name": "VS Code",
+ "description": "The most populer code editor that every developer should used it at least once, It have all features that speed your development process.",
+ "offecialUrl": "https://code.visualstudio.com/"
+ },
+ {
+ "id": 1,
+ "modalId": "sublime-text",
+ "name": "Sublime Text",
+ "description": "Another nice Code Editor that have nice and great features that will help you in your work as a Programmer.",
+ "offecialUrl": "https://www.sublimetext.com/"
+ },
+ {
+ "id": 2,
+ "modalId": "atom",
+ "name": "Atom",
+ "description": "Atom is one of my favourite code Editors that I was using it in Starting Journey, It have a lot of features that will speed your work.",
+ "offecialUrl": "https://atom.io/"
+ }
+ ]
}
diff --git a/src/styles/global.css b/src/styles/global.css
index d75a96a..3ed825a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -24,3 +24,8 @@ a:active {
-ms-user-select: none;
user-select: none;
}
+
+button,
+a {
+ outline: none;
+}
+ 
+ 
+
+ 
+ 
+