Senior Frontend Engineer @ Sequoia Group

github

projects

substack

devto

medium

gumroad

productHunt

Burhan Bharmal  • Peerlist

<h3>Peerlist UI Animation Challenge</h3>5-Day Micro-Interaction Project | April 2025A hands-on UI/UX challenge focused on crafting thoughtful, performant micro-interactions using pure HTML, CSS, and JavaScript—no animation libraries involved. The goal was to design interfaces that look good and scale well with real-world data and use cases.🔹 What I Built:<ul><li>Day 1 – User Card Animation: Designed a clean entry animation for dynamic user cards to enhance visual onboarding.</li><li>Day 2 – Status Pills: Created a responsive status indicator system using pills with seamless state transitions.</li><li>Day 3 – To-Do App (Revived): Rebuilt a simple to-do app after 7 years, complete with satisfying animated checkboxes.</li><li>Day 4 – Plan Tabs UI: Developed a tabbed layout for browsing different subscription plans with smooth transitions.</li><li>Day 5 – Layout Switcher: Engineered a layout toggle (List, Card, Pack view) optimised for large datasets using only vanilla CSS and JS—avoiding animation libraries for better control and performance.</li></ul>✅ Highlights:<ul><li>Focused on performance-first animations without third-party dependencies.</li><li>Emphasised scalability and accessibility in each interaction.</li><li>Revisited fundamentals and strengthened animation logic using pure CSS transitions and keyframes.</li><li>Learned to balance creativity with real-world constraints.</li></ul>Rebuilding interactions from scratch without relying on animation libraries helped me rediscover the joy of CSS and sharpen my UI problem-solving skills.Tools Used: HTML, CSS (Tailwind), JavaScript (React), Git, CloudflareGitHub URL: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://github.com/ibuli/peerlist-ui-animation-challenge">https://github.com/ibuli/peerlist-ui-animation-challenge</a>Demo URL: <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="https://peerlist-ui-animation-challenge.pages.dev/">https://peerlist-ui-animation-challenge.pages.dev/</a>

Peerlist UI Challenge 2025

Web Developer

Lead, Frontend Engineering at Sequoia Group

<h2>Inspiration</h2>Smart Scout was born out of the need to simplify online tasks and enhance productivity. We wanted to create an intelligent assistant that could help users quickly navigate, summarize, and create content from websites with minimal effort. With the ever-increasing volume of information on the internet, we saw a need for a tool that could distill content, gather links, and generate relevant text for posts, all in one place. Our goal was to make daily web interactions more efficient and creative, empowering users to focus on their work without the distraction of manual tasks.<h2>What it does</h2>Smart Scout is an AI-powered Chrome extension designed to help users save time and increase productivity. It offers a range of features, including:<ul><li>Summarizing Pages: Condenses lengthy articles and web pages into concise summaries, so you can get the gist of the content in seconds. Extracting Links: Automatically pulls all the links from a web page, helping users find relevant resources quickly.</li><li>Content Writing: Generates written content, from blog posts to social media updates, based on your input and preferences.</li><li>Social Media Post Generation: Creates tailored posts for various social media platforms, streamlining the process of content creation for online marketing and personal branding.</li></ul><h2>How we built it</h2>We built Smart Scout using a combination of cutting-edge AI technologies, including natural language processing (NLP) and machine learning. The AI model is trained to understand and summarize large bodies of text, identify and extract relevant links, and generate contextually appropriate content for different purposes. The extension was built with the Chrome API to ensure seamless integration with the browser and provide real-time feedback and usability. We also focused on creating a smooth, user-friendly interface that integrates with the browser's workflow without disrupting the user's experience.<h2>What we learned</h2>Throughout the development process, we gained valuable insights into both the technical and user experience aspects of the project:<ul><li>Balancing Accuracy with Speed: We learned how crucial it is to strike the right balance between the speed of content processing and the accuracy of the output.</li><li>User-Centric Design: Building an intuitive interface that fits naturally within the user's existing workflow was key to making the extension both useful and enjoyable to use.</li><li>AI Limitations and Potential: While AI is powerful, it requires constant refinement to ensure that it can understand and adapt to diverse content and contexts.</li></ul><h2>What's next for SmartScout</h2>We’re excited about the future of Smart Scout and have big plans ahead:<ul><li>Improved Customization: We aim to add more personalization options for content generation, including tone, style, and targeted social media platforms.</li><li>Integration with More Platforms: We plan to expand Smart Scout’s capabilities by integrating with additional tools and platforms, allowing users to export and share content more easily.</li><li>Enhanced Summarization: We are working on enhancing the summarization features, allowing users to extract more specific information or summaries tailored to their preferences.</li><li>User Feedback: We will continue to refine the extension based on user feedback, adding features that users find most valuable and optimizing the overall experience.</li></ul>