Templates Kart

Home

Intro Section

import * as React from 'react';
import { Flex, Avatar, Box, Container, forwardRef } from '@chakra-ui/react';
// Here we have used framer-motion package for animations
import { motion, isValidMotionProp } from 'framer-motion';

const IntroSection = () => {
  return (
    <Container maxW="7xl" p="12">
      <Flex direction={['column', 'column', 'row']}>
        <Box m="auto" mb={[16, 16, 'auto']}>
          <MotionBox whileHover={{ scale: 1.2 }} rounded="full" shadow="lg">
            <Avatar
              size="2xl"
              showBorder={true}
              borderColor="blue.400"
              src="https://avatars2.githubusercontent.com/u/37842853?v=4"
            />
          </MotionBox>
        </Box>
        <Flex
          position="relative"
          ml={['auto', 'auto', 16]}
          m={['auto', 'initial']}
          w={['90%', '85%', '80%']}
          maxW="800px"
          justifyContent="center"
          direction="column"
        >
          <Box position="relative">
            <MotionBox whileHover={{ translateY: -5 }} width="max-content">
              <Box
                as="h1"
                // mt={10}
                mb={6}
                fontSize="3xl"
                lineHeight="shorter"
                fontWeight="bold"
                mt={0}
                cursor="pointer"
                width="max-content"
                textAlign="left"
              >
                <Box as="span" display="inline-block" position="relative">
                  Hey!
                  <Box
                    as="span"
                    display="block"
                    position="absolute"
                    bg="blue.400"
                    w="100%"
                    h="1px"
                    bottom={-2}
                  />
                </Box>
              </Box>
            </MotionBox>
          </Box>
          <Box as="h2" fontSize="2xl" fontWeight="400" textAlign="left">
            My name is{' '}
            <Box as="strong" fontWeight="600">
              Ahmad
            </Box>{' '}
            and I&apos;m a{' '}
            <Box as="span" whiteSpace="nowrap">
              Full Stack Developer and
            </Box>{' '}
            <Box as="span" whiteSpace="nowrap">
              an open source lover&nbsp;
            </Box>
            from{' '}
            <Box as="span" whiteSpace="nowrap">
              Pakistan 🇵🇰
            </Box>
          </Box>
          <Box as="h2" fontSize="2xl" fontWeight="400" mt={5} textAlign="left">
            This is my digital garden, where I write about the things I&apos;m working on and share
            what I&apos;ve learned. 😊
          </Box>
        </Flex>
      </Flex>
    </Container>
  );
};

export const MotionBox = motion(
  forwardRef((props, ref) => {
    const chakraProps = Object.fromEntries(
      Object.entries(props).filter(([key]) => !isValidMotionProp(key))
    );
    return <Box ref={ref} {...chakraProps} />;
  })
);

export default IntroSection;

Content Box

import {
  Container,
  Text,
  Badge,
  Stack,
  Link,
  UnorderedList,
  ListItem,
  useColorModeValue
} from '@chakra-ui/react';

const newContent = [
  {
    link: 'https://mahmad.me/blog/started-2022-by-updating-portfolio-website-1jde-temp-slug-4553258',
    text: 'Started 2022 by updating portfolio website',
    showNewTag: true
  },
  {
    link: 'https://mahmad.me/changelog',
    text: 'Created changelog page to track meaningful changes',
    showNewTag: true
  }
];

const ContentBox = () => {
  return (
    <Container maxW="7xl" p="12">
      <Stack
        mx={[0, 0, 10]}
        padding={4}
        align="start"
        borderLeft="4px solid"
        borderColor="blue.400"
        color="whatsapp"
        _hover={{ shadow: 'lg' }}
        backgroundColor={useColorModeValue('gray.100', '#1e2533')}
        rounded="sm"
        fontSize="md"
      >
        <Text
          textAlign="center"
          color="#53c8c4"
          fontWeight="bold"
          fontSize={['md', 'lg']}
          variant="gradient"
          fromcolor="blue.400"
          tocolor="red.500"
        >
          New year, new content:
        </Text>
        <UnorderedList textAlign="left" paddingLeft={5} m={0}>
          {newContent.map((content, index) => (
            <ListItem key={index}>
              <Link href="#" color="blue.400">
                {content.text}
                {content.showNewTag && (
                  <Badge ml="1" colorScheme="green">
                    New
                  </Badge>
                )}
              </Link>
            </ListItem>
          ))}
        </UnorderedList>
      </Stack>
    </Container>
  );
};

export default ContentBox;

Popular Articles

import React from 'react';
import {
  VStack,
  HStack,
  Heading,
  Text,
  Link,
  useColorModeValue,
  Flex,
  SimpleGrid,
  Box,
  Container
} from '@chakra-ui/react';
import { CommentIcon, HeartIcon } from './icons';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';

