DEV Community: lindelof

4 awesome javascript projects worthy of your collection

lindelof — Thu, 08 Apr 2021 03:03:37 +0000

I have been staying at home recently, and when facing the computer, I was collecting all kinds of fun things.

I wonder if you have also encountered this kind of time, when you want to find a certain effect or something, but you are at a loss and you can't find it. At this time, you will regret it. If you can usually collect more treasures.

I have carefully selected three awesome items that are worth collecting for you, maybe you can think of it when you need it

1. Awesome Web Effect

https://github.com/lindelof/awesome-web-effect

It's like decorating a beautiful Christmas tree in a room. Sometimes a small web page with cool effects will make your project shine. This is a very fun series, I want to collect those cool effects that are common on the page.

Not limited to any framework (react, vue, angular, etc.), as long as the effect can be simply inserted into the page, you can send it to me, I like them and hope you like them too.

2. Awesome Landing Page

https://github.com/nordicgiant2/awesome-landing-page

A series of beautiful and practical landing page templates. There are a lot of beautiful landing page templates. They are built using various front-end technologies. I hope you like them.

3. Awesome Web VR

https://github.com/wizztjh/awesome-WebVR

A curated list of awesome WebVR packages and resources. WebVR was an experimental JavaScript application programming interface (API) that enabled applications to interact with virtual reality devices, such as the HTC Vive, Oculus Rift, Google Cardboard or Open Source Virtual Reality (OSVR) in a web browser. It was implemented in Firefox and Chromium-based browsers until, before being deprecated and removed. WebVR API was superseded by a more powerful WebXR API that is capable of representing virtual reality and augmented reality devices simultaneously.

4. Awesome web storage

https://github.com/softvar/awesome-web-storage

Everything you need to know about Client-side Storage.Web storage, sometimes known as DOM storage (Document Object Model storage), provides web application software methods and protocols used for storing data in a web browser.

Web storage is being standardized by the World Wide Web Consortium (W3C). It was originally part of the HTML5 specification, but is now in a separate specification.

Conclusions

Thank you very much for your patience to see here, I think you are a crazy geek just like me. I hope you like my column, I will always share useful things to everyone.

2 awesome landing page templates, welcome to use

lindelof — Tue, 06 Apr 2021 02:52:32 +0000

I have been staying at home recently, and when facing the computer, I was collecting all kinds of fun things.

Every web developer wants a beautiful personal homepage. Of course, you may need a fresh resume after graduating, or as a software developer you need a refreshing project homepage.

But it's very troublesome to develop from scratch or find design to inspire you. After all, we really don't have that many resources.

A beautiful landing page

DEMO is here https://wonderfullandingpage.github.io/mylandingpage/

Source is here https://github.com/wonderfullandingpage/mylandingpage.

This is a ReactJS based landing page template, fit for a startup company/service with a one page view.All 'visual' data can be easily modified by changing the data.json file.

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

Technology LandingPage

DEMO is here https://wonderfullandingpage.github.io/Technology-LandingPage/

Source is here https://github.com/wonderfullandingpage/Technology-LandingPage.

This is a beautifully designed template with very simple code and clear structure. You can easily modify it.

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

Thank you so much for your patience after reading this article. If you like these things to collect, I will continue to collect better things to share with you. Wish you a good dream.

3 very popular and wonderful resume page templates

lindelof — Sun, 04 Apr 2021 11:10:41 +0000

I have been staying at home recently, and when facing the computer, I was collecting all kinds of fun things.

Every web developer wants a beautiful resume page. Of course, you may need a fresh resume after graduating, or as a software developer you need a refreshing project homepage.

But it's very troublesome to develop from scratch or find design to inspire you. After all, we really don't have that many resources.

Thankfully, there are 3 ready-made templates here, if you like, you can use.

Exquisite resume

DEMO is here https://wonderfullandingpage.github.io/react-exquisite-resume/#/

