Libraries & Tools Used — Mayank Basena

Lightweight 3D engine for WebGL. Used to create the animated 3D particle globe, floating geometry, and real-time background effects on the hero section.

WebGL GPU Shaders 3D Rendering

Basic 3D Scene Setup

Create a scene, camera, renderer, and add a rotating cube. This is the foundation of any Three.js project — the same pattern used for the portfolio's 3D hero background.

Particle System

Thousands of floating particles with BufferGeometry. Each particle has its own position and velocity. This is exactly how the hero globe particles work — random positions in a sphere, rendered as points.

Render Loop with GSAP

The render loop drives all 3D animations. Combined with GSAP for smooth camera movements and ScrollTrigger for scroll-based transitions.

JavaScript

import * as THREE from 'three';

// 1. Create scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 2. Add geometry + material
const geo = new THREE.BoxGeometry(1, 1, 1);
const mat = new THREE.MeshStandardMaterial({
  color: 0x6C63FF,
  wireframe: true
});
const cube = new THREE.Mesh(geo, mat);
scene.add(cube);

// 3. Position camera
camera.position.z = 3;

// 4. Add light
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(2, 2, 2);
scene.add(light);

// 5. Render loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

JavaScript

const COUNT = 5000;
const positions = new Float32Array(COUNT * 3);

for (let i = 0; i < COUNT * 3; i += 3) {
  // Random position in a sphere
  const r = 5 * Math.cbrt(Math.random());
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(Math.random() * 2 - 1);

  positions[i]     = r * Math.sin(phi) * Math.cos(theta);
  positions[i + 1] = r * Math.sin(phi) * Math.sin(theta);
  positions[i + 2] = r * Math.cos(phi);
}

const geo = new THREE.BufferGeometry();
geo.setAttribute('position',
  new THREE.BufferAttribute(positions, 3)
);

const mat = new THREE.PointsMaterial({
  size: 0.02,
  color: 0x6C63FF,
  transparent: true,
  blending: THREE.AdditiveBlending
});

const points = new THREE.Points(geo, mat);
scene.add(points);

JavaScript

// Combine Three.js with GSAP for smooth animations
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Camera orbit on scroll
gsap.to(camera.position, {
  z: 8,
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: 1
  }
});

// Render loop
function animate() {
  requestAnimationFrame(animate);

  // Auto-rotate particles
  points.rotation.y += 0.001;
  points.rotation.x += 0.0005;

  // Mouse follow (subtle)
  points.rotation.x += (mouseY * 0.0001 - points.rotation.x) * 0.05;
  points.rotation.y += (mouseX * 0.0001 - points.rotation.y) * 0.05;

  renderer.render(scene, camera);
}

GreenSock Animation Platform. Powers every scroll-triggered reveal, staggered entrance, morphing transition, and smooth interpolation across all pages. ScrollTrigger handles scroll-linked animations.

ScrollTrigger Timeline Easing Stagger

Scroll-Triggered Reveal

Elements fade in and slide up as you scroll to them. The once: true option means they only animate once. Used for every section on the portfolio.

Staggered Card Entrance

Multiple elements animate in sequence with a delay between each. The stagger property controls timing. Used for skill cards, project cards, and repo grids.

Magnetic Button Effect

Buttons follow the mouse cursor within a radius, creating a magnetic pull. On mouse leave, they snap back with elastic easing. The portfolio's CTA buttons use this.

Sequenced Timeline

Chain multiple animations into a precise sequence with labels and offsets. The hero text entrance uses this — words appear one by one with overlapping timing.

JavaScript

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

// Reveal .section on scroll
gsap.from('.section', {
  opacity: 0,
  y: 60,
  duration: 1,
  ease: 'power3.out',
  scrollTrigger: {
    trigger: '.section',
    start: 'top 85%',
    once: true
  }
});

// Parallax scroll effect
gsap.to('.hero-bg', {
  y: 100,
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: 1
  }
});

