feat: add Open source section

README.md

@@ -5,7 +5,7 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/Divlo/Divlo/actions?query=workflow%3A%22Divlo%22"><img src="https://github.com/Divlo/Divlo/actions/workflows/Divlo.yml/badge.svg?branch=master" alt="Divlo's CI" /></a>
+  <a href="https://github.com/Divlo/Divlo/actions/workflows/Divlo.yml"><img src="https://github.com/Divlo/Divlo/actions/workflows/Divlo.yml/badge.svg?branch=master" alt="Divlo's CI" /></a>
   <a href="https://github.com/Divlo"><img alt="GitHub" src="https://img.shields.io/badge/-GitHub-5A5A5A?style=flat&labelColor=5A5A5A&logo=github&logoColor=white"/></a>
   <a href="https://gitlab.com/Divlo"><img alt="GitLab" src="https://img.shields.io/badge/-GitLab-303030?style=flat&labelColor=303030&logo=gitlab&logoColor=white"/></a>
   <a href="https://www.npmjs.com/~divlo"><img alt="npm" src="https://img.shields.io/badge/-npm-c4302b?style=flat&labelColor=c4302b&logo=npm&logoColor=white"/></a>
@@ -32,7 +32,7 @@
     "Open-Source enthusiast"
   ],
   "skills": {
-    "languages": ["JavaScript", "TypeScript", "Python"],
+    "programmingLanguages": ["JavaScript", "TypeScript", "Python"],
     "frontEnd": ["HTML", "CSS", "Tailwind CSS", "React.js (+ Next.js)"],
     "backEnd": ["Node.js", "Fastify", "Prisma", "PostgreSQL", "MySQL"],
     "tools": ["Ubuntu", "Hyper Terminal", "VSCode", "Git", "Docker"]
@@ -46,5 +46,5 @@
 
 <p align=center>
   <img height=175 align="center" src="https://github-readme-stats.vercel.app/api?username=Divlo&show_icons=true&theme=dark" />
-  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Divlo&hide=html,css&langs_count=8&layout=compact&theme=dark" />
+  <img height=175 align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Divlo&hide=html,css,javascript&langs_count=8&layout=compact&theme=dark" />
 </p>

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>
+    </>
+  )
+}

components/Profile/SocialMediaList/SocialMediaIcons/Icon.tsx

@@ -1,11 +1,16 @@
+import classNames from 'classnames'
+
 export const Icon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
-  const { children, ...rest } = props
+  const { children, className, ...rest } = props
 
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
       viewBox='0 0 24 24'
-      className='dark:text-white text-black w-8 h-8 fill-current'
+      className={classNames(
+        'dark:text-white text-black w-8 h-8 fill-current',
+        className
+      )}
       {...rest}
     >
       {children}

components/Skills/index.tsx

@@ -12,7 +12,6 @@ export const Skills: React.FC = () => {
         <SkillComponent skill='JavaScript' />
         <SkillComponent skill='TypeScript' />
         <SkillComponent skill='Python' />
-        <SkillComponent skill='C/C++' />
       </SkillsSection>
 
       <SkillsSection title='Front-end'>

components/design/Section/SectionHeading.tsx

@@ -4,7 +4,7 @@ export const SectionHeading: React.FC<SectionHeadingProps> = (props) => {
   const { children, ...rest } = props
 
   return (
-    <h2 {...rest} className='text-4xl font-semibold text-center mt-1 mb-7'>
+    <h2 {...rest} className='text-4xl font-semibold text-center mt-1 mb-3'>
       {children}
     </h2>
   )

locales/en/home.json

@@ -50,5 +50,8 @@
         "image": "/images/portfolio/leon.png"
       }
     ]
+  },
+  "open-source": {
+    "description": "List of most famous open source projects I contributed to."
   }
 }

locales/fr/home.json

@@ -50,5 +50,8 @@
         "image": "/images/portfolio/leon.png"
       }
     ]
+  },
+  "open-source": {
+    "description": "Liste des projets open source les plus célèbres auxquels j'ai contribué."
   }
 }

package.json

@@ -35,7 +35,7 @@
     "classnames": "2.3.1",
     "html-react-parser": "1.2.7",
     "next": "11.0.1",
-    "next-pwa": "5.2.21",
+    "next-pwa": "5.2.22",
     "next-themes": "0.0.15",
     "next-translate": "1.0.7",
     "react": "17.0.2",
@@ -49,15 +49,15 @@
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.0.0",
     "@types/jest": "26.0.23",
-    "@types/node": "15.14.0",
+    "@types/node": "16.0.0",
     "@types/react": "17.0.13",
-    "@types/styled-jsx": "2.2.8",
+    "@types/styled-jsx": "2.2.9",
     "@typescript-eslint/eslint-plugin": "4.28.1",
     "autoprefixer": "10.2.6",
     "babel-jest": "27.0.6",
     "dockerfilelint": "1.8.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "7.29.0",
+    "eslint": "7.30.0",
     "eslint-config-next": "11.0.1",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-standard-with-typescript": "20.0.0",

pages/index.tsx

@@ -9,6 +9,7 @@ import { Portfolio } from 'components/Portfolio'
 import { Profile } from 'components/Profile'
 import { SocialMediaList } from 'components/Profile/SocialMediaList'
 import { Skills } from 'components/Skills'
+import { OpenSource } from 'components/OpenSource'
 
 const Home: React.FC = () => {
   const { t } = useTranslation()
@@ -47,6 +48,12 @@ const Home: React.FC = () => {
           <Portfolio />
         </Section>
       </RevealFade>
+
+      <RevealFade>
+        <Section id='open-source' heading='Open source' withoutShadowContainer>
+          <OpenSource />
+        </Section>
+      </RevealFade>
     </>
   )
 }