Forem: Kushagra

🕵️‍♂️ I Built a Privacy-First PDF Toolkit Because Most “Free” Tools Are Sketchy

Kushagra — Thu, 12 Feb 2026 04:36:52 +0000

Whenever you Google “merge pdf online free”, you’re basically playing Russian roulette with your data.

Most of the top tools upload your files to their servers.
Contracts. Bank statements. ID scans. Confidential PDFs.

Even if they say “we delete it after 1 hour” — that’s still 1 hour too long.

So I decided to build something different.

I built PixelDoc — a 100% client-side PDF toolkit that runs entirely in your browser.

👉 Live: https://pixeldoc.netlify.app

🧠 The Moment That Triggered This

I needed to merge large bank statements for a loan application.

Problems I hit:
• Upload failed because of weak internet
• File size limit (50MB+) behind paywall
• “Upgrade to Pro” wall for basic features
• Privacy anxiety

That’s when it hit me:

Modern browsers are powerful enough to handle PDF processing locally.

Why are we still uploading everything to random servers?

🔐 The Core Philosophy

PixelDoc follows one strict rule:

If your browser can do it — the server shouldn’t.

There is no backend processing.
No document uploads.
No temporary storage.
No tracking scripts spying on files.

Everything runs in your device memory.

🛠 Tech Stack Breakdown

This wasn’t just a weekend HTML project.
I wanted performance + privacy + good UX.

⚛️ Frontend
• React + Vite (fast build + lightning HMR)
• Tailwind CSS (clean utility design)
• Framer Motion (smooth transitions)

📄 PDF Processing
• pdf-lib (pure JavaScript PDF manipulation)

🧠 AI / ML (In Browser)
• @imgly/background-removal (WebAssembly + ONNX)
• tesseract.js (OCR in Web Workers)

🖼 Image Tools
• browser-image-compression
• Canvas API

🚀 Hosting
• Netlify (static deployment)

🔎 How It Works (Under the Hood)

The interesting part?
There is no API.

Everything is done using ArrayBuffers directly in memory.

1️⃣ Merging PDFs Locally

Instead of uploading files to a server, the browser reads them as ArrayBuffers and merges them in memory:

import { PDFDocument } from 'pdf-lib';

async function mergePDFs(files) {
  const mergedPdf = await PDFDocument.create();

  for (const file of files) {
    const arrayBuffer = await file.arrayBuffer();
    const pdf = await PDFDocument.load(arrayBuffer);
    const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
    copiedPages.forEach((page) => mergedPdf.addPage(page));
  }

  const savedBytes = await mergedPdf.save();
  // Trigger download
}

No network request.
No server storage.
Just browser memory.

2️⃣ AI Background Removal (Fully Client-Side)

This was the hardest part.

The ONNX model is downloaded once and cached.
Inference runs via WebAssembly using the user’s CPU/GPU.

import imglyRemoveBackground from "@imgly/background-removal";

const removeBg = async (imageSrc) => {
  try {
    const blob = await imglyRemoveBackground(imageSrc);
    const url = URL.createObjectURL(blob);
    setResult(url);
  } catch (error) {
    console.error("AI Error:", error);
  }
};

This means:
• No cloud AI
• No image uploads
• No API keys
• No usage limits

✨ Current Features

PixelDoc is no longer “just merge”.

📄 PDF Tools
• Merge
• Split
• Compress
• Protect / Unlock
• OCR
• PDF → Text

🖼 Image Tools
• AI Background Removal
• HEIC → JPG (iPhone support)
• Compress
• Resize

📑 Converters
• Word → PDF
• Excel → PDF

⚡ Performance Optimizations

Because it’s client-side, initial load time is critical.

So I implemented:

🧩 Code Splitting

Heavy libraries like tesseract.js and pdf-lib are lazy-loaded only when needed.

🧠 Service Worker Caching

Models and large WASM files are cached after first use.

📈 SEO Strategy

Even though it’s a React SPA, I added:
• Rich JSON-LD (FAQPage schema)
• Structured How-to guides
• Tool-specific landing content

