Commit c78f62a6c634aec87aa21cc8edf159adcdea73f3
improvements
romuloalves committed on 4/17/2021, 9:13:34 PMParent: 9fe4692300e786f603d0456a8df7e201b1ce41ab
Files changed
components/contacts.tsx | added |
package-lock.json | changed |
package.json | changed |
pages/_app.tsx | changed |
pages/_document.tsx | changed |
pages/index.tsx | changed |
data/index.ts | added |
components/contacts.tsx | ||
---|---|---|
@@ -1,0 +1,53 @@ | ||
1 … | +const Contacts = () => ( | |
2 … | + <section> | |
3 … | + <h4>Contact me!</h4> | |
4 … | + <div> | |
5 … | + <strong>Secure Scuttlebutt</strong> | |
6 … | + <ul> | |
7 … | + <li> | |
8 … | + <code>@xr/Q/zqaEwmmd4wg8xRU1TrMLQhc9qBqNCioCqmv1vQ=.ed25519</code> | |
9 … | + </li> | |
10 … | + <li>or</li> | |
11 … | + <li> | |
12 … | + <code>@2CFA0rXTIXzlwLvln3NhY8+RvuKFhNkejhLZhrDiCMU=.ed25519</code> | |
13 … | + </li> | |
14 … | + </ul> | |
15 … | + </div> | |
16 … | + <div> | |
17 … | + <strong>E-mail</strong> | |
18 … | + <ul> | |
19 … | + <li> | |
20 … | + <a href="mailto:contact@romuloalves.dev">contact@romuloalves.dev</a> | |
21 … | + </li> | |
22 … | + </ul> | |
23 … | + </div> | |
24 … | + <div> | |
25 … | + <strong>LinkedIn</strong> | |
26 … | + <ul> | |
27 … | + <li> | |
28 … | + <a href="https://www.linkedin.com/in/romuloalves" target="_blank" rel="noopener" title="/in/romuloalves">/in/romuloalves</a> | |
29 … | + </li> | |
30 … | + </ul> | |
31 … | + </div> | |
32 … | + <style jsx>{` | |
33 … | + h4 { | |
34 … | + font-size: 20px; | |
35 … | + } | |
36 … | + div { | |
37 … | + margin: 10px 0 0 20px; | |
38 … | + } | |
39 … | + ul { | |
40 … | + list-style: none; | |
41 … | + } | |
42 … | + li { | |
43 … | + margin: 5px 0 0 15px; | |
44 … | + } | |
45 … | + code { | |
46 … | + background: #eee; | |
47 … | + overflow-wrap: break-word; | |
48 … | + } | |
49 … | + `}</style> | |
50 … | + </section> | |
51 … | +); | |
52 … | + | |
53 … | +export default Contacts; |
package-lock.json | ||
---|---|---|
@@ -1425,8 +1425,13 @@ | ||
1425 | 1425 … | } |
1426 | 1426 … | } |
1427 | 1427 … | } |
1428 | 1428 … | }, |
1429 … | + "next-seo": { | |
1430 … | + "version": "4.24.0", | |
1431 … | + "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-4.24.0.tgz", | |
1432 … | + "integrity": "sha512-9VQXfXAelhE+hAWzJ4azigQaW3FPX0kU0eYKFQXKsQjgY7AWtukjRGXls0oSIk8khhDJwmCt46EwsO9n5DDW6Q==" | |
1433 … | + }, | |
1429 | 1434 … | "node-fetch": { |
1430 | 1435 … | "version": "2.6.1", |
1431 | 1436 … | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", |
1432 | 1437 … | "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" |
package.json | ||
---|---|---|
@@ -9,14 +9,15 @@ | ||
9 | 9 … | "author": "romuloalves", |
10 | 10 … | "license": "MIT", |
11 | 11 … | "homepage": "https://git.sr.ht/~romuloalves/website", |
12 | 12 … | "scripts": { |
13 | - "dev": "next dev", | |
13 … | + "dev": "NODE_ENV=development next dev", | |
14 | 14 … | "build": "next build", |
15 | 15 … | "start": "next start" |
16 | 16 … | }, |
17 | 17 … | "dependencies": { |
18 | 18 … | "next": "^10.1.3", |
19 … | + "next-seo": "^4.24.0", | |
19 | 20 … | "react": "^17.0.2", |
20 | 21 … | "react-dom": "^17.0.2", |
21 | 22 … | "styled-jsx": "^3.4.4" |
22 | 23 … | }, |
pages/_app.tsx | ||
---|---|---|
@@ -7,19 +7,23 @@ | ||
7 | 7 … | <Head> |
8 | 8 … | <meta charSet="UTF-8" /> |
9 | 9 … | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
10 | 10 … | <meta httpEquiv="X-UA-Compatible" content="ie=edge" /> |
11 | - <meta name="description" content="romuloalves - software engineer" /> | |
12 | 11 … | <link rel="icon" type="image/png" href="/favicon.png" /> |
13 | 12 … | <title>Rômulo Alves</title> |
14 | 13 … | </Head> |
15 | 14 … | <Component {...pageProps} /> |
16 | 15 … | <style global jsx>{` |
17 | - body { | |
18 | - font-family: Verdana, sans-serif; | |
16 … | + * { | |
19 | 17 … | margin: 0; |
20 | 18 … | padding: 0; |
21 | 19 … | } |
20 … | + body { | |
21 … | + font-family: Verdana, sans-serif; | |
22 … | + } | |
23 … | + h3, p { | |
24 … | + line-height: 1.6; | |
25 … | + } | |
22 | 26 … | `}</style> |
23 | 27 … | </Fragment> |
24 | 28 … | ); |
25 | 29 … | } |
pages/_document.tsx | ||
---|---|---|
@@ -1,16 +1,29 @@ | ||
1 | -import Document, { Html, Head, Main, NextScript } from 'next/document' | |
1 … | +import Document, { Html, Head, Main, NextScript } from 'next/document'; | |
2 | 2 … | |
3 | -class MyDocument extends Document { | |
3 … | +interface Props { | |
4 … | + analytics: boolean; | |
5 … | +} | |
6 … | + | |
7 … | +class MyDocument extends Document<Props> { | |
4 | 8 … | static async getInitialProps(ctx) { |
5 | - const initialProps = await Document.getInitialProps(ctx) | |
6 | - return { ...initialProps } | |
9 … | + const initialProps = await Document.getInitialProps(ctx); | |
10 … | + const analytics = process.env.NODE_ENV !== 'development'; | |
11 … | + | |
12 … | + return { | |
13 … | + ...initialProps, | |
14 … | + analytics | |
15 … | + }; | |
7 | 16 … | } |
8 | 17 … | |
9 | 18 … | render() { |
10 | 19 … | return ( |
11 | 20 … | <Html lang="en"> |
12 | - <Head /> | |
21 … | + <Head> | |
22 … | + {this.props.analytics && ( | |
23 … | + <script async defer data-domain="romuloalves.dev" src="https://analytics.romuloalves.dev/js/plausible.js"></script> | |
24 … | + )} | |
25 … | + </Head> | |
13 | 26 … | <body> |
14 | 27 … | <Main /> |
15 | 28 … | <NextScript /> |
16 | 29 … | </body> |
pages/index.tsx | ||
---|---|---|
@@ -1,41 +1,107 @@ | ||
1 | -import {Fragment} from 'react'; | |
2 | -import Head from 'next/head'; | |
1 … | +import {Fragment, FunctionComponent} from 'react'; | |
2 … | +import Image from 'next/image'; | |
3 … | + | |
4 … | +import {NextSeo} from 'next-seo'; | |
5 … | + | |
3 | 6 … | import Header from '../components/header'; |
7 … | +import Contacts from '../components/contacts'; | |
4 | 8 … | |
5 | -function Index() { | |
9 … | +interface Props { | |
10 … | + slogan: string; | |
11 … | + about: string; | |
12 … | +} | |
13 … | + | |
14 … | +const Index: FunctionComponent<Props> = props => { | |
6 | 15 … | return ( |
7 | 16 … | <Fragment> |
8 | - <Head> | |
9 | - <title>Rômulo Alves - Home</title> | |
10 | - </Head> | |
11 | - <Header /> | |
17 … | + <NextSeo | |
18 … | + title="Rômulo Alves" | |
19 … | + description="Software Engineer working at CWI" | |
20 … | + /> | |
21 … | + <Header showMenu={false} /> | |
12 | 22 … | <main> |
13 | - <h3> | |
14 | - Software engineer who aims for simplicity and the most adequate solution despite the technology. | |
15 | - </h3> | |
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 /> | |
16 | 35 … | </main> |
17 | 36 … | |
18 | 37 … | <style jsx>{` |
19 | 38 … | main { |
20 | 39 … | font-size: 16px; |
40 … | + margin: 25px auto; | |
41 … | + max-width: 1024px; | |
21 | 42 … | } |
22 | 43 … | h3 { |
23 | 44 … | font-weight: normal; |
24 | 45 … | text-align: center; |
25 | 46 … | } |
26 | 47 … | |
27 | - @media (max-width: 740px) { | |
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) { | |
28 | 60 … | main { |
29 | - margin: 0 15px; | |
61 … | + margin: 25px 25px; | |
30 | 62 … | } |
63 … | + } | |
31 | 64 … | |
65 … | + @media (min-width: 740px) { | |
66 … | + .about { | |
67 … | + width: 70%; | |
68 … | + } | |
69 … | + } | |
70 … | + | |
71 … | + @media (max-width: 740px) { | |
32 | 72 … | h3 { |
33 | 73 … | text-align: justify; |
34 | 74 … | } |
75 … | + section { | |
76 … | + flex-direction: column-reverse; | |
77 … | + } | |
78 … | + .picture-container { | |
79 … | + margin: 0 0 25px; | |
80 … | + } | |
35 | 81 … | } |
36 | 82 … | `}</style> |
83 … | + <style jsx global>{` | |
84 … | + .picture-container img { | |
85 … | + border-radius: 50%; | |
86 … | + } | |
87 … | + `}</style> | |
37 | 88 … | </Fragment> |
38 | 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 … | + }; | |
39 | 105 … | } |
40 | 106 … | |
41 | 107 … | export default Index; |
data/index.ts | ||
---|---|---|
@@ -1,0 +1,96 @@ | ||
1 … | +export default { | |
2 … | + slogan: 'Software engineer who aims for simplicity and the most adequate solution despite the technology.', | |
3 … | + about: { | |
4 … | + text: `<p> | |
5 … | + My name is Rômulo Augusto Alves, I'm a software engineer with around 10 years of experience working at cwi as a Team Leader. I have worked with dot-net, node-js, go-lang, sql-server, postgre-sql, mongo-db, react-js, next-js, vue-js and others... | |
6 … | + </p> | |
7 … | + <p> | |
8 … | + Graduated in Computer Science at feevale, my thesis was an experiment of sharing artifacts with sensible data taken from pentests to clients without a central server to store that artifacts. Its tech stack was go-lang, using go-on-mobile to build a native library, ipfs and react-native with react-native-paper to the UI. | |
9 … | + </p>`, | |
10 … | + links: [ | |
11 … | + { | |
12 … | + expression: 'cwi', | |
13 … | + text: 'CWI', | |
14 … | + href: 'https://cwi.com.br/' | |
15 … | + }, | |
16 … | + { | |
17 … | + expression: 'feevale', | |
18 … | + text: 'Universidade Feevale', | |
19 … | + href: 'https://feevale.br/' | |
20 … | + }, | |
21 … | + { | |
22 … | + expression: 'ipfs', | |
23 … | + text: 'IPFS', | |
24 … | + href: 'https://ipfs.io', | |
25 … | + title: 'InterPlanetary File System' | |
26 … | + }, | |
27 … | + { | |
28 … | + expression: 'dot-net', | |
29 … | + text: '.NET', | |
30 … | + href: 'https://dotnet.microsoft.com/' | |
31 … | + }, | |
32 … | + { | |
33 … | + expression: 'node-js', | |
34 … | + text: 'Node.js', | |
35 … | + href: 'https://nodejs.org/' | |
36 … | + }, | |
37 … | + { | |
38 … | + expression: 'go-lang', | |
39 … | + text: 'Go', | |
40 … | + href: 'https://golang.org/' | |
41 … | + }, | |
42 … | + { | |
43 … | + expression: 'sql-server', | |
44 … | + text: 'SQL Server', | |
45 … | + href: 'https://www.microsoft.com/sql-server/', | |
46 … | + title: 'Microsoft SQL Server' | |
47 … | + }, | |
48 … | + { | |
49 … | + expression: 'postgre-sql', | |
50 … | + text: 'PostgreSQL', | |
51 … | + href: 'https://www.postgresql.org/' | |
52 … | + }, | |
53 … | + { | |
54 … | + expression: 'mongo-db', | |
55 … | + text: 'MongoDB', | |
56 … | + href: 'https://www.mongodb.com/' | |
57 … | + }, | |
58 … | + { | |
59 … | + expression: 'react-js', | |
60 … | + text: 'React', | |
61 … | + href: 'https://reactjs.org/' | |
62 … | + }, | |
63 … | + { | |
64 … | + expression: 'next-js', | |
65 … | + text: 'Next.js', | |
66 … | + href: 'https://nextjs.org/' | |
67 … | + }, | |
68 … | + { | |
69 … | + expression: 'vue-js', | |
70 … | + text: 'Vue.js', | |
71 … | + href: 'https://vuejs.org/' | |
72 … | + }, | |
73 … | + { | |
74 … | + expression: 'react-native-paper', | |
75 … | + text: 'React Native Paper', | |
76 … | + href: 'https://reactnativepaper.com/' | |
77 … | + }, | |
78 … | + { | |
79 … | + expression: 'react-native', | |
80 … | + text: 'React Native', | |
81 … | + href: 'https://reactnative.dev/' | |
82 … | + }, | |
83 … | + { | |
84 … | + expression: 'go-on-mobile', | |
85 … | + href: 'https://pkg.go.dev/golang.org/x/mobile', | |
86 … | + text: 'Go on mobile' | |
87 … | + }, | |
88 … | + { | |
89 … | + expression: 'pentests', | |
90 … | + href: 'https://en.wikipedia.org/wiki/Penetration_test', | |
91 … | + text: 'pentests', | |
92 … | + title: 'Penetration Test' | |
93 … | + } | |
94 … | + ] | |
95 … | + } | |
96 … | +}; |
Built with git-ssb-web