feat: add divlo.fr

components/Portfolio/PortfolioItem.tsx

@@ -0,0 +1,102 @@
+import Image from 'next/image'
+
+export interface PortfolioItemProps {
+  title: string
+  description: string
+  link: string
+  image: string
+}
+
+export const PortfolioItem: React.FC<PortfolioItemProps> = props => {
+  const { title, description, link, image } = props
+
+  return (
+    <>
+      <div className='col-sm-24 col-md-10 col-xl-7 portfolio-grid'>
+        <a
+          className='portfolio-link'
+          target='_blank'
+          rel='noopener noreferrer'
+          href={link}
+          aria-label={title}
+        >
+          <div className='portfolio-figure'>
+            <Image width={300} height={300} src={image} alt={title} />
+          </div>
+          <div className='portfolio-caption'>
+            <h3 className='portfolio-title important'>{title}</h3>
+            <p className='portfolio-description'>{description}</p>
+          </div>
+        </a>
+      </div>
+
+      <style jsx global>
+        {`
+        .portfolio-figure img[alt='${title}'] {
+          max-height: 300px;
+          max-width: 300px;
+          transition: opacity 0.5s ease;
+        }
+        .portfolio-grid:hover img[alt='${title}'] {
+          opacity: 0.05;
+        }
+      `}
+      </style>
+
+      <style jsx>
+        {`
+          .portfolio-grid {
+            display: flex;
+            align-items: center;
+            position: relative;
+            flex-direction: column;
+            word-wrap: break-word;
+            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
+            border: 1px solid black;
+            border-radius: 1rem;
+            margin: 0 0 50px 0;
+            cursor: pointer;
+          }
+          /* col-md */
+          @media (min-width: 768px) {
+            .portfolio-grid {
+              margin: 0 30px 50px 30px;
+            }
+          }
+          /* col-xl */
+          @media (min-width: 1200px) {
+            .portfolio-grid {
+              margin: 0 20px 50px 20px;
+            }
+          }
+          .portfolio-figure {
+            display: flex;
+            justify-content: center;
+          }
+          .portfolio-caption {
+            transition: opacity 0.5s ease;
+            opacity: 0;
+            height: 0;
+            overflow: hidden;
+          }
+          .portfolio-description {
+            font-size: 16px;
+          }
+          .portfolio-grid:hover .portfolio-caption {
+            opacity: 1;
+            height: auto;
+            position: absolute;
+            bottom: 0;
+            text-align: center;
+            width: 80%;
+          }
+          .portfolio-grid:hover .portfolio-link {
+            color: var(--text-color);
+            display: flex;
+            justify-content: center;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/Portfolio/index.tsx

@@ -0,0 +1,23 @@
+import useTranslation from 'next-translate/useTranslation'
+
+import { PortfolioItem, PortfolioItemProps } from './PortfolioItem'
+
+export const Portfolio: React.FC = () => {
+  const { t } = useTranslation('home')
+
+  const items: PortfolioItemProps[] = t('home:portfolio.items', {}, {
+    returnObjects: true
+  })
+
+  return (
+    <>
+      <div className='container-fluid'>
+        <div className='row justify-content-center'>
+          {items.map((item, index) => {
+            return <PortfolioItem key={index} {...item} />
+          })}
+        </div>
+      </div>
+    </>
+  )
+}