Trying to avoid the “SPA = SEO disaster” problem.

💭 What I Learned
1. Browsers are insanely powerful now.
2. Privacy-first tools are possible — we just don’t prioritize them.
3. WebAssembly changes what’s possible in frontend engineering.
4. Most SaaS tools add servers where they aren’t necessary.
5. Performance thinking makes you a better engineer.

Tell me where it fails.

👉 https://pixeldoc.netlify.app

If you found this interesting, drop a ❤️
I’m planning to write more deep-dive breakdowns on privacy-first engineering.

The Ultimate Guide to Mastering GSAP Animations

Kushagra — Sat, 06 Dec 2025 11:57:52 +0000

Why GSAP? — Because Web Should Move

Have you ever visited a site where as you scroll, elements fade in just at the right moment, backgrounds move with depth, buttons “pop” subtly when hovered, or images animate smoothly instead of just jumping into place? That’s the kind of fluid, immersive experience that feels “premium.”

That magic often comes from GSAP — the GreenSock Animation Platform. It’s a JavaScript animation library trusted by thousands of developers and used on many production websites.

What makes GSAP stand out:
- Performance & smoothness — even complex animations (SVG, DOM, canvas) stay smooth across browsers/devices.
- Flexibility & control — animate almost any property (position, scale, rotation, opacity, colors, SVG paths…) with precise timing, easing, and sequencing.
- Beyond basic animation — support for timelines, scroll-based animations, plugins for advanced effects.

In short: if you want your UI to feel alive, GSAP is 💚 the go-to.

Getting Started with GSAP — The Essentials

1. Include GSAP

You have a few options: use a CDN or install via npm/yarn if you’re using a build system. For a quick start with plain HTML, you can simply do:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="script.js"></script>

Place the GSAP script before your own JS so your code can access it.

2. Animate with Tweens — The Basics

At its core, GSAP’s simplest tool is a “tween”: move or animate a value from one state to another over time.

gsap.to(".box", { duration: 2, x: 300, rotation: 360, scale: 1.2, opacity: 0.8 });

This will move .box 300px to the right, rotate it, scale it up, and change its opacity — all smoothly over 2 seconds.

You also have:
gsap.from() — animate from a defined start state to the element’s original state.
gsap.fromTo() — define both start and end states explicitly.

Tweens are great for simple effects: hover animations, entrance/fade-ins, moving elements, etc.

3. Sequencing with Timelines

When more than one animation needs to happen in a choreographed order — you don’t want to chain delays manually — a timeline helps.

const tl = gsap.timeline();
tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 100, duration: 1 })
  .to(".box", { opacity: 0, duration: 0.5 });

Now .box will move right, then down, then fade out — in order.

Timelines give you more power: you can overlap animations, nest timelines, control playback (pause, reverse, repeat), and synchronize animations with other events.

Going Beyond — Scroll, Plugins & Real-World Animations

GSAP isn’t just for simple entrance/hover effects. It’s powerful enough to drive complex, immersive animation sequences — including scroll-driven effects, interactive components, canvas/SVG animations, and more.

Scroll-Triggered Animations: Meet ScrollTrigger

With the official plugin ScrollTrigger, you can hook animations to scroll position: pin elements, animate on scroll, scrub timelines forward/backward, and more.

Example (vanilla JS + GSAP):

gsap.registerPlugin(ScrollTrigger);

gsap.to(".hero-image", {
  scrollTrigger: {
    trigger: ".hero-image",
    start: "top center",
    end: "bottom top",
    scrub: 1,
    pin: true,
    markers: true
  },
  scale: 1.3,
  opacity: 0.8,
});

As you scroll, .hero-image will scale and fade — and the element will stay pinned while the scroll animation plays out. Combine this with timelines and you can build complex scroll-based storytelling.

👉 On top of ScrollTrigger, there are many other useful plugins (text animation, motion along paths, draggable UIs, etc.) — a big part of what makes GSAP so versatile.

SVG / Canvas / Performance-Friendly Animations