JavaScript

// Animate cards one by one
gsap.from('.card', {
  opacity: 0,
  y: 40,
  duration: 0.6,
  stagger: 0.1,  // 100ms between each
  ease: 'power2.out',
  scrollTrigger: {
    trigger: '.card-grid',
    start: 'top 80%'
  }
});

// Or from an array of elements
const items = document.querySelectorAll('.skill-item');
gsap.from(items, {
  opacity: 0,
  scale: 0.8,
  duration: 0.5,
  stagger: {
    each: 0.08,
    from: 'center'  // animate from center outward
  }
});

JavaScript

// Magnetic button — follows cursor within radius
const btn = document.querySelector('.magnetic-btn');
const radius = 0.4;  // max pixel offset

btn.addEventListener('mousemove', (e) => {
  const rect = btn.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;

  gsap.to(btn, {
    x: x * radius,
    y: y * radius,
    duration: 0.3,
    ease: 'power2.out'
  });
});

btn.addEventListener('mouseleave', () => {
  gsap.to(btn, {
    x: 0,
    y: 0,
    duration: 0.5,
    ease: 'elastic.out(1, 0.3)'
  });
});

JavaScript

// Hero entrance timeline
const tl = gsap.timeline({ delay: 1.8 });

tl
  .to('.hero-label', {
    opacity: 1,
    duration: 0.6
  }, 0)  // start at 0s
  .to('.hero-word', {
    y: 0,
    duration: 1,
    stagger: 0.15,
    ease: 'power3.out'
  }, 0.2)  // overlap at 0.2s
  .to('.hero-sub', {
    opacity: 1,
    y: 0,
    duration: 0.8
  }, 0.6)
  .to('.hero-cta', {
    opacity: 1,
    y: 0,
    duration: 0.6
  }, 0.9);

Scroll Reveal

Stagger A

Stagger B

Stagger C

butter-smooth scroll library by Darkroom Engineering. Replaces native scroll with inertia-based scrolling that feels like native iOS. Integrates with GSAP ScrollTrigger for synced animations.

Inertia 60fps Scroll Sync

Lenis Initialization

Initialize Lenis with duration and easing options. The requestAnimationFrame loop keeps it synced with the browser's repaint cycle.

JavaScript

import Lenis from 'lenis';

// Create Lenis instance
const lenis = new Lenis({
  duration: 1.2,        // scroll duration (seconds)
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  orientation: 'vertical',
  smoothWheel: true
});

// Sync with rAF
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);

// Scroll to section on link click
document.querySelector('a[href="#work"]').addEventListener('click', () => {
  lenis.scrollTo('#work', { offset: -50 });
});

JavaScript

import Lenis from 'lenis';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

const lenis = new Lenis({
  duration: 1.2,
  smoothWheel: true
});

// Tell GSAP about Lenis
lenis.on('scroll', ScrollTrigger.update);

// Sync rAF with GSAP ticker
gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

Scroll down with inertia

Butter smooth scrolling

60fps native feel

GSAP ScrollTrigger synced

End of demo

The backend is written in pure Go — no framework, no dependencies beyond the database driver. Handles API routes, SQLite CRUD, static file serving, and contact form storage.

net/http SQLite REST API Docker

Go HTTP Server

The entire backend starts in main() — opens the database, creates tables, registers routes, and listens on port 8080. Zero external frameworks, just net/http.

JSON API Handler

Every handler follows the same pattern: parse request, query database, marshal to JSON, write response. CORS headers allow the frontend to call the API from any origin.

SQLite Database Operations

Uses modernc.org/sqlite — a pure Go SQLite implementation with zero CGO. All data (projects, skills, contacts, config) stored in a single data.db file.

Go

package main

import (
    "database/sql"
    "log"
    "net/http"
    _ "modernc.org/sqlite"
)

