<script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>


<div class="content--canvas" id="canvas-container"></div>

<section class="hero">
<h1>
  Transform Your Ideas into Reality with AI-Powered Solutions
</h1>
  <a href="https://sohrabzia.github.io/" target="_blank">
SOHARAB ZIA</a>
  </section>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
  margin: 0;
  background: #000; /* Optional: background color */
}

.content--canvas {
    position: absolute; 
  top:0;
    z-index:1;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
}
canvas {
    display: block; 

}


.hero {
  z-index:2;
  width: 600px;
  color: #fff;
  text-align: center;
  line-height:42px;
  pointer-events: none;
}
.hero h1{
   -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none;
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  pointer-events:none;
}
.hero a {
    font-family: "Orbitron", sans-serif;
pointer-events: auto;
  text-decoration: none;
  border: 1px solid #fff;
  padding: 0px 20px;
  border-radius: 100px;
  color: #fff;
  margin-top: 20px;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  transition:all 0.3s ease;
}

.hero a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  letter-spacing:2px;
  cursor:pointer;
}
@media (max-width: 768px) {
  .hero {
    width: 90%;
  }
  .hero h1{
    font-size:20px;
    line-height:30px;
    
    }
}

'use strict';

const config = {
    particleCount: 100,
    particlePropCount: 9,
    baseTTL: 1,
    rangeTTL: 2,
    baseSpeed: 0.001,
    rangeSpeed: 0.002,
    circularSpeed: 0.001,
    baseRadius: 2,
    rangeRadius: 3,
    baseHue: 220,
    rangeHue: 120,
    backgroundColor: '#111827',
    circleRadius: 250,
    glowStrength: 10,
    randomnessFactor: 4,
    trailLength: 10.2,
    mouseForce: 2,            // Increased mouse attraction force
    mouseRadius: 200          // Radius of mouse influence
};

let container, canvas, ctx, tick = 0, particleProps;
let mouseX = 0, mouseY = 0, isMouseOnCanvas = false;
const TAU = Math.PI * 2;

function setup() {
    createCanvas();
    resize();
    initParticles();
    draw();
}

function initParticles() {
    particleProps = new Float32Array(config.particleCount * config.particlePropCount);
    const angleIncrement = TAU / config.particleCount;

    for (let i = 0; i < config.particleCount; i++) {
        initParticle(i * config.particlePropCount, i * angleIncrement);
    }
}

function initParticle(i, angleOffset) {
    const radius = config.baseRadius + rand(config.rangeRadius);
    const hue = config.baseHue + rand(config.rangeHue);
    
    particleProps.set([
        Math.cos(angleOffset) * config.circleRadius + canvas.a.width / 2,
        Math.sin(angleOffset) * config.circleRadius + canvas.a.height / 2,
        0, 0, 0,
        config.baseTTL + rand(config.rangeTTL),
        config.baseSpeed + rand(config.rangeSpeed),
        radius, hue
    ], i);
}

function drawParticles() {
    const centerX = canvas.a.width / 2;
    const centerY = canvas.a.height / 2;

    for (let i = 0; i < config.particleCount * config.particlePropCount; i += config.particlePropCount) {
        updateParticle(i, centerX, centerY);
    }
}

function updateParticle(i, centerX, centerY) {
    const angle = tick * config.circularSpeed + (i / config.particlePropCount) * TAU / config.particleCount;
    const scatterX = Math.sin(tick * 0.05 + i) * 10 * config.randomnessFactor;
    const scatterY = Math.cos(tick * 0.05 + i) * 10 * config.randomnessFactor;

    // Calculate the default circular position
    let x = Math.cos(angle) * config.circleRadius + centerX + scatterX;
    let y = Math.sin(angle) * config.circleRadius + centerY + scatterY;

    // Apply mouse interaction if mouse is on canvas
    if (isMouseOnCanvas) {
        const dx = mouseX - x;
        const dy = mouseY - y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        
        if (distance < config.mouseRadius) {
            const force = (1 - distance / config.mouseRadius) * config.mouseForce;
            x += dx * force;
            y += dy * force;
        }
    }

    // Update particle position
    particleProps[i] = x;
    particleProps[i + 1] = y;

    // Draw the particle
    drawParticle(x, y, particleProps[i + 7], particleProps[i + 8]);
}

function drawParticle(x, y, radius, hue) {
    ctx.a.save();
    ctx.a.fillStyle = `hsla(${hue},100%,60%,${config.trailLength})`;
    ctx.a.beginPath();
    ctx.a.arc(x, y, radius, 0, TAU);
    ctx.a.fill();
    ctx.a.restore();
}

function createCanvas() {
    container = document.querySelector('.content--canvas');
    canvas = { a: document.createElement('canvas'), b: document.createElement('canvas') };
    ctx = { a: canvas.a.getContext('2d'), b: canvas.b.getContext('2d') };
    container.appendChild(canvas.a);
    container.appendChild(canvas.b);
    canvas.a.style.position = 'absolute';
    canvas.a.style.top = 0;
    canvas.a.style.left = 0;

    canvas.a.addEventListener('mousemove', mouseHandler);
    canvas.a.addEventListener('mouseenter', () => {
        isMouseOnCanvas = true;
    });
    canvas.a.addEventListener('mouseleave', () => {
        isMouseOnCanvas = false;
    });
}

function mouseHandler(e) {
    [mouseX, mouseY] = [e.clientX, e.clientY];
}

function resize() {
    const { innerWidth, innerHeight } = window;
    [canvas.a.width, canvas.a.height] = [innerWidth, innerHeight];
    [canvas.b.width, canvas.b.height] = [innerWidth, innerHeight];
    ctx.a.clearRect(0, 0, innerWidth, innerHeight);
    ctx.b.clearRect(0, 0, innerWidth, innerHeight);
}

function renderGlow() {
    const blur1 = `blur(${config.glowStrength}px) brightness(200%)`;
    const blur2 = `blur(${config.glowStrength / 2}px) brightness(200%)`;
    
    ctx.b.save();
    ctx.b.filter = blur1;
    ctx.b.globalCompositeOperation = 'lighter';
    ctx.b.drawImage(canvas.a, 0, 0);
    ctx.b.restore();

    ctx.b.save();
    ctx.b.filter = blur2;
    ctx.b.globalCompositeOperation = 'lighter';
    ctx.b.drawImage(canvas.a, 0, 0);
    ctx.b.restore();
}

function renderToScreen() {
    ctx.b.save();
    ctx.b.globalCompositeOperation = 'lighter';
    ctx.b.drawImage(canvas.a, 0, 0);
    ctx.b.restore();
}

function draw() {
    tick++;
    ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);
    ctx.b.fillStyle = config.backgroundColor;
    ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);

    drawParticles();
    renderGlow();
    renderToScreen();
    requestAnimationFrame(draw);
}

window.addEventListener('load', setup);
window.addEventListener('resize', resize);

function rand(n) {
    return Math.random() * n;
}