Cards
User Card
import {
chakra,
Box,
Stack,
Link,
HStack,
Text,
Container,
Icon,
Avatar,
Tooltip,
StackProps,
Divider,
useColorModeValue
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { AiFillGithub } from 'react-icons/ai';
const UserCard = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 6 }}>
<Stack
w="17rem"
spacing={2}
p={4}
border="1px solid"
borderColor={useColorModeValue('gray.400', 'gray.600')}
rounded="md"
margin="0 auto"
_hover={{
boxShadow: useColorModeValue(
'0 4px 6px rgba(160, 174, 192, 0.6)',
'0 4px 6px rgba(9, 17, 28, 0.4)'
)
}}
>
<HStack justifyContent="space-between" alignItems="baseline">
<Tooltip
label="Lahore, Pakistan"
aria-label="Lahore, Pakistan"
placement="right-end"
size="sm"
// Sizes for Tooltip are not implemented in the default theme. You can extend the theme to implement them
>
<Box pos="relative">
<Avatar
src="https://avatars2.githubusercontent.com/u/37842853?v=4"
name="Muhammad Ahmad"
size="xl"
borderRadius="md"
/>
<Avatar
src="https://flagcdn.com/pk.svg"
name="Pakistan Flag"
size="xs"
borderRadius="full"
pos="absolute"
bottom={0}
right="-12px"
/>
</Box>
</Tooltip>
<Link isExternal href="https://github.com/MA-Ahmad">
<Icon as={AiFillGithub} w={6} h={6} />
</Link>
</HStack>
<chakra.h1 fontSize="xl" fontWeight="bold">
Muhammad Ahmad
</chakra.h1>
<Text fontSize="md" color="gray.500">
Software Engineer, Creator of TemplatesKart
</Text>
<Divider />
<Text fontSize="md" color="gray.500">
Sports lover ⚽️, exercise addict 🏋 and lifelong learner 👨🏻💻
</Text>
</Stack>
</Container>
);
};
export default UserCard;
Join community
import { chakra, Link, Stack, Box, useColorModeValue, Container, Button } from '@chakra-ui/react';
// Here we have used react-icons package for the icon
import { FaGithub } from 'react-icons/fa';
import { AiOutlineTwitter } from 'react-icons/ai';
import { BsDiscord } from 'react-icons/bs';
const Index = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Box
pos="relative"
boxShadow={useColorModeValue(
'0 4px 6px rgba(160, 174, 192, 0.6)',
'0 4px 6px rgba(9, 17, 28, 0.9)'
)}
bg="#1A1B1E"
p={{ base: 4, sm: 8 }}
overflow="hidden"
rounded="lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 720 350"
style={{ position: 'absolute', inset: '0', pointerEvents: 'none' }}
>
<g fill="#fff" fillOpacity="0.1" clipPath="url(#a)">
<path d="M650.023 55.55c-6.78-.558-13.401-2.139-19.762-4.548-17.76-6.734-38.778-4.98-54.808 5.343-19.727 12.706-30.764 37.663-26.885 60.807 1.873 11.179 6.84 22.835 2.652 33.369-7.629 19.192-37.848 18.017-49.142 35.309-8.487 12.993-2.455 30.61 6.494 43.289 16.701 23.66 43.803 40.36 72.718 42.021 28.913 1.662 58.818-12.816 73.345-37.869 3.349-5.778 5.919-12.14 6.421-18.8.84-11.135-4.105-21.946-4.418-33.108-.501-17.807 10.553-33.544 19.961-48.671 9.408-15.129 17.814-33.483 11.685-50.212-3.711-10.125-12.397-17.872-22.195-22.384-5.517-2.54-11.377-4.16-16.066-4.546zM160.188 222.681c-13.337-9.469-32.287-10.262-46.369-1.939-11.1 6.56-18.89 17.927-30.4 23.736-10.462 5.281-22.71 5.339-34.018 8.414a65.23 65.23 0 00-27.02 14.96c-7.111 6.567-12.987 16.701-9.189 25.606 2.774 6.501 9.717 10.004 16.13 12.977 27.547 12.772 57.744 25.854 87.295 18.865 11.99-2.834 23.024-8.872 33.006-16.097 14.794-10.704 28.144-25.169 31.724-43.076 3.58-17.907-8.136-34.2-21.159-43.446M77.277-59.39l-90.465 29.729c-12.845 4.222-25.97 8.59-36.642 16.894-10.674 8.3-18.591 21.452-16.956 34.873 1.141 9.35 6.76 17.718 13.9 23.863 23.014 19.816 57.058 17.088 86.565 24.273 39.656 9.655 76.523 38.852 116.692 31.619 31.999-5.759 56.797-36.385 58.655-68.844 1.856-32.457-17.54-64.401-45.804-80.468-28.263-16.069-64.487-18.99-85.945-11.94"></path>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h720v350H0z"></path>
</clipPath>
</defs>
</svg>
<Stack pos="relative" zIndex={1} direction="column" spacing={5} textAlign="left">
<chakra.h1 color="white" fontSize="4xl" lineHeight={1.2} fontWeight="bold">
Join the community
</chakra.h1>
<chakra.h1 color="gray.400" fontSize="xl" maxW="600px" lineHeight={1.2}>
TemplatesKart has a very friendly community, we are always open to new ideas and
feedback. Join us on Discord or GitHub Discussions to get any kind of help or on Twitter
to get notified about releases.
</chakra.h1>
<Stack direction={{ base: 'column', md: 'row' }} spacing={3}>
<Button
leftIcon={<FaGithub />}
as={Link}
href="#"
rounded="md"
color="gray.800"
bg="white"
_hover={{ bg: 'gray.100' }}
>
Github Discussions
</Button>
<Button
leftIcon={<BsDiscord />}
as={Link}
href="#"
rounded="md"
color="white"
bg="purple.500"
_hover={{ bg: 'purple.600' }}
>
Discord community
</Button>
<Button
leftIcon={<AiOutlineTwitter />}
as={Link}
href="#"
rounded="md"
color="white"
bg="twitter.400"
_hover={{ bg: 'twitter.500' }}
>
Follow us on Twitter
</Button>
</Stack>
</Stack>
</Box>
</Container>
);
};
export default Index;
Product Cards
import { PropsWithChildren, Fragment } from 'react';
import {
chakra,
Box,
Stack,
VStack,
HStack,
Flex,
Text,
Image,
Container,
Icon,
StackProps
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { AiOutlineHeart, AiOutlineExclamationCircle } from 'react-icons/ai';
import { BsTelephoneX } from 'react-icons/bs';
interface ProductCardProps {
id: number;
title: string;
detail: string[];
location: string;
updated_at: string;
price: string;
image: string;
isFeatured?: boolean;
}
const productsList: ProductCardProps[] = [
{
id: 1,
title: 'Ford F-150 SUV 2021',
location: 'Paris',
detail: ['2021', 'Petrol', '4500 cc', 'Automatic'],
updated_at: '17 days ago',
price: '$ 400k',
isFeatured: true,
image:
'https://images.unsplash.com/photo-1533473359331-0135ef1b58bf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
},
{
id: 2,
title: 'Haval Jolion Top',
location: 'New York',
detail: ['2021', 'Petrol', '3500 cc', 'Automatic'],
updated_at: '1 days ago',
price: '$ 450k',
image:
'https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb'
}
];
const Index = () => {
return (
<Container maxW="7xl" p={{ base: 5, md: 12 }} margin="0 auto">
<VStack spacing={4}>
{productsList.map((product, index) => (
<Stack
key={index}
spacing={{ base: 0, md: 4 }}
direction={{ base: 'column', md: 'row' }}
border="1px solid"
borderColor="gray.400"
p={2}
rounded="md"
w={{ base: 'auto', md: '2xl' }}
overflow="hidden"
pos="relative"
>
{product.isFeatured && (
<Flex
alignItems="center"
p={1}
bg="red.400"
pos="absolute"
fontSize="xs"
fontWeight="500"
color="white"
top={0}
left={0}
>
<Text>FEATURED</Text> <Icon as={AiOutlineExclamationCircle} h={4} w={4} />
</Flex>
)}
<Flex ml="0 !important">
<Image
rounded="md"
w={{ base: '100%', md: '18rem' }}
h="auto"
objectFit="cover"
src={product.image}
alt="product image"
/>
</Flex>
<Stack direction="column" spacing={2} w="100%" mt={{ base: '5px !important', sm: 0 }}>
<Flex justify="space-between">
<chakra.h3 fontSize={{ base: 'lg', md: 'xl' }} fontWeight="bold">
{product.title}
</chakra.h3>
<chakra.h3 fontSize={{ base: 'lg', md: 'xl' }} fontWeight="bold">
{product.price}
</chakra.h3>
</Flex>
<Box>
<Text fontSize="lg" fontWeight="500">
{product.location}
</Text>
</Box>
<Flex alignItems="center" color="gray.500">
{product.detail.map((data, index) => (
<Fragment key={index}>
<Text fontSize={{ base: 'sm', sm: 'md' }}>{data}</Text>
{product.detail.length - 1 != index && (
<chakra.span mx={2} fontSize={{ base: 'sm', sm: 'md' }}>
|
</chakra.span>
)}
</Fragment>
))}
</Flex>
<Stack
direction={{ base: 'column-reverse', sm: 'row' }}
justify="space-between"
alignItems={{ base: 'flex-start', sm: 'center' }}
>
<Text fontSize="sm" mt={{ base: 1, sm: 0 }}>
Updated {product.updated_at}
</Text>
<Stack direction="row" spacing={1} mb="0 !important">
<IconButton>
<Icon as={AiOutlineHeart} w={4} h={4} />
</IconButton>
<IconButton spacing={2} bg="green.500" color="white">
<Icon as={BsTelephoneX} w={4} h={4} />
<Text fontSize="sm">Show Phone no.</Text>
</IconButton>
</Stack>
</Stack>
</Stack>
</Stack>
))}
</VStack>
</Container>
);
};
const IconButton = ({ children, ...props }: PropsWithChildren<StackProps>) => {
return (
<HStack
cursor="pointer"
border="1px solid"
borderColor="gray.300"
px={2}
py="0.15rem"
alignItems="center"
rounded="sm"
spacing={2}
{...props}
>
{children}
</HStack>
);
};
export default Index;
Portfolio Card
import * as React from 'react';
import { Container, Box, HStack, useColorModeValue, Center } from '@chakra-ui/react';
import MainScreen from './main-screen';
const Card = () => {
const bg = useColorModeValue('white', '#2f3244');
return (
<Container maxW="7xl" p={{ base: 5, md: 10 }}>
<Center>
<Box
maxH="400px"
minH="354px"
w="345px"
boxShadow="lg"
rounded="md"
p={6}
overflow="hidden"
cursor="pointer"
_hover={{ boxShadow: 'lg' }}
bg={bg}
role="group"
>
<MainScreen />
</Box>
</Center>
</Container>
);
};
export default Card;
import * as React from 'react';
import {
Box,
Text,
Heading,
Flex,
Avatar,
Link,
VStack,
IconButton,
Divider,
Fade
} from '@chakra-ui/react';
import { siteConfig } from './site-config';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
const iconProps = {
variant: 'ghost',
size: 'lg',
isRound: true
};
const MainScreen = () => {
return (
<VStack spacing={5}>
<motion.div whileHover={{ y: -5, scale: 1.1 }}>
<Box boxShadow="xl" _hover={{ boxShadow: 'lg' }} borderRadius="full">
<Avatar
_groupHover={{ width: '5rem', height: '5rem' }}
size="xl"
src="https://avatars2.githubusercontent.com/u/37842853?v=4"
/>
</Box>
</motion.div>
<Heading fontSize="xl" fontFamily="body" textTransform="capitalize" noOfLines={2}>
Muhammad Ahmad
</Heading>
<Text
color="gray.500"
fontSize="lg"
noOfLines={{ base: 3, md: 4 }}
_groupHover={{ display: 'none' }}
display="block"
>
Full-Stack Developer
</Text>
<Fade in>
<Text
color="gray.500"
fontSize="lg"
noOfLines={{ base: 3, md: 4 }}
_groupHover={{ display: 'block' }}
display="none"
>
I'm a Full Stack Developer and an open source lover from Pakistan 🇵🇰
</Text>
</Fade>
<Divider />
<Flex alignItems="center" justify="center" w="100%">
<Box textAlign="center">
{siteConfig.author.accounts.map((sc, index) => (
<IconButton
key={index}
as={Link}
isExternal
href={sc.url}
aria-label={sc.label}
colorScheme={sc.type}
icon={sc.icon}
rounded="full"
{...iconProps}
/>
))}
</Box>
</Flex>
</VStack>
);
};
export default MainScreen;
import * as React from 'react';
// Here we have used react-icons package for the icons
import { FaGithub, FaDev, FaLinkedin, FaQuora, FaTwitter } from 'react-icons/fa';
export const siteConfig = {
author: {
name: 'Muhammad Ahmad',
accounts: [
{
url: 'https://github.com/MA-Ahmad',
label: 'Github Account',
type: 'gray',
icon: <FaGithub />
},
{
url: 'https://twitter.com/muhammad_ahmaad',
label: 'Twitter Account',
type: 'twitter',
icon: <FaTwitter />
},
{
url: 'https://dev.to/m_ahmad',
label: 'Dev Account',
type: 'gray',
icon: <FaDev />
},
{
url: 'https://linkedin.com/in/muhammad-ahmad20',
label: 'LinkedIn Account',
type: 'linkedin',
icon: <FaLinkedin />
},
{
url: 'https://www.quora.com/profile/Muhammad-Ahmad-66',
label: 'Quora Account',
type: 'red',
icon: <FaQuora />
}
]
}
};
Course card
import {
chakra,
Box,
Stack,
Text,
Image,
Container,
Button,
ButtonProps,
useColorModeValue
} from '@chakra-ui/react';
import { PropsWithChildren } from 'react';
const Index = () => {
return (
<Container p={{ base: 5, md: 10 }}>
<Box
borderWidth="1px"
_hover={{ shadow: 'lg' }}
rounded="md"
overflow="hidden"
bg={useColorModeValue('white', 'gray.800')}
>
<Image
src="https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80"
objectFit="cover"
w="100%"
/>
<Box p={{ base: 3, sm: 5 }}>
<Box mb={6}>
<chakra.h3
fontSize={{ base: 'lg', sm: '2xl' }}
fontWeight="bold"
lineHeight="1.2"
mb={2}
>
How to customize your Github Profile
</chakra.h3>
<Text fontSize={{ base: 'md', sm: 'lg' }} noOfLines={2}>
How to customize your Github Profile Neque porro quisquam est qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit...
</Text>
</Box>
<Stack
justify="space-between"
direction={{ base: 'column', sm: 'row' }}
spacing={{ base: 2, sm: 0 }}
>
<CustomButton variant="outline">Not a member?</CustomButton>
<CustomButton colorScheme="teal" variant="solid">
Access Now
</CustomButton>
</Stack>
</Box>
</Box>
</Container>
);
};
const CustomButton = ({ children, ...props }: PropsWithChildren<ButtonProps>) => {
return (
<Button textTransform="uppercase" lineHeight="inherit" rounded="md" {...props}>
{children}
</Button>
);
};
export default Index;
Github Repo With Image
import * as React from 'react';
import { SimpleGrid, Container } from '@chakra-ui/react';
import RepositoryCard from './card';
import repositoriesList from './repos-list';
const OfflineData = () => {
return (
<Container maxW="7xl" p="5" mx="auto">
<SimpleGrid columns={[1, 2]} spacing={4} mt={8}>
{repositoriesList().map((repo, index) => (
<RepositoryCard
key={index}
title={repo.title}
description={repo.description}
cover={repo.cover}
techStack={repo.techStack}
url={repo.url}
stargazers_count={repo.stargazers_count}
/>
))}
</SimpleGrid>
</Container>
);
};
export default OfflineData;
import * as React from 'react';
import {
Box,
Image,
useColorModeValue,
VStack,
Text,
AspectRatio,
HStack,
Tag,
Icon,
useDisclosure,
Modal,
ModalOverlay,
ModalContent,
ModalBody,
Center,
Flex,
Tooltip
} from '@chakra-ui/react';
import LazyImage from './lazy-image';
// Here we have used react-icons package for the icons
import { AiOutlineStar } from 'react-icons/ai';
import { FiGithub } from 'react-icons/fi';
interface RepositoryCardProps {
title: string;
description: string;
cover: string;
techStack: string[];
url: string;
stargazers_count: number;
}
const RepositoryCard = (props: RepositoryCardProps) => {
const { title, cover, techStack, url, stargazers_count } = props;
const { isOpen, onOpen, onClose } = useDisclosure();
const handleClick = () => {
onOpen();
};
const handleLinkClick = (e: React.MouseEvent<HTMLParagraphElement, MouseEvent>, link: string) => {
window.open(link);
e.stopPropagation();
};
return (
<Box onClick={handleClick} cursor="pointer" size="xl">
<VStack
rounded="xl"
borderWidth="1px"
bg={useColorModeValue('white', 'gray.800')}
borderColor={useColorModeValue('gray.100', 'gray.700')}
_hover={{
shadow: 'lg',
textDecoration: 'none'
}}
overflow="hidden"
align="start"
spacing={0}
>
<Box position="relative" w="100%">
<AspectRatio
ratio={1.85 / 1}
w="100%"
borderBottomWidth="1px"
borderColor={useColorModeValue('gray.100', 'gray.700')}
>
<LazyImage src={cover} />
</AspectRatio>
</Box>
<VStack py={2} px={[2, 4]} spacing={1} align="start" w="100%">
<Flex justifyContent="space-between" width="100%">
<Tooltip hasArrow label="Github link" placement="top">
<HStack>
<Icon as={FiGithub} boxSize="0.9em" mt="1px" />
<Text
fontSize="sm"
noOfLines={1}
fontWeight="600"
align="left"
onClick={(e) => handleLinkClick(e, url)}
>
{title}
</Text>
</HStack>
</Tooltip>
<Flex alignItems="center">
<Icon as={AiOutlineStar} boxSize="0.9em" mt="1px" />
<Box as="span" ml="1" fontSize="sm">
{stargazers_count}
</Box>
</Flex>
</Flex>
<Flex justifyContent="space-between" width="100%">
<Box>
<HStack spacing="1">
{techStack!.map((tech, index) => (
<Tag key={index} size="sm" colorScheme="cyan">
<Text fontSize={['0.55rem', 'inherit', 'inherit']}>{tech}</Text>
</Tag>
))}
</HStack>
</Box>
</Flex>
</VStack>
</VStack>
<Modal isOpen={isOpen} onClose={onClose} isCentered allowPinchZoom>
<ModalOverlay />
<ModalContent bg="none" maxW="28rem" w="auto">
<ModalBody p={0} rounded="lg" overflow="hidden" bg="none">
<Center>
<Image src={cover} rounded="lg" alt="Repo image" />
</Center>
</ModalBody>
</ModalContent>
</Modal>
</Box>
);
};
export default RepositoryCard;
import * as React from 'react';
import { Image } from '@chakra-ui/react';
type LazyImageProps = {
src: string;
size?: string;
width?: number;
height?: number;
layout?: string;
rounded?: string;
};
const LazyImage = (props: LazyImageProps) => {
const { src, width, height, size, layout, rounded } = props;
return (
<Image
src={src}
objectFit="cover"
alt="cover image"
width={width}
height={height}
size={size}
layout={layout}
rounded={rounded}
/>
);
};
export default LazyImage;
export default function repositoriesList() {
return [
{
title: 'Portfolio1',
description: 'Portfolio app to show my skills and experience.',
cover: '/assets/images/repositories/portfolio.png',
language: 'Typescript',
techStack: ['Nextjs', 'react', 'chakraUi'],
url: 'https://github.com/MA-Ahmad/myPortfolio',
live: 'https://mahmad.me',
stargazers_count: 107,
forks_count: 25
},
{
title: 'Notebook',
description: 'This is a notebook app which will help you to crate notes for your daily work.',
cover: '/assets/images/repositories/notebook_app.png',
language: 'Javascript',
techStack: ['react', 'typescript'],
url: 'https://github.com/MA-Ahmad/notebook',
live: 'https://ma-ahmad.github.io/notebook',
stargazers_count: 19,
forks_count: 8
}
];
}
Exclusive offer
import {
chakra,
Stack,
Flex,
useColorModeValue,
Container,
Link,
List,
ListIcon,
ListItem
} from '@chakra-ui/react';
// Here we have used react-icons package for the icon
import { BsCheck } from 'react-icons/bs';
const data = {
heading: 'Get this amazing offer today.',
subHeading: 'Analyze your traffic. Increase Conversions.',
features: ['Free 3,500 monthly page views', 'No credit card required'],
image:
'https://images.unsplash.com/photo-1508615039623-a25605d2b022?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80'
};
const Index = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Flex
boxShadow={useColorModeValue(
'0 4px 6px rgba(160, 174, 192, 0.6)',
'0 4px 6px rgba(9, 17, 28, 0.9)'
)}
backgroundSize="cover"
backgroundImage={`url(${data.image})`}
p={{ base: 4, sm: 8 }}
rounded="lg"
>
<Stack direction="column" spacing={5} textAlign="left" flexGrow={3}>
<chakra.h1 fontSize="4xl" lineHeight={1.2} fontWeight="bold">
{data.heading}
</chakra.h1>
<chakra.h1 fontSize="xl" lineHeight={1.2} fontWeight="bold">
{data.subHeading}
</chakra.h1>
<List spacing={3}>
{data.features.map((feature, index) => (
<ListItem key={index}>
<ListIcon as={BsCheck} color="green.700" />
{feature}
</ListItem>
))}
</List>
<Link
d="inline-flex"
alignItems="center"
justifyContent="center"
fontSize="md"
fontWeight="500"
p={3}
lineHeight={1.2}
h={10}
w="max-content"
rounded="md"
textDecoration="none"
color="white"
bg="blackAlpha.400"
shadow="lg"
>
Click here to proceed
</Link>
</Stack>
</Flex>
</Container>
);
};
export default Index;
Career Card
import {
Box,
Stack,
VStack,
Heading,
Flex,
Text,
Image,
useColorModeValue,
Container,
Tag,
StackProps
} from '@chakra-ui/react';
const companies = [
{
title: 'Google',
alt: 'company image',
role: 'Senior Software Engineer',
skills: ['ruby', 'rails', 'typescript', 'javascript', 'react', 'aws'],
period: '2019 - Present',
logo: 'https://images.unsplash.com/photo-1570126618953-d437176e8c79?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80'
}
];
const Index = () => {
return (
<Container maxW="4xl" p={{ base: 5, md: 12 }}>
<VStack spacing={4} marginBottom={6} align="left" mx={[0, 0, 6]}>
{companies.map(({ title, role, skills, period, logo, alt }, index) => (
<Box
key={index}
px={4}
py={5}
borderWidth="1px"
_hover={{ shadow: 'lg' }}
bg={useColorModeValue('white', 'gray.800')}
position="relative"
rounded="md"
>
<Flex justifyContent="space-between">
<Flex>
<Image
rounded="full"
w={16}
h={16}
objectFit="cover"
fallbackSrc="https://via.placeholder.com/150"
src={logo}
alt={alt}
/>
<Stack spacing={2} pl={3} align="left">
<Heading align="left" fontSize="xl">
{title}
</Heading>
<Heading align="left" fontSize="sm">
{role}
</Heading>
<Tags skills={skills} display={['none', 'none', 'flex', 'flex']} />
</Stack>
</Flex>
<Stack display={['none', 'none', 'flex', 'flex']}>
<Text fontSize={14} color="gray.400">
{period}
</Text>
</Stack>
</Flex>
<Tags skills={skills} display={['flex', 'flex', 'none', 'none']} />
</Box>
))}
</VStack>
</Container>
);
};
interface TagsProps extends StackProps {
skills: string[];
}
const Tags = ({ skills, ...props }: TagsProps) => {
return (
<Stack spacing={1} mt={3} isInline alignItems="center" flexWrap="wrap" {...props}>
{skills.map((skill) => (
<Tag key={skill} m="2px" size="sm">
{skill}
</Tag>
))}
</Stack>
);
};
export default Index;
Github Repo Cards
import * as React from 'react';
import { useMediaQuery, Container } from '@chakra-ui/react';
import RepositoryCard from './repo-card';
import repositoriesList from './repos-list';
// Here we have used react-stack-grid package for the cards
import StackGrid from 'react-stack-grid';
const LiveData = () => {
const [isLargerThan720] = useMediaQuery('(min-width: 720px)');
const [isLargerThan982] = useMediaQuery('(min-width: 982px)');
let columnWidth = 390;
if (isLargerThan982) {
columnWidth = 390;
} else {
if (isLargerThan720) {
columnWidth = 300;
}
}
return (
<Container maxW="7xl" p={{ base: 5, md: 12 }}>
<StackGrid columnWidth={!isLargerThan982 && !isLargerThan720 ? '100%' : columnWidth}>
{repositoriesList()?.map((repo, index) => (
<RepositoryCard
key={index}
title={repo.title}
description={repo.description}
language={repo.language}
url={repo.url}
stargazers_count={repo.stargazers_count}
forks_count={repo.forks_count}
/>
))}
</StackGrid>
</Container>
);
};
export default LiveData;
import * as React from 'react';
import {
Box,
useColorModeValue,
VStack,
Text,
HStack,
Tag,
Icon,
Flex,
Tooltip
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { BiGitRepoForked, BiStar } from 'react-icons/bi';
import { FiGithub } from 'react-icons/fi';
interface RepositoryCardProps {
title: string;
description: string;
url: string;
language: string;
stargazers_count: number;
forks_count: number;
}
const RepositoryCard = (props: RepositoryCardProps) => {
const { title, description, language, url, stargazers_count, forks_count } = props;
const handleLinkClick = (e: React.MouseEvent<HTMLParagraphElement, MouseEvent>, link: string) => {
window.open(link);
e.stopPropagation();
};
return (
<Box
size="xl"
py={2}
px={[2, 4]}
mt={2}
rounded="xl"
borderWidth="1px"
bg={useColorModeValue('white', 'gray.800')}
borderColor={useColorModeValue('gray.100', 'gray.700')}
_hover={{
shadow: 'lg',
textDecoration: 'none'
}}
>
<VStack overflow="hidden" align="start" spacing={1}>
<VStack spacing={1} align="start" w="100%">
<Flex
justifyContent="space-between"
width="100%"
onClick={(e) => handleLinkClick(e, url)}
>
<Tooltip hasArrow label="Github link" placement="top">
<HStack cursor="pointer">
<Icon as={FiGithub} boxSize="0.9em" mt="1px" />
<Text fontSize="sm" noOfLines={1} fontWeight="600" align="left">
{title}
</Text>
</HStack>
</Tooltip>
<HStack cursor="pointer" onClick={(e) => handleLinkClick(e, url)}>
{forks_count && (
<Flex _hover={{ color: 'blue.500' }} alignItems="center">
<Icon as={BiGitRepoForked} boxSize="0.9em" mt="1px" />
<Box as="span" ml="1" fontSize="sm">
{forks_count}
</Box>
</Flex>
)}
<Flex alignItems="center" _hover={{ color: 'blue.500' }}>
<Icon as={BiStar} boxSize="0.9em" mt="1px" />
<Box as="span" ml="1" fontSize="sm">
{stargazers_count}
</Box>
</Flex>
</HStack>
</Flex>
{language && (
<Flex justifyContent="space-between" width="100%">
<Box>
<HStack spacing="1">
<Tag size="sm" colorScheme="blue">
<Text fontSize={['0.55rem', 'inherit', 'inherit']}>{language}</Text>
</Tag>
</HStack>
</Box>
</Flex>
)}
</VStack>
<Box>
<Text color="gray.500" fontSize="sm" noOfLines={2} textAlign="left">
{description}
</Text>
</Box>
' '
</VStack>
</Box>
);
};
export default RepositoryCard;
export default function repositoriesList() {
return [
{
title: 'Portfolio1',
description: 'Portfolio app to show my skills and experience.',
language: 'Typescript',
techStack: ['Nextjs', 'react', 'chakraUi'],
url: 'https://github.com/MA-Ahmad/myPortfolio',
live: 'https://mahmad.me',
stargazers_count: 96,
forks_count: 22
},
{
title: 'Portfolio2',
description: 'Personal portfolio app to show my skills and experience.',
language: 'Typescript',
techStack: ['react', 'chakraUi'],
url: 'https://github.com/MA-Ahmad/portfolio',
live: 'https://ma-ahmad.github.io/portfolio',
stargazers_count: 67,
forks_count: 14
}
];
}
Project Info Cards
import * as React from 'react';
import {
chakra,
Container,
HStack,
VStack,
Text,
Tag,
Link,
Image,
useColorModeValue
} from '@chakra-ui/react';
interface ProjectCardProps {
id: number;
title: string;
desc: string;
logo: string;
link: string;
technologies: string[];
}
const projectsList: ProjectCardProps[] = [
{
id: 1,
title: 'Project1',
logo: 'https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80',
link: 'https://www.test.com',
desc: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`,
technologies: ['rails', 'react']
},
{
id: 2,
title: 'Project2',
link: 'https://www.test.com',
logo: 'https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&auto=format&fit=crop&w=334&q=80',
desc: `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.`,
technologies: ['ruby', 'javascript']
}
];
const ProjectCard = () => {
const textColor = useColorModeValue('gray.500', 'gray.200');
const [isOpen, setIsOpen] = React.useState(false);
const toggleOpen = () => setIsOpen(!isOpen);
return (
<>
<Container maxW="4xl" p={{ base: 5, md: 10 }}>
<VStack spacing={4}>
{projectsList.map(({ id, title, desc, logo, link, technologies }) => (
<chakra.div onClick={toggleOpen} key={id}>
<HStack
p={4}
bg={useColorModeValue('white', 'gray.800')}
rounded="xl"
borderWidth="1px"
borderColor={useColorModeValue('gray.100', 'gray.700')}
w="100%"
h="100%"
textAlign="left"
align="start"
spacing={4}
cursor="pointer"
_hover={{ shadow: 'lg' }}
>
<Image
src={logo}
size="sm"
width={33}
height={33}
layout="fixed"
rounded="md"
objectFit="cover"
alt="cover image"
fallbackSrc="https://via.placeholder.com/150"
/>
<VStack align="start" justify="flex-start">
<VStack spacing={0} align="start">
<HStack>
<Text
as={Link}
href={link}
fontWeight="bold"
fontSize="md"
noOfLines={1}
onClick={(e) => e.stopPropagation()}
isExternal
>
{title}
</Text>
<HStack spacing="1">
{technologies.map((tech, index) => (
<Tag key={index} size="sm" colorScheme="gray">
{tech}
</Tag>
))}
</HStack>
</HStack>
{!isOpen && (
<Text fontSize="sm" color={textColor} noOfLines={{ base: 2 }}>
{desc}
</Text>
)}
{isOpen && (
<Text fontSize="sm" color={textColor}>
{desc}
</Text>
)}
</VStack>
</VStack>
</HStack>
</chakra.div>
))}
</VStack>
</Container>
</>
);
};
export default ProjectCard;