const posts = [
  {
    title: 'Create professional portfolio website with Nextjs and ChakraUI',
    description: `Currently, I'm learning Nextjs and Typescript. And for learning perspective I decided to rebuilt my...`,
    positive_reactions_count: '352',
    comments_count: '26',
    published_at: '20th June 2021'
  },
  {
    title: 'Started 2022 by updating portfolio website',
    description: `I was thinking about making some changes in my portfolio website since past few months. I couldn't...`,
    positive_reactions_count: '189',
    comments_count: '26',
    published_at: '21st January 2021'
  }
];

const PopularArticles = () => {
  const textColor = useColorModeValue('gray.500', 'gray.200');

  return (
    <Container maxW={'7xl'} p="12">
      <VStack align="start" spacing={8} width="100%">
        <SimpleGrid columns={1} spacing={4} mt={5} w="100%">
          {posts &&
            posts.map(
              (
                { description, title, positive_reactions_count, comments_count, published_at },
                i
              ) => (
                <motion.div whileHover={{ y: -5 }} key={i}>
                  <VStack
                    spacing={1}
                    p={4}
                    _hover={{ shadow: 'md', textDecoration: 'none' }}
                    borderWidth="1px"
                    position="relative"
                    rounded="md"
                    bg={useColorModeValue('white', 'gray.800')}
                    align="left"
                  >
                    <HStack justifyContent="space-between" isInline>
                      <Heading fontSize="lg" align="left" mt={0}>
                        <Link href="#">
                          <Text color="blue.400">{title}</Text>
                        </Link>
                      </Heading>
                      <HStack spacing={2} isInline d={['none', 'none', 'flex']}>
                        <Flex alignItems="center">
                          <Text
                            fontSize="sm"
                            noOfLines={1}
                            fontWeight="400"
                            align="left"
                            color={textColor}
                          >
                            {positive_reactions_count}
                          </Text>
                          &nbsp;
                          <HeartIcon />
                        </Flex>
                        <Flex alignItems="center">
                          <Text
                            fontSize="sm"
                            noOfLines={1}
                            fontWeight="400"
                            align="left"
                            color={textColor}
                          >
                            {comments_count}
                          </Text>
                          &nbsp;
                          <CommentIcon />
                        </Flex>
                      </HStack>
                    </HStack>
                    <HStack spacing={2} isInline justifyContent="space-between">
                      <Text fontSize="sm" fontWeight="600" color={textColor}>
                        {published_at}
                      </Text>
                      <HStack>
                        <Flex alignItems="center" d={['flex', 'flex', 'none']}>
                          <Text
                            fontSize="sm"
                            noOfLines={1}
                            fontWeight="400"
                            align="left"
                            color={textColor}
                          >
                            {positive_reactions_count}
                          </Text>
                          &nbsp;
                          <HeartIcon />
                        </Flex>
                        <Flex alignItems="center" d={['flex', 'flex', 'none']}>
                          <Text
                            fontSize="sm"
                            noOfLines={1}
                            fontWeight="400"
                            align="left"
                            color={textColor}
                          >
                            {comments_count}
                          </Text>
                          &nbsp;
                          <CommentIcon />
                        </Flex>
                      </HStack>
                    </HStack>
                    <Text align="left" fontSize="md" noOfLines={1} color={textColor}>
                      {description}
                    </Text>
                  </VStack>
                </motion.div>
              )
            )}
        </SimpleGrid>
        <HStack justifyContent="center" width="100%">
          <Link href="#">
            <HStack spacing={2} color="blue.400">
              <Text fontSize="sm">More Articles</Text>
              <Box height="1.2rem" width="1.2rem">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path
                    fillRule="evenodd"
                    d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
                    clipRule="evenodd"
                  />
                </svg>
              </Box>
            </HStack>
          </Link>
        </HStack>
      </VStack>
    </Container>
  );
};

export default PopularArticles;

