I'll preface by highlighting that I am not a webdev, so I could have my entire setup wrong.
With this current code, the particles cover all the other elements, and I'd like to get it behind the rest of the elements and only show as a background.
import Image from 'next/image'
import{AiFillLinkedin, AiFillGithub} from 'react-icons/ai'
import deved from "../public/dev-ed-wave.png";
import code from "../public/code.png";
import design from "../public/design.png";
import ParticleBackground from './components/particle';
export default function Page() {
return (
<div>
<div>
<>
<ParticleBackground/>
</>
</div>
<head>
<title>Portfolio</title>
<meta name="description" content='Blank'></meta>
<link rel='icon' href='/icon.ico' type='image/x-icon'/>
</head>
<main className='bg-white px-10 dark:bg-black md:px-20 lg:px-40, z-2'>
<section className='min-h-screen'>
<nav className='py-10 mb-12 flex justify-between'>
<h1 className='text-xl'>madebye :)</h1>
<ul className='flex items-center'>
<li><a className='text-white px-4 py-2 rounded-md ml-8 border-solid border-2 border-purple-400' href=''>Resume</a></li>
</ul>
</nav>
<div className='text-center p-10'>
<h2 className='text-5xl py-2 text-purple-400 font-medium'>Evan Quah</h2>
<h3 className='text-2xl py-2'>
System Administrator and Security Student
</h3>
<p className='text-medium py-5 leading-8 md:text-xl max-w-xl mx-auto'>
blah blah blah fix later
</p>
</div>
<div className='text-5xl flex justify-center gap-16 py-3'>
<a href=''>
<AiFillGithub />
</a>
<a href=''>
<AiFillLinkedin />
</a>
</div>
<div className='derrelative mx-auto bg-gradient-to-b from text-teal-500 rounded-full w-80 h-80 mt-20 overflow-hidden md:h-96 md:w-96'>
<Image src={deved} />
</div>
</section>
<section>
<div>
<h3 className='text-3xl py-1'>Who I am</h3>
<p className='text-medium py-5 leading-8'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div className='lg: gap-10'>
<div className='text-center shadow-lg p-10 rounded-xl my-10 border-solid border-2 border-purple-400'>
<div className='flex justify-center items-center'>
<Image src={design} width={100} height={100} />
</div>
<h3 className='text-lg font-medium pt-8 pb-2'>
Home Lab
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h4 className='py-4 text-purple-400'> Tools I use</h4>
<p className='text-gray-200 py-1'>Linux</p>
<p className='text-gray-200 py-1'>Docker</p>
<p className='text-gray-200 py-1'>Azure</p>
</div>
<div className='lg: gap-10'>
<div className='text-center shadow-lg p-10 rounded-xl my-10 border-solid border-2 border-purple-400'>
<div className='flex justify-center items-center'>
<Image src={design} width={100} height={100} />
</div>
<h3 className='text-lg font-medium pt-8 pb-2'>
Things I make
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h4 className='py-4 text-purple-400'> Tools I use</h4>
<p className='text-gray-200 py-1'>Nmap</p>
<p className='text-gray-200 py-1'>Wireshark</p>
<p className='text-gray-200 py-1'>Azure</p>
</div>
</div>
<div className='lg: gap-10'>
<div className='text-center shadow-lg p-10 rounded-xl my-10 border-solid border-2 border-purple-400'>
<div className='flex justify-center items-center'>
<Image src={design} width={100} height={100} />
</div>
<h3 className='text-lg font-medium pt-8 pb-2'>
Things I make
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h4 className='py-4 text-purple-400'> Tools I use</h4>
<p className='text-gray-200 py-1'>Nmap</p>
<p className='text-gray-200 py-1'>Wireshark</p>
<p className='text-gray-200 py-1'>Azure</p>
</div>
</div>
</div>
</section>
<section>
<div>
<h3 className='text 3xl py-1'>Portfolio</h3>
<p className='text-medium py-5 leading-8'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<span className="text-purple-400"> agencies </span>
consulted for <span className="text-purple-400">startups </span>
and collaborated with talanted people to create digital products
for both business and consumer use.
</p>
</div>
</section>
</main>
</div>
)
}
Here is my particle.jsx file as well:
'use client'
import React from 'react';
import { useCallback } from 'react';
import { loadFull } from 'tsparticles';
import Particles from 'react-tsparticles';
const ParticleBackground = () => {
const particlesInit = useCallback(async (engine) => {
console.log(engine);
// you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
await console.log(container);
}, []);
return (
<div id='particle-background'>
<Particles
id='tsparticles'
particlesLoaded='particlesLoaded'
init={particlesInit}
loaded={particlesLoaded}
options={
{background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
}}
height='100vh'
width='100vw'
z-index='1'
></Particles>
</div>
);
};
export default ParticleBackground;
I am trying to get a website with tsParticles in the background, and the rest of the site elements in the front. Right now I am only able to get one or the other. If I remove the "ParticlesBackground" tag then the rest of the site will show, but if I leave it in it covers the rest of the page. Anyone know how I might fix this? I'm using NextJs and TailwindCSS.
UPDATE: Added the relative class to the outer div to establish a positioning context and Applied the z-10 class to the main element to ensure it has a higher z-index than the ParticleBackground.
export default function Page() {
return (
<div className="relative">
<ParticleBackground />
<head>
<title>Portfolio</title>
<meta name="description" content="Blank"></meta>
<link rel="icon" href="/icon.ico" type="image/x-icon" />
</head>
<main className="md:px-20 lg:px-40 relative z-10">
Problem :
Cause :
Solution :
Update your code in
ParticleBackgroundcomponent:to
then
to
Add this to
options: in<Particles>above background key :Change this from :
to
Also in your Page :
Change this :
to (place this below head tag)
Place the main tag in component. Now you will not need that relative class.
Please Read :