feat: add Open source section

components/OpenSource/Repository.tsx

@@ -0,0 +1,26 @@
+import { ShadowContainer } from 'components/design/ShadowContainer'
+import { GitHubIcon } from 'components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon'
+
+export interface RepositoryProps {
+  name: string
+  description: string
+  href: string
+}
+
+export const Repository: React.FC<RepositoryProps> = (props) => {
+  const { name, description, href } = props
+
+  return (
+    <ShadowContainer className='cursor-pointer relative p-6 !mb-4 max-h-32 transition-transform duration-200 ease-in-out hover:-translate-y-2'>
+      <a href={href} target='_blank' rel='noopener noreferrer'>
+        <div className='flex'>
+          <GitHubIcon className='h-6 mr-2' />
+          <span className='text-yellow dark:text-yellow-dark hover:underline'>
+            {name}
+          </span>
+        </div>
+        <p className='my-4'>{description}</p>
+      </a>
+    </ShadowContainer>
+  )
+}

components/OpenSource/index.tsx

@@ -0,0 +1,47 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { Repository } from './Repository'
+
+export const OpenSource: React.FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <div className='max-w-full mt-0 flex flex-col items-center'>
+        <p className='text-center'>{t('home:open-source.description')}</p>
+        <div className='grid grid-cols-1 md:w-10/12 md:grid-cols-2 gap-6 my-6'>
+          <Repository
+            name='nodejs/node'
+            description='Node.js JavaScript runtime ✨️🐢🚀✨️'
+            href='https://github.com/nodejs/node/commits?author=Divlo'
+          />
+          <Repository
+            name='standard/standard'
+            description='🌟 JavaScript Style Guide, with linter & automatic code fixer'
+            href='https://github.com/standard/standard/commits?author=Divlo'
+          />
+          <Repository
+            name='nrwl/nx'
+            description='Smart, Extensible Build Framework'
+            href='https://github.com/nrwl/nx/commits?author=Divlo'
+          />
+          <Repository
+            name='facebook/jest'
+            description='Delightful JavaScript Testing.'
+            href='https://github.com/facebook/jest/commits?author=Divlo'
+          />
+        </div>
+      </div>
+
+      <style jsx global>{`
+        .animation-custom {
+          position: relative;
+          transition: all 0.3s ease 0s;
+        }
+        .animation-custom:hover {
+          transform: translateY(-7px);
+        }
+      `}</style>
+    </>
+  )
+}