DEV Community: Muhammad Ahmad

Spent the weekend crafting a delightful animated card using @chakra_ui and @framer motion! 🌟✨

Muhammad Ahmad — Sun, 24 Dec 2023 17:59:49 +0000

🚀 The Concept: The idea of an animated card took shape in my mind, and I couldn't wait to turn it into a reality. Framer Motion stood out as an incredibly powerful tool, seamlessly integrated with ReactJS and Chakra UI, making the animation process a joy.

🎬 Animation Magic: The flexibility and capabilities of Framer Motion, combined with the versatility of Chakra UI, allowed me to craft a mesmerizing animated card. The ease of implementation and the vast array of motion features truly made this project an enjoyable experience.

✨ The Takeaways: This endeavor reiterated the potency of using Framer Motion with ReactJS and Chakra UI. The synergy of these tools not only allowed me to create an animated card but also opened doors to endless creative possibilities.

🌟 Final Thoughts: Crafting this animated card was a delightful journey. It reaffirmed my passion for creative exploration and innovation. With Framer Motion and Chakra UI by my side, I'm excited about the boundless opportunities ahead in the world of animation!

Let's keep creating, innovating, and bringing our imaginations to life! ✨🚀

ChakraUI TemplatesKart - UI updates

Muhammad Ahmad — Wed, 20 Jul 2022 15:46:19 +0000

Hello CharkaUI lovers,

This article presents new UI changes in TemplatesKart

Let's see what new changes I made.

Description

Created beautiful settings drawer which contains color mode switcher and presets.
Removed color mode switcher and color palette from header.
Created Figma designs of the component categories.

Settings Drawer

Figma designs of the component categories

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

New landing page of TemplatesKart website

Muhammad Ahmad — Sun, 29 May 2022 14:43:40 +0000

On weekend, I modified TemplatesKart website landing page.
Let's have a look what changes I made.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Old Hero Section

New Hero Section

New Components Preview Section

Free 12 new Chakra UI components - TemplatesKart

Muhammad Ahmad — Sun, 15 May 2022 15:35:03 +0000

Let's find out 12 new chakra-ui components that I have added to TemplatesKart website recently.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Components overview

Milestones
- With cards on both sides
- With cards on one side
- With icons year-wise
Pricing
- Single tier
- Two tiers
Sidebars
- With header
- Without header
Page Sections
- CTA banner
- Mission section
- Overview section
Features
- With cards
- Simple 2 columns

Some Components Screenshots

Milestones

Pricing

Sidebar

Overview section

Features

Show your support
Give a ⭐️ on Github if you like my work! 🙏

Free 10 new Chakra UI components - TemplatesKart

Muhammad Ahmad — Sat, 07 May 2022 22:51:03 +0000

Let's find out 10 new chakra-ui components that I added to TemplatesKart website recently.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Components overview

Heroes
- With gradient cover
- Simply centered
Blog
- Newsletter
Cards
- Join community
Navbars
- Multiple links
- Simple one
Testimonials
- Card with border
Page Sections
- Small detail
Footers
- With logo left
- Large with logo left

Some Components Screenshots

Newsletters

Join community card

Navbars

Hero section with gradient

Testimonial

Show your support
Give a ⭐️ on Github if you like my work! 🙏

Free 10 Chakra UI components - TemplatesKart

Muhammad Ahmad — Wed, 04 May 2022 01:25:59 +0000

Let's find out 10 new chakra-ui components that I added to TemplatesKart website.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Components overview

Heroes
- Simply centred
- Image on right side
- Left align content
- Background image
Blog
- With border
- Posts feed
Cards
- User card
- Course card
Stats
- Library stats
Testimonials
- with dotted box

Some Components Screenshots

Image on right side

Background Image

Left align content

User card

Library stats

Show your support
Please give a ⭐️ on Github if you like my work! 🙏

Find out 8 new chakraUI components that I built

Muhammad Ahmad — Thu, 28 Apr 2022 18:59:42 +0000

Hi folks,
I added 8 new components to TemplatesKart website. So I want to share them with you. Please check these components and let me know about your suggestions if you have any.

Here are the components list

Cards
- Product card
- Exclusive offer
Blog
- With transparent background
- Blog list with tag
Forms
- Magic link
Testimonials
- With Large image
- Card with avatar
- Card with avatar 2

Some Screenshots

Magic link

Blog card

Testimonial card

Product card

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

TemplatesKart | New landing page built with ChakraUI

Muhammad Ahmad — Sun, 24 Apr 2022 11:38:12 +0000

TemplatesKart provides an easy solution to getting the look you want for your website without having to mess around with too much code.

I launched this website a week ago. Now I updated the following pages UI for better user experience.

Landing Page Sections - https://templateskart.com
- Hero Section
- Key Features
- Product Overview
Projects Page - https://templateskart.com/projects
Components Page - https://templateskart.com/components