func main() {
    // Open SQLite database
    db, err := sql.Open("sqlite", "data/data.db")
    if err != nil {
        log.Fatal(err)
    }
    defer db.Close()

    // Create tables
    createTables(db)

    // Register routes
    mux := http.NewServeMux()
    mux.HandleFunc("/api/portfolio", handlePortfolio(db))
    mux.HandleFunc("/api/projects", handleProjects(db))
    mux.HandleFunc("/api/skills", handleSkills(db))
    mux.HandleFunc("/api/contact", handleContact(db))
    mux.HandleFunc("/api/config", handleConfig(db))

    // Static files + start server
    fs := http.FileServer(http.Dir("."))
    mux.Handle("/", fs)
    log.Println("Server running on :8080")
    log.Fatal(http.ListenAndServe(":8080", cors(mux)))
}

Go

func handleProjects(db *sql.DB) http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        // CORS headers
        w.Header().Set("Access-Control-Allow-Origin", "*")
        w.Header().Set("Content-Type", "application/json")

        switch r.Method {
        case "GET":
            rows, _ := db.Query(`SELECT id, name, description, tags, image
                FROM projects ORDER BY id DESC`)
            defer rows.Close()

            var projects []Project
            for rows.Next() {
                var p Project
                rows.Scan(&p.ID, &p.Name, &p.Description,
                    &p.Tags, &p.Image)
                projects = append(projects, p)
            }
            json.NewEncoder(w).Encode(projects)

        case "POST":
            var p Project
            json.NewDecoder(r.Body).Decode(&p)
            db.Exec(`INSERT INTO projects (name, description, tags, image)
                VALUES (?, ?, ?, ?)`,
                p.Name, p.Description, p.Tags, p.Image)
            json.NewEncoder(w).Encode(map[string]string{"status": "ok"})
        }
    }
}

Go

func createTables(db *sql.DB) {
    queries := []string{
        `CREATE TABLE IF NOT EXISTS projects (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT, description TEXT,
            tags TEXT, image TEXT
        )`,
        `CREATE TABLE IF NOT EXISTS skills (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT, category TEXT, level INTEGER
        )`,
        `CREATE TABLE IF NOT EXISTS contacts (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT, email TEXT, message TEXT,
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP
        )`,
        `CREATE TABLE IF NOT EXISTS config (
            key TEXT PRIMARY KEY,
            value TEXT
        )`,
    }
    for _, q := range queries {
        db.Exec(q)
    }
}

$ go run main.go

2025/01/01 12:00:00 Server running on :8080

$ curl localhost:8080/api/projects

[{"id":1,"name":"GitViz","description":"GitHub analytics dashboard"}]

$

Multi-stage Docker build: compile Go in golang:1.21-alpine, run in alpine:3.19. Final image is ~15MB. Used for Render deployment with persistent SQLite volume.

Multi-stage Alpine Render

Multi-stage Dockerfile

Stage 1 compiles Go binary. Stage 2 copies binary into minimal Alpine image. CGO_ENABLED=0 ensures static binary (pure Go SQLite needs no C compiler).

Dockerfile

# Stage 1: Build
FROM golang:1.21-alpine AS builder
WORKDIR /app
COPY backend/ .
RUN CGO_ENABLED=0 go build -o server .

# Stage 2: Run
FROM alpine:3.19
RUN apk add --no-cache ca-certificates
WORKDIR /app
COPY --from=builder /app/server .
COPY index.html repos.html story.html ./
COPY css/ css/
COPY js/ js/
COPY admin/ admin/
COPY data/ data/
RUN mkdir -p data

EXPOSE 8080
CMD ["./server"]

YAML

# render.yaml
services:
  - type: web
    name: mayank-portfolio
    runtime: docker
    dockerfilePath: ./Dockerfile
    envVars:
      - key: PORT
        value: 8080
    disk:
      name: data
      mountPath: /app/data
      sizeGB: 1

