DEV Community: Naman Sachdeva

Check out this post

Naman Sachdeva — Tue, 26 May 2026 04:55:12 +0000

Naman Sachdeva

May 25

I Made My Website "Alive" using Physics (Vanilla JS Experiment Part 2) 🚀

#webdev #programming #javascript #beginners

Comments

2 min read

I Made My Website "Alive" using Physics (Vanilla JS Experiment Part 2) 🚀

Naman Sachdeva — Mon, 25 May 2026 14:11:34 +0000

A few days ago, I wrote about getting bored with flat, static websites and trying to build something that actually reacts to the user. I wanted the DOM to feel physical.
For my next update, my original plan was to go completely overboard — I'm talking HTML5 Canvas, complex math, Hooke's Law for spring physics, and particles that react to cursor velocity.

Here is what I added to make the UI feel even more alive:

1.True Magnetic UI (Hooke's Law in JS) 🧲
In the first version, elements just followed the cursor. Now, they have mass and tension.I implemented a physics engine for the buttons using Hooke’s Law ($F = -kx$). When your cursor gets within a certain radius, the button snaps towards it. But the magic happens when you pull away — it doesn't just snap back; it wobbles and settles down with friction.
// The core kinematics engine making it happen const forceX = (targetX - currentX) * stiffness; velX = (velX + forceX) * friction; currentX += velX;
2. Velocity-Reactive Particles (Canvas) ✨
Backgrounds shouldn't just sit there. I added an HTML5 Canvas layer with a particle grid.
But they aren't just floating randomly. The particles track the instantaneous velocity of your cursor.

If you move your mouse slowly, the particles gently move out of the way.
If you swipe your mouse aggressively, the particles calculate the momentum, scatter violently, and then spring back to their original grid positions.
It feels like swiping your hand through a pool of glowing water.
3. Integrating it into "Cyber-Hand OS" 💻
I'm taking all these micro-interactions and using them to build out the control panel for my larger project, Cyber-Hand OS. Starting with simple ON/OFF states for volume and notifications, but layering these fluid physics on top of them.
Sometimes, over-engineering a simple button is exactly what you need to remember why frontend development is so much fun.

Check it out!
You can play with the live demo here:
https://naman9104.github.io/Updated-experiment/
And the full code is on my repo: https://github.com/naman9104/Updated-experiment

Let me know what you guys think! Should I add collision detection next?

[Boost]

Naman Sachdeva — Sat, 23 May 2026 04:08:27 +0000

Naman Sachdeva

May 20

I Made My Website "Alive" using Physics (Vanilla JS Experiment Part 2) 🚀

#webdev #programming #javascript #css

Comments

2 min read

I Made My Website "Alive" using Physics (Vanilla JS Experiment Part 2) 🚀

Naman Sachdeva — Wed, 20 May 2026 17:05:43 +0000

A few days ago, I wrote about getting bored with flat, static websites and trying to build something that actually reacts to the user. I wanted the DOM to feel physical.

For my next update, my original plan was to go completely overboard — I'm talking HTML5 Canvas, complex math, Hooke's Law for spring physics, and particles that react to cursor velocity.

Here is what I added to make the UI feel even more alive:

// The core kinematics engine making it happen
const forceX = (targetX - currentX) * stiffness;
velX = (velX + forceX) * friction;
currentX += velX;

2. Velocity-Reactive Particles (Canvas) ✨
Backgrounds shouldn't just sit there. I added an HTML5 Canvas layer with a particle grid.
But they aren't just floating randomly. The particles track the instantaneous velocity of your cursor.

If you move your mouse slowly, the particles gently move out of the way.
If you swipe your mouse aggressively, the particles calculate the momentum, scatter violently, and then spring back to their original grid positions.

It feels like swiping your hand through a pool of glowing water.
3. Integrating it into "Cyber-Hand OS" 💻
I'm taking all these micro-interactions and using them to build out the control panel for my larger project, Cyber-Hand OS. Starting with simple ON/OFF states for volume and notifications, but layering these fluid physics on top of them.

Sometimes, over-engineering a simple button is exactly what you need to remember why frontend development is so much fun.

Check it out!
You can play with the live demo here:
https://naman9104.github.io/Updated-experiment/
And the full code is on my repo: https://github.com/naman9104/Updated-experiment

Let me know what you guys think! Should I add collision detection next?

[Boost]

Naman Sachdeva — Sun, 17 May 2026 10:48:08 +0000

Naman Sachdeva

May 17

TRYING TO LEARN JS THROUGH AN EXPERIMENT

#javascript #webdev #opensource #beginners

Comments

1 min read

TRYING TO LEARN JS THROUGH AN EXPERIMENT

Naman Sachdeva — Sun, 17 May 2026 10:47:44 +0000

Most websites today are fast.
Responsive. Clean.

But honestly?

A lot of them don’t feel anything anymore.

Everything became:

predictable
flat
overly structured

So instead of building another “productive” project, I decided to build something completely unnecessary 😭
Project link:- https://naman9104.github.io/Cursor/
I tried making a website that feels… alive.

Not with AI.
Not with fancy frameworks.

Just motion, interaction, and tiny details.

The Idea
I asked myself:

What if the cursor affected the environment around it?

So I started experimenting with:

a glowing cursor
magnetic buttons
floating particles
smooth movement physics
cinematic UI effects And somehow this tiny experiment slowly turned into one of the most fun things I’ve built in a while.

*Still improving it, but this project reminded me why I started learning frontend in the first place.
To make things that feel cool.
*
If you want updates, improvements, or a part 2 — comment below 👀
Will keep adding new effects and features for sure 😄

I Got Bored of “Normal” Websites… So I Tried Making One Feel Alive ✨

Naman Sachdeva — Sun, 17 May 2026 09:30:54 +0000

Most websites today are fast.
Responsive. Clean.

But honestly?

A lot of them don’t feel anything anymore.

Everything became:

predictable
flat
overly structured

Not with AI.
Not with fancy frameworks.

Just motion, interaction, and tiny details.

The Idea

I asked myself:

What if the cursor affected the environment around it?

So I started experimenting with:

a glowing cursor
magnetic buttons
floating particles
smooth movement physics
cinematic UI effects

And somehow this tiny experiment slowly turned into one of the most fun things I’ve built in a while.

Still improving it, but this project reminded me why I started learning frontend in the first place.
To make things that feel cool.

If you want updates, improvements, or a part 2 — comment below 👀
Will keep adding new effects and features for sure 😄

“Not a startup, not a dev team — just me building an AI for emotions.❤️🤖"

Naman Sachdeva — Tue, 28 Oct 2025 12:27:05 +0000

Hey Guys 👋
I’m still learning — not a full-stack expert, not building a huge startup — just someone who likes playing with code and visuals.

I recently made this little tool: you type a mood (like “dreamy ocean”, “sunset hustle”, or “calm coding flow”) and it generates a background gradient and a fresh motivational quote for you. If you’ve got your own server/API key, it can even call an AI backend to make totally custom gradients + quotes.

✅ What it does

If you pick from predefined moods (Happy, Calm, Sad, Energetic), it uses preset gradients + quotes.
If you choose “AI” mode and type your own prompt, the tool will:
1. Send the prompt to a backend endpoint /generate-gradient
2. Receive a custom gradient (2 HEX colours) + a quote from AI
3. Apply the gradient and adjust the text colour automatically so it’s always readable

🛠 Why I built it

I wanted something more than static themes: a tool that feels your mood and paints accordingly. Also, I found learning this colour-contrast logic (checking brightness and adjusting text colour) surprisingly fun.

🧩 Tech bits

Frontend: HTML + CSS + vanilla JS — no big framework.
Backend (optional): Express + Node → endpoint accepts JSON { prompt } and returns { gradient, quote }.
Bonus: client-side checks for URL validity, fallback when server is missing, and smooth background + text transition. 🚀 Try it out

Would love your feedback — is the colour contrast good? Does the quote feel fresh?

Thanks for checking this out — and if you’re building your own little tool too, drop your link below!

💬 Would love to hear your thoughts — drop a comment if you tried it, found a bug, or have an idea to improve it!
—Naman Sachdeva

🧮 Build a Smart Calculator Using HTML, CSS & JavaScript (With Keyboard Support)

Naman Sachdeva — Mon, 27 Oct 2025 16:26:55 +0000

💡 Description

This project is a clean and smart web-based calculator built using HTML, CSS, and JavaScript.
It doesn’t just look good — it behaves intelligently:
no operator spamming, supports negative numbers, and clears errors with one tap.

A perfect project if you’re learning DOM manipulation and JavaScript event handling.

🚀 Features

✅ Perform arithmetic operations → +, -, *, /, %
✅ Handles negative numbers → like -5+4
✅ Blocks invalid sequences like ++, */, etc.
✅ Shows "Error" on invalid inputs (deletes in one Backspace)
✅ Works with both buttons and keyboard
✅ Simple, responsive, and modern UI

🎨 UI Design:
The layout is built with minimal HTML and modern CSS —
a smooth gradient background, soft shadows, and clean button interactions make it feel polished.

You can easily tweak the theme colors or button styles to make it uniquely yours.

👉 Try it now on GitHub Pages

🌱 What You’ll Learn

Handling keyboard events in JS
Preventing invalid user inputs
Real-time DOM updates
Display error management
Clean, responsive UI design

⚙️ Future Plans

🧩 Add Light/Dark mode toggle
🧮 Add Scientific functions (sin, cos, log, etc.)
📜 Add Calculation History
🌐 Connect custom domain (e.g., calculatorbynaman.tech)

💬 Final Thoughts

This isn’t just a calculator — it’s a clean demonstration of writing smart JavaScript logic with a responsive front end.
Try building your own version, or add more features to it!

[Boost]

Naman Sachdeva — Sat, 25 Oct 2025 09:52:55 +0000

Naman Sachdeva

Oct 25 '25

🎨 Mood Gradient Generator: Colors & Quotes That Match Your Feelings

#javascript #webdev #ai #css

Comments

1 min read

🎨 Mood Gradient Generator: Colors & Quotes That Match Your Feelings

Naman Sachdeva — Sat, 25 Oct 2025 09:52:24 +0000

I built a small web app using HTML, CSS, and JavaScript that changes the background based on your current mood.

Select Happy, Calm, Sad, or Energetic — the background smoothly transitions to a matching gradient!

💡 Features:

GPT server integration for fresh AI-generated quotes
Responsive design — works offline
Input text color adapts to background for readability

This is a fun way to combine JS interactivity with colorful UI effects.

Try it out and let your mood shine! 🌈
URL For Live Preview
Note: TO POWER ON THE AI CLICK ON USE GPT,ENTER URL,TAP ON ANY MOOD,RELAX

Built My First Portfolio Site at 16 — No Frameworks, Just Grit

Naman Sachdeva — Sun, 15 Jun 2025 11:04:06 +0000

I’m 16 — just wanted a simple portfolio.
Not something with 50 npm packages and a PhD in Tailwind.
So I built my own.

🧪 No frameworks
⚡ No build steps
✏️ Just open index.html, change a few lines — and boom, you’re live.

🔗 Live Preview
👉 https://naman9104.github.io/Portfolio-Template/

📂 GitHub Repo
👉 https://github.com/naman9104/Portfolio-Template

✨ Features:
🔤 Typewriter-style animated intro

🧭 Clean layout with 5 sections

💡 Dark mode toggle

📱 Fully responsive

⚙️ No frameworks, no setup — just HTML, CSS, JS

✏️ Easy to customize — perfect for beginners

🛠 How to Use:
Fork the repo

Open index.html

Change your name, skills, projects, about, etc.

Deploy using GitHub Pages.

🚀 That’s it — you’re live in 5 minutes.

Inspired by my previous post: Not a full-stack dev, not a startup. Just a 16 y/o with ideas
This portfolio came out of that journey.

💬 Want to help improve it?
Drop your ideas below 👇
If you remix it, I’d love to see your version!