Visualizing Sorting Algorithms with React and Tailwind CSS

🚀 Project Showcase – Algorithm Visualizer I’ve built an Algorithm Visualizer using React.js, designed to help learners understand how sorting algorithms work step by step through real-time animations 🔄✨ 🎥 Here’s a quick preview video of the project in action! Currently, it includes: 🔹 Bubble Sort 🔹 Quick Sort 🔹 Merge Sort This is still an ongoing project, and I’ll be adding more sorting algorithms soon — along with UI improvements and new visualization features 🎯 💻 Check out the full project on GitHub: 🔗 https://lnkd.in/eArQfDgx Would love to hear your feedback or suggestions! 🙌 #ReactJS #JavaScript #Algorithms #SortingAlgorithms #WebDevelopment #OpenSource #FrontendDevelopment #LearningByBuilding #AlgorithmVisualizer

Ever seen your cursor make real water ripples? I’ve been playing around with shaders and fluid motion lately and ended up building this little experiment a liquid cursor that distorts and reacts like a real water surface. It’s made with Three.js, WebGL, and some custom GLSL shaders. Everything updates in real time ripples, distortion, damping no physics engine, just math and pixels. 🎥 Short demo below 🔗 Full live version: https://lnkd.in/dZAPNUWv I’ve been sharing more small interactive experiments like this on CodePen, so if you enjoy creative coding stuff, feel free to follow me there. What do you think would you ever add something like this to a landing page or portfolio? This project was inspired by a Shadertoy by nimitz (https://lnkd.in/d5gbzzYg) I wanted to explore how that concept could work interactively in a browser environment. #WebGL #ThreeJS #CreativeCoding #ShaderArt #FrontendDevelopment  #InteractionDesign #CodePen #JavaScript #GLSL #UIUX #MotionDesign #linkedin LinkedIn CodePen awwwards. #awwwards

Practicing Local Storage, Dynamic Input Handling, and Theme Persistence Today, I worked on a JavaScript project where I implemented multiple features to enhance user experience: Used Local Storage to save user data and theme preferences, ensuring persistence even after refreshing or closing the browser. Added a dark and light mode toggle that remembers the user’s choice using local storage. Practiced dynamic data handling using both objects and arrays to store user input efficiently. Created a loading spinner animation and clean UI using HTML and CSS for better user interaction. This project helped me strengthen my understanding of DOM manipulation, event handling, and local storage in JavaScript. live demo: https://lnkd.in/drU5s89N Every small project like this brings me one step closer to writing cleaner, more efficient, and scalable code. I’d love to hear your feedback or suggestions for improvement. #JavaScript #WebDevelopment #Frontend #LearningByDoing #LocalStorage #DarkMode #CodingJourney #TalhaMohsin

⚙️ WebAssembly: Running Non-JavaScript Code in the Browser For years, the web belonged to JavaScript. If you wanted to run logic in the browser — JS was your only option. But then came WebAssembly (Wasm) — and it changed the rules completely. 🚀 With WebAssembly, developers can now run languages like C, C++, Rust, Go, and Python directly inside the browser — at near-native speed. That means: ⚡ Heavy computations? No problem. 🎮 Game engines? Smooth as desktop. 🧠 AI models or simulations? Totally possible. 🧩 Cross-language integration? Easier than ever. Wasm doesn’t replace JavaScript — it complements it. Think of it as JS’s high-performance partner, handling tasks that need raw speed. In 2025, WebAssembly is powering complex web apps, 3D rendering, video editing tools, and even parts of Figma and Photoshop on the web. The browser is no longer “just a browser.” It’s a runtime for almost any language. 💻 💬 Have you tried experimenting with WebAssembly in your projects yet? What’s your take — future of the web or overhyped tech? 👇 #WebAssembly #Wasm #WebDevelopment #Frontend #JavaScript #Rust #Performance #BrowserTech #DeveloperExperience

Thrilled to share my latest side project — “Number Guessing Game 🎯” built using Streamlit! This interactive web app challenges you to guess a number between 1 and 100 — with dynamic feedback, hints, game stats, and a fun “GIF's” to keep things exciting 🤔✨ Tech Highlights: 💻 Frontend: Streamlit for a sleek, interactive UI 🎨 Styling: Custom CSS animations & gradient themes 🧠 Game Logic: Python-based random number generation with real-time user feedback 🎬 Fun Factor: GIF reactions for “too high”, “too low”, and “winner” moments This project was a fun way to blend frontend design, interactivity, and logical thinking — proving even simple games can be beautiful and engaging when powered by Python! Huge thanks to my mentor Aneesha Parveen S K for guiding me 🙏. #Streamlit #Python #WebApp #SideProject #MachineLearning #DataScience #WebDevelopment #PythonProjects #FunWithCode #StreamlitApp #CodingJourney #GamifiedLearning