$ docker build -t portfolio .

Zero React, zero frameworks. Pure ES modules, fetch API, Web Animations API, IntersectionObserver, and modern DOM APIs. Every interaction is hand-written.

ES Modules Fetch API Web APIs No Build Step

GitHub API with Fetch

Paginated fetch loop that loads ALL repos across multiple API calls. Handles errors, parses JSON, and concatenates results.

Lazy Loading with IntersectionObserver

Watch elements enter the viewport and trigger animations only when visible. More performant than scroll event listeners.

Debounce Search Input

Prevents API calls on every keystroke. Only fires after the user stops typing for 200ms. Essential for search performance.

JavaScript

// Paginated fetch — gets ALL repos
async function fetchAllRepos(user) {
  let page = 1, all = [];
  while (true) {
    const res = await fetch(
      `https://api.github.com/users/${user}/repos` +
      `?per_page=100&page=${page}&type=owner`
    );
    if (!res.ok) throw new Error(res.statusText);
    const data = await res.json();
    if (data.length === 0) break;
    all = all.concat(data);
    if (data.length < 100) break;
    page++;
  }
  return all;
}

JavaScript

// Observe elements, animate when visible
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.1 }
);

// Watch all cards
document.querySelectorAll('.card').forEach(el => {
  observer.observe(el);
});

JavaScript

// Debounce utility
function debounce(fn, delay = 200) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// Usage: search input
const search = document.getElementById('search');
search.addEventListener('input',
  debounce((e) => {
    filterRepos(e.target.value);
  }, 200)
);

Waiting for input...

Card 1 - Scroll into view

Card 2 - Animate on enter

Card 3 - Unobserve after

Dynamic theming with CSS variables. The entire color palette, fonts, spacing, and animations are defined as custom properties on :root. Supports dark/light mode toggling.

Variables Theming Gradients Grid/Flex

Theme System

Every color, font, and spacing value is a CSS variable. Change one value and the entire theme updates. Used for the dark/cyber aesthetic.

CSS

:root {
  /* Colors */
  --bg: #0a0a0f;
  --bg2: #12121a;
  --surface: #1a1a24;
  --text: #e8e8f0;
  --text-2: #a0a0b0;
  --text-3: #606070;
  --accent: #6C63FF;
  --accent-glow: rgba(108,99,255,0.3);
  --border: #222233;

  /* Fonts */
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --section-pad: 7rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Usage */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-body);
}

CSS

/* Animated gradient border */
.gradient-border {
  position: relative;
  border: none;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg,
    var(--accent), #00f5d4, var(--accent));
  border-radius: inherit;
  z-index: -1;
  animation: rotate-gradient 3s linear infinite;
}
@keyframes rotate-gradient {
  100% { filter: hue-rotate(360deg); }
}

Preview Box

Preview Text

Space Grotesk for headings — geometric, modern. JetBrains Mono for code blocks — designed for readability. Loaded via Google Fonts CDN with display=swap.

Space Grotesk JetBrains Mono Preconnect

Font Loading

preconnect establishes early connection to Google's CDN. display=swap shows fallback text immediately, swaps to custom font when loaded.

HTML

<link rel="preconnect"
      href="https://fonts.googleapis.com">
<link rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin>
<link href="https://fonts.googleapis.com/css2?
  family=Space+Grotesk:wght@400;500;600;700&
  family=JetBrains+Mono:wght@400;500&
  display=swap"
      rel="stylesheet">

CSS

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

