gh-pages

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    'eslint:recommended',
+  ],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false }],
+    'vue/no-unused-components': 'warn',
+    'vue/valid-template-root': 'error',
+    'vue/no-side-effects-in-computed-properties': 'error',
+    'vue/require-v-for-key': 'error',
+    'vue/no-unused-vars': 'error',
+  },
+};

.gitattributes

@@ -0,0 +1,16 @@
+# Ensure consistent line endings for text files
+* text=auto
+
+# Exclude binary files and directories from line ending conversion
+*.png binary
+*.jpg binary
+*.ico binary
+*.svg binary
+*.woff binary
+*.woff2 binary
+*.pdf binary
+*.mp4 binary
+*.mp3 binary
+
+# Exclude files generated by Vue CLI (compiled output)
+/node_modules/* binary

.github/FUNDING.yml

@@ -0,0 +1,6 @@
+# These are supported funding model platforms
+
+github: coder2mo
+open_collective: coder2mo
+patreon: Coder2Mo 
+ko_fi: codermo

.github/workflows/deploy.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env sh
+# abort on errors
+set -e
+# build
+npm run build
+# navigate into the build output directory
+cd dist
+# if you are deploying to a custom domain
+# echo 'www.example.com' > CNAME
+git init
+git add -A
+git commit -m 'deploy'
+# if you are deploying to https://<USERNAME>.github.io
+# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+ git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-pages
+cd -

.gitignore

@@ -0,0 +1,55 @@
+# Ignore Node.js modules
+node_modules/
+
+# Ignore configuration files
+.env.local
+.env.development
+.env.production
+.env.test
+
+# Ignore logs and other runtime data
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnp.*
+test-result.xml
+coverage
+.puppeteer
+.jest
+/.idea
+.eslintcache
+.DS_Store
+.cache/
+.vuepress/dist
+
+# Ignore Vue.js specific files
+/.vscode
+/nuxt
+/nuxt.js
+/nuxt.config.js
+!nuxt.config.js
+/package-lock.json
+/yarn.lock
+
+
+# Ignore editor specific files
+.idea
+*.iml
+
+# Ignore OS generated files
+.DS_Store
+Thumbs.db
+ehthumbs.db
+desktop.ini
+$RECYCLE.BIN/
+/System Volume Information/
+RECYCLER/
+RECYCLED/
+RECYCLE.BIN/
+RECYCLED/
+$RECYCLE.BIN/
+$RECYCLED/
+
+# Ignore custom ignore files
+.ignore
+IGNORE

.htaccess

@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>

.vscode/tasks.json

@@ -0,0 +1,37 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "introit",
+      "group": "build",
+      "problemMatcher": [],
+      "label": "npm: introit",
+      "detail": "Run the Intro-It project (build, lint, and serve)"
+    },
+    {
+      "type": "npm",
+      "script": "build",
+      "group": "build",
+      "problemMatcher": [],
+      "label": "npm: build",
+      "detail": "vue-cli-service build"
+    },
+    {
+      "type": "npm",
+      "script": "lint",
+      "group": "none",
+      "problemMatcher": [],
+      "label": "npm: lint",
+      "detail": "vue-cli-service lint"
+    },
+    {
+      "type": "npm",
+      "script": "serve",
+      "group": "none",
+      "problemMatcher": [],
+      "label": "npm: serve",
+      "detail": "vue-cli-service serve"
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Mohamed Salem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS," WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,90 @@
+# Intro-It
+
+Intro-It is a sophisticated Vue.js web application designed to elevate your GitHub profile's
+introduction. It combines a mesmerizing particle animation background with a captivating
+professional intro writer effect, creating a memorable first impression.
+<br>
+<br>
+
+## Live Demo
+
+You can see a live demo of the project [here](demo-link).
+<br>
+<br>
+
+## Installation
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/Coder2Mo/Intro-It.git
+   ```
+
+   <br>
+
+2. Change to the project directory:
+
+   ```bash
+    cd Intro-It
+   ```
+
+   <br>
+
+3. Install project dependencies:
+
+   ```bash
+   npm install
+   ```
+
+   <br>
+   <br>
+
+## Usage
+
+To start the development server:
+
+```bash
+npm run introit
+```
+
+This will build the project, lint the code, and start the development server.
+<br>
+<br>
+
+## Configuration
+
+The project includes configuration options for the particle animation and the professional intro writer effect. You can modify the configuration in the `MainComponent.vue` file.
+<br>
+<br>
+
+## License
+
+This project is open-source and available under the [MIT License](LICENSE).
+<br>
+<br>
+
+## Author
+
+- Mohamed Salem (GitHub: [Coder2Mo](https://github.com/Coder2Mo))
+  <br>
+  <br>
+
+## Contribution
+
+Join Me and be part of something great. Contribute your expertise and creativity to make Intro-It even better. Here's how you can get involved:
+
+- Contribute Code: Dive into the source code on GitHub and help us enhance Intro-It.
+
+- Share Ideas: Have a suggestion or a feature in mind? We'd love to hear from you.
+
+- Bug Reporting: Spotted a bug? Report it on our GitHub repository, and we'll address it promptly.
+
+- Your involvement can make a significant difference. Together, we can take Intro-It to new heights!
+<br>
+<br>
+
+## Contact
+
+For inquiries and support, please contact Mohamed Salem via email at [[email protected]](mailto:[email protected]).
+
+This revised introduction is designed to captivate your audience, providing a clear and enticing overview of your project. It incorporates a more professional tone and formatting for maximum impact.

index.html

@@ -0,0 +1,40 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="icon.ico"><title>Intro-It</title><script defer="defer" type="module" src="/Intro-It/js/chunk-vendors.605f5cc1.js"></script><script defer="defer" type="module" src="/Intro-It/js/app.2d040f49.js"></script><link href="/Intro-It/css/app.1431e1d1.css" rel="stylesheet"><script defer="defer" src="/Intro-It/js/chunk-vendors-legacy.605f5cc1.js" nomodule></script><script defer="defer" src="/Intro-It/js/app-legacy.ea7f2234.js" nomodule></script></head><body><script src="js/nodes.js"></script><script>// Initialize Nodes.js with configuration options
+    const canvasId = 'nodes';
+
+    const handleResize = debounce(() => {
+      nodesjs.setWidth(window.innerWidth);
+      nodesjs.setHeight(window.innerHeight);
+    }, 200);
+
+    // Instantiate NodesJs after the DOM has loaded
+    document.addEventListener('DOMContentLoaded', () => {
+      const nodesjs = new NodesJs({
+        id: canvasId,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        particleSize: 2,
+        lineSize: 1,
+        particleColor: [255, 255, 255, 0.3],
+        lineColor: [255, 255, 255],
+        backgroundFrom: [10, 25, 100],
+        backgroundTo: [25, 50, 150],
+        backgroundDuration: 4000,
+        nobg: false,
+        number: matchMedia('(orientation: portrait)').matches ? 30 : 100,
+        speed: 20,
+      });
+
+      // Handle window resize to update canvas dimensions
+      window.addEventListener('resize', handleResize);
+    });
+
+    // Debounce function to limit resize event handling
+    function debounce(func, delay) {
+      let timeoutId;
+      return function (...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          func.apply(this, args);
+        }, delay);
+      };
+    }</script><div style="position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%;"><canvas id="nodes"></canvas></div><div id="app"></div></body></html>