Source is here https://github.com/wonderfullandingpage/react-exquisite-resume.

A beautiful personal resume developed based on react. The design is atmospheric, the code is developed based on react and particles-bg, and it has good scalability.

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

React Nice Resume

DEMO is here https://nordicgiant2.github.io/react-nice-resume-page/

Source is here https://github.com/nordicgiant2/react-nice-resume.

This is a beautifully designed template with very simple code and clear structure. You can easily modify it.

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

A beautiful resume page

DEMO is here https://wonderfullandingpage.github.io/mylandingpage/

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

Thank you so much for your patience after reading this article. If you like these things to collect, I will continue to collect better things to share with you. Wish you a good dream.

A lot of useful and wonderful landing page templates

lindelof — Fri, 02 Apr 2021 05:45:27 +0000

awesome-landing-page is A series of beautiful and practical landing page templates.

There are a lot of beautiful landing page templates. They are built using various front-end technologies. I hope you like them.

https://github.com/nordicgiant2/awesome-landing-page

Oh my dear friends, do you often need a beautiful page to decorate your projects? Maybe you are an algorithm engineer or a bridge engineering designer, but I think your open source project always needs a little embellishment. A beautiful homepage will make your github project shine.

Awesome lading page

This project has carefully selected nearly 100 open source landing page templates for you, and dozens of free tutorials. I think it will make you feel extra surprised, thinking that everything you want is here.

Finally

Finally, I want to say that beautiful things are always refreshing. I hope to dedicate them to you, if you like I will continue to recommend more fun things.

6 very interesting and creative javascript libraries

lindelof — Thu, 05 Nov 2020 12:00:24 +0000

I have recently collected several interesting javascript libraries, each of which is particularly creative. Maybe you don't have to use them, but I dare say that when you add these libraries to your project, it will instantly make your project attractive.

1. `react-mouse-particles`

react-mouse-particles is a react mouse particle effect component.

github https://github.com/lindelof/react-mouse-particles

A very fun react library that can be used to create mouse particle effects, which are as cool as meteors or fireballs. I often want to use react to do something fun. Using this component may make your page instantly glorious.

npm install --save react-mouse-particles

import React, { Component } from 'react'

import MouseParticles from 'react-mouse-particles'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <MouseParticles g={1} color="random" cull="col,image-wrapper"/>
      </>
    )
  }
}

2. `particles-bg`

particles-bg is a React particles animation background component.

github https://github.com/lindelof/particles-bg

If you're worrying about your CV or profile not being noticeable, then it's perfect for you. Adding some particle animation to the page will make your website sparkle instantly. Very amazing

npm install --save particles-bg

import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <ParticlesBg type="circle" bg={true} />
      </>
    )
  }
}

3. `particles-bg-vue`

particles-bg-vue is A vue.js particles animation background component.

github https://github.com/lindelof/particles-bg-vue

If you really like the effect above, but it happens that the framework you are using is vue.js. Then don't worry, using this library can also meet your needs.

npm install --save particles-bg-vue

<particles-bg type="lines" :bg="true" />
...

import { ParticlesBg } from "particles-bg-vue";
export default {
  name: "App",
  components: {
    ParticlesBg
  }
};

4. `react-parallax`

A React Component for parallax effect.

github https://github.com/rrutsche/react-parallax

This is a great project that allows you to easily create an interactive website with parallax scrolling. I think you definitely want to have your own mobile homepage, then it is perfect for you.

npm install --save react-parallax

import React from 'react';
import { Parallax, Background } from 'react-parallax';