export const HeartIcon = () => (
  <svg
    id="Capa_1"
    enableBackground="new 0 0 512 512"
    height="20px"
    viewBox="0 0 512 512"
    width="20px"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g>
      <path
        d="m445.936 20.657h-379.872c-19.731 0-37.443 8.649-49.548 22.364l-6.403 43.701v239.535c0 36.486 19.465 66.064 55.951 66.064h89.427c6.57 0 12.872 10.817 17.518 15.463l77.704 77.704 16.721 2.268c.95-.664 1.856-1.42 2.704-2.268l77.704-77.704c4.646-4.646 10.948-7.256 17.518-7.256h80.577c36.486 0 66.064-29.578 66.064-66.064v-247.742c-.001-36.487-29.579-66.065-66.065-66.065z"
        fill="#ff7e92"
      />
      <path
        d="m164.159 407.784 77.704 77.704c6.959 6.959 17.774 7.714 25.57 2.268l-91.595-91.65c-7.685-7.685-18.323-12.093-29.194-12.093h-80.579c-27.323 0-49.548-22.226-49.548-49.548v-291.444c-10.25 11.639-16.517 26.973-16.517 43.701v247.742c0 36.486 29.578 66.065 66.065 66.065h80.577c6.57-.001 12.872 2.609 17.517 7.255z"
        fill="#ff5f7a"
      />
      <path
        d="m387.626 177.951c-4.003-35.677-34.163-63.99-69.988-66.315-21.701-1.408-41.538 6.405-56.107 19.853-3.135 2.894-7.926 2.894-11.062 0-14.569-13.448-34.406-21.261-56.107-19.853-8.653.562-16.976 2.639-24.679 5.971-24.19 10.461-40.655 60.344-40.655 60.344-8.486 75.632 93.735 136.686 124.126 154.751l21.005-.808c37.878-23.988 121.196-85.05 113.467-153.943z"
        fill="#fff"
      />
      <path
        d="m142.235 167.09c2.224-19.818 12.594-37.402 27.447-49.483-24.153 10.475-42.275 33.311-45.309 60.344-8.485 75.632 92.757 141.829 123.148 159.894 5.245 3.117 11.712 3.117 16.957 0 2.702-1.606 5.985-3.61 9.68-5.95-19.374-10.919-141.105-82.962-131.923-164.805z"
        fill="#ffdbde"
      />
    </g>
  </svg>
);

