Rebuilt my portfolio from Next.js to Astro. Here's what I learned. The site is heavy , Three.js scenes, scroll-driven animations, video backgrounds. After real user testing, the feedback was clear: browsers were freezing on mid-range devices. The problem wasn't Next.js. It was shipping the full React runtime plus Three.js plus Framer Motion on every page , even pages that were 90% static content. What changed with Astro: → Only Three.js and scroll animations ship JavaScript. Everything else is zero JS. → Content collections replaced my custom project system. New case study = one MDX file. → Asset optimization had the biggest impact. WebP images, compressed videos, Draco-compressed 3D models one GLB went from 2MB to under 100KB. → Islands architecture means my 3D canvases get the browser's full attention instead of competing with React hydration. Same visual experience. No more frozen browsers. The framework matters less than the architecture. The real question isn't "which framework" — it's "how much of this truly needs to run on the client?" #webdev #astro #frontend #performance #designengineering

🚀 Excited to share two open-source projects I built using the Pretext library! Pretext is a powerful text-layout engine that avoids expensive DOM measurements by relying purely on arithmetic, enabling sub-millisecond layout performance. Here’s what I’ve been working on: 🔹Pretext Breaker (Text Arcade Game) A Breakout-style game where every brick is made of text. ⚡ Watch words shatter and dynamically reflow in real time at 60+ FPS — all computed off-DOM. It’s a fun, fast-paced canvas demo that highlights how efficient Pretext is for highly dynamic UIs. 🔹Headless Text Layout (JS Engine) A lightweight engine that separates text preparation from layout. 🎯 Prepare your text once, then quickly calculate line breaks and layout for any container size. Ideal for server-side rendering, canvas/SVG rendering, or virtual scrolling — anywhere you need layout without triggering browser reflows. 🔗 Get Involved Both projects are available on GitHub with source code and live demos. Feel free to ⭐ star the repos, try them out, and share feedback or contribute! Links GitHub • pretext-breaker → https://lnkd.in/dA_CbMtX • headless-textflow → https://lnkd.in/dqN5aA8g Live Demos • Pretext Breaker → https://lnkd.in/dWFMK7_8 • Headless Layout → https://lnkd.in/drdjX6tw 🙌 Huge thanks to the Pretext community for the inspiration. If you're into frontend performance or building fast UI systems, I’d love for you to check these out! #WebDevelopment #JavaScript #Performance #OpenSource #Frontend #Pretext #DevTools

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day45 Project: Digital Clock What I built Today I created a modern Glassmorphism Digital + Analog Clock UI with smooth animations and real-time updates. It displays analog clock hands, digital time, day/date, greeting messages, and a progress bar for seconds — all wrapped in a beautiful animated background. Technologies Used HTML5 CSS3 (Glassmorphism, Animations, Gradients, Responsive Design) JavaScript (DOM Manipulation, Date API, Real-time Updates, Dynamic Elements) Challenge I faced Synchronizing analog clock hands smoothly with real-time while also updating digital time, greeting, and progress bar without lag. How I solved it Used precise time calculations with milliseconds and setInterval for smooth updates, along with optimized DOM updates for better performance. Live Demo: https://lnkd.in/dS8zg6BG Open to feedback and suggestions #FrontendDeveloper #JavaScript #HTML5 #CSS3 #WebDevelopment #100DaysOfCode #DeveloperJourney #UIUX

Art 🤝 Code I got commissioned to make album artwork, so I built this app to help me create these generative visuals. My process: 🧪 CLI Prototype: I wanted to experiment with the ImageMagick CLI for generative art, so I started by hacking on it. With some help from Claude Code, I quickly put together a CLI that could turn a source image into glitchy, trippy patterns. 🖥️ Web Interface: I wanted a better interface, so I wrapped the CLI in an Express server and connected it to a web UI. 🎨 p5.js Refactor: Later, I refactored the app to use p5.js, which made it faster and much more extensible by processing images directly in the browser. What you’re seeing here: • The kaleidoscope/mandala effect comes from sampling the source image on the left and tiling with radial symmetry. • Dragging the sample’s center point around the source image creates the mesmerizing movement on the right. • I setup a hotkey to feed the output back in as the next source image for recursive effects. GitHub: https://lnkd.in/g7H9XQGQ Live Demo: https://lnkd.in/gSDa6uaY #generativeart #creativecoding #p5js #imagemagick #expressjs #webapp #creativetools #digitalart #albumart #glitchart #interactiveart #javascript #developer #design #UI #AI