code, pre, .mono {
  font-family: 'JetBrains Mono', monospace;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

Space Grotesk Bold

Space Grotesk Regular

JetBrains Mono Medium

JetBrains Mono Regular

Pure Go SQLite implementation — no CGO, no C compiler needed. Transpiles SQLite C code to Go. Enables Docker builds with CGO_ENABLED=0 and cross-compilation.

Pure Go No CGO WASM-ready

Database Connection

Register the driver as "sqlite" (not "sqlite3"). Opens a file-based database. The ?_journal_mode=WAL pragma enables concurrent reads.

Go

package main

import (
    "database/sql"
    _ "modernc.org/sqlite"
)

func main() {
    // Register driver (pure Go, no CGO)
    db, err := sql.Open("sqlite",
        "data/portfolio.db?_journal_mode=WAL")
    if err != nil {
        log.Fatal(err)
    }
    defer db.Close()

    // Verify connection
    if err = db.Ping(); err != nil {
        log.Fatal("DB connection failed:", err)
    }
}

Go

// SELECT with parameters
rows, err := db.Query(
    `SELECT name, description, tags
     FROM projects WHERE id = ?`, id)

for rows.Next() {
    var name, desc, tags string
    rows.Scan(&name, &desc, &tags)
}

// INSERT with parameters
_, err = db.Exec(
    `INSERT INTO contacts (name, email, message)
     VALUES (?, ?, ?)`,
    name, email, message)

id	name	description	tags
1	GitViz	GitHub analytics dashboard	Go,Charts

Powers the repos page — fetches all 191 repos with metadata, stars, forks, languages, and topics. No backend caching — direct client-side API calls with CORS.

REST JSON CORS Pagination

List User Repos

Fetch all repos for a user. per_page=100 maximizes each request. Loop through pages until empty response. Each repo includes name, description, language, stars, forks, topics, and fork status.

JavaScript

// Fetch all repos with pagination
async function fetchRepos(user) {
  const API = 'https://api.github.com';
  let page = 1, repos = [];

  while (true) {
    const url = `${API}/users/${user}/repos`
      + `?per_page=100&page=${page}&type=owner`;

    const res = await fetch(url);
    const data = await res.json();

    if (data.length === 0) break;
    repos = repos.concat(data);
    if (data.length < 100) break;
    page++;
  }

  return repos; // All repos!
}

// Each repo object includes:
// name, full_name, description, fork,
// language, stargazers_count, forks_count,
// topics, html_url, created_at, updated_at

JavaScript

// Check rate limit before fetching
async function checkRateLimit() {
  const res = await fetch(
    'https://api.github.com/rate_limit'
  );
  const data = await res.json();
  const core = data.resources.core;

  console.log(`Remaining: ${core.remaining}/${core.limit}`);
  console.log(`Resets at: ${new Date(core.reset * 1000)}`);

  return core.remaining > 0;
}

// With auth token (5000 req/hour)
const headers = {
  'Authorization': `token ${TOKEN}`,
  'Accept': 'application/vnd.github+json'
};

Click to fetch from GitHub API...

Cloud hosting with Docker support. Free tier runs one web service. Persistent disk keeps SQLite data alive across deploys. Auto-deploys from GitHub pushes.

Docker Persistent Disk Auto Deploy Free Tier

Deploy to Render

Connect your GitHub repo, Render detects the render.yaml or Dockerfile. First build takes ~3min. Subsequent builds ~30s. Free tier spins down after 15min of inactivity.

Shell

# 1. Push to GitHub
git add . && git commit -m "deploy"
git push origin master

# 2. On render.com:
#    - New > Web Service
#    - Connect GitHub repo
#    - Runtime: Docker
#    - Disk: /app/data (1GB)
#    - Auto-deploy: On

# 3. First build output:
#    Step 1/8 : FROM golang:1.21-alpine
#    Step 2/8 : WORKDIR /app
#    Step 5/8 : RUN go build -o server .
#    Step 8/8 : CMD ["./server"]
#    Successfully built abcd1234

# Your site is live at:
# https://mayank-portfolio.onrender.com

$ git push origin master

Serverless email sending directly from the browser. No backend needed — the contact form sends emails via EmailJS's SMTP relay using a pre-configured service and template.

SMTP Serverless Contact Form

Send Contact Email

Initialize with public key, send with service ID, template ID, and template params. Zero backend — email goes directly from browser to recipient.

JavaScript

import emailjs from '@emailjs/browser';

// Initialize with public key
emailjs.init('Sm0zzKtPUyizJGKVP');

// Send email
const result = await emailjs.send(
  'service_r1wu0ne',    // Service ID
  'template_bkl8nf7',   // Template ID
  {
    from_name: name,
    from_email: email,
    message: message,
    to_name: 'Mayank',
  }
);

Fast Markdown parser and compiler. Used in the AI Chat module to render streaming AI responses with full Markdown support — headings, code blocks, lists, links, and tables.

Markdown Streaming HTML Output

Markdown to HTML

Configure marked with custom renderer for syntax highlighting, then parse streaming chunks into HTML for the chat window.

JavaScript

import { marked } from 'marked';

marked.setOptions({
  highlight: (code, lang) => {
    return hljs.highlight(code, { language: lang }).value;
  },
  breaks: true,
  gfm: true
});

// Parse AI response
const html = marked.parse(aiResponse);
chatWindow.innerHTML = html;

Fast math typesetting for the web. Renders LaTeX expressions in AI chat responses — formulas, equations, and mathematical notation display beautifully in the browser.

LaTeX Math Fast Render

LaTeX to HTML

Auto-render detects $...$ and $$...$$ delimiters in text, then renders them as beautiful math using KaTeX.

JavaScript

// Auto-render LaTeX in chat
renderMathInElement(chatWindow, {
  delimiters: [
    { left: "$$", right: "$$", display: true },
    { left: "$", right: "$", display: false }
  ],
  throwOnError: false
});

// Or render directly
const html = katex.renderToString(
  '\\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}',
  { displayMode: true }
);

Automatic syntax highlighting for code blocks. Used in the AI Chat module to colorize code snippets in AI responses — supports 190+ languages.

190+ Languages Auto-detect Themes

Highlight Code Blocks

Auto-detect language and apply syntax highlighting to all <pre><code> blocks in the chat window.

JavaScript

// Highlight all code blocks
document.querySelectorAll('pre code').forEach((el) => {
  hljs.highlightElement(el);
});

// Or use marked integration
marked.setOptions({
  highlight: (code, lang) => {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { lang }).value;
    }
    return hljs.highlightAuto(code).value;
  }
});