GSAP works nicely with SVGs, canvas, and other DOM elements — meaning you can animate vector graphics, draw animations, morph shapes, animate paths, etc. All of it remains performant.

This opens up a world of possibilities: animated illustrations, interactive charts, dynamic hero backgrounds — stuff that feels far more alive than static images or basic CSS transitions.

Real-World Example: Simple Fade-In + Scroll Parallax Landing Page

Here’s a lightweight example of how you might combine HTML + CSS + GSAP + ScrollTrigger to build a minimal “hero section + scroll fade-in” effect.

<!-- index.html -->
<section class="hero">
  <h1>Welcome to My Site</h1>
  <p class="subtitle">We build immersive web experiences.</p>
</section>

<section class="content">
  <div class="card">Feature 1</div>
  <div class="card">Feature 2</div>
  <div class="card">Feature 3</div>
</section>

<!-- ... -->

.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.content { padding: 4rem; }
.card { opacity: 0; transform: translateY(50px); margin-bottom: 2rem; background: #fff; padding: 2rem; border-radius: 8px; }

// script.js
gsap.registerPlugin(ScrollTrigger);

gsap.to("section.hero h1", { duration: 1, y: -20, opacity: 1, ease: "power3.out" });
gsap.to("section.hero p.subtitle", { duration: 1, y: 0, opacity: 1, delay: 0.3, ease: "power3.out" });

gsap.utils.toArray(".card").forEach((card, i) => {
  gsap.to(card, {
    scrollTrigger: {
      trigger: card,
      start: "top 80%",
      end: "top 50%",
      scrub: true,
    },
    y: 0,
    opacity: 1,
    duration: 0.8,
    ease: "power2.out",
    delay: i * 0.2
  });
});

What happens:

On page load, hero <h1> and subtitle fade in beautifully.
As you scroll into the content section, cards slide up and fade in one after another.

Simple — yet, it feels modern, interactive, and polished

Where to Learn More

If you want to go deeper:
• Official GSAP Docs
https://gsap.com/docs/
• GSAP Demos (highly inspiring)
https://madewithgsap.com/
• Free Courses (GSAP basics → advanced)
https://www.classcentral.com/subject/gsap
• Creative coding articles & examples
https://blog.radialcode.com/

🎉 Final Thoughts

GSAP is the easiest way to make your website feel:
• more modern
• more interactive
• more premium
• more polished

Whether you’re building a portfolio, startup landing page, or a client website, GSAP will make your UI stand out immediately.

If you’ve never used it — start today.
Animate one element. Then a section.
Then the scroll.

Before you realize it, you’re building animations that look like they came out of a top creative agency.

Happy animating! 💚⚡

What I Learned Building 20+ Real Projects as a CS + AI/ML Student :- The Practical Roadmap I Wish I Had on Day 1

Kushagra — Sat, 29 Nov 2025 13:34:39 +0000

When I started Computer Science with a specialization in AI/ML, I made one decision early:

I will not just “learn concepts.” I will build things.
This one rule transformed everything.

Over the last year, I built projects in:
- AI & Machine Learning
- Android (Kotlin + Jetpack)
- Full-Stack MERN
- React Native + Expo
- Docker + Microservices
- Open-source (GSoC, C4GT, NumFOCUS)

Here’s a complete roadmap — the way I wish someone explained to me when I started.
Learn → Build → Break → Fix → Contribute → Scale.

1. Foundations That Actually Matter (Not the Useless Stuff We Memorize)

Forget memorizing definitions. Focus on:

✔️ Data Structures & Algorithms (by building apps)

Not just solving problems -
Use them in real apps like:
- A search engine using tries
- A pathfinding visualizer
- A recommendation system

✔️ Object-Oriented Design (OOP) in Real Code

I used OOP heavily in:
- Android MVVM
- Backend API design
- Microservices
- Design Patterns (Builder, Strategy, Singleton, etc.)

When you apply OOP to real codebases, it finally makes sense.

2. AI/ML That Companies Actually Use

Most students stop at:
- Linear regression
- Classification
- Titanic dataset

But real ML looks like this:

✔️ Building ML Systems End-to-End
- Data cleaning
- Feature engineering
- Model training
- Vectorization
- Deploying models
- Monitoring performance

✔️ Cool AI Projects I Built:
- A complete recommendation engine
- A Spam Detector using NLP
- A face recognition system
- A real-time ML inference API using Python + FastAPI

These get real attention on GitHub & resumes.

3. Android Development (Kotlin) — Where I Grew the Most

I built multiple apps using modern Android architecture:

What I Learned:
- MVVM architecture
- RecyclerView with Pagination
- Coroutines + Flow
- Room & SQLite
- Retrofit + API integration
- Dagger & Dependency Injection
- Background Services
- Clean Architecture
- Jetpack Compose basics

My favorite Android app:

MilkBuddy — A full app with:
- Firebase Realtime Database
- Foreground Service
- TabLayout
- Provider
- Offline storage

This is the kind of app that gets recruiters interested.

4. Full-Stack Web Dev (MERN) — Where You Gain “System Thinking”

In my HealthSetu project, I learned:
- JWT Authentication
- Role-Based Access Control (RBAC)
- Server-Side Pagination
- Google Calendar API
- Infinite Scroll
- Admin dashboards
- React + Vite performance optimizations

Full-stack development teaches you how systems talk to each other — which is core to being a good engineer.

5. Docker + Microservices — My Turning Point

Once I containerized apps using Docker, everything clicked.

✔️ What I practiced:
- Dockerfile creation
- NGINX reverse proxy
- Microservice design
- REST APIs with Go
- Backend-to-backend communication

Now I can deploy:
- ML APIs
- Node services
- Microservice clusters
- Android backend servers

This is the exact skill companies want.

6. Open-Source & GSoC — The Career Multiplier

I began contributing to:
- NumFOCUS projects
- Community Health Toolkit
- Signal Android client
- C4GT projects
- Tekdi SaaS platform

What open source taught me:
- Reading large codebases
- Creating real pull requests
- Debugging like a professional
- Documentation writing
- Team collaboration
- Code reviews

This is the shortcut to becoming a strong engineer early.

7. A Roadmap YOU Can Follow (From Zero → Job Ready)

Step 1 — Learn the Essentials
- DSA basics
- Git + GitHub
- Python
- JavaScript
- SQL

Step 2 — Build Practical Projects
- 3 Android apps
- 3 AI/ML models
- 2 full-stack apps
- 1 microservice backend

Step 3 — Contribute to Open Source

Start with issues labelled:

good first issue • help wanted • documentation

Step 4 — Prepare for Internships
- Build a clean GitHub
- Write Dev.to blogs
- Publish open-source work
- Share project architecture diagrams

Step 5 — Create a Personal Brand

- DEV.to writing
- LinkedIn weekly posts
- GitHub active contributions
- Portfolio website

This roadmap puts you ahead of 95% of students.

Closing Thoughts

You don’t need to be perfect.
You just need to build consistently.

Whether it’s:
- Android
- AI/ML
- MERN
- React Native
- Microservices
- Open Source

Pick something → Build → Share → Learn → Repeat.

This is how you grow.🫶

If your team works on AI, Android, backend, or open-source — I’m open to internships and collaboration!

Let’s connect:
- GitHub: https://github.com/Aerospace-prog
- LinkedIn: www.linkedin.com/in/kushagra-pandey22

Spotlight: A Modern Social Media App Built with React Native + Expo

Kushagra — Thu, 30 Oct 2025 08:01:15 +0000

I’ve always been fascinated by how social apps bring people together. So I decided to build one myself — introducing Spotlight 🌟, a mobile-first social media app where you can share moments, connect with friends, and discover new people.
✨ Features include:
• Real-time feed
• Profiles & following
• Notifications
• Search
• Smooth, modern UI
📱 Try it instantly: APK Download
💻 Full code: GitHub Repo
If you’d like to support my open-source journey and help me keep building apps like this, you can buy me a coffee ☕: BUY ME COFFEE