Hi eveyone , After a few weeks of iteration, I'm excited to share my new developer portfolio: a single-page experience that's fast, animated, and intentionally a little extra. ✨ 🧱 The Stack Next.js 16.2 (App Router) + React 19 TypeScript end-to-end Tailwind CSS v4 for styling GSAP for scroll-triggered animations OGL for lightweight WebGL effects next-themes for seamless dark/light theming Sonner for toast notifications 🗂️ The Architecture I went with a feature-first folder structure instead of cramming everything into a generic components/ pile: src/ ├── app/ → Next.js App Router entry ├── features/ → Self-contained sections │ ├── hero/ │ ├── about/ │ ├── skills/ │ ├── projects/ → Custom carousel view │ ├── experience/ │ └── contact/ ├── components/ → Shared UI (Navbar, Cursor, etc.) ├── hooks/ → useGSAP, useScrollSpy └── lib/ → GSAP setup Each feature owns its own data and components — easy to maintain, easy to scale. 🎨 What I Built Animated liquid background — hand-crafted blob shader that adapts to theme Custom cursor that reacts to interactive elements Scroll spy navigation with smooth GSAP transitions Project carousel for showcasing work Theme toggle with persisted preference Section-by-section reveal animations powered by GSAP's ScrollTrigger Fully responsive and accessible 💡 Lessons learned Working with Next.js 16 + React 19 RSC required rethinking where state lives. Animation logic stays on the client, but content stays server-rendered for performance and SEO. The result: heavy visuals without the heavy load. Always shipping. Always learning. This the link of the portfolio, take a look and tell my your feedback 👀 : https://lnkd.in/d-c-YQJC #WebDevelopment #NextJS #React #TypeScript #FrontendDevelopment #GSAP #TailwindCSS #PortfolioProject

"CSS linear()" Recently, as part of a term project at BCIT, I built a small web app that generates alt text from images. It’s implemented using HTML, CSS, and TypeScript. In addition to building the features, I spent time researching and designing the app with a focus on JavaScript architecture and separation of concerns. One thing I learned in particular was how to use the linear() easing function in CSS. I used to rely on ease and ease-in-out, but linear() allows for much finer control over animation timing, making it easier to fine-tune the overall feel of the UI. In this app, I applied linear() to the theme switcher and hover interactions, adding a subtle spring-like motion to create a more natural and pleasant experience. This project reinforced how even small differences in motion can significantly impact user experience. 🔗 Live site: https://lnkd.in/g2Xm7VyV 😼 Git hub: https://lnkd.in/gi2wpRsC Notes - This app uses Puter.js. You will be asked to log in or agree to the terms on first use. - Since it includes an image upload feature, please be cautious when uploading images containing personal or sensitive information. As it relies on external services, it’s best to consider the content before use.

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day82 Project: Pomodoro Timer What I built Today I built a modern Pomodoro Timer web app that helps improve focus and productivity using timed work sessions and breaks. It includes a smooth glassmorphism UI, animated progress bar, and automatic session switching between focus and break modes. Challenge I faced Handling timer state management between focus and break sessions while ensuring smooth transitions and accurate countdown updates without glitches. How I solved it Managed timer logic using setInterval with proper state control Implemented automatic switching between focus and break sessions Created dynamic progress bar based on remaining time Used clean UI design with glassmorphism effect for better UX Handled start, pause, and reset functionality efficiently Live Demo: https://lnkd.in/dwXbjT5v Feedback is always welcome! Code Of School Avinash Gour | Ritendra Gour #JavaScript #WebDevelopment #100DaysOfCode #Frontend #PomodoroTimer #ProductivityApp #HTML #CSS #JS

🕌 Islamic Quiz App — HTML, CSS & JavaScript Developed an interactive Islamic Quiz App featuring 10 questions with instant visual feedback and final score display. This project improved my JavaScript logic, DOM control, and user-focused UI design. 🔹 Key Features. 🔸10 quiz questions with options 🔸Option lock after selection 🔸Correct answer highlights in green, wrong in red 🔸Final score out of 10 🔸“Start Again” restart button 🔸Clean, responsive interface A practical project focused on logic, interaction, and meaningful user experience. #FrontendDevelopment #HTML #CSS #JavaScript #QuizApp #WebProjects #PortfolioProject #UIUX #LearningByBuilding

🚀 Just Built an Advanced JavaScript Project! Excited to share my latest hands-on project where I combined multiple front-end concepts into one interactive web app 💻 🔹 What’s inside the project? ✅ Interactive Quiz App with score tracking ✅ Image Carousel with navigation controls ✅ API Integration to fetch random jokes ✅ Responsive design using CSS media queries 💡 This project helped me strengthen my understanding of: - DOM manipulation - Event handling - Async JavaScript (fetch & APIs) - Clean UI design with CSS Building projects like this really shows how powerful JavaScript can be when combined with good UI/UX practices. 📌 Next step: Adding animations and improving user experience even further! If you’re learning web development, I highly recommend building small projects like this — they make concepts stick 🔥 #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode #LearnToCode #Projects #HTML #CSS