Powers the shared background stars animation — 3-layer parallax starfield with shooting stars, mouse tracking, and particle effects. Injected via shared-bg.js on every page.

2D Context Particles requestAnimationFrame Starfield

3-Layer Parallax Stars

Creates a full-screen canvas with 3 depth layers of stars. Each layer moves at different speeds based on mouse position, creating a 3D parallax effect.

JavaScript

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.prepend(canvas);

// 3 layers of stars
const layers = [
  { count: 120, speed: 0.3, size: 1.2 },
  { count: 80,  speed: 0.6, size: 1.5 },
  { count: 40,  speed: 1.0, size: 2.0 }
];

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  layers.forEach(layer => {
    layer.stars.forEach(star => {
      ctx.beginPath();
      ctx.arc(star.x, star.y, layer.size, 0, Math.PI*2);
      ctx.fillStyle = `rgba(255,255,255,${star.alpha})`;
      ctx.fill();
    });
  });
  requestAnimationFrame(draw);
}

Persistent client-side key-value storage. Used for: preloader preference, AI chat history, theme toggle state, cursor mode, and user settings — all survive page reloads.

5MB Limit Sync API Per-origin No Expiry

Store & Retrieve

Used throughout the portfolio — preloader choice, chat messages, theme, and cursor preferences all persist via localStorage.

JavaScript

// Save preloader preference
localStorage.setItem('preloader-type', 'matrix');

// Load AI chat history
const messages = JSON.parse(
  localStorage.getItem('ai-chat-history') || '[]'
);

