git ssb

0+

Rômulo Alves / website



Tree: 858b3ad933c033da2dff195b01a87247388de559

Files: 858b3ad933c033da2dff195b01a87247388de559 / pages / index.tsx

2368 bytesRaw
1import {Fragment, FunctionComponent} from 'react';
2import Image from 'next/image';
3
4import {NextSeo} from 'next-seo';
5
6import Header from '../components/header';
7import Contacts from '../components/contacts';
8
9interface Props {
10 slogan: string;
11 about: string;
12}
13
14const 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
92export 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
107export default Index;

Built with git-ssb-web