projects list
import * as React from 'react';
import { Container, Heading, Box, SimpleGrid, Flex } from '@chakra-ui/react';
import projectsList from './data';
import ProjectCard from './card';
const Index = () => {
return (
<Container maxW={'7xl'} p={10}>
<Box minH={'50vh'}>
<Flex p="2" justifyContent="center">
<Heading
as="h1"
size="xl"
bgGradient="linear(to-l, #7928CA, #FF0080)"
bgClip="text"
_focus={{ boxShadow: 'none', outline: 'none' }}
_hover={{
textDecoration: 'none',
bgGradient: 'linear(to-r, red.500, yellow.500)'
}}
>
Repositories
</Heading>
</Flex>
<SimpleGrid
columns={[1, 2, 2, 3]}
mt="40px"
gridGap="10px"
position="relative"
overflow="hidden"
>
{projectsList().map((project, index) => (
<ProjectCard project={project} key={index} />
))}
</SimpleGrid>
</Box>
</Container>
);
};
export default Index;
import * as React from 'react';
import {
Box,
Badge,
Flex,
Center,
Link,
HStack,
Tooltip,
useColorModeValue,
Icon,
Image
} from '@chakra-ui/react';
import { BiLinkExternal } from 'react-icons/bi';
import { AiOutlineStar } from 'react-icons/ai';
import getTagColor from './helpers';
type project = {
id: number;
title: string;
desc: string;
technologies: string[];
stars: number;
githubLink: string;
liveLink: string;
coverImage: string;
};
interface ProjectCardProps {
project: project;
}
const ProjectCard: React.SFC<ProjectCardProps> = ({ project }) => {
const bg = useColorModeValue('white', '#2f3244');
const textColor = useColorModeValue('gray.600', '#b5b1b1');
return (
<>
<Center>
<Box
maxW="sm"
height="fit-content"
borderWidth="1px"
borderRadius="lg"
overflow="hidden"
boxShadow="md"
mx="5px"
mb="10px"
mt="10px"
_hover={{ boxShadow: 'lg' }}
>
<Image
height={'auto'}
cursor={project.coverImage ? 'pointer' : 'auto'}
width={'100%'}
src={project.coverImage}
objectFit="cover"
alt="cover image"
fallbackSrc="https://via.placeholder.com/320x216/DCDFDF/ffffff/?text=CoverImage"
/>
<Box p="5" bg={bg}>
<Flex justifyContent="space-between" alignItems="center">
<Box
mt="1"
fontWeight="semibold"
as="h6"
fontSize="md"
lineHeight="tight"
textAlign="left"
isTruncated
>
<Link
href={project.liveLink || project.githubLink}
textDecoration={'none !important'}
isExternal
>
<HStack alignItems="center">
<Box as="span" ml="2" color={textColor} fontSize="sm">
{project.title}
</Box>
<Icon as={BiLinkExternal} mx="3px" />
</HStack>
</Link>
</Box>
<Box mt="1">
{project.stars ? (
<Link href={project.githubLink} textDecoration={'none !important'} isExternal>
<Tooltip hasArrow label="Github stars" placement="top-end">
<HStack alignItems="center">
<Icon as={AiOutlineStar} color="teal.300" fontSize="sm" />
<Box as="span" ml="2" color={textColor} fontSize="sm">
{project.stars}
</Box>
</HStack>
</Tooltip>
</Link>
) : (
''
)}
</Box>
</Flex>
<Box textAlign="left">
<HStack spacing="1" mt="2" mb="2">
{project.technologies.map((tech, index) => (
<Badge
borderRadius="full"
px="1"
colorScheme={getTagColor(tech)}
textTransform="lowercase"
key={index}
>
{tech}
</Badge>
))}
</HStack>
</Box>
<Box color={textColor} fontSize="md" textAlign="left">
{project.desc}
</Box>
</Box>
</Box>
</Center>
</>
);
};
export default ProjectCard;
export default function projectsList() {
return [
{
id: 1,
title: 'My website',
desc: 'This is a my personal website built by using Next.js, ChakraUi, Typescript and Dev.to api.',
technologies: ['Nextjs', 'ChakraUi'],
stars: 104,
githubLink: 'https://github.com/MA-Ahmad/myportfolio',
liveLink: 'https://mahmad.me/',
coverImage: '/assets/images/projects/my-website.png'
},
{
id: 2,
title: 'Portfolio2',
desc: 'Personal portfolio app to show my skills and experience.',
technologies: ['Nextjs', 'ChakraUi'],
stars: 69,
githubLink: 'https://github.com/MA-Ahmad/portfolio',
liveLink: 'https://mahmad.me/',
coverImage: '/assets/images/projects/portfolio2.png'
},
{
id: 3,
title: 'Notebook App',
desc: 'Create notes for your daily important work.',
technologies: ['Reactjs', 'ChakraUi'],
stars: 19,
githubLink: 'https://github.com/MA-Ahmad/notebook',
liveLink: '',
coverImage: '/assets/images/projects/notebook.png'
},
{
id: 4,
title: 'Blog App',
desc: 'A Blog App built by using React, ChakraUI and Formik.',
technologies: ['Reactjs', 'ChakraUi'],
stars: 15,
githubLink: 'https://github.com/MA-Ahmad/reactBlog',
liveLink: 'https://ma-ahmad.github.io/reactBlog',
coverImage: '/assets/images/projects/blog.png'
}
];
}
const getTagColor = (type: string) => {
type = type.toLowerCase();
switch (type) {
case 'reactjs': {
return 'cyan';
}
case 'javascript': {
return 'yellow';
}
case 'nextjs': {
return 'blue';
}
case 'chakraui': {
return 'teal';
}
}
};
export default getTagColor;
