After spending months building full-stack projects, I wanted to create something that reflects me — not just functionality, but experience, detail, and emotion. So I built my personal portfolio. Just an idea: “What if a portfolio felt cinematic?” This project became a playground where I pushed beyond basics and focused on: 🎬 Cinematic UI/UX with smooth scroll & transitions ⚡ Custom scroll system (no default scroll behavior) 🧠 Real-time interactions & animation logic 🎯 Precision in micro-interactions & typography 🖤 Minimal, premium aesthetic with attention to detail Built using: React • Framer Motion • GSAP • Tailwind • Custom scroll engine Every section is designed to feel intentional — from the loader to transitions to interactive project showcases. 🔗 Live: https://lnkd.in/gY-_scqf Would love your honest feedback. Also curious — what’s the last thing you built just for the fun of it? #frontend #react #webdevelopment #portfolio #uiux #javascript #fullstack #framerMotion #gsap #developers #buildinpublic

Building a custom header that feels "native" in React Native is notoriously difficult. You either stick with the rigid defaults provided by navigation libraries, or you build a custom component and spend days fighting to get the scroll sync and screen transitions to look fluid. It’s a classic trade-off between stability and customisation that often leads to janky animations. 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗵𝗲𝗮𝗱𝗲𝗿-𝗺𝗼𝘁𝗶𝗼𝗻 just hit 𝘃𝟭.𝟬.𝟬, and it’s a complete shift in how we handle these complex UI patterns. Instead of fighting against the navigation stack, it introduces a way to bridge the gap between your content and the header area with precision. 𝗪𝗵𝗮𝘁’𝘀 𝗻𝗲𝘄 𝗶𝗻 𝘁𝗵𝗶𝘀 𝗿𝗲𝗹𝗲𝗮𝘀𝗲? ➡️ 𝗖𝗼𝗻𝘁𝗲𝘅𝘁-𝗙𝗶𝗿𝘀𝘁 𝗛𝗲𝗮𝗱𝗲𝗿 𝗔𝗣𝗜 — A redesigned architecture that uses React context to manage header state. This makes it much easier to update header elements based on what’s happening deep inside your screen's component tree without messy prop drilling. ➡️ 𝗘𝘅𝗽𝗹𝗶𝗰𝗶𝘁 𝗡𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗕𝗿𝗶𝗱𝗴𝗶𝗻𝗴 — The library now explicitly bridges with the navigation state, ensuring that as you swipe between screens, the header transitions are perfectly synchronised with the native navigation animation. ➡️ 𝗕𝗲𝘁𝘁𝗲𝗿 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 — Significant internal refactors have reduced the overhead of tracking scroll positions and state changes, delivering much smoother motion even in complex layouts. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? For a long time, achieving that polished "Apple-style" large header that morphs and moves was reserved for apps with massive engineering teams. With the 𝘃𝟭.𝟬 milestone, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗵𝗲𝗮𝗱𝗲𝗿-𝗺𝗼𝘁𝗶𝗼𝗻 makes these high-end interactions accessible to everyone, providing a stable, performant foundation for design systems that need to stand out. #ReactNative #MobileDev #UIUX #OpenSource #JavaScript #TypeScript #Animations #Navigation #HeaderMotion #SoftwareEngineering #DevTools #MobileAppDev

A product page loads. Beautiful UI, polished animations… but it takes 5 seconds to become usable. Why? Because we ship JavaScript for everything, even parts that never needed it. This is the inefficiency most frontend systems quietly carry. Now consider a different approach, popularized by Astro. Render the majority of the page as pure HTML on the server. No hydration. No client-side overhead. Then selectively activate only the components that truly require interactivity, search, filters, dynamic widgets. Nothing more. The impact is immediate, smaller bundles, faster time-to-interactive, and significantly better performance on constrained devices. This isn't just an optimization. It's a shift in thinking. Instead of asking "what needs JavaScript?" Start asking "what doesn't?" That question alone can transform how we build for the web. #technology #astro #javascript #ui

Built a fully functional 6-floor elevator simulator in pure HTML/CSS/JS. Smooth floor-to-floor movement, a moving light bulb indicator, and a "Down" button that automatically returns to ground floor. No libraries, no frameworks — just clean front-end logic. 🚀 Interactive UI | Smooth animations | Real-time floor updates #JavaScript #Frontend #WebDevelopment #CodingProject