🚀 Built Something That Finally Feels Different. In a time where AI can generate entire apps in minutes, I kept asking myself a simple question: What actually makes a developer stand out? For me, the answer wasn’t more tools — it was craft. After getting comfortable with React.js and TailwindCSS — understanding component structure, state flow, performance optimization, and deployment — I realized something was missing… 👉 The experience. Not just building websites… but creating moments. So I stepped into a new zone: animation and interaction design. This week, I pushed myself to explore GSAP — a powerful animation library that transforms static UI into something alive. No templates. No shortcuts. Just experimenting, breaking things, and rebuilding. 💡 The result? A fully animated, high-performance landing page inspired by modern award-winning designs. ✨ What I focused on: • Smooth scroll-triggered animations • Seamless transitions between sections • Performance-first animation techniques • Creating a cinematic user experience This project changed how I think about frontend development. It’s not just about functionality anymore — it’s about feeling. 🐙 GitHub: https://lnkd.in/g3y_btVK Still learning. Still experimenting. But now, building with intention. Big thanks to JavaScript Mastery Mastery for the nice course! #WebDevelopment #Frontend #GSAP #ReactJS #TailwindCSS #UIUX #CreativeCoding #JavaScript #BuildInPublic

🚆 Built a React Project: Track Journey Excited to share my latest project where I practiced core React concepts by building a Train Tracking UI ✨ 🔗 Live Demo: https://lnkd.in/gWs4r2J9 🔗Repo Link : https://lnkd.in/gvXh6-XP 💡 What this project does: A responsive web app that displays train details with availability status and allows users to interact by adding trains to their journey. 🛠️ Tech Stack: ⚛️ React JS 🎨 Tailwind CSS ⚡ Vite 🎯 React Icons 📚 Key Concepts Practiced: ✅ List Rendering using .map() ✅ Event Handling (onClick interactions) ✅ Conditional Rendering (Available / Unavailable) ✅ State Management using useState ✅ Reusable Components ✨ Features: 🚆 Dynamic Train Cards 📱 Responsive Navbar with Mobile Menu 🔄 Real-time UI interaction 🎨 Clean and modern UI with hover effects 🎯 This project helped me strengthen my understanding of React fundamentals and component-based architecture. Grateful for the guidance and support from my mentor Lakshmi Narasimhan #ReactJS #FrontendDevelopment #WebDevelopment #JavaScript #TailwindCSS #Vite #ReactProjects #UIUX #MERN #List #Event #ConditionalRendering #useState #Hooks #Entri #EntriElevate

🚀 Built a To-Do List Web App using HTML, CSS & JavaScript I recently created a simple task management app to strengthen my frontend skills. ✨ Features: ✔️ Add & delete tasks ✔️ Mark tasks as completed ✔️ Data saved using local storage 🔗 Live Demo: [https://lnkd.in/erim6kMy] 💻 GitHub Repo: [https://lnkd.in/eghkFCdJ] This project helped me understand DOM manipulation and event handling. I’d love your feedback: • What features should I add next? • How can I improve the UI/UX? Your suggestions will really help me improve 🙌 #webdevlopment #javascript #frontend #projects #learning

From Syntax to Seamless UI. ☁️💻 I’ve just wrapped up this Weather Web App, built from the ground up using HTML5, CSS3, and Vanilla JavaScript. While the functionality is key, I wanted to push the boundaries of how a utility app feels. Moving away from standard templates, I engineered this "Premium Dark" interface to give it a cinematic, high-end dashboard vibe. Technical Highlights: Interactive Data Rendering: Leveraging Vanilla JavaScript to bridge the gap between complex weather data and a fluid, user-friendly interface. Custom CSS Architecture: Achieving that deep charcoal aesthetic with high-contrast cyan accents. Responsive Engineering: Ensuring the "Command Center" look remains pixel-perfect across all screen sizes. It’s one thing to design a mockup, but bringing it to life through clean, efficient code is where the real magic happens. 🌙 How do you like this "Command Center" aesthetic for a weather tool? Would love to hear your feedback! 🚀 #WebDevelopment #FrontendDeveloper #JavaScript #CodingLife #HTMLCSS #Programming #PortfolioUpdate #KarachiDevs

AnimateIcons is now available as an npm package. Previously, AnimateIcons was mainly used through the shadcn CLI registry. Now you can install it directly and import animated React icons like a normal package. Install: npm i @animateicons/react Usage: import { EyeIcon } from "@animateicons/react/lucide"; export default function Example() {  return <EyeIcon size={24} color="#f45b48" />; } Why this is useful: - Direct package imports - Faster setup for existing React apps - Better for dependency-based workflows - Animated SVG React icons - TypeScript-friendly - Useful for dashboards, landing pages, design systems, and component libraries Docs: https://lnkd.in/dieuqvcR GitHub: https://lnkd.in/druFAMbc npm: https://lnkd.in/dZQuiiUe I’d love feedback on the package API, import experience, and tree-shaking behavior. #ReactJS #TypeScript #npm #OpenSource #FrontendDevelopment