🎞️ I added season changing feature in my georgian 3D movie platform. Here's how it works: 🖱️ User clicks a season button 🖼️ A new texture fades onto the wall ☀️ A GLSL shader receives the uSeason uniform 🌎 grass and sky color change accordingly i am using: 🟢 Next.js 🟢 Three.js 🟢 GSLS 🟢 Figma ( for button design) #threejs #webgl #glsl #nextjs #creativecoding #frontend #3d #webdevelopment

Hi! I created a demo where each section features a gradient background implemented with a shader. Each gradient is composed of four colors, and the colors transition between sections to create a smooth visual flow across the page. This was a project from a GLSL course, where I explored how shaders can be used to enhance visual expression on the web. It was a great exercise in combining visual design with shader! #webgl #threejs #shader

𝐘𝐨𝐮 𝐚𝐫𝐞 𝐜𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐦𝐨𝐝𝐚𝐥𝐬 𝐭𝐡𝐞 𝐰𝐫𝐨𝐧𝐠 𝐰𝐚𝐲.⁣ ⁣ Most React devs just drop a modal component inside their current tree and slap a z-index on it.⁣ ⁣ It works. Until it doesn't.⁣ ⁣ The real problem?⁣ ⁣ - Your modal lives inside a 𝐝𝐞𝐞𝐩𝐥𝐲 𝐧𝐞𝐬𝐭𝐞𝐝 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞.⁣ - 𝐂𝐒𝐒 𝐨𝐯𝐞𝐫𝐟𝐥𝐨𝐰: 𝐡𝐢𝐝𝐝𝐞𝐧 from a parent? Your modal gets clipped.⁣ - 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐬𝐭𝐚𝐜𝐤𝐢𝐧𝐠 𝐜𝐨𝐧𝐭𝐞𝐱𝐭 from a wrapper? Your modal loses the battle.⁣ - 𝐒𝐜𝐫𝐞𝐞𝐧 𝐫𝐞𝐚𝐝𝐞𝐫𝐬? Confused by where the dialog actually lives.⁣ ⁣ That's not a modal. That's a 𝐝𝐢𝐯 𝐰𝐞𝐚𝐫𝐢𝐧𝐠 𝐚 𝐝𝐢𝐬𝐠𝐮𝐢𝐬𝐞.⁣ ⁣ 𝐄𝐧𝐭𝐞𝐫 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥.⁣ ⁣ Instead of rendering inside the component tree, 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 𝐭𝐞𝐥𝐞𝐩𝐨𝐫𝐭𝐬 𝐲𝐨𝐮𝐫 𝐦𝐨𝐝𝐚𝐥 𝐝𝐢𝐫𝐞𝐜𝐭𝐥𝐲 𝐭𝐨 𝐝𝐨𝐜𝐮𝐦𝐞𝐧𝐭.𝐛𝐨𝐝𝐲 — outside every stacking context, outside every overflow trap.⁣ ⁣ Here's what that unlocks:⁣ ⁣ - 𝐍𝐨 𝐳-𝐢𝐧𝐝𝐞𝐱 𝐰𝐚𝐫𝐬⁣ - 𝐍𝐨 𝐜𝐥𝐢𝐩𝐩𝐢𝐧𝐠 from parent overflow rules⁣ - Proper 𝐟𝐨𝐜𝐮𝐬 𝐭𝐫𝐚𝐩𝐩𝐢𝐧𝐠 and accessibility⁣ - Clean animation transitions 𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐥𝐚𝐲𝐨𝐮𝐭 𝐬𝐢𝐝𝐞 𝐞𝐟𝐟𝐞𝐜𝐭𝐬⁣ ⁣ And the best part?⁣ ⁣ It still behaves like a 𝐫𝐞𝐠𝐮𝐥𝐚𝐫 𝐑𝐞𝐚𝐜𝐭 𝐜𝐡𝐢𝐥𝐝.⁣ State, props, context — all connected to the parent.⁣ The logic stays in your component tree.⁣ 𝐎𝐧𝐥𝐲 𝐭𝐡𝐞 𝐃𝐎𝐌 𝐧𝐨𝐝𝐞 𝐦𝐨𝐯𝐞𝐬.⁣ ⁣ I combined 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 with 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐀𝐧𝐢𝐦𝐚𝐭𝐢𝐨𝐧𝐅𝐫𝐚𝐦𝐞 - based state to get smooth enter/exit animations — no flash, no layout jank, just clean transitions synced to the browser's paint cycle.⁣ ⁣ That's what 𝐩𝐫𝐨𝐝𝐮𝐜𝐭𝐢𝐨𝐧-𝐠𝐫𝐚𝐝𝐞 𝐦𝐨𝐝𝐚𝐥 𝐛𝐞𝐡𝐚𝐯𝐢𝐨𝐫 looks like.⁣ ⁣ If you're not using 𝐜𝐫𝐞𝐚𝐭𝐞𝐏𝐨𝐫𝐭𝐚𝐥 for modals, overlays, or tooltips — you're 𝐟𝐢𝐠𝐡𝐭𝐢𝐧𝐠 𝐭𝐡𝐞 𝐃𝐎𝐌 instead of working with it.⁣ ⁣ Are you using createPortal in your projects? Or still doing it the hard way? 👇⁣ ⁣ #React #Frontend #WebDevelopment #JavaScript #SoftwareEngineering

