grub775.gitverse.ru

Experience.tsx
69 строк · 2.0 Кб
Перенос по словам
1
import React, { useState } from 'react'
2
import Head from 'next/head'
3
import { useTranslation } from 'next-i18next'
4
import { NextSeo } from 'next-seo'
5
import { motion } from 'framer-motion'
6

7
import Projects from '@Components/Projects'
8
import Experience from '@Components/Experience'
9

10
import { IProjectListItem } from '@Interfaces/projectList'
11
import { IExperienceListItem } from '@Interfaces/experienceList'
12

13
const ExperienceContainer = () => {
14
  const { t } = useTranslation(['experience'])
15

16
  const projectsList = t('experience:projects.list', {
17
    returnObjects: true,
18
  }) as Array<IProjectListItem>
19
  const experienceList = t('experience:experience.list', {
20
    returnObjects: true,
21
  }) as Array<IExperienceListItem>
22

23
  const [isStopAnimation, setIsStopAnimation] = useState(false)
24

25
  return (
26
    <>
27
      <Head>
28
        <title>{`${t('experience:projects.title')} & ${t(
29
          'experience:experience.title',
30
        )}`}</title>
31
      </Head>
32
      <NextSeo
33
        openGraph={{
34
          type: 'website',
35
          title: t('experience:og.title'),
36
          description: `${t('experience:projects.title')}: ${projectsList
37
            .map((item) => item.title)
38
            .join(', ')}
39
                    ${t('experience:experience.title')}: ${experienceList
40
            .map((item) => item.title)
41
            .join(', ')}`,
42
        }}
43
      />
44
      <motion.section
45
        className="skills d-flex flex-column justify-content-center align-items-center"
46
        key="my_unique_key23"
47
        initial={{ opacity: 0 }}
48
        animate={{ opacity: 1 }}
49
        transition={{ duration: 0.3 }}
50
      >
51
        <div className="container">
52
          <div className="row justify-content-center">
53
            <Projects
54
              isStopAnimation={isStopAnimation}
55
              setIsStopAnimation={setIsStopAnimation}
56
            />
57

58
            <Experience
59
              isStopAnimation={isStopAnimation}
60
              setIsStopAnimation={setIsStopAnimation}
61
            />
62
          </div>
63
        </div>
64
      </motion.section>
65
    </>
66
  )
67
}
68

69
export default ExperienceContainer
70
grub775.gitverse.ru

Использование cookies