const MyComponent = () => (
    <div>
        {/* -----basic config-----*/}
        <Parallax
            blur={10}
            bgImage={require('path/to/image.jpg')}
            bgImageAlt="the cat"
            strength={200}
        >
            Put some text content here - even an empty div with fixed dimensions to have a height
            for the parallax.
            <div style={{ height: '200px' }} />
        </Parallax>

        {/* -----dynamic blur-----*/}
        <Parallax
            blur={{ min: -15, max: 15 }}
            bgImage={require('path/to/another/image.jpg')}
            bgImageAlt="the dog"
            strength={-200}
        >
            Blur transition from min to max
            <div style={{ height: '200px' }} />
        </Parallax>

5. `react-shimmer`

React Image Loader component that simulates a shimmer effect.

github https://github.com/gokcan/react-shimmer

A powerful, customisable, <img> component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way.

npm i react-shimmer

6. `react-native-3dcube-navigation`

a great page turning effect

github https://github.com/zehfernandes/react-native-3dcube-navigation

If you want to do something with react native. Then this thing is very good, he may be suitable for you, a great page turning effect.

npm i react-native-3dcube-navigation --save

import { CubeNavigationHorizontal } from 'react-native-3dcube-navigation'

<View style={styles.father} >
  <CubeNavigationHorizontal ref={view => { this.cube = view; }}>
    <View style={[styles.container, { backgroundColor: '#5CDB8B' }]}>
      <Text style={styles.text}>Horizontal Page 1</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#A3F989' }]}>
      <Text style={styles.text}>Horizontal Page 2</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#CBF941' }]}>
      <Text style={styles.text}>Horizontal Page 3</Text>
    </View>
  </CubeNavigationHorizontal>
</View >

Thank you so much for your patience after reading this article. If you like these things to collect, I will continue to collect better things to share with you. Wish you a good dream.

A very useful react particle background component

lindelof — Thu, 05 Nov 2020 11:56:41 +0000

particles-bg

github url: https://github.com/lindelof/particles-bg

A `vue.js` version of `particles-bg-vue` is here https://github.com/lindelof/particles-bg-vue

Online demo

demo1 https://stackblitz.com/edit/react-a6pm3w
demo2 https://stackblitz.com/edit/react-bpv9fc
custom1 https://stackblitz.com/edit/react-sop6sx
custom2 https://stackblitz.com/edit/react-v1ou5e

Install

npm install --save particles-bg

Usage

import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <ParticlesBg type="circle" bg={true} />
      </>
    )
  }
}

Parameter Description

<ParticlesBg color="#ff0000" num={200} type="circle" bg={true} />

* type - Is the type of particle animation

Is the type of particle animation, random is a random selection. You are also free to customize use custom.

"color"
"ball"
"lines"
"thick"
"circle"
"cobweb"
"polygon"
"square"
"tadpole"
"fountain"
"random"
"custom"

* num - The number of particles emitted each time, generally not set

* color - The background color or particle color of the particle scene

Notice: which should be an array under type=color

* bg - Set to html background

Is set the following properties

position: "absolute",
zIndex: -1,
top: 0,
left: 0

About Custom

You can use type="custom" to achieve a higher degree of freedom for the particle background.

  let config = {
      num: [4, 7],
      rps: 0.1,
      radius: [5, 40],
      life: [1.5, 3],
      v: [2, 3],
      tha: [-40, 40],
      // body: "./img/icon.png", // Whether to render pictures
      // rotate: [0, 20],
      alpha: [0.6, 0],
      scale: [1, 0.1],
      position: "center", // all or center or {x:1,y:1,width:100,height:100}
      color: ["random", "#ff0000"],
      cross: "dead", // cross or bround
      random: 15,  // or null,
      g: 5,    // gravity
      // f: [2, -1], // force
      onParticleUpdate: (ctx, particle) => {
          ctx.beginPath();
          ctx.rect(particle.p.x, particle.p.y, particle.radius * 2, particle.radius * 2);
          ctx.fillStyle = particle.color;
          ctx.fill();
          ctx.closePath();
      }
    };

    return (
      <div>
        <SignIn />
        <ParticlesBg type="custom" config={config} bg={true} />
      </div>
    )

Similar projects

Maybe you will like these two projects, they will also make your page flourish