🚀 Built a Fully Functional Connect 4 Game using HTML, CSS & JavaScript! Excited to share my latest frontend project — a classic Connect 4 game developed completely from scratch 🎯 🔹 Tech Stack: • HTML – Structured the game board • CSS – Designed a clean and responsive UI • JavaScript – Implemented game logic & interactions 🔹 Key Features: ✔️ Two-player gameplay (Yellow vs Orange) ✔️ Smart piece drop (auto-falls to lowest empty slot) ✔️ Win detection: • Horizontal • Vertical • Diagonal & Anti-diagonal ✔️ Real-time turn updates ✔️ Clean and bug-free interaction This project helped me strengthen my understanding of DOM manipulation, event handling, and game logic design. Looking forward to adding more features like AI opponent, animations, and mobile responsiveness 🚀 💡 Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #FrontendDevelopment #Projects #Coding #HTML #CSS #GameDevelopment #InternPe

Bringing the spirit of Navratri to the web! 🏮 I’ve built an interactive Navratri Greeting App using HTML, CSS, and JavaScript. The project features a dynamic 'Day-by-Day' guide to the nine forms of Durga, complete with specialized animations like floating golden particles, falling flowers, and confetti effects to create an immersive experience. 🌸✨ Technical Highlights: Frontend: Clean UI with a radial-gradient background and glowing text effects. JavaScript: DOM manipulation to handle real-time message updates and randomized animation cycles. Animations: Custom CSS Keyframes for a smooth, festive atmosphere. Check out the code and README here: https://lnkd.in/gHqaAjrH 🚀 #WebDevelopment #JavaScript #HTML #CSS #CodingProject #Navratri2026 #FrontendDeveloper

🚀 Project Showcase: Tic Tac Toe Game using HTML, CSS & JavaScript Excited to share one of my recent mini-projects – a Tic Tac Toe Game built using HTML, CSS, and JavaScript! 🎮 This project helped me strengthen my understanding of DOM manipulation, game logic, and responsive UI design. 🔹 Key Features: Interactive 2-player gameplay Dynamic win detection logic Clean and responsive user interface Reset game functionality 🔹 Technologies Used: HTML – Structure of the game board CSS – Styling and layout JavaScript – Game logic and interactivity Building this project was a great way to practice JavaScript fundamentals and problem-solving skills while creating something fun and interactive. Looking forward to building more projects and continuously improving my development skills! 💻✨ Check my GitHub repo : 🔗 https://lnkd.in/gCz98WpX Day 5 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingProjects #LearningJourney