// Save theme state
localStorage.setItem('theme', 'dark');

// Save cursor mode
localStorage.setItem('cursor-mode', 'default');

Click Load to retrieve...

Detects when elements enter/exit the viewport. Powers scroll-triggered animations, lazy loading, section navigation highlighting, and the tutorial overlay first-visit detection.

Lazy Load Scroll Reveal Section Tracking Performance

Reveal on Scroll

Watch [data-reveal] elements and add .visible class when they enter viewport. Unobserve after first trigger for performance.

JavaScript

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
);

// Observe all reveal elements
document.querySelectorAll('[data-reveal]').forEach(el => {
  observer.observe(el);
});

Scroll down to reveal boxes...

Box 1 - Fade In

Box 2 - Slide Up

Box 3 - Animate

Fully custom cursor with dot, follower, glow, trail, hover labels, and text mode. Centralized in shared-bg.js — injects CSS and DOM on every page. z-index 99999 to stay above all overlays.

CSS Injection Mouse Tracking Hover Labels Trail Effect

Inject Cursor CSS + DOM

shared-bg.js dynamically injects cursor CSS and creates DOM elements, so every page gets the same cursor without duplicate code.

JavaScript

// shared-bg.js — inject cursor CSS
const style = document.createElement('style');
style.textContent = `
  .cursor {
    position: fixed; width: 8px; height: 8px;
    background: #6c63ff; border-radius: 50%;
    pointer-events: none; z-index: 99999;
    transition: transform 0.1s;
  }
  .cursor-follower {
    position: fixed; width: 40px; height: 40px;
    border: 1px solid rgba(108,99,255,0.5);
    border-radius: 50%; pointer-events: none;
    z-index: 99999; transition: all 0.15s;
  }
`;
document.head.appendChild(style);

// Create cursor elements
const cursor = document.createElement('div');
cursor.className = 'cursor';
document.body.appendChild(cursor);

Move mouse over this area

x: 0, y: 0

10 unique animated preloaders: Matrix Rain, Glitch, Particles, Pulse, Orbit, Wave, Typewriter, Circuit, DNA Helix, and Cyber Grid. Random selection on each visit, user preference saved.

Canvas CSS Animations localStorage Random Rotation

Preloader Manager

Loads random preloader, tracks completion, fades out. User can choose their favorite via the gear icon selector.

JavaScript

// 10 preloader classes
const PRELOADERS = [
  'MatrixPreloader',
  'GlitchPreloader',
  'ParticlePreloader',
  'PulsePreloader',
  'OrbitPreloader',
  'WavePreloader',
  'TypewriterPreloader',
  'CircuitPreloader',
  'DnaPreloader',
  'CyberGridPreloader'
];

// Load saved or random
const saved = localStorage.getItem('preloader-type');
const type = saved || PRELOADERS[Math.floor(
  Math.random() * PRELOADERS.length
)];

Spin

Pulse

Bounce

Full-featured AI chat with streaming responses, thinking display, KaTeX LaTeX, Markdown rendering, 255 tools (Code, Files, Web, System, Security, AI, DevOps), theme control, and localStorage persistence.

Streaming 255 Tools OpenRouter API localStorage

Streaming AI Response

Sends chat history to OpenRouter API, streams tokens in real-time, renders Markdown + LaTeX + code highlighting. Saves conversation to localStorage.

JavaScript

const response = await fetch('https://openrouter.ai/api/v1/chat', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'nvidia/nemotron-3-super-120b-a12b:free',
    messages: [{ role: 'user', content: msg }],
    stream: true
  })
});

// Stream tokens
const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  // Parse SSE, append to chat
}

How do I sort an array in Go?

Use sort.Slice() from the sort package:

sort.Slice(arr, func(i, j int) bool {
  return arr[i] < arr[j]
})