Some key features of TemplatesKart

50+ Components
6 Projects
100% Open Source
Typescript Support
Light and Dark Mode support for all components
Fully Responsive components

Github Repo: TemplatesKart Code

Screenshots

Landing Page

Projects Page

Components Page

TemplatesKart | Free Chakra UI Components and Projects

Muhammad Ahmad — Wed, 20 Apr 2022 10:52:43 +0000

Project Overview

TemplatesKart is a powerful set of fully responsive and accessible React components and projects.

Demo: TemplatesKart
Github Repo: TemplatesKart Code

How I built it

Framework: Next.js
Styling: Chakra UI
Animations: Framer Motion
Deployment: Vercel

There are 2 main sections in TemplatesKart

1. ProjectsKart (6 projects)

Currently there are 6 projects. ProjectsKart provides an easy solution to getting the look you want for your website without having to mess around with too much code. User can view project pages and copy code of components.

ProjectsKart Page

Project Page

2. ComponentsKart (40 components)

It is a list of beautiful and responsive React components to build your application. Some of these components are extracted from ProjectsKart and some are built separately.

ComponentsKart Page

Component Page

Why I built TemplatesKart

In 2020, I started learning Reactjs and I explored multiple React component libraries like AntDesign, MaterialUI, Tailwindcss and ChakraUI. All those libraries are great. But I found ChakraUI the best React component library although ChakraUI was new at that time. It Provides just enough to get started, implements sensible defaults, but is also very extensible and customisable. So I started using it and created multiple small projects with it. So far I built 5 to 10 projects with ChakraUI. Some projects are open source. In my new projects, sometimes i need to copy old components code from my previous projects. But it was time consuming process. Because I always need to open codebase of that specific project. So as per my needs and to make copy code process more convenient I created a TemplatesKart website. I added all my previous open source ChakraUI projects and most commonly used components.

TemplatesKart website is open source. Feel free to like and contribute.

Website link: https://templateskart.com
Github repo: https://github.com/MA-Ahmad/templateskart

Screenshots

Reviews component

Stacked lists component

Inspiration & Thanks

Chakra Templates️

I made changelog page for my portfolio website

Muhammad Ahmad — Sun, 30 Jan 2022 20:04:03 +0000

A Changelog page for any website is a good way to keep your audience up to date with new and meaningful changes.
In my previous post, I mentioned that I'll create changelog page for my portfolio website. So I got free time on the weekend and worked on it.

Page link: ma-ahmad/changelog
Github repo: https://github.com/MA-Ahmad/myPortfolio

I used Github Api to fetch PR's of my portfolio website. You can play with Github Api according to your requirements.

Packages:

Note: I used above mentioned packages for mdx content processing.

Here is a chunk of code where I'm processing mdx content after fetching PR's list of my portfolio website.

//Imports
import remark from 'remark'
import html from 'remark-html'

//Component code
const [prDataState, setPrDataState] = useState(null)
const processPrBody = async () => {
    await prData?.map(async (obj) => {
      if (obj.body) {
        const htmlBody = await remark().use(html).process(obj.body)
        obj['body_html'] = String(htmlBody)
      }
    })
    setPrDataState(prData)
  }

Complete File code

Page Image

Show your support

Give a ⭐️ on Github if you like my work!

Started 2022 by updating portfolio website

Muhammad Ahmad — Fri, 21 Jan 2022 14:20:18 +0000

I was thinking about making some changes in my portfolio website since past few months. I couldn't able to do so in 2021. So I started my 2022 by updating portfolio website. I want to share what major changes I made.

Major Changes

Projects Page
In previous version, I had projects list on home page. Now I added separate page for projects. Code
Popular Articles
Removed ~~projects list~~ from home page and added popular articles. Code
Linked with Prisma ORM
Post Like Feature
Now user can like posts and posts likes will be updated in real time wrt dev.to posts likes. Code
Dotted squares
Updated layout by adding dotted squares on both sides of page(from left to right). Code

Minor Changes

Updated 2021 Achievements.
Updated links hover colour wrt selected links colour from CMS(colour mode switcher).
Added fallback skeleton for post cover image.
Added multiple animations on hover and click events.

Future Work

Show Post views
Identify unique post likes
Add changeLog page

Website link: ma-ahmad
Github repo: https://github.com/MA-Ahmad/myPortfolio

Projects Page

Blog Post

Show your support

Give a ⭐️ on Github if you like this portfolio!

Find out what's new in my portfolio website

Muhammad Ahmad — Wed, 01 Sep 2021 16:04:56 +0000

I want to share new updated version of my portfolio website.
Here is the list of new features and changes that I made in my portfolio website.

Color Mode Switcher for links and tags
Search feature for articles
Updated website color mode switcher icons and added animation
Fixed outline issue of links and buttons

Website link: ma-ahmad
Github repo: https://github.com/MA-Ahmad/myPortfolio