git ssb

1
import {Fragment, FunctionComponent} from 'react';
2
import Image from 'next/image';
3
4
import {NextSeo} from 'next-seo';
5
6
import Header from '../components/header';
7
import Contacts from '../components/contacts';
8
9
interface Props {
10
  slogan: string;
11
  about: string;
12
}
13
14
const Index: FunctionComponent<Props> = props => {
15
  return (
16
    <Fragment>
17
      <NextSeo
18
        title="Rômulo Alves"
19
        description="Software Engineer working at CWI"
20
       />
21
      <Header showMenu={false} />
22
      <main>
23
        <h3>{props.slogan}</h3>
24
        <section>
25
          <div className="about" dangerouslySetInnerHTML={{__html: props.about}} />
26
          <div className="picture-container">
27
            <Image src="/picture.jpg"
28
              alt="Picture of myself"
29
              width={200}
30
              height={200}
31
              />
32
          </div>
33
        </section>
34
        <Contacts />
35
      </main>
36
37
      <style jsx>{`
38
        main {
39
          font-size: 16px;
40
          margin: 25px auto;
41
          max-width: 1024px;
42
        }
43
        h3 {
44
          font-weight: normal;
45
          text-align: center;
46
        }
47
48
        section {
49
          align-items: center;
50
          display: flex;
51
          justify-content: space-between;
52
          margin: 50px 0;
53
        }
54
55
        p {
56
          margin: 15px 0;
57
        }
58
59
        @media (max-width: 1024px) {
60
          main {
61
            margin: 25px 25px;
62
          }
63
        }
64
65
        @media (min-width: 740px) {
66
          .about {
67
            width: 70%;
68
          }
69
        }
70
71
        @media (max-width: 740px) {
72
          h3 {
73
            text-align: justify;
74
          }
75
          section {
76
            flex-direction: column-reverse;
77
          }
78
          .picture-container {
79
            margin: 0 0 25px;
80
          }
81
        }
82
      `}</style>
83
      <style jsx global>{`
84
        .picture-container img {
85
          border-radius: 50%;
86
        }
87
      `}</style>
88
    </Fragment>
89
  );
90
};
91
92
export function getStaticProps() {
93
  const data = require('../data/index').default;
94
  const about = data.about.links.reduce((value, link) => {
95
    return value.replace(new RegExp(link.expression, 'g'), 
96
      `<a href="${link.href}" title="${link.title || link.text}" target="_blank" rel="noopener">${link.text}</a>`);
97
  }, data.about.text);
98
99
  return {
100
    props: {
101
      ...data,
102
      about
103
    }
104
  };
105
}
106
107
export default Index;