Have you ever looked at a website and thought, “How is this even built?” That was me when I saw the Anime.js website. What started as curiosity turned into one of the toughest builds I’ve ever taken on. I didn’t just explore it I rebuilt the entire experience from scratch. Every scroll, every transition, every 3D like motion detail… none of it came easy. It took hours of breaking things down, researching how animations actually behave, and retrying until it felt right. There were points where it felt almost impossible to match the smoothness and precision but that is exactly what made this project worth it. What changed for me after this: • I do not just “use” animations anymore I understand how they work • I gained real control over 3D style motion on the web • Scrollytelling finally clicked for me • My approach to frontend has completely leveled up This was not just a project it was a shift in how I think about building on the web. Curious what is the hardest thing you have ever tried to recreate? #FrontendDevelopment #JavaScript #AnimeJS #WebAnimation #Scrollytelling #3DWeb #CreativeCoding

Transforming Digital Spaces with Motion: Studio D is Live! 🎥 I’m excited to announce the deployment of Studio D, a high-performance, motion-driven agency landing page built to push the boundaries of modern web experiences. This project was a deep dive into "The Art of the Scroll"—ensuring that every transition, reveal, and parallax effect feels fluid and intentional. Key Technical Highlights: ⚡ Performance: Built with React 19 and Vite 7 for near-instant load times and optimized production builds. 🎨 Styling: Leveraged Tailwind CSS v4 for a clean, modern aesthetic that adapts flawlessly to all screen sizes. 🎬 Motion Orchestration: Integrated GSAP (ScrollTrigger) and Framer Motion to create complex, timeline-based animations. 🌊 User Experience: Utilized Locomotive Scroll to provide a premium, "buttery-smooth" custom scrolling feel. One of the biggest challenges was synchronizing heavy video assets with scroll-triggered animations while maintaining a solid 60fps. It taught me a lot about asset optimization and frontend performance tuning. 🔗 Explore the live experience: https://lnkd.in/gV8TtnPU 📁 GitHub Repository: https://lnkd.in/gxrsrW8B #ReactJS #GSAP #ViteJS #FrontendDevelopment #WebDesign #UIUX #Vercel #TailwindCSS #LPU #FullStackDeveloper #MotionDesign

Building Interactive Parallax Engines with React & Framer Motion 🚀 Just finished integrating a custom Parallax Floating Component that takes user interaction to the next level. The challenge: Create a multi-layered depth effect that remains performant even with high-res imagery. The Stack: 🛠️ React & TypeScript for the component architecture. ⚡ Vite for ultra-fast HMR and building. 🎬 Framer Motion for state-of-the-art animation orchestration. 🎨 Tailwind CSS for the refined luxury styling. The logic uses a custom hook to track mouse position relative to the container’s center, applying individual 'depth' factors to each element. This creates a "magnetic" floating effect that makes the UI feel alive. Always looking for ways to push the boundaries of React animations! 👨💻 #ReactJS #TypeScript #FramerMotion #WebDev #UIEngineering #JavaScript

Built a cocktail menu web application called “Mojito” using Angular, GSAP, Tailwind CSS, and custom CSS animations. The project focuses on interactive UI/UX for showcasing cocktails with smooth transitions and motion effects powered by GSAP, integrated through Angular lifecycle hooks for precise control over animations. Additionally it uses a Frame Interpolation tool called FFmpeg to increase fps in video scroll animations . This implementation was inspired by a React-based version created by JSMastery. While the original concept was built in React, I re-engineered and adapted the entire experience using Angular, applying Angular-specific architecture and component structure instead of React patterns. git repo: https://lnkd.in/e7PJjHzS

Many developers still rely on custom CSS variables or even JavaScript to define scroll-driven animations, creating unnecessary complexity and brittle codebases. This often leads to animations that are hard to debug, poorly performant, and challenging to synchronize across different scroll containers. Historically, achieving robust scroll-driven effects meant juggling Intersection Observer APIs or custom scroll event listeners, then manipulating CSS properties with JavaScript. Even with early CSS `animation-timeline` drafts, developers had to declare a custom timeline name using `--scroll-timeline` (as seen in the old method example), which added an extra, often redundant, step. Ignoring the native `view()` timeline means your animations remain less declarative and potentially less optimized by the browser. You lose out on the built-in efficiency and simplicity of the platform's dedicated solution, leading to more code, more bugs, and a slower development experience. Are you still defining custom timelines for scroll-driven animations? #css #webdev #frontend #animation #scrollanimation

Maximum effort? More like maximum timepass. I kept seeing this viral Deadpool website concept floating around Pinterest and finally decided to turn the static design into real code. I built this purely for fun over a casual coding session to stretch my UI and animation muscles. Translating the bold typography, the character layering, and the dark theme into the browser was a great mini-challenge. The tech stack: - React - Framer Motion (for the smooth, dynamic animations) Sometimes, as developers, we need to take a step back from serious architecture and just build things because they look cool. Check out the live deployment here (preffered dekstop view for better visual experience) : https://lnkd.in/dWdwYfRU #ReactJS #FramerMotion #FrontendDev #WebDesign #UIUX #JavaScript #WebAnimations #CreativeCoding #FrontendDeveloper #WebDevelopment