git ssb

0+

Rômulo Alves / website



Commit master

Browse Files

improve css

romuloalves committed on 4/18/2021, 1:27:08 PM
Parent: 5a5b00e6418d9863bf73ba162f73a1dceb03936a

Files changed

components/contacts.tsxchanged
components/header.tsxchanged
package-lock.jsonchanged
package.jsonchanged
pages/_app.tsxchanged
pages/_document.tsxchanged
pages/index.tsxchanged
styles/_app.cssadded
styles/contacts.cssadded
styles/header.cssadded
styles/index.cssadded
components/contacts.tsxView
@@ -1,6 +1,6 @@
11 … const Contacts = () => (
2- <section>
2 …+ <section className="contacts">
33 … <h4>Contact me!</h4>
44 … <div>
55 … <strong>Secure Scuttlebutt</strong>
66 … <ul>
@@ -28,26 +28,8 @@
2828 … <a href="https://www.linkedin.com/in/romuloalves" target="_blank" rel="noopener" title="/in/romuloalves">/in/romuloalves</a>
2929 … </li>
3030 … </ul>
3131 … </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>
5032 … </section>
5133 … );
5234 …
5335 … export default Contacts;
components/header.tsxView
@@ -6,9 +6,9 @@
66 …
77 … const Header: FunctionComponent<Props> = ({ showMenu = true }) => {
88 … return (
99 … <Fragment>
10- <header>
10 …+ <header className="header">
1111 … <div className="logo">
1212 … <div className="ring">
1313 … <div className="internal-ring">
1414 … <hr />
@@ -22,143 +22,15 @@
2222 … <h2>Software Engineer</h2>
2323 … </div>
2424 … </header>
2525 … {showMenu && (
26- <nav>
26 …+ <nav className="nav">
2727 … <ul>
2828 … <li><a href="#">About me</a></li>
2929 … <li><a href="#">Resumé</a></li>
3030 … </ul>
3131 … </nav>
3232 … )}
33- <style jsx>{`
34- header,
35- .logo,
36- .ring,
37- .internal-ring,
38- .texts {
39- display: flex;
40- align-items: center;
41- justify-content: center;
42- }
43-
44- .texts {
45- align-items: baseline;
46- flex-direction: column;
47- margin-left: 45px;
48- }
49-
50- header {
51- color: #fff;
52- height: 300px;
53- }
54-
55- header,
56- .ring {
57- background: rgb(110, 110, 110);
58- }
59-
60- .logo,
61- .internal-ring {
62- background: #fff;
63- }
64-
65- .logo,
66- .ring,
67- .internal-ring {
68- border-radius: 50%;
69- }
70-
71- .logo {
72- height: 150px;
73- margin-left: -14%;
74- width: 150px;
75- }
76-
77- .ring {
78- height: 140px;
79- width: 140px;
80- }
81- .internal-ring {
82- flex-direction: column;
83- height: 130px;
84- width: 130px;
85- }
86-
87- span {
88- color: rgb(110, 110, 110);
89- font-size: 40px;
90- }
91-
92- hr {
93- background: rgb(110, 110, 110);
94- border: none;
95- border-radius: 6px;
96- height: 6px;
97- margin: 10px;
98- padding: 0;
99- width: 26px;
100- }
101-
102- h1,
103- h2 {
104- margin: 0;
105- }
106-
107- h1 {
108- font-size: 52px;
109- }
110-
111- h2 {
112- font-size: 20px;
113- margin-left: 3px;
114- text-transform: uppercase;
115- }
116-
117- ul {
118- background: rgb(110, 110, 110);
119- display: flex;
120- justify-content: center;
121- list-style: none;
122- margin: 0;
123- padding: 0;
124- }
125-
126- nav a {
127- color: #fff;
128- display: inline-block;
129- letter-spacing: 1px;
130- min-width: 100px;
131- padding: 10px;
132- text-align: center;
133- transition: background .2s, color .2s;
134- }
135-
136- nav a:hover {
137- background: #fff;
138- color: rgb(110, 110, 110);
139- }
140-
141- @media (max-width: 740px) {
142- header {
143- flex-direction: column;
144- }
145- .logo {
146- margin-left: 0;
147- }
148- .texts {
149- margin-left: 0;
150- margin-top: 20px;
151- }
152-
153- h1 {
154- font-size: 38px;
155- }
156- h2 {
157- font-size: 18px;
158- }
159- }
160- `}</style>
16133 … </Fragment>
16234 … );
16335 … };
16436 …
package-lock.jsonView
@@ -240,8 +240,16 @@
240240 … "normalize-path": "^3.0.0",
241241 … "picomatch": "^2.0.4"
242242 … }
243243 … },
244 …+ "argparse": {
245 …+ "version": "1.0.10",
246 …+ "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
247 …+ "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
248 …+ "requires": {
249 …+ "sprintf-js": "~1.0.2"
250 …+ }
251 …+ },
244252 … "array-filter": {
245253 … "version": "1.0.0",
246254 … "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
247255 … "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM="
@@ -439,8 +447,29 @@
439447 … "function-bind": "^1.1.1",
440448 … "get-intrinsic": "^1.0.2"
441449 … }
442450 … },
451 …+ "caller-callsite": {
452 …+ "version": "2.0.0",
453 …+ "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
454 …+ "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
455 …+ "requires": {
456 …+ "callsites": "^2.0.0"
457 …+ }
458 …+ },
459 …+ "caller-path": {
460 …+ "version": "2.0.0",
461 …+ "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
462 …+ "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
463 …+ "requires": {
464 …+ "caller-callsite": "^2.0.0"
465 …+ }
466 …+ },
467 …+ "callsites": {
468 …+ "version": "2.0.0",
469 …+ "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
470 …+ "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
471 …+ },
443472 … "caniuse-lite": {
444473 … "version": "1.0.30001205",
445474 … "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz",
446475 … "integrity": "sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og=="
@@ -529,8 +558,19 @@
529558 … "version": "1.0.2",
530559 … "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
531560 … "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
532561 … },
562 …+ "cosmiconfig": {
563 …+ "version": "5.2.1",
564 …+ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
565 …+ "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
566 …+ "requires": {
567 …+ "import-fresh": "^2.0.0",
568 …+ "is-directory": "^0.3.1",
569 …+ "js-yaml": "^3.13.1",
570 …+ "parse-json": "^4.0.0"
571 …+ }
572 …+ },
533573 … "create-ecdh": {
534574 … "version": "4.0.4",
535575 … "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
536576 … "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
@@ -593,8 +633,13 @@
593633 … "version": "1.5.1",
594634 … "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
595635 … "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
596636 … },
637 …+ "cssesc": {
638 …+ "version": "3.0.0",
639 …+ "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
640 …+ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
641 …+ },
597642 … "cssnano-preset-simple": {
598643 … "version": "1.2.2",
599644 … "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-1.2.2.tgz",
600645 … "integrity": "sha512-gtvrcRSGtP3hA/wS8mFVinFnQdEsEpm3v4I/s/KmNjpdWaThV/4E5EojAzFXxyT5OCSRPLlHR9iQexAqKHlhGQ==",
@@ -803,8 +848,16 @@
803848 … "requires": {
804849 … "iconv-lite": "^0.6.2"
805850 … }
806851 … },
852 …+ "error-ex": {
853 …+ "version": "1.3.2",
854 …+ "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
855 …+ "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
856 …+ "requires": {
857 …+ "is-arrayish": "^0.2.1"
858 …+ }
859 …+ },
807860 … "es-abstract": {
808861 … "version": "1.18.0",
809862 … "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0.tgz",
810863 … "integrity": "sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==",
@@ -851,8 +904,13 @@
851904 … "version": "1.0.5",
852905 … "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
853906 … "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
854907 … },
908 …+ "esprima": {
909 …+ "version": "4.0.1",
910 …+ "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
911 …+ "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
912 …+ },
855913 … "esutils": {
856914 … "version": "2.0.3",
857915 … "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
858916 … "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
@@ -1048,8 +1106,38 @@
10481106 … "version": "1.2.1",
10491107 … "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
10501108 … "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
10511109 … },
1110 …+ "import-cwd": {
1111 …+ "version": "2.1.0",
1112 …+ "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
1113 …+ "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
1114 …+ "requires": {
1115 …+ "import-from": "^2.1.0"
1116 …+ }
1117 …+ },
1118 …+ "import-fresh": {
1119 …+ "version": "2.0.0",
1120 …+ "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
1121 …+ "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
1122 …+ "requires": {
1123 …+ "caller-path": "^2.0.0",
1124 …+ "resolve-from": "^3.0.0"
1125 …+ }
1126 …+ },
1127 …+ "import-from": {
1128 …+ "version": "2.1.0",
1129 …+ "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
1130 …+ "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
1131 …+ "requires": {
1132 …+ "resolve-from": "^3.0.0"
1133 …+ }
1134 …+ },
1135 …+ "indexes-of": {
1136 …+ "version": "1.0.1",
1137 …+ "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
1138 …+ "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc="
1139 …+ },
10521140 … "inherits": {
10531141 … "version": "2.0.4",
10541142 … "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
10551143 … "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
@@ -1061,8 +1149,13 @@
10611149 … "requires": {
10621150 … "call-bind": "^1.0.0"
10631151 … }
10641152 … },
1153 …+ "is-arrayish": {
1154 …+ "version": "0.2.1",
1155 …+ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
1156 …+ "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
1157 …+ },
10651158 … "is-bigint": {
10661159 … "version": "1.0.1",
10671160 … "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.1.tgz",
10681161 … "integrity": "sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg=="
@@ -1092,8 +1185,13 @@
10921185 … "version": "1.0.2",
10931186 … "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
10941187 … "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
10951188 … },
1189 …+ "is-directory": {
1190 …+ "version": "0.3.1",
1191 …+ "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
1192 …+ "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
1193 …+ },
10961194 … "is-extglob": {
10971195 … "version": "2.1.1",
10981196 … "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
10991197 … "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
@@ -1211,8 +1309,22 @@
12111309 … "version": "4.0.0",
12121310 … "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
12131311 … "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
12141312 … },
1313 …+ "js-yaml": {
1314 …+ "version": "3.14.1",
1315 …+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
1316 …+ "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
1317 …+ "requires": {
1318 …+ "argparse": "^1.0.7",
1319 …+ "esprima": "^4.0.0"
1320 …+ }
1321 …+ },
1322 …+ "json-parse-better-errors": {
1323 …+ "version": "1.0.2",
1324 …+ "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
1325 …+ "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
1326 …+ },
12151327 … "json5": {
12161328 … "version": "1.0.1",
12171329 … "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
12181330 … "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
@@ -1264,8 +1376,62 @@
12641376 … "requires": {
12651377 … "js-tokens": "^3.0.0 || ^4.0.0"
12661378 … }
12671379 … },
1380 …+ "lost": {
1381 …+ "version": "8.3.1",
1382 …+ "resolved": "https://registry.npmjs.org/lost/-/lost-8.3.1.tgz",
1383 …+ "integrity": "sha512-J+TgSVo9VVf4Y9lVGaI5DMN0BMqQTIabEJuEQGlK4vte+EZq9eDcvwGx9DfrkCUMqs0CvzAPE5dsnj18Zbjf6g==",
1384 …+ "requires": {
1385 …+ "object-assign": "^4.1.1",
1386 …+ "postcss": "7.0.14"
1387 …+ },
1388 …+ "dependencies": {
1389 …+ "chalk": {
1390 …+ "version": "2.4.2",
1391 …+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
1392 …+ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
1393 …+ "requires": {
1394 …+ "ansi-styles": "^3.2.1",
1395 …+ "escape-string-regexp": "^1.0.5",
1396 …+ "supports-color": "^5.3.0"
1397 …+ },
1398 …+ "dependencies": {
1399 …+ "supports-color": {
1400 …+ "version": "5.5.0",
1401 …+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
1402 …+ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
1403 …+ "requires": {
1404 …+ "has-flag": "^3.0.0"
1405 …+ }
1406 …+ }
1407 …+ }
1408 …+ },
1409 …+ "postcss": {
1410 …+ "version": "7.0.14",
1411 …+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
1412 …+ "integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
1413 …+ "requires": {
1414 …+ "chalk": "^2.4.2",
1415 …+ "source-map": "^0.6.1",
1416 …+ "supports-color": "^6.1.0"
1417 …+ }
1418 …+ },
1419 …+ "source-map": {
1420 …+ "version": "0.6.1",
1421 …+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
1422 …+ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
1423 …+ },
1424 …+ "supports-color": {
1425 …+ "version": "6.1.0",
1426 …+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
1427 …+ "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
1428 …+ "requires": {
1429 …+ "has-flag": "^3.0.0"
1430 …+ }
1431 …+ }
1432 …+ }
1433 …+ },
12681434 … "make-dir": {
12691435 … "version": "3.1.0",
12701436 … "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
12711437 … "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
@@ -1692,8 +1858,17 @@
16921858 … "pbkdf2": "^3.0.3",
16931859 … "safe-buffer": "^5.1.1"
16941860 … }
16951861 … },
1862 …+ "parse-json": {
1863 …+ "version": "4.0.0",
1864 …+ "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
1865 …+ "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
1866 …+ "requires": {
1867 …+ "error-ex": "^1.3.1",
1868 …+ "json-parse-better-errors": "^1.0.1"
1869 …+ }
1870 …+ },
16961871 … "path-browserify": {
16971872 … "version": "1.0.1",
16981873 … "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
16991874 … "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
@@ -1758,8 +1933,36 @@
17581933 … "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
17591934 … }
17601935 … }
17611936 … },
1937 …+ "postcss-load-config": {
1938 …+ "version": "2.1.2",
1939 …+ "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
1940 …+ "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
1941 …+ "requires": {
1942 …+ "cosmiconfig": "^5.0.0",
1943 …+ "import-cwd": "^2.0.0"
1944 …+ }
1945 …+ },
1946 …+ "postcss-nested": {
1947 …+ "version": "5.0.5",
1948 …+ "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
1949 …+ "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
1950 …+ "requires": {
1951 …+ "postcss-selector-parser": "^6.0.4"
1952 …+ }
1953 …+ },
1954 …+ "postcss-selector-parser": {
1955 …+ "version": "6.0.4",
1956 …+ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
1957 …+ "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
1958 …+ "requires": {
1959 …+ "cssesc": "^3.0.0",
1960 …+ "indexes-of": "^1.0.1",
1961 …+ "uniq": "^1.0.1",
1962 …+ "util-deprecate": "^1.0.2"
1963 …+ }
1964 …+ },
17621965 … "process": {
17631966 … "version": "0.11.10",
17641967 … "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
17651968 … "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
@@ -1908,8 +2111,13 @@
19082111 … "version": "0.13.7",
19092112 … "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
19102113 … "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
19112114 … },
2115 …+ "resolve-from": {
2116 …+ "version": "3.0.0",
2117 …+ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
2118 …+ "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
2119 …+ },
19122120 … "ripemd160": {
19132121 … "version": "2.0.2",
19142122 … "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
19152123 … "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
@@ -1973,8 +2181,13 @@
19732181 … "requires": {
19742182 … "whatwg-url": "^7.0.0"
19752183 … }
19762184 … },
2185 …+ "sprintf-js": {
2186 …+ "version": "1.0.3",
2187 …+ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
2188 …+ "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
2189 …+ },
19772190 … "stacktrace-parser": {
19782191 … "version": "0.1.10",
19792192 … "resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz",
19802193 … "integrity": "sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==",
@@ -2075,8 +2288,16 @@
20752288 … "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
20762289 … }
20772290 … }
20782291 … },
2292 …+ "styled-jsx-plugin-postcss": {
2293 …+ "version": "4.0.1",
2294 …+ "resolved": "https://registry.npmjs.org/styled-jsx-plugin-postcss/-/styled-jsx-plugin-postcss-4.0.1.tgz",
2295 …+ "integrity": "sha512-Qy3OnewWZYykT0ESWRqqC7KhYSghXpel+cnY3/MOnmatEwvJl1+RB5YwJRjqhcODDoY/D+dKH97PZFuF3/rCBg==",
2296 …+ "requires": {
2297 …+ "postcss-load-config": "^2.1.2"
2298 …+ }
2299 …+ },
20792300 … "stylis": {
20802301 … "version": "3.5.4",
20812302 … "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
20822303 … "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
@@ -2164,8 +2385,13 @@
21642385 … "has-symbols": "^1.0.2",
21652386 … "which-boxed-primitive": "^1.0.2"
21662387 … }
21672388 … },
2389 …+ "uniq": {
2390 …+ "version": "1.0.1",
2391 …+ "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
2392 …+ "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8="
2393 …+ },
21682394 … "unpipe": {
21692395 … "version": "1.0.0",
21702396 … "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
21712397 … "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
package.jsonView
@@ -17,10 +17,9 @@
1717 … "dependencies": {
1818 … "next": "^10.1.3",
1919 … "next-seo": "^4.24.0",
2020 … "react": "^17.0.2",
21- "react-dom": "^17.0.2",
22- "styled-jsx": "^3.4.4"
21 …+ "react-dom": "^17.0.2"
2322 … },
2423 … "devDependencies": {
2524 … "@types/node": "^14.14.37",
2625 … "@types/react": "^17.0.3",
pages/_app.tsxView
@@ -1,7 +1,13 @@
11 … import {Fragment} from 'react';
22 … import Head from 'next/head';
33 …
4 …+import '../styles/_app.css';
5 …+import '../styles/index.css';
6 …+
7 …+import '../styles/header.css';
8 …+import '../styles/contacts.css';
9 …+
410 … export default function MyApp({ Component, pageProps }) {
511 … const isDevelopment = process.env.NODE_ENV !== 'development';
612 …
713 … return (
@@ -16,19 +22,7 @@
1622 … <script async defer data-domain="romuloalves.dev" src="//analytics.romuloalves.dev/js/plausible.js"></script>
1723 … )}
1824 … </Head>
1925 … <Component {...pageProps} />
20- <style global jsx>{`
21- * {
22- margin: 0;
23- padding: 0;
24- }
25- body {
26- font-family: Verdana, sans-serif;
27- }
28- h3, p {
29- line-height: 1.6;
30- }
31- `}</style>
3226 … </Fragment>
3327 … );
3428 … }
pages/_document.tsxView
@@ -11,10 +11,9 @@
1111 …
1212 … render() {
1313 … return (
1414 … <Html lang="en">
15- <Head>
16- </Head>
15 …+ <Head />
1716 … <body>
1817 … <Main />
1918 … <NextScript />
2019 … </body>
pages/index.tsxView
@@ -18,12 +18,12 @@
1818 … title="Rômulo Alves"
1919 … description="Software Engineer working at CWI"
2020 … />
2121 … <Header showMenu={false} />
22- <main>
22 …+ <main className="index">
2323 … <h3>{props.slogan}</h3>
24- <section>
25- <div className="about" dangerouslySetInnerHTML={{__html: props.about}} />
24 …+ <section className="about">
25 …+ <div className="about-text" dangerouslySetInnerHTML={{__html: props.about}} />
2626 … <div className="picture-container">
2727 … <Image src="/picture.jpg"
2828 … alt="Picture of myself"
2929 … width={200}
@@ -32,60 +32,8 @@
3232 … </div>
3333 … </section>
3434 … <Contacts />
3535 … </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 global jsx>{`
84- .picture-container img {
85- border-radius: 50%;
86- }
87- `}</style>
8836 … </Fragment>
8937 … );
9038 … };
9139 …
styles/_app.cssView
@@ -1,0 +1,10 @@
1 …+* {
2 …+ margin: 0;
3 …+ padding: 0;
4 …+}
5 …+body {
6 …+ font-family: Verdana, sans-serif;
7 …+}
8 …+h3, p {
9 …+ line-height: 1.6;
10 …+}
styles/contacts.cssView
@@ -1,0 +1,16 @@
1 …+.contacts h4 {
2 …+ font-size: 20px;
3 …+}
4 …+.contacts div {
5 …+ margin: 10px 0 0 20px;
6 …+}
7 …+.contacts ul {
8 …+ list-style: none;
9 …+}
10 …+.contacts li {
11 …+ margin: 5px 0 0 15px;
12 …+}
13 …+.contacts code {
14 …+ background: #eee;
15 …+ overflow-wrap: break-word;
16 …+}
styles/header.cssView
@@ -1,0 +1,126 @@
1 …+.header,
2 …+.logo,
3 …+.ring,
4 …+.internal-ring,
5 …+.texts {
6 …+ display: flex;
7 …+ align-items: center;
8 …+ justify-content: center;
9 …+}
10 …+
11 …+.texts {
12 …+ align-items: baseline;
13 …+ flex-direction: column;
14 …+ margin-left: 45px;
15 …+}
16 …+
17 …+.header {
18 …+ color: #fff;
19 …+ height: 300px;
20 …+}
21 …+
22 …+.header,
23 …+.ring {
24 …+ background: rgb(110, 110, 110);
25 …+}
26 …+
27 …+.logo,
28 …+.internal-ring {
29 …+ background: #fff;
30 …+}
31 …+
32 …+.logo,
33 …+.ring,
34 …+.internal-ring {
35 …+ border-radius: 50%;
36 …+}
37 …+
38 …+.logo {
39 …+ height: 150px;
40 …+ margin-left: -14%;
41 …+ width: 150px;
42 …+}
43 …+
44 …+.ring {
45 …+ height: 140px;
46 …+ width: 140px;
47 …+}
48 …+.internal-ring {
49 …+ flex-direction: column;
50 …+ height: 130px;
51 …+ width: 130px;
52 …+}
53 …+
54 …+.header span {
55 …+ color: rgb(110, 110, 110);
56 …+ font-size: 40px;
57 …+}
58 …+
59 …+.header hr {
60 …+ background: rgb(110, 110, 110);
61 …+ border: none;
62 …+ border-radius: 6px;
63 …+ height: 6px;
64 …+ margin: 10px;
65 …+ padding: 0;
66 …+ width: 26px;
67 …+}
68 …+
69 …+.header h1,
70 …+.header h2 {
71 …+ margin: 0;
72 …+}
73 …+
74 …+.header h1 {
75 …+ font-size: 52px;
76 …+}
77 …+
78 …+.header h2 {
79 …+ font-size: 20px;
80 …+ margin-left: 3px;
81 …+ text-transform: uppercase;
82 …+}
83 …+
84 …+.nav ul {
85 …+ background: rgb(110, 110, 110);
86 …+ display: flex;
87 …+ justify-content: center;
88 …+ list-style: none;
89 …+ margin: 0;
90 …+ padding: 0;
91 …+}
92 …+
93 …+.nav a {
94 …+ color: #fff;
95 …+ display: inline-block;
96 …+ letter-spacing: 1px;
97 …+ min-width: 100px;
98 …+ padding: 10px;
99 …+ text-align: center;
100 …+ transition: background .2s, color .2s;
101 …+}
102 …+
103 …+.nav a:hover {
104 …+ background: #fff;
105 …+ color: rgb(110, 110, 110);
106 …+}
107 …+
108 …+@media (max-width: 740px) {
109 …+ .header {
110 …+ flex-direction: column;
111 …+ }
112 …+ .logo {
113 …+ margin-left: 0;
114 …+ }
115 …+ .texts {
116 …+ margin-left: 0;
117 …+ margin-top: 20px;
118 …+ }
119 …+
120 …+ .header h1 {
121 …+ font-size: 38px;
122 …+ }
123 …+ .header h2 {
124 …+ font-size: 18px;
125 …+ }
126 …+}
styles/index.cssView
@@ -1,0 +1,48 @@
1 …+main.index {
2 …+ font-size: 16px;
3 …+ margin: 25px auto;
4 …+ max-width: 1024px;
5 …+}
6 …+.index h3 {
7 …+ font-weight: normal;
8 …+ text-align: center;
9 …+}
10 …+
11 …+.index .about {
12 …+ align-items: center;
13 …+ display: flex;
14 …+ justify-content: space-between;
15 …+ margin: 50px 0;
16 …+}
17 …+
18 …+.index p {
19 …+ margin: 15px 0;
20 …+}
21 …+
22 …+.picture-container img {
23 …+ border-radius: 50%;
24 …+}
25 …+
26 …+@media (max-width: 1024px) {
27 …+ main.index {
28 …+ margin: 25px 25px;
29 …+ }
30 …+}
31 …+
32 …+@media (min-width: 740px) {
33 …+ .about-text {
34 …+ width: 70%;
35 …+ }
36 …+}
37 …+
38 …+@media (max-width: 740px) {
39 …+ .index h3 {
40 …+ text-align: justify;
41 …+ }
42 …+ .index .about {
43 …+ flex-direction: column-reverse;
44 …+ }
45 …+ .picture-container {
46 …+ margin: 0 0 25px;
47 …+ }
48 …+}

Built with git-ssb-web