This is Rishi,
with over 4 years of experience
experience
Languages
Snippets
I use HTML, CSS, and JavaScript for building static sites.
I use React, Node, and MongoDB for Single Page Applications (SPA).
I use PHP and MySQL for backend-focused apps.
Here are some of my handpicked works.
Calendar Component
I used React to power this component, making it easier to implement compared to Vanilla JS. You can navigate to any year.
Calendar with Dynamic Images
Even though it functionality looks similar to the previous 'Calendar Component,' this snippet is quite old. I used Vanilla JS for this one, and it stands out due to its dynamic images.
Graph Plotting Animation Using SVG
This snippet is created using only HTML and SCSS. Surprising, right? I experimented with SVG strokes to achieve the animation.
Responsive 3D Slider
I used CSS perspective to achieve this 3D look. Use the previous and next buttons to navigate between slides.
Plant Store
This snippet is special to me. I handpicked and cropped all the plant images, so you might notice some unusual cuts. I drew all the SVGs with the plant names and used glassmorphism for a more aesthetic look. I particularly like the hover animation. This is an old snippet, and I find it challenging to replicate this now.
Plants Detail Slider
I used Intersection Observer to make this work. You can navigate between slides by clicking on dots or by scrolling. I wanted to use these plant images because I put a lot of effort into cutting them out, so I never get bored of using them.
Responsive Testimonial Slider
In this snippet, each slider resizes based on the width of the screen. My favorite feature is the scrolling animation, which I enhanced using my favorite cubic-bezier function to make it look more captivating.
Gallery App
This is a bit too large to call a snippet; it's more of a project. I used React and the Unsplash API for this app. The most impressive part is the loading animation at the beginning. You might not notice it at first, but if you look closely, it's there.
Interactive Hero Section
I used CSS perspective to create this effect. I hard-coded all the classes for code highlighting because, at that time, I didn't even know there was a library for code highlighting. If you haven't hovered over it yet, give it a try.
Interactive SVG - Graphing
I spent nearly a week learning about SVG, circles, paths, text, etc. The difficult yet fun part was adding JavaScript to make it interactive. Try moving the dots, You can even use this for solving graphing equations.
Books Showcase
Here comes to the most liked pen in my codepen lists, it maybe because of the images i chose, and the book opening kinda animation and hover animation.
Typing Effect
I recently created this pen for the hero section of my client's portfolio. My client asked me to mention all his roles, so I came up with this idea. The impressive part is that this effect is done only with CSS. Oh, and did you notice the keyboard? There's a typing animation that I achieved using JS + CSS.