Create an infinite slider in react Update: 07/13. carousel, a. Aug 29, 2023 · Let’s see how we could implement an image slider (a. setState({bg: img. Step 2: Install Dependencies Hello everyone, I've created a simple horizontal & vertical Logo Slider Infinite Loop. In this tutorial, we’ll walk you through the process of creating an image slider using ReactJS and the react-slick library along with slick-carousel, along with the slick-carousel package. js【only 4 steps】 npm install react-fast-marquee --save. Each of these item divs represents a slide in the carousel, labeled A to F. I've never built a React slider before and I'm struggling a bit with making it an infinite loop of slides. I want to continue scrolling through infinitely, this slider should always have another item to scroll to. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. I've found a better method for working out the infinite scroll using a JS property called cloneNode and used that to prepend and append the clone slides to create the infinite effect. The article is split up into three sections where we will gradually create this carousel. Defining the interface for our carousel; Positioning the elements on the screen We are hosting React Nexus conference in Bangalore on July 03 - 05, 2025. Announce slide switching with aria-live. 4 with with autoplay freeMode. Now create two child div and add all the images that we have, with a flex layout, padding set to 15px, items aligned to the center that will have an infinite Apr 5, 2023 · It provides a set of components that can be used to create carousels and sliders, such as a carousel, a slider, and a pagination. < Marquee > I can be a React component, multiple React components, or Aug 1, 2024 · Infinite scroll has become a popular technique in web development to provide a seamless and dynamic user experience when dealing with large sets of data. create-react-app react About External Resources. Click any example below to run it instantly or find templates that can be used as a pre-built solution! Continuous infinite slider. Available Scripts. js project using the following command: npx create-next-app@latest infinite-scolling-logos-animation Copy HTML preprocessors can make writing HTML more powerful or convenient. com/Coding-with-Robby/infinite-logo-car Aug 8, 2023 · In this tutorial, we will show you how to create a cool infinite horizontal animation using only CSS. To get started, create a new Next. Let’s get started by creating a new React application. adverts. Touch enabled and responsive. Start using react-simply-carousel in your project by running `npm i react-simply-carousel`. The concept is to move the position of the long graphic Mar 15, 2024 · Just click "fork" at the bottom right and make your minimal demo: Using a framework/library like React, Vue, Next, etc. The concept is to move the position of the long graphic There is also a simple horizontal scrolling slider where you can experience free horizontal scrolling, you can update the content of those slides too. Apr 13, 2023 · Step 4: Put the Slider to the Test. Getting Started with Create React App. General idea Pure CSS responsive infinite loop sliders for creating seamless and engaging user interfaces. A project gallery animation featuring an image slide effect using the width auto animation of Framer Motion. The 3. Slider is a popular web design feature also known as Carousel that allows users to navigate and view images or web content in an eye-catching manner. To use the component, first import it into your file: import Marquee from "react-fast-marquee"; Then wrap the <Marquee> tags around any component or text you'd like to slide. React-slick works well but you can see that it's a port of the original jQuery slick slider. Preview. Inside, there’s a div with the class carousel, which contains several div elements with the class item. import Slider from "react-slick"; function SimpleSlider {const settings = {dots: true Mar 25, 2025 · Building the infinite scroll component; Styling with CSS; Optimizing scroll performance; Let's get started! Environment Setup. You always have to deal with its ref if you want to interact with the slider. Ever wondered how to make an autoplay slider that scrolls indefinitely without any JavaScript? This tutorial will guide you step by step on how to achieve th Find Infinite React Carousel Examples and TemplatesUse this online infinite-react-carousel playground to view and fork infinite-react-carousel example apps and templates on CodeSandbox. This is done to create the illusion of an infinite slider. We will use Create React App (CRA) to set up the project. 23 and it has an issue regarding infiniteLoop of Carousel Slider (circular slide). Pagination. 0, last published: 4 years ago. Aug 22, 2023 · Image sliders are a popular way to showcase multiple images or content in a visually appealing manner on websites. A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees. I am using react-slick to create a slider in my React project. Jan 9, 2024 · This is where React and Framer Motion come into play, allowing you to build sliders that are not just robust and configurable, but also exceptionally smooth. Dec 22, 2022 · In this article, I am going to describe about how to create infinite loop slider which automatically move sideways by using slick. Import React-Slick CSS styles. You can apply CSS to your Pen from any stylesheet on the web. Start using infinite-react-carousel in your project by running `npm i infinite-react-carousel`. js file. Jan 2, 2011 · Infinite carousel for react. Tailwind CSS: For quick and clean styling. Uses Swiper ver. Carousel Component reuse-able, TailwindCSS make responsive UI super easy and efficient, feed with the dynamic data and this demo also show you a way to inli May 27, 2023 · Image slide project gallery. imgSrc}) }, 3000*(i+1)); }); } Dec 10, 2023 · I'm trying to make an infinitely scrolling carousel of images (each with the same dimensions) in framer motion, but I can't get it to work properly. We’re gonna animate it straight to the beginning when it reaches 100% Oct 8, 2021 · You can use react-slick for that. First, we will create our React project using the npx create-react-app command. 2. The file name must be style and its extension . Infinite Looping : Enabled by setting infinite: true in the slider settings Jul 29, 2017 · In order to get myself familiar with the React library I decided to build an infinite scroll portrait slider. Now we move inside our slider-app directory and install our React-Responsive-Carousel package. Start using react-infinite-scroll-component in your project by running `npm i react-infinite-scroll-component`. You switched accounts on another tab or window. The slider operates in two Scrollable and Advanced modes. We'll use it later on but be sure to NPM install it in your project if you want to use it. Used react-slick for a long time but recently used swiper for a project. The classnames library import below will help us manage adding and removing CSS classes. k. Learn more · Versions Mar 3, 2025 · This tutorial will guide you through setting up the project, implementing carousel logic, and adding navigation controls to create a simple yet functional image slider. Aug 29, 2020 · That is why I wrote this article to explain how to implement a slider using react Hooks and TypeScript. In this video, we are going to build an infinite scrolling carousel with hover interactions, inspired by the Apple HomePod product page. Food delivery UI main screen. Note that you will also need to import the CSS file for react-slick. First, we will use the asNavFor property, which provides ref to another slider and syncs it The React Carousel is a slide show component which is a reusable interface element designed to create carousels in React applications. js May 23, 2024 · 🚨🚨🚨 COURSES - https://slayingthedragon. youtube. 🥰 Join this channel to get access to perks 👇:https://www. Starter files: https://github. With years of experience and a meticulous approach to each project, I ensure that every site and PWA is optimized for speed, accessibility, and SEO. Add these two inside the setting - autoplay: true, autoplaySpeed: 2000, to make it infinite scroll you can use - infinite: true, You should also mention how many slides to show. The web page titled "Create an Infinite Slider in React" explains the concept and implementation of an infinite slider in React. Once a user interacts with slider, it should stop sliding and from then on only able to navigate by using prev/next buttons or drag-able on mobile. Aug 12, 2022 · Slider work functionality. In this article, we are going to build an infinite scroll component from scratch. FAQs: As mentioned before, this solution doesn't require really much effort and talking about performance, comparing this approach to a normal slider without looping, it only requires to make two additional DOM insertion when the slider is initialized and some (quite trivial) extra logic to manage a backward/forward loop. js file: Feb 4, 2024 · Let's say we want to showcase the new products added to our website. js. without navigation. When I scroll through the slider the last cloned item shows as expected but the slider stops. Is there a way to create an infinite carousel slider with multiple items visible at the same time? Jul 9, 2023 · The current version of react-responsive-carousel is 3. Run the following command: npx create-react-app infinite-scroll Alternatively, you can use Vite or Next. ) Lightweight: Rerousel is the lightest infinite React carousel available for download from NPM because it uses only a couple of vital packages. You signed out in another tab or window. 1. 0 updates brings a lot of changes, most notably a modern UI refresh. js Examples Ui Disable slider navigation. 8. Learn how to create an infinite scroll with React and ExpressJS using the intersection observer API and a custom useInfiniteScroll hook. You don’t have to worry about thousands of dependencies flooding your application! Jan 13, 2021 · 1 How to Make a Simple React Carousel 2 How to Handle Swipe Event on React Carousel 3 How to Show Multiple Item in Simple React Carousel 4 How to Handle Infinite Loop in React Carousel Hi everyone! This is part 4 of my Simple React Carousel series, it will also be the last part of this series, next I will try to release a package based on this Jan 2, 2025 · Now that everything is set up, we can start using React Slick to create our carousel component. 11, last published: 9 days ago. props. Using Infinite Loop. js carousel component. Create an index. Ideal for creating continuous carousels, marquee displays, or dynamic content showcases. 2 and above: How to Limit RAM Memory Usage; How to Dynamically Add Google Analytics 4 to an Astro Website; How to Create A React Autosuggest Component using MUI and NextJS Feb 12, 2022 · Sliders have now become an essential part of almost all the websites that we browse through generally, they look appealing and give a nice cool effect to the webpage. There are some examples about how to achieve an infinte carousel slider (no start / no end - last item is followed by the first again) with framer-motion - but only with one item visible. CSS Styling: The carousel and its items are styled to create the 3D effect. Nov 9, 2019 · Prop Description Default Type; rows: Number of rows per slide in the slider, (enables grid mode) 1: Number: slidesPerRow: Number of slides to display in grid mode, this is useful with rows option May 5, 2023 · Thumbnails with React Slick. nextEl, pagination. css; Create a script. Made with React and Next. 5, last published: a year ago. And when the slider is on the first slide, and the user clicks on previous, it goes to the last slide. Mar 13, 2023 · Carousel-track: A track is required to hold the items in an infinite strip and the overflow of the items is hidden to display only the required number of items in the carousel. There was an increadible amount of under-the-hood changes for the front-end, we've mostly moved away from pre-processors. ise Marquee Effect bhi bolte hai. Here is the code I tried: changeImage() { this. Note, Swiper React component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e. You can add your own code to improve the behavior of the scroll. I want it to smoothly display images moving at the Customise your web projects with our easy-to-use carousel component for Tailwind CSS and React using Material Design guidelines. There are 8 other projects in the npm registry using infinite-react-carousel. 0. You could make your slider infinite. There are 110 other projects in the npm registry using react-fast-marquee. Necche ka link specific commit ka hai :Code : https:/ May 5, 2023 · import Slider from 'react-slick' The Slider component is a key component in React Slick library; it creates a carousel or slider component in React applications. What's inside? Easily replace with your own logosHorizontal logos slider animationVertical logos slider animation Coming soon: Switch to black and whiteInstructions to adjust the speedInstructions to modify Apr 14, 2020 · Setup and Folder Structure 🔧. co/courses?utm_campaign=general&utm_source=youtube&utm_medium=infinitescrollI Aug 2, 2022 · This allows to easily create a slider. It is a basic slider and it is free to you to improve this for your own needs. Before we begin, make sure you have the following installed: React. Become a Better Devel As mentioned before, this solution doesn't require really much effort and talking about performance, comparing this approach to a normal slider without looping, it only requires to make two additional DOM insertion when the slider is initialized and some (quite trivial) extra logic to manage a backward/forward loop. We want them to be ready visible however the total amount would overflow the page. Scroll up to increment, scroll down to decrement. About External Resources. html; Create a style. To do this, make sure you have npx installed, and run the following command: npx create-react-app tiktok-clone Code language: PHP (php) Mar 24, 2024 · In this tutorial, we’ll create a modern and visually appealing login component using React, Tailwind CSS for styling, and React Icons for… Oct 21, 2023 R-Dev Dec 13, 2024 · In this article, I’ll show you how to simplify the process using React Snap Carousel – a library specifically designed to make implementing carousels in React applications quick and easy. Apr 30, 2021 · I am making an infinite image carousel using hooks and javascript in react native. Found an Jun 5, 2022 · You signed in with another tab or window. The Carousel doesn't go in a loop, instead of being continuous, it jumps from the last slide to the first or from the first slide to the last. ? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next; Svelte May 5, 2018 · I'm trying to create infinite slideshow in React. I've read through the documents and tried different things but could not find a way to customize it exactly Jul 21, 2022 · To do that, we will, first of all, create our React App. gg/Ccz9nQSfQBFinished result - https://codepen. How to build a TikTok clone. Jun 2, 2023 · Populating the Slider: Inside the slide-track div, the LOGOS array is mapped twice to create two sets of slides. If you're using yarn, run: yarn add react-fast-marquee Usage. Swiper has first party support for react and therefore includes many hooks to easily control the slider. npx create-react-app slider-app. The file name must be script and its extension . That meand when it arrive to the last slide, and the user clicks on next it starts again. Here's the corresponding markup: An Infinite Scroll component in react. See the Pen Infinite Slideshow by Chris Coyier (@chriscoyier) on CodePen. The author discusses the benefits of creating a custom infinite slider over using third-party libraries, including avoiding third-party dependencies, reducing project size, and minimizing complexity. Runs the app in the development mode. 2, last published: 3 months ago. After you’ve added all of the code, open the HTML file in your favorite web browser to see the responsive, infinite slider in action. Stylized colors all across the file. A couple of seconds later, the container slideshowSlider will go back to its original position and we'll see the blue container slide again. I’m going to proceed on the premise that you know how to make normal slider with slick. When the first set of slides finishes, the second set starts, creating a seamless transition. There are 6 other projects in the npm registry using Feb 3, 2025 · Each React carousel component library listed above offers unique strengths and features that meet your needs. You can name this folder whatever you want, and inside this folder, create the mentioned files. css file. A slider of logos or react components that scroll horizontally infinitely - kreudev/react-infinite-logo-slider Jun 1, 2024 · Creating an infinite slider effect using only CSS is an effective way to add dynamic and engaging elements to your website. This project was bootstrapped with Create React App. There are 645 other projects in the npm registry using react-infinite-scroll-component. com/channel/UCFntJ37QbDOHJZ-riKhloaw/join☕ https://www. css and as much browser-native API as possible if your designer has provided you with Feb 27, 2018 · I am using react-slick to create a carousel in my project. js using loader-utils, react, react-dom, react-scripts, styled-components Array Infinite Carousel React. Latest version: 1. How to make Caroucel Slider with Slick. Getting started with React Snap Carousel. fully implemented using Reanimated 2. infinite-carousel-with-framer-motion using framer-motion, react, react-dom, react-scripts infinite-carousel-with-framer-motion Edit the code to make changes and see it instantly in the preview Infinite autoplay slider in react JS with hover effect - Teju0110/infinite_autoplay_slider May 5, 2023 · import Slider from 'react-slick' The Slider component is a key component in React Slick library; it creates a carousel or slider component in React applications. Jan 5, 2024 · You need to do two things in order to build an infinite carousel in tailwindcss: Write the HTML & tailwindcss code; Update tailwind config to support infinite scroll animation; HTML & tailwindcss Code. ) Set Up the Project npx create-react-app infinite-scroll-app cd infinite-scroll-app npm start Install axios, react-infinite-scroll-component and tailwindcss Mar 17, 2021 · Framer Motion provides a convenient set of primitives to build complex animations and by leveraging these primitives we can achieve an infinite carousel with very little code. el, etc. To do that, we will, first of all, create our React App. slideshow) using React, Tailwind. Simple example with 5 slides in total About External Resources. 8, last published: 3 months ago. I am displaying three slides at a time. Which you pass inside the Slider Component. Label your pagination, e. Start using react-native-reanimated-carousel in your project by running `npm i react-native-reanimated-carousel`. I want it to smoothly display images moving at the About External Resources. Allow for keyboard navigation when the slider is actively in focus. Here's the HTML code for infinite logo carousel in tailwindcss. With support for autoplay and infinity options. The video instructs to provide a flex box with a width of 200%. There are a lot of packages that help developers to create slideshow but I would like to do it myself. com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-Kx8XlKRBZx8Image sliders and caro My code - https://github. . Sep 19, 2018 · I'm trying to build an infinite slider. The two npm packages I’m using for this build are node-sass for Dec 29, 2024 · Stop slider when infinite: false, React-Slick Slide. io 🚨🚨🚨Join the discord - https://discord. Aug 21, 2011 · Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. You have to change the settings object. Infinite loop with slides per group. Jun 2, 2024 · In this video, I will create an infinite slider with pause and resume functionality using only CSS, using simple, clean code that is easy to reuse and upgrad Jan 8, 2021 · A slider of logos or react components that scroll horizontally infinitely. The file name must be index and its extension . js with minimal modifications. advertImages. Here is my "rails" array within my constructor which are imported components: Jan 23, 2025 · The infinite loop feature in React Slick provides a powerful way to create engaging carousel experiences. js or (Any other react framework) Tailwind CSS; Framer Motion; Setting Up the Project. io/ramzibach-the A simple, lightweight, fully controlled isomorphic (with SSR support) React. buymeacoffee. infinite - boolean, default true. The library does not provide its own CSS styling. ca/ The Last React Carousel You'll Ever Need! Aug 9, 2022 · Is there any way to have an infinite image slider like the one below, only using TailWindCss, ReactJS, and plain JS. js Edit the code to make changes and see it instantly in the preview Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing Core React Vue Element. Sep 10, 2024 · React Slick: A carousel component for React that simplifies creating sliders and carousels with many built-in features. Inspired by https://locomotive. Start using react-fast-marquee in your project by running `npm i react-fast-marquee`. cd slider-app npm install react-responsive-carousel --save Oct 18, 2022 · We will fully implement other methods to make the infinite scrolling effect work with native JavaScript. I am almost done with the code and also the carousel works absolutely fine but the I specialise in developing beautiful and responsive websites and progress web applications using technologies like React, Next. Nov 1, 2024 · All the slider code contained within a div with the class container. React Swiper also provides a set of API methods that can be used to customize and control the carousels and sliders. js, firstly check the below article. It will cover the following topics: Environment Setup; Building the Oct 2, 2022 · Aaj ke video me dekhenge ki auto-scrolling animation kaise banaye . It is very easy to use and you can create a very attractive Infinite scrolling slider component that smoothly loops through its children. Create two copies of the slider: since we want it to move we actually need to have an overflow. In this section, we will create thumbnails for our carousel components. Latest version: 4. map((img,i) => { setInterval(() => { this. Customise your web projects with our easy-to-use carousel component for Tailwind CSS and React using Material Design guidelines. The react-infinite-slider-carousel is a React component for creating advanced, customizable sliders with support for infinite sliding, autoplay, responsive sizing, and smooth animations. Turns out it’s really not that hard. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. What will you find in the file: Responsive components (infinite carousel slider, horizontal scrolling slider). By carefully considering performance, edge cases, and user interaction patterns, you can create smooth and responsive infinite carousels that enhance your application's user experience. Edit the code to make changes and see it instantly in the preview Explore this online react infinite slider sandbox and experiment with it yourself using our interactive online playground. This is the idea behind using infinite animated scroll. We also want for: animation to start on page load; components to be presented running in an endless loop; 1. By following the steps outlined in this guide, you can build a seamless, performance-optimized slider that enhances user experience and keeps visitors engaged. 💾 Starter code: http Allow each individual slide to be focused, but only when they’re active, using a combination of tabindex and aria-hidden. vue Simple carousel component. You can use it as a template to jumpstart your development with this pre-built solution. Sep 2, 2020 · First create a new file named VerticalCarousel. 1. Axios: For making HTTP requests to the GitHub API. Creating our carousel component Let’s say we want a total number of 4 slides for our carousel. And so on. Step 1: Set Up the Project. React Simplified Course: https://reactsimplified. I am trying to make a component out of this, here is the code so far: I am trying to make a component out of this, here is the code so far: About External Resources. To get started with React Snap Carousel, begin by installing the package using the following command: How to create an infinite card/image slider that has a a smooth and uninterrupted slide that loops. How to make an infinite slider in React To create an infinite slider in React, you can use a combination of state management and CSS transitions to loop through a list of items. Today, we will also built a small 3d slider in react js using the react slick library, documentation can be found here. Latest version: 6. Starting the project. jsx. const settings = { infinite: true, slidesToShow: 3, autoplay: true, speed: 5000, autoplaySpeed: 0, arrows: false, slidesToScroll: 4, easing: "linear" }; this is the closest i was able to achieve but i'm still getting a slight pause A simple, lightweight, fully controlled isomorphic (with SSR support) React. The slider implementation is as follows: js $(". If you want to make it infinite scroll. js, Typescript, and Sanity. How To Use This File: Sep 4, 2022 · I initially struggled with the video instructions. Continuous infinite slider. a. There are 6 other projects in the npm registry using The Most Modern Mobile Touch Slider. Currently there are two slides, but I'd like to make it so that the user can click the next/previous buttons and the slides are infinite, repeating slide 1 and slide 2, over and over. 11, last published: 5 years ago. I want Jul 21, 2022 · Infinite Loop: This means we could To put our knowledge into practice, we’ll create a slider app with our React-Responsive-Carousel. As a React developer I really enjoy the powerful combination of React and Framer Apr 16, 2023 · “slider” class added to css file. Nov 16, 2020 · As you can imagine, after a couple of seconds the container slideshowSlider will move again and what will be shown to the user is the yellow container slide. 4. May 5, 2018 · I'm trying to create infinite slideshow in React. From lightweight, mobile-first sliders to feature-rich options with touch gestures and SEO-friendly designs, this guide will make it easier to pick one that works well for your next project. com/Think-senpai/LagosFoodBank/blob/master/components/Partners. Array Infinite Carousel React. In this article I will walk through the code and the logic. Reload to refresh your session. We can use the customization options provided by the React Slick APIs to create our carousel component. com/cods🔗 Source code Oct 19, 2018 · A Slider/Carousel component for React supporting custom css animations. Feb 3, 2025 · Each React carousel component library listed above offers unique strengths and features that meet your needs. In this tutorial, we’ll walk you through creating your own slider component using these powerful tools. So if you are new to slick. Nov 7, 2022 · When trying static data the slider works fine but when I get my data from an API the design breaks down into a list and the slider stops working. These methods allow developers to add custom features such as infinite looping, autoplay, and Mar 11, 2023 · My Recommended Books to Learn React and Typescript; How to Create A Pie or Doughnut Chart in React using ChartJS; Optimizing MongoDB 3. React. 6. FAQs: Nov 7, 2024 · react-infinite-scroll-component: A popular package to manage the infinite scroll behavior. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Open in new window Core React Vue Angular Svelte. Aug 26, 2024 · Also, If you are looking to implement an infinite scroll in your application then you can follow the guide to create your own. html file. It allows users to scroll through content endlessly without explicit pagination or loading new pages. react; slider; carousel; infinite; logo; logo slider; infinite carousel; react infinite carousel; tag slider; tag; tags slider Infinite Autoplay Carousel using @types/styled-components, babel-plugin-styled-components, react, react-dom, react-scripts, styled-components Infinite Autoplay Carousel Edit the code to make changes and see it instantly in the preview Jan 9, 2020 · i am trying to create infinite slideshow without pause this are my settings for the react-slick slider. Latest version: 9. May 8, 2023 · Create a folder. There are 79 other projects in the npm registry using react-native-reanimated-carousel. My take on Netflix’s slider is built in React and I’m using TMDB API for fetching movie data. This effect can be used to display a variety of things, and for this post, we’ll focus on building a logo carousel that smoothly scrolls from right to left using Tailwind CSS classes. Tailwind's config allows me to extend the width in specific pixels; however, I was unable to get it working with percentages. Infinite loop. Fully customizable. g. To set up a new React project, you can use tools like Create React App to generate a project structure quickly. “Navigate to slide 2 of 6”. Within this file, let's make a React component that takes data and leadingText props. Swiper v6. In the project directory, you can run: npm start. In this video we create an infinite logo carousel in a matter of minutes using only CSS. 🎓 Did you know I have courses? Both free and premium ones: https://kevinpowell. Infinitely scrolling, very smooth. These methods allow developers to add custom features such as infinite looping, autoplay, and Apr 5, 2023 · It provides a set of components that can be used to create carousels and sliders, such as a carousel, a slider, and a pagination. Dec 5, 2017 · Here is the carousel I am using: react-slick I want to be able to scroll through each slide using the mouse scroll up or down event. Add the following code to your App. Use useState to keep track of the current slide index, and useEffect to automatically change the index over time. Check out my portfolio to see my pet projects. ebfcmuhvbxpgybquobvjqleoxeepsfhtpenivfalrzvktpk