Skills List
import * as React from 'react';
import {
Icon,
HStack,
Text,
Tabs,
TabList,
Tab,
useColorModeValue,
Container
} from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { AiTwotoneThunderbolt, AiOutlineCloudServer } from 'react-icons/ai';
import { BiDesktop } from 'react-icons/bi';
import { GiSpiderWeb } from 'react-icons/gi';
const tabList = [
{
name: 'All',
filterName: '',
icon: AiTwotoneThunderbolt
},
{
name: 'Web Development',
filterName: 'development',
icon: BiDesktop
},
{
name: 'Web Design',
filterName: 'design',
icon: GiSpiderWeb
},
{
name: 'Devops',
filterName: 'devops',
icon: AiOutlineCloudServer
}
];
const SkillsList = () => {
return (
<Container maxW="7xl" p="0" pt={16} pb={16}>
<Tabs variant="soft-rounded" colorScheme="blue" align="center" w="100%">
<TabList display="flex" flexWrap="wrap" p={4}>
{tabList.map((tab, index) => (
<Tab
bg={useColorModeValue('gray.100', 'gray.800')}
color={useColorModeValue('gray.600', 'gray.500')}
_selected={{
color: 'white',
bg: 'teal'
}}
mr={2}
mt={2}
key={index}
>
<HStack spacing={1}>
<Icon as={tab.icon} />
<Text>{tab.name}</Text>
</HStack>
</Tab>
))}
</TabList>
</Tabs>
</Container>
);
};
export default SkillsList;
Skill Cards
import * as React from 'react';
import { SimpleGrid, Container } from '@chakra-ui/react';
import skillsList from './data';
import Card from './card';
const SkillCards = () => {
return (
<Container p="12">
<SimpleGrid columns={[1, 1, 2]} spacing={4}>
{skillsList().map((tool, index) => (
<Card
key={index}
name={tool.name}
description={tool.description}
image={tool.image}
link={tool.link}
/>
))}
</SimpleGrid>
</Container>
);
};
export default SkillCards;
import * as React from 'react';
import {
VStack,
HStack,
Text,
useColorModeValue,
Link,
Box,
Image,
Skeleton
} from '@chakra-ui/react';
// Here we have used react-paletter package for displaying data colors
import { usePalette } from 'react-palette';
// Here we have used framer-motion package for animations
import { motion } from 'framer-motion';
interface CardProps {
name: string;
image: string;
link: string;
description: string;
}
const Card = ({ name, image, link, description }: CardProps) => {
const { data, loading } = usePalette(image);
return (
<motion.div whileHover={{ y: -5 }}>
<Link href="#" isExternal>
<HStack
p={4}
bg={useColorModeValue('white', 'gray.800')}
rounded="xl"
borderWidth="1px"
borderColor={useColorModeValue('gray.100', 'gray.700')}
w="100%"
textAlign="left"
align="start"
spacing={4}
_hover={{ shadow: 'md' }}
>
<Box
rounded="lg"
p={2}
position="relative"
overflow="hidden"
lineHeight={0}
boxShadow="inset 0 0 1px 1px rgba(0, 0, 0, 0.015)"
>
<Box
bg={data.lightVibrant}
position="absolute"
top={0}
bottom={0}
left={0}
right={0}
opacity={0.25}
></Box>
{loading ? (
<Skeleton height={26} width={26} rounded="md" />
) : (
<Image src={image} height={26} width={26} layout="fixed" rounded="md" />
)}
</Box>
<VStack align="start" justifyContent="flex-start" spacing={1} maxW="lg" h="100%">
<VStack spacing={0} align="start" flexGrow={1}>
<Text fontWeight="bold" fontSize="md" noOfLines={2} color="blue.400">
{name}
</Text>
<Text fontSize="sm" color={useColorModeValue('gray.500', 'gray.200')}>
{description}
</Text>
</VStack>
</VStack>
</HStack>
</Link>
</motion.div>
);
};
export default Card;
export default function skillsList() {
return [
{
name: 'Ruby on Rails',
description: 'Web development',
link: 'https://rubyonrails.org/',
type: 'development',
image: '/assets/images/skills/rails.png'
},
{
name: 'React',
description: 'Web development',
link: 'https://reactjs.org/',
type: 'development',
image: '/assets/images/skills/react.png'
},
{
name: 'Ruby',
description: 'Web development, scrapping',
link: 'https://www.ruby-lang.org/en/',
type: 'development',
image: '/assets/images/skills/ruby.png'
},
{
name: 'Python',
description: 'Web development, scrapping',
link: 'https://www.python.org/',
type: 'development',
image: '/assets/images/skills/python.png'
}
];
}