Built a Classic Snake Game using HTML, CSS, and JavaScript This project was an exciting opportunity to combine logic, creativity, and design into a single experience. The game includes: • Smooth snake movement controlled by keyboard input • Collision detection for handling game-over scenarios • Dynamic food generation and score tracking • A clean and responsive layout for a better user experience Through this project, I deepened my understanding of: • DOM manipulation and rendering logic • Event listeners and keyboard handling • CSS grid layout for game design • Game loop and animation logic in JavaScript Building this reminded me how even simple games can teach powerful programming principles like loops, conditionals, and real-time updates. Always keep building and experimenting — that’s how real learning happens. I’d love to hear your thoughts and feedback. #HTML #CSS #JavaScript #WebDevelopment #Frontend #SnakeGame #CodingJourney

🚀 Just built a Color Flipper Project! 🎨 I created an interactive Color Flipper where: Clicking the “Color Flipper” button changes the background color randomly. Clicking on different color buttons updates the displayed image dynamically. 💡 Key JavaScript concepts I used: DOM Manipulation → Selecting elements, updating styles and image attributes dynamically. Event Listeners → Handling button clicks to trigger UI changes. Random Number Generation → Creating random hex colors. Data Attributes (data-*) → Linking buttons to images cleanly. ✨ What I learned: Connecting user interaction with UI updates in a practical, interactive project. Check out the code here: https://lnkd.in/ge6G2yk5 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #DOMManipulation #JavaScriptProjects #60DaysOfCode #PortfolioProject #InteractiveUI #WebDesign #LearnToCode

Excited to share my latest project: an interactive Vector Visualization Tool built with HTML, CSS, JavaScript, and libraries like Three.js and p5.js! 🚀 This educational web app helps users explore vector operations in 2D and 3D, including addition, subtraction, dot/cross products, torque, work, and advanced physics applications like equilibrium and normal vectors. It features dynamic animations, AI-powered explanations, quizzes, and real-time feedback to make learning intuitive and fun. Perfect for students, educators, and physics enthusiasts! Check out the deployed version here: GitHub Pages Link (Replace with your actual repo if deployed – e.g.,  https://lnkd.in/gN8p-7VN) I'd love to hear your thoughts! What features would you add? Any feedback on the visualizations or UI? Drop a comment below, share your experiences, or tag someone who might find this useful. Let's discuss and improve together! 💡 #EdTech #Physics #WebDevelopment #JavaScript #ThreeJS #LearningTools

#FrontendFridays | Animated Skill Progress Dashboard This week’s UI experiment showcases a dynamic Skill Progress Dashboard featuring animated circular progress indicators. Built using HTML, CSS, and JavaScript, each circle animates with a gradient border and a smooth count-up effect as it comes into view. The design combines SVG stroke animations, gradient styling, and intersection-based triggers to create an interactive, visually engaging dashboard. It’s lightweight, responsive, and perfect for portfolio analytics or personal skill tracking sections. Live demo: https://lnkd.in/gHvU_3py #Frontend #WebDevelopment #CSS #JavaScript #UIDesign #FrontendFridays #WebDesign #UIUX #html #css #javascript #js #code #webdev #AI

For once, let's get technical.  After my last post, I received a lot of DMs asking how I built the effects.   But most of the time, the question was:   "What tools did you use?" So, let's break it down.  Javascript vanilla.   A small Node.js setup.   A template engine.   Sass.   GSAP.   OGL (and now Three.js).  This weekend, I switched from OGL to Three.js.   I'd already done a fluid distortion with OGL,   but I wanted to recreate it using Three.js just to improve my skills.  For the page transitions, everything is fully custom:   - Listening to link clicks and popstate events   - Showing a transition page managed by a class using the canvas API - Hiding the current page (each route inherits from a Page class)   - Fetching the new HTML and inserting it into the DOM   - Loading the correct template (home, about, project, etc.)   - Notifying every classes that navigation changed   - Rebuilding 3D meshes for the new scene   - Then hiding the transition  No library.   No fancy framework.   Just pure JavaScript logic and management.  Custom scroll?   Built from scratch hacking the native scroll.   (Might switch to Lenis at some point, let’s be honest.)  For reveal animations, no ScrollTrigger.   A global class using Intersection Observer then every animation class inherits from it and triggers when entering the viewport.  Lazy loading works the same way,   currently used only for mobile since the desktop version runs full WebGL.  And of course, a real preloader.   Every asset and texture is preloaded, stored in arrays, and ready globally.   It takes longer upfront, but it guarantees the 3D experience stays smooth and fluid.  If I had to build it again, I'm not sure I’d take this exact path.   But I did it to go back to the roots the pure joy of coding without abstractions.  When you build from scratch,   you understand what's happening behind every animation, every scroll, every click.  You take full control.   And when something breaks, you know exactly why.  That's what I love about working this way no magic, no black box, just code and logic.  It's not perfect though, there is a lot of room for improvement. I'd be curious to hear from you:  Do you still take time to build from scratch sometimes, or do you always stick with frameworks now?