export const CommentIcon = () => (
  <svg
    id="Capa_1"
    enableBackground="new 0 0 512 512"
    height="20px"
    viewBox="0 0 512 512"
    width="20px"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="m438.983 11.549h-276.72c-36.094 0-65.625 29.531-65.625 65.625v22.33h250.317c36.094 0 65.625 29.531 65.625 65.625v163.609h26.404c36.094 0 65.625-29.531 65.625-65.625v-185.939c0-36.094-29.532-65.625-65.626-65.625z"
      fill="#6c7ed6"
    />
    <path
      d="m392.454 96.504h-276.72c-6.636 0-13.047 1.006-19.096 2.86v.14h250.317c36.094 0 65.625 29.531 65.625 65.625v163.609h26.404c6.636 0 13.047-1.006 19.096-2.86v-163.748c0-36.094-29.532-65.626-65.626-65.626z"
      fill="#4f67d2"
    />
    <path
      d="m349.954 96.504h-276.72c-36.094 0-65.625 29.531-65.625 65.625v185.939c0 36.094 29.531 65.625 65.625 65.625h166.083c7.12 0 12.435 6.626 10.807 13.557-4.404 18.751-11.144 38.581-21.107 58.908-4.474 9.129 5.704 18.41 14.349 13.06 24.997-15.47 60.562-41.362 90.512-77.964 3.937-4.811 9.858-7.561 16.075-7.561 36.094 0 65.625-29.531 65.625-65.625v-185.938c.002-36.094-29.53-65.626-65.624-65.626z"
      fill="#60b8fe"
    />
    <path
      d="m292.624 427.25c1.628-6.932-3.687-13.557-10.807-13.557h-42.5c7.12 0 12.435 6.625 10.807 13.557-4.404 18.751-11.144 38.581-21.107 58.908-4.474 9.129 5.704 18.41 14.349 13.06 9.591-5.936 20.74-13.411 32.527-22.431 7.603-17.049 13.007-33.679 16.731-49.537z"
      fill="#23a8fe"
    />
    <path
      d="m50.109 348.068v-185.938c0-36.094 29.531-65.625 65.625-65.625h-42.5c-36.094 0-65.625 29.531-65.625 65.625v185.938c0 36.094 29.531 65.625 65.625 65.625h42.5c-36.094 0-65.625-29.531-65.625-65.625z"
      fill="#23a8fe"
    />
    <g fill="#dfebfa">
      <circle cx="98.577" cy="260.439" r="21.777" />
      <circle cx="168.914" cy="260.439" r="21.777" />
      <circle cx="239.251" cy="260.439" r="21.777" />
      <circle cx="309.588" cy="260.439" r="21.777" />
    </g>
    <path
      d="m98.577 260.439c0-8.059 4.381-15.091 10.888-18.856-3.204-1.854-6.92-2.921-10.888-2.921-12.027 0-21.777 9.75-21.777 21.777s9.75 21.777 21.777 21.777c3.968 0 7.685-1.066 10.888-2.92-6.507-3.767-10.888-10.798-10.888-18.857z"
      fill="#b1dbfc"
    />
    <path
      d="m168.914 260.439c0-8.059 4.381-15.091 10.888-18.856-3.204-1.854-6.92-2.921-10.888-2.921-12.027 0-21.777 9.75-21.777 21.777s9.75 21.777 21.777 21.777c3.968 0 7.685-1.066 10.888-2.92-6.507-3.767-10.888-10.798-10.888-18.857z"
      fill="#b1dbfc"
    />
    <path
      d="m239.251 260.439c0-8.059 4.381-15.091 10.888-18.856-3.204-1.854-6.921-2.921-10.888-2.921-12.027 0-21.777 9.75-21.777 21.777s9.75 21.777 21.777 21.777c3.968 0 7.685-1.066 10.888-2.92-6.507-3.767-10.888-10.798-10.888-18.857z"
      fill="#b1dbfc"
    />
    <path
      d="m309.588 260.439c0-8.059 4.381-15.091 10.888-18.856-3.204-1.854-6.921-2.921-10.888-2.921-12.027 0-21.777 9.75-21.777 21.777s9.75 21.777 21.777 21.777c3.968 0 7.685-1.066 10.888-2.92-6.507-3.767-10.888-10.798-10.888-18.857z"
      fill="#b1dbfc"
    />
    <path d="m69.191 260.253c0 16.144 13.134 29.277 29.276 29.277 16.144 0 29.277-13.133 29.277-29.277 0-16.143-13.134-29.276-29.277-29.276-16.142 0-29.276 13.133-29.276 29.276zm43.554 0c0 7.872-6.405 14.277-14.277 14.277s-14.276-6.405-14.276-14.277 6.404-14.276 14.276-14.276 14.277 6.404 14.277 14.276z" />
    <path d="m198.082 260.253c0-16.143-13.134-29.276-29.277-29.276s-29.276 13.133-29.276 29.276c0 16.144 13.134 29.277 29.276 29.277 16.143 0 29.277-13.133 29.277-29.277zm-43.554 0c0-7.872 6.404-14.276 14.276-14.276s14.277 6.404 14.277 14.276-6.405 14.277-14.277 14.277-14.276-6.405-14.276-14.277z" />
    <path d="m268.419 260.253c0-16.143-13.134-29.276-29.277-29.276s-29.276 13.133-29.276 29.276c0 16.144 13.134 29.277 29.276 29.277 16.143 0 29.277-13.133 29.277-29.277zm-43.554 0c0-7.872 6.404-14.276 14.276-14.276s14.277 6.404 14.277 14.276-6.405 14.277-14.277 14.277-14.276-6.405-14.276-14.277z" />
    <path d="m338.756 260.253c0-16.143-13.134-29.276-29.277-29.276s-29.276 13.133-29.276 29.276c0 16.144 13.134 29.277 29.276 29.277 16.143 0 29.277-13.133 29.277-29.277zm-43.554 0c0-7.872 6.404-14.276 14.276-14.276s14.277 6.404 14.277 14.276-6.405 14.277-14.277 14.277-14.276-6.405-14.276-14.277z" />
    <path d="m438.874 3.863h-276.72c-40.321 0-73.126 32.804-73.126 73.125v11.83h-15.903c-40.321.001-73.125 32.805-73.125 73.126v185.938c0 40.322 32.804 73.125 73.125 73.125h78.18c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-78.18c-32.05 0-58.125-26.075-58.125-58.125v-185.938c0-32.05 26.075-58.125 58.125-58.125h276.721c32.05 0 58.125 26.075 58.125 58.125v185.938c0 32.05-26.075 58.125-58.125 58.125-8.543 0-16.518 3.758-21.881 10.312-29.417 35.95-64.447 61.355-88.653 76.336-2.257 1.393-4.855-.96-3.669-3.382 9.512-19.408 16.805-39.761 21.675-60.494 2.728-11.618-6.129-22.772-18.109-22.772h-52.903c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h52.903c2.301 0 4.027 2.128 3.506 4.342-4.612 19.638-11.523 38.924-20.541 57.323-7.776 15.872 10.025 32.025 25.032 22.738 25.178-15.583 61.642-42.04 92.368-79.591 2.503-3.058 6.247-4.812 10.272-4.812 40.321 0 73.125-32.804 73.125-73.125v-11.83h15.903c40.322 0 73.126-32.804 73.126-73.125v-75.469c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v75.469c0 32.05-26.075 58.125-58.126 58.125h-15.903v-159.108c0-40.321-32.804-73.125-73.125-73.125h-245.818v-11.83c0-32.05 26.075-58.125 58.126-58.125h276.72c32.051 0 58.126 26.075 58.126 58.125v75.469c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-75.469c0-40.322-32.804-73.126-73.126-73.126z" />
  </svg>
);

Components Cards Heroes Testimonials Blog See more ...

Projects My Website Portfolio2 Devto clone Notebook app See more ...

Social

Support

Made with ❤️ for a better web by Muhammad Ahmad