diff --git a/.gitignore b/.gitignore deleted file mode 100644 index f813275..0000000 --- a/.gitignore +++ /dev/null @@ -1,69 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Typescript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# dotenv environment variable files -.env* - -# gatsby files -.cache/ -public - -# Mac files -.DS_Store - -# Yarn -yarn-error.log -.pnp/ -.pnp.js -# Yarn Integrity file -.yarn-integrity diff --git a/README.md b/README.md index 4571946..91c5ac9 100644 --- a/README.md +++ b/README.md @@ -1,97 +1,4 @@ - -

- - Gatsby - -

-

- Gatsby's hello-world starter -

+# Projects +1.web development project -Kick off your project with this hello-world boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. - -_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ - -## πŸš€ Quick start - -1. **Create a Gatsby site.** - - Use the Gatsby CLI to create a new site, specifying the hello-world starter. - - ```shell - # create a new Gatsby site using the hello-world starter - gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world - ``` - -1. **Start developing.** - - Navigate into your new site’s directory and start it up. - - ```shell - cd my-hello-world-starter/ - gatsby develop - ``` - -1. **Open the source code and start editing!** - - Your site is now running at `http://localhost:8000`! - - _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ - - Open the `my-hello-world-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! - -## 🧐 What's inside? - -A quick look at the top-level files and directories you'll see in a Gatsby project. - - . - β”œβ”€β”€ node_modules - β”œβ”€β”€ src - β”œβ”€β”€ .gitignore - β”œβ”€β”€ .prettierrc - β”œβ”€β”€ gatsby-browser.js - β”œβ”€β”€ gatsby-config.js - β”œβ”€β”€ gatsby-node.js - β”œβ”€β”€ gatsby-ssr.js - β”œβ”€β”€ LICENSE - β”œβ”€β”€ package-lock.json - β”œβ”€β”€ package.json - └── README.md - -1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. - -2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for β€œsource code”. - -3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. - -4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. - -5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. - -6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). - -7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. - -8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. - -9. **`LICENSE`**: Gatsby is licensed under the MIT license. - -10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** - -11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. - -12. **`README.md`**: A text file containing useful reference information about your project. - -## πŸŽ“ Learning Gatsby - -Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: - -- **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. - -- **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. - -## πŸ’« Deploy - -[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-hello-world) - - +2.My portfolio project diff --git a/about.html b/about.html new file mode 100644 index 0000000..f99a2b1 --- /dev/null +++ b/about.html @@ -0,0 +1,159 @@ + + + + + + My PortFolio + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + +
+
+
+
+

Any type of Question
& Discussion

+
+
Let's Talk-----------------
+
+

shabistaimam12345@gmail.com

+
+
Linkedin : shabista Imam
+
whatsapp : ************
+
+
+
+

About Me

+
+

Hello, I am shabista Imam and i am a professional frontend Developer. + I can create beautiful websites according to your needs.

+ + + + + + + + + + + + + + + + +
Name:Shabista Imam
Email:shabistaimam12345@gmail.com
Website:www.google.com
+ + + +
+
+
+
+ + +
+
+
+
+ + Cyber Webs.. + +

Lorem Ipsum has been the Industry's standard dummy text ever sincce the 1500s ,when an unknown printer took a gallery of type and scrambled it to make a type specimen book

+
+ + + +
+
+
+

Skills..

+
    +
  • + HTML & CSS +
    • +
  • + Bootstrap +
    • +
  • + JavaScript & jQuery +
    • +
+
+
+

Useful Links..

+
    +
  • + Fiverr +
    • +
  • + Upwork +
    • +
  • + Guru +
    • +