License

https://opensource.org/licenses/MIT

Awesome Web Effect

lindelof — Thu, 30 Jul 2020 04:42:25 +0000

A series of exquisite and compact web page cool effects

https://github.com/lindelof/awesome-web-effect

It's like decorating a beautiful Christmas tree in a room. Sometimes a small web page with cool effects will make your project shine. This is a very fun series, I want to collect those cool effects that are common on the page.

Not limited to any framework (react, vue, angular, etc.), as long as the effect can be simply inserted into the page, you can send it to me, I like them and hope you like them too.

Web Effect

I spent a lot of time collecting these fun effects, and I take care of each one. I think it's okay. You have seen a lot of effects that are worth collecting. You can join us.

Finally

Finally, I want to say that beautiful things are always refreshing. I hope to dedicate them to you, if you like I will continue to recommend more fun things.

Awesome Landing Page

lindelof — Sun, 26 Jul 2020 11:16:36 +0000

awesome-landing-page is A series of beautiful and practical landing page templates.

There are a lot of beautiful landing page templates. They are built using various front-end technologies. I hope you like them.

https://github.com/nordicgiant2/awesome-landing-page

Awesome lading page

Finally

Finally, I want to say that beautiful things are always refreshing. I hope to dedicate them to you, if you like I will continue to recommend more fun things.

5 impressive react components

lindelof — Sun, 26 Jul 2020 11:04:59 +0000

In this fast-growing Internet world, there are many new things every day. Maybe you, like me, are wondering if there are any shortcuts to discover them quickly.

1. `react-mouse-particles`

react-mouse-particles is a react mouse particle effect component.

github https://github.com/lindelof/react-mouse-particles

npm install --save react-mouse-particles

import React, { Component } from 'react'

import MouseParticles from 'react-mouse-particles'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <MouseParticles g={1} color="random" cull="col,image-wrapper"/>
      </>
    )
  }
}

2. `particles-bg`

particles-bg is a React particles animation background component.

github https://github.com/lindelof/particles-bg

If you're worrying about your CV or profile not being noticeable, then it's perfect for you. Adding some particle animation to the page will make your website sparkle instantly. Very amazing

npm install --save particles-bg

import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <ParticlesBg type="circle" bg={true} />
      </>
    )
  }
}

3. `react-parallax`

A React Component for parallax effect.

github https://github.com/rrutsche/react-parallax

This is a great project that allows you to easily create an interactive website with parallax scrolling. I think you definitely want to have your own mobile homepage, then it is perfect for you.

npm install --save react-parallax

import React from 'react';
import { Parallax, Background } from 'react-parallax';