Self-contained floating chat widget — appears on every page as a bottom-right button. Expandable panel with streaming AI, Markdown, LaTeX, and localStorage persistence. Zero configuration.

Self-contained Floating UI All Pages Auto-init

Auto-Initialize Widget

Include the script, widget auto-creates its own DOM, styles, and event listeners. Works on any page with zero HTML changes.

HTML

<!-- Just include the script -->
<script src="js/ai-widget.js"></script>

<!-- Widget auto-creates: -->
<!-- - Floating button (bottom-right) -->
<!-- - Expandable chat panel -->
<!-- - Streaming AI responses -->
<!-- - Markdown + LaTeX rendering -->
<!-- - localStorage persistence -->

Page content area...

AI

Google's ad network for monetizing the portfolio. 30 ad spaces across 7 rows — banners and responsive squares. Help Me Grow section encourages visitors to support via ad clicks.

30 Ad Spaces Responsive Auto Ads Revenue

Ad Unit Setup

Verification script in <head>, ad units with <ins> tags, and push script. 30 spaces in banner/square grid layout.

HTML

<!-- In <head> -->
<script async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2384016999231870"
  crossorigin="anonymous"></script>

<!-- Ad unit -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2384016999231870"
     data-ad-slot="SLOT_ID"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Mobile-first responsive design with CSS Grid, Flexbox, and media queries. Every page adapts from 320px mobile to 4K desktop. Hamburger menu, fluid typography, and adaptive layouts.

Mobile-first CSS Grid Flexbox Fluid Typography

Responsive Breakpoints

Standard breakpoints for mobile, tablet, and desktop. Fluid typography with clamp() for smooth scaling.

CSS

/* Fluid typography */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-menu { display: flex; }
}

/* Desktop breakpoint */
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

[MB]

Home Repos Libs

Width: 100%

Pill-shaped toggle with moon/stars (dark) and sun (light) SVG icons. Switches data-theme attribute on <html>. CSS variables update instantly. State saved to localStorage.

data-theme CSS Variables SVG Icons localStorage

Theme Switching

Toggle data-theme on <html>. All colors are CSS variables that change with the theme attribute.

JavaScript

const toggle = document.getElementById('themeToggle');
let theme = localStorage.getItem('theme') || 'dark';

document.documentElement.setAttribute('data-theme', theme);

toggle.addEventListener('click', () => {
  theme = theme === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
});

Preview Box

This box switches between dark and light themes using CSS variables.

Card 1

Card 2

Card 3

Libraries & Tools

Three.js

Basic 3D Scene Setup

Particle System

Render Loop with GSAP

GSAP

Scroll-Triggered Reveal

Staggered Card Entrance

Magnetic Button Effect

Sequenced Timeline

Lenis

Lenis Initialization

GSAP ScrollTrigger Integration

Go

Go HTTP Server

JSON API Handler

SQLite Database Operations

Docker

Multi-stage Dockerfile

Render Deployment Config

Vanilla JavaScript

GitHub API with Fetch

Lazy Loading with IntersectionObserver

Debounce Search Input

CSS Custom Properties

Theme System

Animated Gradients

Google Fonts

Font Loading

Font Assignment

modernc.org/sqlite

Database Connection

Prepared Statements

GitHub REST API

List User Repos

Rate Limit Handling

Render

Deploy to Render

EmailJS

Send Contact Email

marked.js

Markdown to HTML

KaTeX

LaTeX to HTML

highlight.js

Highlight Code Blocks

Canvas API

3-Layer Parallax Stars

localStorage

Store & Retrieve

IntersectionObserver

Reveal on Scroll

Custom Cursor System

Inject Cursor CSS + DOM

Preloader System

Preloader Manager

AI Chat Module

Streaming AI Response

AI Floating Widget

Auto-Initialize Widget

Google AdSense

Ad Unit Setup

Responsive Design

Responsive Breakpoints

Theme Toggle (Dark/Light)

Theme Switching

Code Playground