+
+
+
+
+ + + \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..4b9052e --- /dev/null +++ b/app.js @@ -0,0 +1,133 @@ +/* ----------------------------------------------- +/* How to use? : Check the GitHub README +/* ----------------------------------------------- */ + +/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */ +/* +particlesJS.load('particles-js', 'particles.json', function() { + console.log('particles.js loaded - callback'); +}); +*/ + +/* Otherwise just put the config content (json): */ + +particlesJS('particles-js', + + { + "particles": { + "number": { + "value": 80, + "density": { + "enable": true, + "value_area": 800 + } + }, + "color": { + "value": "#ffffff" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + }, + "polygon": { + "nb_sides": 5 + }, + "image": { + "src": "img/github.svg", + "width": 100, + "height": 100 + } + }, + "opacity": { + "value": 0.5, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 5, + "random": true, + "anim": { + "enable": false, + "speed": 40, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 150, + "color": "#ffffff", + "opacity": 0.4, + "width": 1 + }, + "move": { + "enable": true, + "speed": 6, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "canvas", + "events": { + "onhover": { + "enable": true, + "mode": "repulse" + }, + "onclick": { + "enable": true, + "mode": "push" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 400, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 400, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 200 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true, + "config_demo": { + "hide_card": false, + "background_color": "#b61924", + "background_image": "", + "background_position": "50% 50%", + "background_repeat": "no-repeat", + "background_size": "cover" + } + } + +); \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..163b607 --- /dev/null +++ b/blog.html @@ -0,0 +1,155 @@ + + + + + + + My PortFolio + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+

My Blogs....

+
+
+
+
+
+
+ +
+
+

Web Development

+

Post On 05.11.20 By Cyber Web.

+

It is a long established fact that a reader will be distracted by the readable + content of a page when look at its layout

+ Read More.. +
+
+
+
+
+
+ +
+
+

Web Designing

+

Post On 05.11.20 By Cyber Web.

+

It is a long established fact that a reader will be distracted by the readable + content of a page when look at its layout

+ Read More.. +
+
+
+ +
+
+
+ +
+
+
+
+ + Cyber Webs.. + +

Lorem Ipsum has been the Industry's standard dummy text ever sincce the 1500s ,when an unknown printer took a gallery of type and scrambled it to make a type specimen book

+
+ + + +
+
+
+

Skills..

+
    +
  • + HTML & CSS +
    • +
  • + Bootstrap +
    • +
  • + JavaScript & jQuery +
    • +
+
+
+

Useful Links..

+
    +
  • + Fiverr +
    • +
  • + Upwork +
    • +
  • + Guru +
    • +
+
+
+
+
+ + + diff --git a/contact.htm b/contact.htm new file mode 100644 index 0000000..9a7f97a --- /dev/null +++ b/contact.htm @@ -0,0 +1,164 @@ + + + + + + My PortFolio + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+
+

Contact me.

+
+

Feel free to contact with me.

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
    +
  • + shabistaimam12345@gmail.com +
    • +
  • + +XX xxxxxxxxxx +
    • +
+
+
+
+
+ fmovies
+ +
+
+
+
+
+
+
+ +
+
+
+
+ + Cyber Webs.. + +

Lorem Ipsum has been the Industry's standard dummy text ever sincce the 1500s ,when an unknown printer took a gallery of type and scrambled it to make a type specimen book

+
+ + + +
+
+
+

Skills..

+
    +
  • + HTML & CSS +
    • +
  • + Bootstrap +
    • +
  • + JavaScript & jQuery +
    • +
+
+
+

Useful Links..

+
    +
  • + Fiverr +
    • +
  • + Upwork +
    • +
  • + Guru +
    • +
+
+
+
+
+ + + \ No newline at end of file diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..4c724a1 --- /dev/null +++ b/index.htm @@ -0,0 +1,394 @@ + + + + + + + My PortFolio + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+

Hello!

+

I'm Shabista Imam

+

FreeLance Frontend Developer & Designer

+

Lorem Ipsum has been the Industry's standard dummy text ever sincce the 1500s ,when an unknown printer + took a gallery of type and scrambled it to make a type specimen book.

+
+ +
+
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+

Any type of Question
& Discussion

+
+
Let's Talk-----------------
+
+

shabistaimam12345@gmail.com

+
+
Linkedin : shabista Imam
+
whatsapp : ************
+
+
+
+

About Me

+
+

Hello, I am shabista Imam and i am a professional frontend Developer. + I can create beautiful websites according to your needs.

+ + + + + + + + + + + + + + + + +
Name:Shabista Imam
Email:shabistaimam12345@gmail.com
Website:www.google.com
+ + + +
+
+
+
+ + +
+
+
+
+

My Skills.

+
+

You can see my skills in which i am expertise.

+ +
+
+
+
+ HTML 5 +
+
+
+ CSS +
+
+
+ JavaScript +
+
+
+ jQuery +
+
+
+ Bootstrap +
+
+
+ +
+
+
+
+
+
+ + +
+
+
+
+

My Portfolio....

+
+
+
+
+ +
+ + + +
+
+
+
+ +
+ + +
+
+
+
+

My Blogs....

+
+
+
+
+
+
+ +
+
+

Web Development

+

Post On 05.11.20 By Cyber Webs.

+

It is a long established fact that a reader will be distracted by the readable + content of a page when look at its layout

+ Read More.. +
+
+
+
+
+
+ +
+
+

Web Designing

+

Post On 05.11.20 By Cyber Web.

+

It is a long established fact that a reader will be distracted by the readable + content of a page when look at its layout

+ Read More.. +
+
+
+ +
+
+
+ + +
+
+
+
+
+

Contact me.

+
+

Feel free to contact with me.

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
    +
  • + shabistaimam12345@gmail.com +
    • +
  • + +XX xxxxxxxxxx +
    • +
+
+
+
+
+ fmovies
+ +
+
+
+
+
+
+
+ + +
+
+
+
+ + Cyber Webs.. + +

Lorem Ipsum has been the Industry's standard dummy text ever sincce the 1500s ,when an unknown printer took a gallery of type and scrambled it to make a type specimen book

+
+ + + +
+
+
+

Skills..

+
    +
  • + HTML & CSS +
    • +
  • + Bootstrap +
    • +
  • + JavaScript & jQuery +
    • +
+
+
+

Useful Links..

+
    +
  • + Fiverr +
    • +
  • + Upwork +
    • +
  • + Guru +
    • +
+
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/particles.js b/particles.js new file mode 100644 index 0000000..cf1c248 --- /dev/null +++ b/particles.js @@ -0,0 +1,1532 @@ +var pJS = function(tag_id, params){ + + var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el'); + + /* particles.js variables with default values */ + this.pJS = { + canvas: { + el: canvas_el, + w: canvas_el.offsetWidth, + h: canvas_el.offsetHeight + }, + particles: { + number: { + value: 400, + density: { + enable: true, + value_area: 800 + } + }, + color: { + value: '#fff' + }, + shape: { + type: 'circle', + stroke: { + width: 0, + color: '#ff0000' + }, + polygon: { + nb_sides: 5 + }, + image: { + src: '', + width: 100, + height: 100 + } + }, + opacity: { + value: 1, + random: false, + anim: { + enable: false, + speed: 2, + opacity_min: 0, + sync: false + } + }, + size: { + value: 20, + random: false, + anim: { + enable: false, + speed: 20, + size_min: 0, + sync: false + } + }, + line_linked: { + enable: true, + distance: 100, + color: '#fff', + opacity: 1, + width: 1 + }, + move: { + enable: true, + speed: 2, + direction: 'none', + random: false, + straight: false, + out_mode: 'out', + bounce: false, + attract: { + enable: false, + rotateX: 3000, + rotateY: 3000 + } + }, + array: [] + }, + interactivity: { + detect_on: 'canvas', + events: { + onhover: { + enable: true, + mode: 'grab' + }, + onclick: { + enable: true, + mode: 'push' + }, + resize: true + }, + modes: { + grab:{ + distance: 100, + line_linked:{ + opacity: 1 + } + }, + bubble:{ + distance: 200, + size: 80, + duration: 0.4 + }, + repulse:{ + distance: 200, + duration: 0.4 + }, + push:{ + particles_nb: 4 + }, + remove:{ + particles_nb: 2 + } + }, + mouse:{} + }, + retina_detect: false, + fn: { + interact: {}, + modes: {}, + vendors:{} + }, + tmp: {} + }; + + var pJS = this.pJS; + + /* params settings */ + if(params){ + Object.deepExtend(pJS, params); + } + + pJS.tmp.obj = { + size_value: pJS.particles.size.value, + size_anim_speed: pJS.particles.size.anim.speed, + move_speed: pJS.particles.move.speed, + line_linked_distance: pJS.particles.line_linked.distance, + line_linked_width: pJS.particles.line_linked.width, + mode_grab_distance: pJS.interactivity.modes.grab.distance, + mode_bubble_distance: pJS.interactivity.modes.bubble.distance, + mode_bubble_size: pJS.interactivity.modes.bubble.size, + mode_repulse_distance: pJS.interactivity.modes.repulse.distance + }; + + + pJS.fn.retinaInit = function(){ + + if(pJS.retina_detect && window.devicePixelRatio > 1){ + pJS.canvas.pxratio = window.devicePixelRatio; + pJS.tmp.retina = true; + } + else{ + pJS.canvas.pxratio = 1; + pJS.tmp.retina = false; + } + + pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio; + pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio; + + pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio; + pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio; + pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio; + pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio; + pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio; + pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio; + pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio; + pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio; + pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio; + + }; + + + + /* ---------- pJS functions - canvas ------------ */ + + pJS.fn.canvasInit = function(){ + pJS.canvas.ctx = pJS.canvas.el.getContext('2d'); + }; + + pJS.fn.canvasSize = function(){ + + pJS.canvas.el.width = pJS.canvas.w; + pJS.canvas.el.height = pJS.canvas.h; + + if(pJS && pJS.interactivity.events.resize){ + + window.addEventListener('resize', function(){ + + pJS.canvas.w = pJS.canvas.el.offsetWidth; + pJS.canvas.h = pJS.canvas.el.offsetHeight; + + /* resize canvas */ + if(pJS.tmp.retina){ + pJS.canvas.w *= pJS.canvas.pxratio; + pJS.canvas.h *= pJS.canvas.pxratio; + } + + pJS.canvas.el.width = pJS.canvas.w; + pJS.canvas.el.height = pJS.canvas.h; + + /* repaint canvas on anim disabled */ + if(!pJS.particles.move.enable){ + pJS.fn.particlesEmpty(); + pJS.fn.particlesCreate(); + pJS.fn.particlesDraw(); + pJS.fn.vendors.densityAutoParticles(); + } + + /* density particles enabled */ + pJS.fn.vendors.densityAutoParticles(); + + }); + + } + + }; + + + pJS.fn.canvasPaint = function(){ + pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h); + }; + + pJS.fn.canvasClear = function(){ + pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); + }; + + + /* --------- pJS functions - particles ----------- */ + + pJS.fn.particle = function(color, opacity, position){ + + /* size */ + this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value; + if(pJS.particles.size.anim.enable){ + this.size_status = false; + this.vs = pJS.particles.size.anim.speed / 100; + if(!pJS.particles.size.anim.sync){ + this.vs = this.vs * Math.random(); + } + } + + /* position */ + this.x = position ? position.x : Math.random() * pJS.canvas.w; + this.y = position ? position.y : Math.random() * pJS.canvas.h; + + /* check position - into the canvas */ + if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius; + else if(this.x < this.radius*2) this.x = this.x + this.radius; + if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius; + else if(this.y < this.radius*2) this.y = this.y + this.radius; + + /* check position - avoid overlap */ + if(pJS.particles.move.bounce){ + pJS.fn.vendors.checkOverlap(this, position); + } + + /* color */ + this.color = {}; + if(typeof(color.value) == 'object'){ + + if(color.value instanceof Array){ + var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)]; + this.color.rgb = hexToRgb(color_selected); + }else{ + if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){ + this.color.rgb = { + r: color.value.r, + g: color.value.g, + b: color.value.b + } + } + if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){ + this.color.hsl = { + h: color.value.h, + s: color.value.s, + l: color.value.l + } + } + } + + } + else if(color.value == 'random'){ + this.color.rgb = { + r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), + g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), + b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0) + } + } + else if(typeof(color.value) == 'string'){ + this.color = color; + this.color.rgb = hexToRgb(this.color.value); + } + + /* opacity */ + this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value; + if(pJS.particles.opacity.anim.enable){ + this.opacity_status = false; + this.vo = pJS.particles.opacity.anim.speed / 100; + if(!pJS.particles.opacity.anim.sync){ + this.vo = this.vo * Math.random(); + } + } + + /* animation - velocity for speed */ + var velbase = {} + switch(pJS.particles.move.direction){ + case 'top': + velbase = { x:0, y:-1 }; + break; + case 'top-right': + velbase = { x:0.5, y:-0.5 }; + break; + case 'right': + velbase = { x:1, y:-0 }; + break; + case 'bottom-right': + velbase = { x:0.5, y:0.5 }; + break; + case 'bottom': + velbase = { x:0, y:1 }; + break; + case 'bottom-left': + velbase = { x:-0.5, y:1 }; + break; + case 'left': + velbase = { x:-1, y:0 }; + break; + case 'top-left': + velbase = { x:-0.5, y:-0.5 }; + break; + default: + velbase = { x:0, y:0 }; + break; + } + + if(pJS.particles.move.straight){ + this.vx = velbase.x; + this.vy = velbase.y; + if(pJS.particles.move.random){ + this.vx = this.vx * (Math.random()); + this.vy = this.vy * (Math.random()); + } + }else{ + this.vx = velbase.x + Math.random()-0.5; + this.vy = velbase.y + Math.random()-0.5; + } + + // var theta = 2.0 * Math.PI * Math.random(); + // this.vx = Math.cos(theta); + // this.vy = Math.sin(theta); + + this.vx_i = this.vx; + this.vy_i = this.vy; + + + + /* if shape is image */ + + var shape_type = pJS.particles.shape.type; + if(typeof(shape_type) == 'object'){ + if(shape_type instanceof Array){ + var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)]; + this.shape = shape_selected; + } + }else{ + this.shape = shape_type; + } + + if(this.shape == 'image'){ + var sh = pJS.particles.shape; + this.img = { + src: sh.image.src, + ratio: sh.image.width / sh.image.height + } + if(!this.img.ratio) this.img.ratio = 1; + if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){ + pJS.fn.vendors.createSvgImg(this); + if(pJS.tmp.pushing){ + this.img.loaded = false; + } + } + } + + + + }; + + + pJS.fn.particle.prototype.draw = function() { + + var p = this; + + if(p.radius_bubble != undefined){ + var radius = p.radius_bubble; + }else{ + var radius = p.radius; + } + + if(p.opacity_bubble != undefined){ + var opacity = p.opacity_bubble; + }else{ + var opacity = p.opacity; + } + + if(p.color.rgb){ + var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')'; + }else{ + var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')'; + } + + pJS.canvas.ctx.fillStyle = color_value; + pJS.canvas.ctx.beginPath(); + + switch(p.shape){ + + case 'circle': + pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false); + break; + + case 'edge': + pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2); + break; + + case 'triangle': + pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2); + break; + + case 'polygon': + pJS.fn.vendors.drawShape( + pJS.canvas.ctx, + p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX + p.y - radius / (2.66/3.5), // startY + radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength + pJS.particles.shape.polygon.nb_sides, // sideCountNumerator + 1 // sideCountDenominator + ); + break; + + case 'star': + pJS.fn.vendors.drawShape( + pJS.canvas.ctx, + p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX + p.y - radius / (2*2.66/3.5), // startY + radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength + pJS.particles.shape.polygon.nb_sides, // sideCountNumerator + 2 // sideCountDenominator + ); + break; + + case 'image': + + function draw(){ + pJS.canvas.ctx.drawImage( + img_obj, + p.x-radius, + p.y-radius, + radius*2, + radius*2 / p.img.ratio + ); + } + + if(pJS.tmp.img_type == 'svg'){ + var img_obj = p.img.obj; + }else{ + var img_obj = pJS.tmp.img_obj; + } + + if(img_obj){ + draw(); + } + + break; + + } + + pJS.canvas.ctx.closePath(); + + if(pJS.particles.shape.stroke.width > 0){ + pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color; + pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width; + pJS.canvas.ctx.stroke(); + } + + pJS.canvas.ctx.fill(); + + }; + + + pJS.fn.particlesCreate = function(){ + for(var i = 0; i < pJS.particles.number.value; i++) { + pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value)); + } + }; + + pJS.fn.particlesUpdate = function(){ + + for(var i = 0; i < pJS.particles.array.length; i++){ + + /* the particle */ + var p = pJS.particles.array[i]; + + // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy; + // var f = -BANG_SIZE / d; + // if ( d < BANG_SIZE ) { + // var t = Math.atan2( dy, dx ); + // p.vx = f * Math.cos(t); + // p.vy = f * Math.sin(t); + // } + + /* move the particle */ + if(pJS.particles.move.enable){ + var ms = pJS.particles.move.speed/2; + p.x += p.vx * ms; + p.y += p.vy * ms; + } + + /* change opacity status */ + if(pJS.particles.opacity.anim.enable) { + if(p.opacity_status == true) { + if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false; + p.opacity += p.vo; + }else { + if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true; + p.opacity -= p.vo; + } + if(p.opacity < 0) p.opacity = 0; + } + + /* change size */ + if(pJS.particles.size.anim.enable){ + if(p.size_status == true){ + if(p.radius >= pJS.particles.size.value) p.size_status = false; + p.radius += p.vs; + }else{ + if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true; + p.radius -= p.vs; + } + if(p.radius < 0) p.radius = 0; + } + + /* change particle position if it is out of canvas */ + if(pJS.particles.move.out_mode == 'bounce'){ + var new_pos = { + x_left: p.radius, + x_right: pJS.canvas.w, + y_top: p.radius, + y_bottom: pJS.canvas.h + } + }else{ + var new_pos = { + x_left: -p.radius, + x_right: pJS.canvas.w + p.radius, + y_top: -p.radius, + y_bottom: pJS.canvas.h + p.radius + } + } + + if(p.x - p.radius > pJS.canvas.w){ + p.x = new_pos.x_left; + p.y = Math.random() * pJS.canvas.h; + } + else if(p.x + p.radius < 0){ + p.x = new_pos.x_right; + p.y = Math.random() * pJS.canvas.h; + } + if(p.y - p.radius > pJS.canvas.h){ + p.y = new_pos.y_top; + p.x = Math.random() * pJS.canvas.w; + } + else if(p.y + p.radius < 0){ + p.y = new_pos.y_bottom; + p.x = Math.random() * pJS.canvas.w; + } + + /* out of canvas modes */ + switch(pJS.particles.move.out_mode){ + case 'bounce': + if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx; + else if (p.x - p.radius < 0) p.vx = -p.vx; + if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy; + else if (p.y - p.radius < 0) p.vy = -p.vy; + break; + } + + /* events */ + if(isInArray('grab', pJS.interactivity.events.onhover.mode)){ + pJS.fn.modes.grabParticle(p); + } + + if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){ + pJS.fn.modes.bubbleParticle(p); + } + + if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){ + pJS.fn.modes.repulseParticle(p); + } + + /* interaction auto between particles */ + if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){ + for(var j = i + 1; j < pJS.particles.array.length; j++){ + var p2 = pJS.particles.array[j]; + + /* link particles */ + if(pJS.particles.line_linked.enable){ + pJS.fn.interact.linkParticles(p,p2); + } + + /* attract particles */ + if(pJS.particles.move.attract.enable){ + pJS.fn.interact.attractParticles(p,p2); + } + + /* bounce particles */ + if(pJS.particles.move.bounce){ + pJS.fn.interact.bounceParticles(p,p2); + } + + } + } + + + } + + }; + + pJS.fn.particlesDraw = function(){ + + /* clear canvas */ + pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); + + /* update each particles param */ + pJS.fn.particlesUpdate(); + + /* draw each particle */ + for(var i = 0; i < pJS.particles.array.length; i++){ + var p = pJS.particles.array[i]; + p.draw(); + } + + }; + + pJS.fn.particlesEmpty = function(){ + pJS.particles.array = []; + }; + + pJS.fn.particlesRefresh = function(){ + + /* init all */ + cancelRequestAnimFrame(pJS.fn.checkAnimFrame); + cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + pJS.tmp.source_svg = undefined; + pJS.tmp.img_obj = undefined; + pJS.tmp.count_svg = 0; + pJS.fn.particlesEmpty(); + pJS.fn.canvasClear(); + + /* restart */ + pJS.fn.vendors.start(); + + }; + + + /* ---------- pJS functions - particles interaction ------------ */ + + pJS.fn.interact.linkParticles = function(p1, p2){ + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + /* draw a line between p1 and p2 if the distance between them is under the config distance */ + if(dist <= pJS.particles.line_linked.distance){ + + var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance; + + if(opacity_line > 0){ + + /* style */ + var color_line = pJS.particles.line_linked.color_rgb_line; + pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; + pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; + //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ + + /* path */ + pJS.canvas.ctx.beginPath(); + pJS.canvas.ctx.moveTo(p1.x, p1.y); + pJS.canvas.ctx.lineTo(p2.x, p2.y); + pJS.canvas.ctx.stroke(); + pJS.canvas.ctx.closePath(); + + } + + } + + }; + + + pJS.fn.interact.attractParticles = function(p1, p2){ + + /* condensed particles */ + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + if(dist <= pJS.particles.line_linked.distance){ + + var ax = dx/(pJS.particles.move.attract.rotateX*1000), + ay = dy/(pJS.particles.move.attract.rotateY*1000); + + p1.vx -= ax; + p1.vy -= ay; + + p2.vx += ax; + p2.vy += ay; + + } + + + } + + + pJS.fn.interact.bounceParticles = function(p1, p2){ + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy), + dist_p = p1.radius+p2.radius; + + if(dist <= dist_p){ + p1.vx = -p1.vx; + p1.vy = -p1.vy; + + p2.vx = -p2.vx; + p2.vy = -p2.vy; + } + + } + + + /* ---------- pJS functions - modes events ------------ */ + + pJS.fn.modes.pushParticles = function(nb, pos){ + + pJS.tmp.pushing = true; + + for(var i = 0; i < nb; i++){ + pJS.particles.array.push( + new pJS.fn.particle( + pJS.particles.color, + pJS.particles.opacity.value, + { + 'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w, + 'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h + } + ) + ) + if(i == nb-1){ + if(!pJS.particles.move.enable){ + pJS.fn.particlesDraw(); + } + pJS.tmp.pushing = false; + } + } + + }; + + + pJS.fn.modes.removeParticles = function(nb){ + + pJS.particles.array.splice(0, nb); + if(!pJS.particles.move.enable){ + pJS.fn.particlesDraw(); + } + + }; + + + pJS.fn.modes.bubbleParticle = function(p){ + + /* on hover event */ + if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){ + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), + ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance; + + function init(){ + p.opacity_bubble = p.opacity; + p.radius_bubble = p.radius; + } + + /* mousemove - check ratio */ + if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ + + if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){ + + /* size */ + if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){ + + if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){ + var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio); + if(size >= 0){ + p.radius_bubble = size; + } + }else{ + var dif = p.radius - pJS.interactivity.modes.bubble.size, + size = p.radius - (dif*ratio); + if(size > 0){ + p.radius_bubble = size; + }else{ + p.radius_bubble = 0; + } + } + + } + + /* opacity */ + if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){ + + if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){ + var opacity = pJS.interactivity.modes.bubble.opacity*ratio; + if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){ + p.opacity_bubble = opacity; + } + }else{ + var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio; + if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){ + p.opacity_bubble = opacity; + } + } + + } + + } + + }else{ + init(); + } + + + /* mouseleave */ + if(pJS.interactivity.status == 'mouseleave'){ + init(); + } + + } + + /* on click event */ + else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){ + + + if(pJS.tmp.bubble_clicking){ + var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), + time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000; + + if(time_spent > pJS.interactivity.modes.bubble.duration){ + pJS.tmp.bubble_duration_end = true; + } + + if(time_spent > pJS.interactivity.modes.bubble.duration*2){ + pJS.tmp.bubble_clicking = false; + pJS.tmp.bubble_duration_end = false; + } + } + + + function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){ + + if(bubble_param != particles_param){ + + if(!pJS.tmp.bubble_duration_end){ + if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ + if(p_obj_bubble != undefined) var obj = p_obj_bubble; + else var obj = p_obj; + if(obj != bubble_param){ + var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration); + if(id == 'size') p.radius_bubble = value; + if(id == 'opacity') p.opacity_bubble = value; + } + }else{ + if(id == 'size') p.radius_bubble = undefined; + if(id == 'opacity') p.opacity_bubble = undefined; + } + }else{ + if(p_obj_bubble != undefined){ + var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration), + dif = bubble_param - value_tmp; + value = bubble_param + dif; + if(id == 'size') p.radius_bubble = value; + if(id == 'opacity') p.opacity_bubble = value; + } + } + + } + + } + + if(pJS.tmp.bubble_clicking){ + /* size */ + process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size'); + /* opacity */ + process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity'); + } + + } + + }; + + + pJS.fn.modes.repulseParticle = function(p){ + + if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') { + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); + + var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse}, + repulseRadius = pJS.interactivity.modes.repulse.distance, + velocity = 100, + repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50); + + var pos = { + x: p.x + normVec.x * repulseFactor, + y: p.y + normVec.y * repulseFactor + } + + if(pJS.particles.move.out_mode == 'bounce'){ + if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x; + if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y; + }else{ + p.x = pos.x; + p.y = pos.y; + } + + } + + + else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) { + + if(!pJS.tmp.repulse_finish){ + pJS.tmp.repulse_count++; + if(pJS.tmp.repulse_count == pJS.particles.array.length){ + pJS.tmp.repulse_finish = true; + } + } + + if(pJS.tmp.repulse_clicking){ + + var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3); + + var dx = pJS.interactivity.mouse.click_pos_x - p.x, + dy = pJS.interactivity.mouse.click_pos_y - p.y, + d = dx*dx + dy*dy; + + var force = -repulseRadius / d * 1; + + function process(){ + + var f = Math.atan2(dy,dx); + p.vx = force * Math.cos(f); + p.vy = force * Math.sin(f); + + if(pJS.particles.move.out_mode == 'bounce'){ + var pos = { + x: p.x + p.vx, + y: p.y + p.vy + } + if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx; + else if (pos.x - p.radius < 0) p.vx = -p.vx; + if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy; + else if (pos.y - p.radius < 0) p.vy = -p.vy; + } + + } + + // default + if(d <= repulseRadius){ + process(); + } + + // bang - slow motion mode + // if(!pJS.tmp.repulse_finish){ + // if(d <= repulseRadius){ + // process(); + // } + // }else{ + // process(); + // } + + + }else{ + + if(pJS.tmp.repulse_clicking == false){ + + p.vx = p.vx_i; + p.vy = p.vy_i; + + } + + } + + } + + } + + + pJS.fn.modes.grabParticle = function(p){ + + if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){ + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); + + /* draw a line between the cursor and the particle if the distance between them is under the config distance */ + if(dist_mouse <= pJS.interactivity.modes.grab.distance){ + + var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance; + + if(opacity_line > 0){ + + /* style */ + var color_line = pJS.particles.line_linked.color_rgb_line; + pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; + pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; + //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ + + /* path */ + pJS.canvas.ctx.beginPath(); + pJS.canvas.ctx.moveTo(p.x, p.y); + pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y); + pJS.canvas.ctx.stroke(); + pJS.canvas.ctx.closePath(); + + } + + } + + } + + }; + + + + /* ---------- pJS functions - vendors ------------ */ + + pJS.fn.vendors.eventsListeners = function(){ + + /* events target element */ + if(pJS.interactivity.detect_on == 'window'){ + pJS.interactivity.el = window; + }else{ + pJS.interactivity.el = pJS.canvas.el; + } + + + /* detect mouse pos - on hover / click event */ + if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){ + + /* el on mousemove */ + pJS.interactivity.el.addEventListener('mousemove', function(e){ + + if(pJS.interactivity.el == window){ + var pos_x = e.clientX, + pos_y = e.clientY; + } + else{ + var pos_x = e.offsetX || e.clientX, + pos_y = e.offsetY || e.clientY; + } + + pJS.interactivity.mouse.pos_x = pos_x; + pJS.interactivity.mouse.pos_y = pos_y; + + if(pJS.tmp.retina){ + pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio; + pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio; + } + + pJS.interactivity.status = 'mousemove'; + + }); + + /* el on onmouseleave */ + pJS.interactivity.el.addEventListener('mouseleave', function(e){ + + pJS.interactivity.mouse.pos_x = null; + pJS.interactivity.mouse.pos_y = null; + pJS.interactivity.status = 'mouseleave'; + + }); + + } + + /* on click event */ + if(pJS.interactivity.events.onclick.enable){ + + pJS.interactivity.el.addEventListener('click', function(){ + + pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x; + pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y; + pJS.interactivity.mouse.click_time = new Date().getTime(); + + if(pJS.interactivity.events.onclick.enable){ + + switch(pJS.interactivity.events.onclick.mode){ + + case 'push': + if(pJS.particles.move.enable){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); + }else{ + if(pJS.interactivity.modes.push.particles_nb == 1){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); + } + else if(pJS.interactivity.modes.push.particles_nb > 1){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb); + } + } + break; + + case 'remove': + pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb); + break; + + case 'bubble': + pJS.tmp.bubble_clicking = true; + break; + + case 'repulse': + pJS.tmp.repulse_clicking = true; + pJS.tmp.repulse_count = 0; + pJS.tmp.repulse_finish = false; + setTimeout(function(){ + pJS.tmp.repulse_clicking = false; + }, pJS.interactivity.modes.repulse.duration*1000) + break; + + } + + } + + }); + + } + + + }; + + pJS.fn.vendors.densityAutoParticles = function(){ + + if(pJS.particles.number.density.enable){ + + /* calc area */ + var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000; + if(pJS.tmp.retina){ + area = area/(pJS.canvas.pxratio*2); + } + + /* calc number of particles based on density area */ + var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area; + + /* add or remove X particles */ + var missing_particles = pJS.particles.array.length - nb_particles; + if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles)); + else pJS.fn.modes.removeParticles(missing_particles); + + } + + }; + + + pJS.fn.vendors.checkOverlap = function(p1, position){ + for(var i = 0; i < pJS.particles.array.length; i++){ + var p2 = pJS.particles.array[i]; + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + if(dist <= p1.radius + p2.radius){ + p1.x = position ? position.x : Math.random() * pJS.canvas.w; + p1.y = position ? position.y : Math.random() * pJS.canvas.h; + pJS.fn.vendors.checkOverlap(p1); + } + } + }; + + + pJS.fn.vendors.createSvgImg = function(p){ + + /* set color to svg element */ + var svgXml = pJS.tmp.source_svg, + rgbHex = /#([0-9A-F]{3,6})/gi, + coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) { + if(p.color.rgb){ + var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')'; + }else{ + var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')'; + } + return color_value; + }); + + /* prepare to create img with colored svg */ + var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}), + DOMURL = window.URL || window.webkitURL || window, + url = DOMURL.createObjectURL(svg); + + /* create particle img obj */ + var img = new Image(); + img.addEventListener('load', function(){ + p.img.obj = img; + p.img.loaded = true; + DOMURL.revokeObjectURL(url); + pJS.tmp.count_svg++; + }); + img.src = url; + + }; + + + pJS.fn.vendors.destroypJS = function(){ + cancelAnimationFrame(pJS.fn.drawAnimFrame); + canvas_el.remove(); + pJSDom = null; + }; + + + pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){ + + // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/ + var sideCount = sideCountNumerator * sideCountDenominator; + var decimalSides = sideCountNumerator / sideCountDenominator; + var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides; + var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians + c.save(); + c.beginPath(); + c.translate(startX, startY); + c.moveTo(0,0); + for (var i = 0; i < sideCount; i++) { + c.lineTo(sideLength,0); + c.translate(sideLength,0); + c.rotate(interiorAngle); + } + //c.stroke(); + c.fill(); + c.restore(); + + }; + + pJS.fn.vendors.exportImg = function(){ + window.open(pJS.canvas.el.toDataURL('image/png'), '_blank'); + }; + + + pJS.fn.vendors.loadImg = function(type){ + + pJS.tmp.img_error = undefined; + + if(pJS.particles.shape.image.src != ''){ + + if(type == 'svg'){ + + var xhr = new XMLHttpRequest(); + xhr.open('GET', pJS.particles.shape.image.src); + xhr.onreadystatechange = function (data) { + if(xhr.readyState == 4){ + if(xhr.status == 200){ + pJS.tmp.source_svg = data.currentTarget.response; + pJS.fn.vendors.checkBeforeDraw(); + }else{ + console.log('Error pJS - Image not found'); + pJS.tmp.img_error = true; + } + } + } + xhr.send(); + + }else{ + + var img = new Image(); + img.addEventListener('load', function(){ + pJS.tmp.img_obj = img; + pJS.fn.vendors.checkBeforeDraw(); + }); + img.src = pJS.particles.shape.image.src; + + } + + }else{ + console.log('Error pJS - No image.src'); + pJS.tmp.img_error = true; + } + + }; + + + pJS.fn.vendors.draw = function(){ + + if(pJS.particles.shape.type == 'image'){ + + if(pJS.tmp.img_type == 'svg'){ + + if(pJS.tmp.count_svg >= pJS.particles.number.value){ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + }else{ + //console.log('still loading...'); + if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + }else{ + + if(pJS.tmp.img_obj != undefined){ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + }else{ + if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + } + + }else{ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + }; + + + pJS.fn.vendors.checkBeforeDraw = function(){ + + // if shape is image + if(pJS.particles.shape.type == 'image'){ + + if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){ + pJS.tmp.checkAnimFrame = requestAnimFrame(check); + }else{ + //console.log('images loaded! cancel check'); + cancelRequestAnimFrame(pJS.tmp.checkAnimFrame); + if(!pJS.tmp.img_error){ + pJS.fn.vendors.init(); + pJS.fn.vendors.draw(); + } + + } + + }else{ + pJS.fn.vendors.init(); + pJS.fn.vendors.draw(); + } + + }; + + + pJS.fn.vendors.init = function(){ + + /* init canvas + particles */ + pJS.fn.retinaInit(); + pJS.fn.canvasInit(); + pJS.fn.canvasSize(); + pJS.fn.canvasPaint(); + pJS.fn.particlesCreate(); + pJS.fn.vendors.densityAutoParticles(); + + /* particles.line_linked - convert hex colors to rgb */ + pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color); + + }; + + + pJS.fn.vendors.start = function(){ + + if(isInArray('image', pJS.particles.shape.type)){ + pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3); + pJS.fn.vendors.loadImg(pJS.tmp.img_type); + }else{ + pJS.fn.vendors.checkBeforeDraw(); + } + + }; + + + + + /* ---------- pJS - start ------------ */ + + + pJS.fn.vendors.eventsListeners(); + + pJS.fn.vendors.start(); + + + +}; + +/* ---------- global functions - vendors ------------ */ + +Object.deepExtend = function(destination, source) { + for (var property in source) { + if (source[property] && source[property].constructor && + source[property].constructor === Object) { + destination[property] = destination[property] || {}; + arguments.callee(destination[property], source[property]); + } else { + destination[property] = source[property]; + } + } + return destination; +}; + +window.requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback){ + window.setTimeout(callback, 1000 / 60); + }; +})(); + +window.cancelRequestAnimFrame = ( function() { + return window.cancelAnimationFrame || + window.webkitCancelRequestAnimationFrame || + window.mozCancelRequestAnimationFrame || + window.oCancelRequestAnimationFrame || + window.msCancelRequestAnimationFrame || + clearTimeout +} )(); + +function hexToRgb(hex){ + // By Tim Down - http://stackoverflow.com/a/5624139/3493650 + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function(m, r, g, b) { + return r + r + g + g + b + b; + }); + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; +}; + +function clamp(number, min, max) { + return Math.min(Math.max(number, min), max); +}; + +function isInArray(value, array) { + return array.indexOf(value) > -1; +} + + +/* ---------- particles.js functions - start ------------ */ + +window.pJSDom = []; + +window.particlesJS = function(tag_id, params){ + + //console.log(params); + + /* no string id? so it's object params, and set the id with default id */ + if(typeof(tag_id) != 'string'){ + params = tag_id; + tag_id = 'particles-js'; + } + + /* no id? set the id to default id */ + if(!tag_id){ + tag_id = 'particles-js'; + } + + /* pJS elements */ + var pJS_tag = document.getElementById(tag_id), + pJS_canvas_class = 'particles-js-canvas-el', + exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class); + + /* remove canvas if exists into the pJS target tag */ + if(exist_canvas.length){ + while(exist_canvas.length > 0){ + pJS_tag.removeChild(exist_canvas[0]); + } + } + + /* create canvas element */ + var canvas_el = document.createElement('canvas'); + canvas_el.className = pJS_canvas_class; + + /* set size canvas */ + canvas_el.style.width = "100%"; + canvas_el.style.height = "100%"; + + /* append canvas */ + var canvas = document.getElementById(tag_id).appendChild(canvas_el); + + /* launch particle.js */ + if(canvas != null){ + pJSDom.push(new pJS(tag_id, params)); + } + +}; + +window.particlesJS.load = function(tag_id, path_config_json, callback){ + + /* load json config */ + var xhr = new XMLHttpRequest(); + xhr.open('GET', path_config_json); + xhr.onreadystatechange = function (data) { + if(xhr.readyState == 4){ + if(xhr.status == 200){ + var params = JSON.parse(data.currentTarget.response); + window.particlesJS(tag_id, params); + if(callback) callback(); + }else{ + console.log('Error pJS - XMLHttpRequest status: '+xhr.status); + console.log('Error pJS - File config not found'); + } + } + }; + xhr.send(); + +}; \ No newline at end of file diff --git a/portfolio.htm b/portfolio.htm new file mode 100644 index 0000000..6a8714c --- /dev/null +++ b/portfolio.htm @@ -0,0 +1,166 @@ + + + + + + My PortFolio + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+

My Portfolio....

+
+
+
+
+ +
+ + + +
+
+
+
+ +
+ +
+
+
+
+ + Cyber Webs.. + +

Lorem Ipsum has been the Industry's standard dummy text ever sincce the 1500s ,when an unknown printer took a gallery of type and scrambled it to make a type specimen book

+
+ + + +
+
+
+

Skills..

+
    +
  • + HTML & CSS +
    • +
  • + Bootstrap +
    • +
  • + JavaScript & jQuery +
    • +
+
+
+

Useful Links..

+
    +
  • + Fiverr +
    • +
  • + Upwork +
    • +
  • + Guru +
    • +
+
+
+
+
+ + + \ No newline at end of file diff --git a/skill.htm b/skill.htm new file mode 100644 index 0000000..161dfcf --- /dev/null +++ b/skill.htm @@ -0,0 +1,165 @@ + + + + + + My PortFolio + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+
+
+
+

My Skills.

+
+

You can see my skills in which i am expertise.

+ +
+
+
+
+ HTML 5 +
+
+
+ CSS +
+
+
+ JavaScript +
+
+
+ jQuery +
+
+
+ Bootstrap +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + Cyber Webs.. + +

Lorem Ipsum has been the Industry's standard dummy text ever sincce the 1500s ,when an unknown printer took a gallery of type and scrambled it to make a type specimen book

+
+ + + +
+
+
+

Skills..

+
    +
  • + HTML & CSS +
    • +
  • + Bootstrap +
    • +
  • + JavaScript & jQuery +
    • +
+
+
+

Useful Links..

+
    +
  • + Fiverr +
    • +
  • + Upwork +
    • +
  • + Guru +
    • +
+
+
+
+
+ + + \ No newline at end of file diff --git a/src/components/container.js b/src/components/container.js deleted file mode 100644 index ede4548..0000000 --- a/src/components/container.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import styles from './container.module.scss'; -import { useStaticQuery, graphql } from "gatsby" - -export default ({ children }) => { - const { site } = useStaticQuery(graphql` - { - site { - siteMetadata { - footerText - } - } - } - `) - return ( -
-
- {children} -
{site.siteMetadata.footerText}
-
-
- ) -} diff --git a/src/components/container.module.scss b/src/components/container.module.scss deleted file mode 100644 index 933d3d1..0000000 --- a/src/components/container.module.scss +++ /dev/null @@ -1,9 +0,0 @@ -.container { - margin: 2rem auto; - max-width: 800px; -} - -.footer { - margin-top: 30px; - text-align: center; -} diff --git a/src/components/header.js b/src/components/header.js deleted file mode 100644 index fbcc458..0000000 --- a/src/components/header.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' -import styles from './header.module.scss'; - -export default props => -

{props.title}

\ No newline at end of file diff --git a/src/components/header.module.scss b/src/components/header.module.scss deleted file mode 100644 index 5bd3458..0000000 --- a/src/components/header.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import '../styles/variables.scss'; - -.title { - color: $red; -} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js deleted file mode 100644 index 7789dbc..0000000 --- a/src/pages/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react" -import Header from "../components/header"; -import Container from '../components/container'; -import { Link, graphql } from "gatsby" - -export default ({ data }) => - -
- -

- - - -

- - Sobre -
- Projetos - - -export const query = graphql` - { - site { - siteMetadata { - homePage { - img - title - } - } - } - } -` \ No newline at end of file diff --git a/src/pages/projetos.js b/src/pages/projetos.js deleted file mode 100644 index 71e3ee2..0000000 --- a/src/pages/projetos.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from "react" -import Header from "../components/header"; -import Container from '../components/container'; -import { Link, graphql } from "gatsby" - -export default ({ data }) => { - const { edges } = data.allMarkdownRemark; - return ( - -
- - {edges.map(({ node }) => ( -
- - -

{node.frontmatter.title}

- - - {node.frontmatter.date} -
{node.excerpt}
-
- ))} - - Home - - ) -} - -export const query = graphql` - { - allMarkdownRemark { - edges { - node { - id - excerpt - fields { - slug - } - frontmatter { - date(formatString: "DD/MM/YYYY") - title - } - } - } - } - } -` \ No newline at end of file diff --git a/src/pages/sobre.js b/src/pages/sobre.js deleted file mode 100644 index 38d30a6..0000000 --- a/src/pages/sobre.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react" -import Header from "../components/header"; -import Container from '../components/container'; -import { Link, graphql } from "gatsby" - -export default ({ data }) => { - const { siteMetadata } = data.site; - - return ( - -
- -

- -

- - Home - - ) -} - - -export const query = graphql` - { - site { - siteMetadata { - aboutPage { - img - title - } - } - } - } -` \ No newline at end of file diff --git a/src/projetos/todo-app-angular.md b/src/projetos/todo-app-angular.md deleted file mode 100644 index 430f717..0000000 --- a/src/projetos/todo-app-angular.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: "Criando um app de lista de tarefas com Angular" -date: "2019-11-28" ---- - -Mussum Ipsum, cacilds vidis litro abertis. Delegadis gente finis, bibendum egestas augue arcu ut est. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo, vitae iaculis nisl. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Per aumento de cachacis, eu reclamis. - -[Acessar sΓ©rie completa](https://www.youtube.com/playlist?list=PLryJIoSncQyPBskKa1Fvr8eE3JdH4jxhK) \ No newline at end of file diff --git a/src/projetos/todo-app-nodejs.md b/src/projetos/todo-app-nodejs.md deleted file mode 100644 index 9cffcee..0000000 --- a/src/projetos/todo-app-nodejs.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: "Criando um app de lista de tarefas com NodeJS" -date: "2019-12-17" ---- - -Mussum Ipsum, cacilds vidis litro abertis. Si u mundo tΓ‘ muito paradis? Toma um mΓ© que o mundo vai girarzis! Delegadis gente finis, bibendum egestas augue arcu ut est. Cevadis im ampola pa arma uma pindureta. Vehicula non. Ut sed ex eros. Vivamus sit amet nibh non tellus tristique interdum. - -[Acessar sΓ©rie completa](https://www.youtube.com/playlist?list=PLryJIoSncQyNzHHbHMPQkjPRP3Kv0ICnq) \ No newline at end of file diff --git a/src/styles/styles.scss b/src/styles/styles.scss deleted file mode 100644 index af4e239..0000000 --- a/src/styles/styles.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - text-align: center; -} \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss deleted file mode 100644 index f9aa71f..0000000 --- a/src/styles/variables.scss +++ /dev/null @@ -1 +0,0 @@ -$red: #7b0800; \ No newline at end of file diff --git a/src/templates/projeto-single.js b/src/templates/projeto-single.js deleted file mode 100644 index ea687ef..0000000 --- a/src/templates/projeto-single.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react" -import Header from "../components/header"; -import Container from '../components/container'; -import { Link } from "gatsby" - -export default ({ data }) => { - const projeto = data.markdownRemark; - - return ( - -
- {projeto.frontmatter.date} - -
- - Projetos - - ) -} - -export const query = graphql` - query($slug: String!) { - markdownRemark(fields: { slug: { eq: $slug } }) { - html - frontmatter { - date(formatString: "DD/MM/YYYY") - title - } - html - } - } -` \ No newline at end of file diff --git a/static/favicon.ico b/static/favicon.ico deleted file mode 100644 index 1a466ba..0000000 Binary files a/static/favicon.ico and /dev/null differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..062cafe --- /dev/null +++ b/style.css @@ -0,0 +1,510 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,900&display=swap'); + +:root{ + --background-color: #393c4e; + --pink-color:#f87652; + --secondary-color:#bbbbbb; + --bg-color-of-list-in-skill-section:#81818180; + --bg-color-for-form-input:#ffffff24; + --border-color-for-form-input:#c4c4c44a; + +} +*{ + font-family: 'Poppins', sans-serif; +} +body{ + background-color: var(--background-color)!important; +} +h1,h2,h3,h4,h5,h6,p,span,a{ + cursor: pointer; +} +canvas.particles-js-canvas-el{ + position: absolute; + height: 100% !important; + width: 100%; + top: 0; + right: 0; + left: 0; + z-index: -1000; + margin: 0px; +} +/* navbar */ +.nav_section .navbar-brand{ + font-size: 22px; +} + +.nav_section .navbar-brand span{ + color:var(--pink-color); +} +.nav_section .navbar-nav li{ + margin:0px 8px; +} +.nav_section .navbar-nav li a{ + font-size: 15px; + color:white !important; +} +.nav_section .navbar-nav .nav-link::before{ + content: ''; + width: 0px; + height:0px; + background-color: white; + position: absolute; + bottom: 7px; + transition: 0.5s; +} +.nav_section .navbar-nav .nav-link:hover::before{ + content: ''; + height: 2px; + width: 17px; + background-color: white; + position: absolute; + bottom: 7px; +} + +.hero_section .row{ + display: flex; + align-items: center; + height: 100vh; +} +.hero_section .row h1,h2,h3,p{ + color: white; +} +.hero_section .row h3{ + font-size: 19px; + font-weight: 300; + margin-bottom: 15px; +} +.hero_section .row h3::after{ +content: ''; +position: absolute; +text-align: center; +top: 10px; +width: 90px; +height: 2px; +background-color: white; +margin-left: 6px; +} +.hero_section .row h1{ + font-size: 65px; + font-weight: 800; +} +.hero_section .row h2{ + font-size: 20px; + font-weight: 100; + margin: 8px 0px; +} +.hero_section .row p{ + font-size: 13px; + margin-top: 13px; + line-height: 21px; + color: var(--secondary-color); +} +.hero_section .row button{ + border-radius: 10px; + font-size: 19px; + color: white; + background-color: var(--pink-color); + border: 3px solid var(--pink-color); + width: 113px; + font-family: 'Poppins',sans-serif; + margin-top: 10px; +} +.hero_section .row button:hover{ + animation: swing; + animation-duration: 00.5s; + background: white; + color: black; + border-color: white; +} +.hero_section .row img{ + width: 60%; + margin-top: 20px; +} + +@media(max-width:1200px) and (min-width:993px){ + .hero_section .row h1{ + font-size: 58px; + } +} +@media(max-width:993px) and (min-width:763px){ + .hero_section .row h1{ + font-size: 42px; + } + .hero_section .row h2{ + font-size: 15px; + } + .hero_section .row p{ + font-size: 11px; + } + .hero_section .row h3{ + font-size: 15px; + } + .hero_section .row button{ + font-size: 15px; + } +} +@media(max-width:763px) and (min-width:500px){ + .hero_section{ + margin:135px 0px ; + } + + .hero_section .row h1{ + font-size: 46px; + text-align: center; + } + .hero_section .row h2{ + font-size: 15px; + text-align: center; + } + .hero_section .row p{ + font-size: 11px; + text-align: center; + } + .hero_section .btn_container{ + justify-content: center; + text-align: center; + margin-bottom: 20px; + } + .hero_section .row h3{ + font-size: 18px; + text-align: center; + margin-bottom:0px; + } + .hero_section .row h3::after{ + width: 0px; + } + .hero_section .btn_container button{ + width: 100px; + height: 43px; + font-size: 15px; + text-align: center; + } + .hero_section img{ + width: 60%; + margin-top: 20px; + } +} + +/*About Section*/ + +.about_section{ + background-color: mediumaquamarine; + padding: 170px 0px; + +} +.about_section #heading{ + font-weight: 600; + font-size: 50px; + letter-spacing: 0.5px; + line-height: 57px; + margin-top: 20px; +} +.about_section .lets_talk{ + color:white; + font-weight: 500; + font-size: 30px; + margin-top: 20px; + +} +.about_section #info_gmail{ + font-weight: 500; + font-size: 20px; + color:var(--background-color); + margin-top: 35px; + word-spacing: 6px; +} +.about_section .contact_info{ + margin-top: 15px; +} +.about_section .contact_info h5{ + margin-top: 15px; + color: white; + font-size: 15px; + font-weight: 400; + word-spacing: 6px; +} +.about_section .about_me_right_section #txt{ + font-size: 15px; + margin-top: 13px; + line-height: 25px; + color:maroon; +} +.about_section .about_me_right_section hr{ + margin: 0px; + border: 0.5px solid black; + width: 8rem; +} +.about_section .about_me_right_section table td{ + border: none; + font-size: 14px; + color: blueviolet; +} +.about_section .about_me_right_section button{ + border-radius: 10px; + font-size: 23px; + color: white; + background-color: var(--pink-color); + border: 3px solid var(--pink-color); + width: 180px; + font-family: 'Poppins',sans-serif; + margin-top: 10px; +} +.about_section .about_me_right_section button:hover{ + animation: swing; + animation-duration: 00.5s; + background: white; + color: black; + border-color: white; +} +@media(max-width:993px) and (min-width:763px){ + .about_section .about_me_right_section #txt{ + font-size: 12px; + } + .about_section #heading{ + font-size: 28px; + } + .about_section .lets_talk{ + font-size: 16px; + } + +} + +/*skill section*/ +.skill_section{ + background-color: rgb(73, 76, 110); + padding: 170px 0px; + +} +.skill_section_left_section{ + display: flex; + flex-direction: column; + justify-content: center; +} +.skill_section #heading{ + font-weight: 600; + font-size: 50px; +} +.skill_section hr{ + border: 0.5px solid var(--pink-color); + width: 8rem; + margin: 12px 0px; +} +.skill_section p{ + color:yellow; + font-size: 18px; +} +.skill_section .social_media_icons .list_group_item{ + border: none; + color:blue; + border-left: 3px solid var(--pink-color); + border-radius: 0px; + margin: 10px 0px; + width: 200px; + background: white; + font-size: 20px; +} +.skill_section .social_media_icons .list_group_item a{ + transition: 00.5s; +} +.skill_section .social_media_icons .list_group_item:hover a{ + margin-left: 10px; +} + +.skill_section_right_section .each_skill{ + margin: 25px 0px; + margin-top: 10px; +} +.skill_section_right_section .each_skill span{ + color: white; + font-size: 15px; +} +.skill_section_right_section .each_skill .progress{ + background-color:white; + border-radius: 100px; + margin-top: 10px; + margin-bottom: 10px; + height: 10px; + +} +.skill_section_right_section .each_skill .progress-bar{ + background-color: var(--pink-color) !important; + color: transparent; +} + +/*portfolio-section*/ + +.portfolio_section{ + padding: 170px 0px; + background: #282A39; +} +.portfolio_section .nav-tabs{ + border: none; + width: 30%; + text-align: center; +} +.portfolio_section .nav-tabs .nav-link.active{ + border: none; + color: var(--pink-color); + border-bottom: 2px solid var(--pink-color) !important; + background: transparent; +} +.portfolio_section .nav-tabs .nav-link.active:hover{ + border-bottom: 2px solid var(--pink-color) !important; +} +.portfolio_section .nav-tabs .nav-link.show .nav-link{ + font-weight: 400; + font-family: 14px; + background: transparent !important; +} +.portfolio_section .nav-tabs .nav-link:hover{ + border: none; +} +.portfolio_section .tab-content .card img{ + border: 2px solid white; +} + +/*Blog Section*/ +.blogs_section{ + background-color: rgb(73, 76, 110); + padding: 170px 0px; +} +.blogs_section .card{ +background: #232432; +} +.blogs_section .card:hover{ + animation: pulse; + animation-duration: 0.5s; +} +.blogs_section .card-body .title{ + font-size: 22px; + font-weight: 500; + +} +.blogs_section .card-body .date{ + font-size: 13px; +} +.blogs_section .card-body .date span{ + color: var(--pink-color); +} +.blogs_section .card-body .txt{ + font-size: 11px; + color: var(--secondary-color); +} +.blogs_section .card-body a{ + color: var(--pink-color); + font-size: 13px; +} + +/*Contact Section*/ +.contact_section{ + padding: 170px 0px; + background: #282A39; +} +.contact_section .heading{ + font-size: 50px; + font-weight: 600; +} +.contact_section hr{ + border: 0.5px solid var(--pink-color); + width: 6rem; + margin: 12px 0px; +} +.contact_section .txt{ +font-size: 15px; +color: var(--secondary-color); +} +.contact_section form .form-control{ + background: var(--bg-color-for-form-input); + border: 2px solid var(--border-color-for-form-input); + border-radius: 0px; + color: white; +} +.contact_section form button{ + background: var(--pink-color); + border: 2px solid var(--pink-color); + color: white; + width: 100px; + font-size: 15px; +} +.contact_section form button:hover{ + animation: swing; + animation-duration: 00.5s; +} +.contact_section ul li{ + color: white; + font-size: 15px; + margin-bottom: 12px; +} +.contact_section ul li .fa{ + color: var(--pink-color); +} +@media(max-width:991px) and (min-width:768px){ + .contact_section .heading{ + font-size: 42px; + } +} + +/*footer section*/ +.footer_section{ + background: #282A39; + border-top: 2px solid var(--border-color-for-form-input); + padding: 40px 0px; +} +.footer_section .navbar-brand{ + font-size: 23px; +} +.footer_section p{ + margin-top: 13px; + color: var(--secondary-color); + font-size: 12px; +} +.footer_section .logo-area .fa{ + color: var(--pink-color); + font-size: 27px !important; + border: 2px solid var(--pink-color); + padding: 5px; + height: 40px; + width: 40px; + display: inline-block; + text-align: center; + justify-content: center; + border-radius: 100%; + margin-right: 5px; +} +.footer_section .logo-area .fa:hover{ + animation: swing; + animation-duration: 1.0s; + background: white; +} +.footer_section .row .columns .heading{ + color: white; + font-weight: 400 !important; + font-size: 21px; +} +.footer_section .list-group .list-group-item{ + margin: 3px 0px; + color: #fff; + transition:0.5s; +} +.footer_section .list-group .list-group-item:hover i{ + padding-right: 10px; +} +.footer_section .list-group .list-group-item i{ + font-size: 13px; + color: var(--pink-color); + transition: 0.5s; +} +@media(max-width:767px) and (min-width:500px){ + .footer_section .links{ + margin-bottom: 30px; + } + .footer_section .row .columns .heading{ + font-size: 17px !important; + } + .footer_section .list-group .list-group-item{ + font-size: 13px; + } + .footer_section .list-group{ + margin-bottom: 30px; + } +} \ No newline at end of file