const MyComponent = () => (
    <div>
        {/* -----basic config-----*/}
        <Parallax
            blur={10}
            bgImage={require('path/to/image.jpg')}
            bgImageAlt="the cat"
            strength={200}
        >
            Put some text content here - even an empty div with fixed dimensions to have a height
            for the parallax.
            <div style={{ height: '200px' }} />
        </Parallax>

        {/* -----dynamic blur-----*/}
        <Parallax
            blur={{ min: -15, max: 15 }}
            bgImage={require('path/to/another/image.jpg')}
            bgImageAlt="the dog"
            strength={-200}
        >
            Blur transition from min to max
            <div style={{ height: '200px' }} />
        </Parallax>

4. `react-shimmer`

React Image Loader component that simulates a shimmer effect.

github https://github.com/gokcan/react-shimmer

A powerful, customisable, <img> component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way.

npm i react-shimmer

5. `react-native-3dcube-navigation`

a great page turning effect

github https://github.com/zehfernandes/react-native-3dcube-navigation

If you want to do something with react native. Then this thing is very good, he may be suitable for you, a great page turning effect.

npm i react-native-3dcube-navigation --save

import { CubeNavigationHorizontal } from 'react-native-3dcube-navigation'

<View style={styles.father} >
  <CubeNavigationHorizontal ref={view => { this.cube = view; }}>
    <View style={[styles.container, { backgroundColor: '#5CDB8B' }]}>
      <Text style={styles.text}>Horizontal Page 1</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#A3F989' }]}>
      <Text style={styles.text}>Horizontal Page 2</Text>
    </View>
    <View style={[styles.container, { backgroundColor: '#CBF941' }]}>
      <Text style={styles.text}>Horizontal Page 3</Text>
    </View>
  </CubeNavigationHorizontal>
</View >

Thank you so much for your patience after reading this article. If you like these things to collect, I will continue to collect better things to share with you. Wish you a good dream.

6 very useful react component libraries

lindelof — Sat, 04 Apr 2020 04:18:30 +0000

React is arguably the most popular JavaScript framework now. Every day, a lot of new react component libraries are released. I have collected these useful components, each of them is very useful, I hope you will like it.

1. React Portal Tooltip

Awesome React tooltip

github project url https://github.com/romainberger/react-portal-tooltip

2. react-notifications-component

A delightful, easy to use and highly configurable component to help you notify your users out of the box. No messy setup, just beautiful notifications!

github project url https://github.com/teodosii/react-notifications-component

3. react-native-keyboard-spacer

Plug and play iOS react-native keyboard spacer view.

github project url https://github.com/Andr3wHur5t/react-native-keyboard-spacer

4. React Flip Move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.

github project url https://github.com/joshwcomeau/react-flip-move

5. React-Tags

React-tags is a simple tagging component ready to drop in your React projects. The component is inspired by GMail's To field in the compose window.

github project url https://github.com/prakhar1989/react-tags

6. React Simple Chatbot

A simple chatbot component to create conversation chats.

github project url https://github.com/LucasBassetti/react-simple-chatbot

10 very creative javascript projects on github

lindelof — Thu, 02 Apr 2020 12:04:12 +0000

First of all, thank you all for reading my digests! I try to collect some very creative and fun javascript open source projects. These works are often full of imagination and creativity. I list them, if I missed something interesting — let me know!

1. stack.gl

stackgl is an open software ecosystem for WebGL, built on top of browserify and npm. Inspired by the Unix philosophy, stackgl modules "do one thing, and do it well".

DEMO is here http://stack.gl/

Github URL http://github.com/stackgl

2. Ptsjs

Pts is lightweight and modular. Written in typescript, it comes with many useful algorithms for visualization and creative coding. Its friendly API supports both quick prototyping and bigger projects.

DEMO is here https://ptsjs.org/demo/

Github URL https://github.com/williamngan/pts

3. Proton

Proton is a lightweight and powerful Javascript particle animation library. Use it to easily create a variety of cool particle effects.

DEMO is here https://drawcall.github.io/Proton/

Github URL https://github.com/drawcall/Proton

4. Sessions

This project consists of individual sessions of WebGL programming, with the goal of creating some kind of output. The code itself is licensed under MIT, but the designs of the individual sessions are released under Creative Commons Attribution Non-Commercial license.

DEMO is here http://sessions.gregtatum.com/

Github URL https://github.com/gregtatum/sessions

5. WebGLStudio

WebGLStudio.js is an open-source, browser-based 3D graphics suite. You can edit scenes and materials, design effects and shaders, code behaviours, and share your work - all within a browser using standard web technologies.

DEMO is here https://webglstudio.org/

Github URL https://github.com/jagenjo/webglstudio.js

6. ShaderParticleEngine

A GLSL-heavy particle engine for THREE.js. Originally based on Stemkoski's great particle engine. The purpose of this library is to make creating particle effects using THREE.js and WebGL as simple as possible. The heavy-lifting is done by the GPU, freeing up CPU cycles.

DEMO is here http://squarefeet.github.io/ShaderParticleEngine/

Github URL https://github.com/squarefeet/ShaderParticleEngine

7. Flat Surface Shader

Simple, lightweight Flat Surface Shader written in JavaScript for rendering lit Triangles to a number of contexts. Currently there is support for WebGL, Canvas 2D and SVG. Check out this demo to see it in action.

DEMO is here http://matthew.wagerfield.com/flat-surface-shader/

Github URL https://github.com/wagerfield/flat-surface-shader

8. A-Frame

A web framework for building virtual reality experiences
Make WebVR with HTML and Entity-Component. Works on Vive, Rift, Daydream, GearVR, desktop.

DEMO is here https://aframe.io/

Github URL https://github.com/aframevr/aframe

9. Pex

PEX is a collection of JavaScript modules the combination of which becomes a powerful 3D graphics library for the desktop and the web. This repository is currently DEPRECATED.

DEMO is here https://github.com/pex-gl/pex

Github URL https://github.com/pex-gl/pex

10. Twgl

A WebGL Framework for Data Visualization, Creative Coding and Game Development.This library's sole purpose is to make using the WebGL API less verbose.

DEMO is here http://twgljs.org/#examples

Github URL https://github.com/greggman/twgl.js

Thank you so much for your patience after reading this article. If you like these things to collect, I will continue to collect better things to share with you. Wish you a good dream.

A great css input and textarea input effect

lindelof — Fri, 27 Dec 2019 05:31:37 +0000

Do you like Visual Studio Code as much as I do? It is really great with it.

One day, a good friend of mine recommended me a Visual Studio Code plugin called Power Mode. At first I didn't care, but later I accidentally installed it. Oh its effect is probably like this.

See it, suddenly I found it really fun. I think this must be the work of some boring genius. So I wonder if I can use CSS to simulate this effect.

So PowerModeInput was born.

PowerModeInput

https://github.com/lindelof/power-mode-input

PowerModeInput can make your text input box more compelling

Online demo

demo https://codesandbox.io/s/power-mode-input-y39l6

Useage

Install

npm install --save power-mode-input

Usage

import PowerModeInput from "power-mode-input";

const input = document.getElementById("obinput");
PowerModeInput.make(input);

// close PowerModeInput
PowerModeInput.close(input);

// destroy PowerModeInput
PowerModeInput.destroy();

// another usage
PowerModeInput.make(".phone", {
  height: 5,
  tha: [0, 360],
  g: 0.5,
  num: 5,
  radius: 6,
  circle: true,
  alpha: [0.75, 0.1],
  color: "random"
});

If you are in `react`, you can use it like this

componentDidMount(){
  PowerModeInput.make(this.inputRef.current);
}

You can use it like this in `vue.js`

mounted() {
  PowerModeInput.make(this.$refs.inputRef);
}

Of course this can be done in `angular`

const inputElement = this.elementRef.nativeElement.querySelector('input');
PowerModeInput.make(inputElement);

Parameter Description

PowerModeInput.make(input, {
  height: 5,
  tha: [0, 360],
  g: 0.5,
  num: 5,
  ... // Parameter
});

key	describe	type	example
`g`	Whether to add gravity	number	`1`
`num`	The number of particles emitted each time	number	`3`
`radius`	The radius of every particle	number	`10`
`alpha`	The alpha of every particle	number	`.1`
`tha`	The Particle emitter angle	array	`[0, 360]`
`v`	The Particle emitter Particle velocity	number	`0.5`
`life`	The life of every particle	number	`1.2`
`color`	Particle color	array or string	`#ffcccc`
`random`	Random force	number	`1.2`
`y`	Particle emitter height	number	`2`
`height`	Particle emitter height Ibid	number	`2`

Develop process

Of course, the development process is not easy. At first I thought it was very easy to get the input box cursor. Well, I found out that I was wrong. I checked a lot of articles to find a good way. In the end, I had a hard time finishing it.

If you don’t dislike it, I also want to recommend another good library. https://github.com/lindelof/react-mouse-particles. Because most of the code for power-mode-input comes from this.

I bet anyone can use it because it is very simple. If you like this project welcome star it

DEV Community: lindelof

4 awesome javascript projects worthy of your collection

I have been staying at home recently, and when facing the computer, I was collecting all kinds of fun things.

1. Awesome Web Effect

https://github.com/lindelof/awesome-web-effect

2. Awesome Landing Page

https://github.com/nordicgiant2/awesome-landing-page

3. Awesome Web VR

https://github.com/wizztjh/awesome-WebVR

4. Awesome web storage

https://github.com/softvar/awesome-web-storage

Conclusions

2 awesome landing page templates, welcome to use

I have been staying at home recently, and when facing the computer, I was collecting all kinds of fun things.

A beautiful landing page

DEMO is here https://wonderfullandingpage.github.io/mylandingpage/

Technology LandingPage

DEMO is here https://wonderfullandingpage.github.io/Technology-LandingPage/

3 very popular and wonderful resume page templates

I have been staying at home recently, and when facing the computer, I was collecting all kinds of fun things.

Exquisite resume

DEMO is here https://wonderfullandingpage.github.io/react-exquisite-resume/#/

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

React Nice Resume

DEMO is here https://nordicgiant2.github.io/react-nice-resume-page/

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

A beautiful resume page

DEMO is here https://wonderfullandingpage.github.io/mylandingpage/

This project uses the react particle background component library https://github.com/lindelof/particles-bg. It's very simple. Anyone can be a Musketeer with it.

A lot of useful and wonderful landing page templates

There are a lot of beautiful landing page templates. They are built using various front-end technologies. I hope you like them.

https://github.com/nordicgiant2/awesome-landing-page

Awesome lading page

Finally

6 very interesting and creative javascript libraries

1. react-mouse-particles

github https://github.com/lindelof/react-mouse-particles

2. particles-bg

github https://github.com/lindelof/particles-bg

3. particles-bg-vue

github https://github.com/lindelof/particles-bg-vue

4. react-parallax

github https://github.com/rrutsche/react-parallax

5. react-shimmer

github https://github.com/gokcan/react-shimmer

6. react-native-3dcube-navigation

github https://github.com/zehfernandes/react-native-3dcube-navigation

A very useful react particle background component

particles-bg

A vue.js version of particles-bg-vue is here https://github.com/lindelof/particles-bg-vue

Online demo

Install

Usage

Parameter Description

* type - Is the type of particle animation

* num - The number of particles emitted each time, generally not set

* color - The background color or particle color of the particle scene

* bg - Set to html background

About Custom

Similar projects

License

Awesome Web Effect

https://github.com/lindelof/awesome-web-effect

It's like decorating a beautiful Christmas tree in a room. Sometimes a small web page with cool effects will make your project shine. This is a very fun series, I want to collect those cool effects that are common on the page.

Web Effect

Finally

Awesome Landing Page

There are a lot of beautiful landing page templates. They are built using various front-end technologies. I hope you like them.

https://github.com/nordicgiant2/awesome-landing-page

Awesome lading page

Finally

5 impressive react components

1. react-mouse-particles

github https://github.com/lindelof/react-mouse-particles

2. particles-bg

github https://github.com/lindelof/particles-bg

3. react-parallax

github https://github.com/rrutsche/react-parallax

4. react-shimmer

github https://github.com/gokcan/react-shimmer

1. `react-mouse-particles`

2. `particles-bg`

3. `particles-bg-vue`

4. `react-parallax`

5. `react-shimmer`

6. `react-native-3dcube-navigation`

A `vue.js` version of `particles-bg-vue` is here https://github.com/lindelof/particles-bg-vue

1. `react-mouse-particles`

2. `particles-bg`

3. `react-parallax`

4. `react-shimmer`

5. `react-native-3dcube-navigation`

If you are in `react`, you can use it like this

You can use it like this in `vue.js`

Of course this can be done in `angular`