added markdown, organized templates, fixed email overflow issue in pikachu

This commit is contained in:
Amruth Pillai
2020-03-26 23:27:04 +05:30
parent 178d12fae9
commit 333e94cb32
12 changed files with 733 additions and 320 deletions

296
package-lock.json generated
View File

@ -3100,6 +3100,11 @@
"resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
"integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
},
"bail": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
"integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ=="
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@ -3588,6 +3593,21 @@
"supports-color": "^5.3.0"
}
},
"character-entities": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
"integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
},
"character-entities-legacy": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
"integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
},
"character-reference-invalid": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
"integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
},
"chardet": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@ -3808,6 +3828,11 @@
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
"collapse-white-space": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
"integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ=="
},
"collection-visit": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@ -6699,6 +6724,53 @@
}
}
},
"html-to-react": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.4.2.tgz",
"integrity": "sha512-TdTfxd95sRCo6QL8admCkE7mvNNrXtGoVr1dyS+7uvc8XCqAymnf/6ckclvnVbQNUo2Nh21VPwtfEHd0khiV7g==",
"requires": {
"domhandler": "^3.0",
"htmlparser2": "^4.0",
"lodash.camelcase": "^4.3.0",
"ramda": "^0.26"
},
"dependencies": {
"domelementtype": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
"integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
},
"domhandler": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
"integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
"requires": {
"domelementtype": "^2.0.1"
}
},
"domutils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.0.0.tgz",
"integrity": "sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==",
"requires": {
"dom-serializer": "^0.2.1",
"domelementtype": "^2.0.1",
"domhandler": "^3.0.0"
}
},
"htmlparser2": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
"integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^3.0.0",
"domutils": "^2.0.0",
"entities": "^2.0.0"
}
}
}
},
"html-webpack-plugin": {
"version": "4.0.0-beta.11",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz",
@ -7064,6 +7136,20 @@
"kind-of": "^3.0.2"
}
},
"is-alphabetical": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
"integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
},
"is-alphanumerical": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
"integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
"requires": {
"is-alphabetical": "^1.0.0",
"is-decimal": "^1.0.0"
}
},
"is-arguments": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
@ -7126,6 +7212,11 @@
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
"integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
},
"is-decimal": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
"integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
},
"is-descriptor": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@ -7181,6 +7272,11 @@
"is-extglob": "^2.1.1"
}
},
"is-hexadecimal": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
"integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
},
"is-in-browser": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
@ -7292,11 +7388,21 @@
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
},
"is-whitespace-character": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
"integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w=="
},
"is-windows": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
"integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
},
"is-word-character": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
"integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA=="
},
"is-wsl": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
@ -8781,6 +8887,11 @@
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
},
"lodash.camelcase": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -8919,6 +9030,11 @@
"object-visit": "^1.0.0"
}
},
"markdown-escapes": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
"integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
},
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@ -8929,6 +9045,14 @@
"safe-buffer": "^5.1.2"
}
},
"mdast-add-list-metadata": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz",
"integrity": "sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==",
"requires": {
"unist-util-visit-parents": "1.1.2"
}
},
"mdn-data": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@ -9900,6 +10024,19 @@
"safe-buffer": "^5.1.1"
}
},
"parse-entities": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
"integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
"requires": {
"character-entities": "^1.0.0",
"character-entities-legacy": "^1.0.0",
"character-reference-invalid": "^1.0.0",
"is-alphanumerical": "^1.0.0",
"is-decimal": "^1.0.0",
"is-hexadecimal": "^1.0.0"
}
},
"parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@ -11604,6 +11741,11 @@
"performance-now": "^2.1.0"
}
},
"ramda": {
"version": "0.26.1",
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
"integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ=="
},
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -11876,6 +12018,21 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-markdown": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.3.1.tgz",
"integrity": "sha512-HQlWFTbDxTtNY6bjgp3C3uv1h2xcjCSi1zAEzfBW9OwJJvENSYiLXWNXN5hHLsoqai7RnZiiHzcnWdXk2Splzw==",
"requires": {
"html-to-react": "^1.3.4",
"mdast-add-list-metadata": "1.0.1",
"prop-types": "^15.7.2",
"react-is": "^16.8.6",
"remark-parse": "^5.0.0",
"unified": "^6.1.5",
"unist-util-visit": "^1.3.0",
"xtend": "^4.0.1"
}
},
"react-scripts": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@ -12155,6 +12312,28 @@
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
"integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
},
"remark-parse": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz",
"integrity": "sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==",
"requires": {
"collapse-white-space": "^1.0.2",
"is-alphabetical": "^1.0.0",
"is-decimal": "^1.0.0",
"is-whitespace-character": "^1.0.0",
"is-word-character": "^1.0.0",
"markdown-escapes": "^1.0.0",
"parse-entities": "^1.1.0",
"repeat-string": "^1.5.4",
"state-toggle": "^1.0.0",
"trim": "0.0.1",
"trim-trailing-lines": "^1.0.0",
"unherit": "^1.0.4",
"unist-util-remove-position": "^1.0.0",
"vfile-location": "^2.0.0",
"xtend": "^4.0.1"
}
},
"remove-trailing-separator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@ -12222,6 +12401,11 @@
"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
"integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
},
"replace-ext": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
"integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs="
},
"request": {
"version": "2.88.2",
"resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@ -13180,6 +13364,11 @@
"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
"integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
},
"state-toggle": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
"integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ=="
},
"static-extend": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@ -13919,6 +14108,21 @@
"punycode": "^2.1.0"
}
},
"trim": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
"integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
},
"trim-trailing-lines": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz",
"integrity": "sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA=="
},
"trough": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
"integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
},
"ts-pnp": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
@ -13987,6 +14191,15 @@
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
"integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
},
"unherit": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
"integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
"requires": {
"inherits": "^2.0.0",
"xtend": "^4.0.0"
}
},
"unicode-canonical-property-names-ecmascript": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@ -14011,6 +14224,19 @@
"resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
"integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
},
"unified": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz",
"integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
"requires": {
"bail": "^1.0.0",
"extend": "^3.0.0",
"is-plain-obj": "^1.1.0",
"trough": "^1.0.0",
"vfile": "^2.0.0",
"x-is-string": "^0.1.0"
}
},
"union-value": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@ -14048,6 +14274,47 @@
"imurmurhash": "^0.1.4"
}
},
"unist-util-is": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
"integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
},
"unist-util-remove-position": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
"integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
"requires": {
"unist-util-visit": "^1.1.0"
}
},
"unist-util-stringify-position": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
"integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ=="
},
"unist-util-visit": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
"integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
"requires": {
"unist-util-visit-parents": "^2.0.0"
},
"dependencies": {
"unist-util-visit-parents": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
"integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
"requires": {
"unist-util-is": "^3.0.0"
}
}
}
},
"unist-util-visit-parents": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz",
"integrity": "sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q=="
},
"universalify": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@ -14237,6 +14504,30 @@
"extsprintf": "^1.2.0"
}
},
"vfile": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
"integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
"requires": {
"is-buffer": "^1.1.4",
"replace-ext": "1.0.0",
"unist-util-stringify-position": "^1.0.0",
"vfile-message": "^1.0.0"
}
},
"vfile-location": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
"integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA=="
},
"vfile-message": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
"integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
"requires": {
"unist-util-stringify-position": "^1.1.1"
}
},
"vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@ -16119,6 +16410,11 @@
"async-limiter": "~1.0.0"
}
},
"x-is-string": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
"integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI="
},
"xml-name-validator": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",

View File

@ -10,6 +10,7 @@
"lodash": "^4.17.15",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-markdown": "^4.3.1",
"react-scripts": "3.4.1",
"react-toastify": "^5.5.0",
"uuid": "^7.0.2"

View File

@ -5,6 +5,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import TextArea from '../../../shared/TextArea';
const AwardsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
id: uuidv4(),
title: '',
subtitle: '',
description: '',
});
const onChange = (key, value) => setItem(set({ ...item }, key, value));
@ -72,6 +74,7 @@ const AddItem = ({ dispatch }) => {
id: uuidv4(),
title: '',
subtitle: '',
description: '',
});
setOpen(false);
@ -104,6 +107,13 @@ const AddItem = ({ dispatch }) => {
onChange={v => onChange('subtitle', v)}
/>
<TextArea
label="Description"
className="mb-6"
value={item.description}
onChange={v => onChange('description', v)}
/>
<button
type="button"
onClick={addItem}
@ -177,6 +187,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
onChange={v => onChange(`${identifier}.subtitle`, v)}
/>
<TextArea
label="Description"
className="mb-6"
value={item.description}
onChange={v => onChange(`${identifier}.description`, v)}
/>
<div className="flex justify-between">
<button
type="button"

View File

@ -5,6 +5,7 @@ import set from 'lodash/set';
import TextField from '../../../shared/TextField';
import AppContext from '../../../context/AppContext';
import Checkbox from '../../../shared/Checkbox';
import TextArea from '../../../shared/TextArea';
const CertificationsTab = ({ data, onChange }) => {
const context = useContext(AppContext);
@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
id: uuidv4(),
title: '',
subtitle: '',
description: '',
});
const onChange = (key, value) => setItem(set({ ...item }, key, value));
@ -72,6 +74,7 @@ const AddItem = ({ dispatch }) => {
id: uuidv4(),
title: '',
subtitle: '',
description: '',
});
setOpen(false);
@ -104,6 +107,13 @@ const AddItem = ({ dispatch }) => {
onChange={v => onChange('subtitle', v)}
/>
<TextArea
label="Description"
className="mb-6"
value={item.description}
onChange={v => onChange('description', v)}
/>
<button
type="button"
onClick={addItem}
@ -177,6 +187,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
onChange={v => onChange(`${identifier}.subtitle`, v)}
/>
<TextArea
label="Description"
className="mb-6"
value={item.description}
onChange={v => onChange(`${identifier}.description`, v)}
/>
<div className="flex justify-between">
<button
type="button"

View File

@ -26,7 +26,7 @@ const ObjectiveTab = ({ data, onChange }) => {
<TextArea
rows="15"
className="mb-6"
className="mb-4"
label="Objective"
placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
value={data.objective.body}

View File

@ -18,6 +18,11 @@ body {
font-family: 'Montserrat', sans-serif;
}
li {
list-style: disc;
list-style-position: inside !important;
}
@media screen {
input:checked + i.material-icons {
display: block;

View File

@ -0,0 +1,22 @@
import React from 'react';
const MarkdownHelpText = ({ className }) => {
return (
<div className={className}>
<p className="text-gray-800 text-xs">
You can use{' '}
<a
className="text-blue-600 hover:underline"
target="_blank"
rel="noopener noreferrer"
href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
>
GitHub Flavored Markdown
</a>{' '}
to style this section of text.
</p>
</div>
);
};
export default MarkdownHelpText;

View File

@ -28,13 +28,13 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
{tabs.map(tab =>
currentTab === tab ? (
<li key={tab} className="mx-1">
<li key={tab} className="mx-1 list-none">
<div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
{tab}
</div>
</li>
) : (
<li key={tab} className="mx-1">
<li key={tab} className="mx-1 list-none">
<div
className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
onClick={() => setCurrentTab(tab)}

View File

@ -1,4 +1,5 @@
import React from 'react';
import MarkdownHelpText from './MarkdownHelpText';
const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 }) => (
<div className={`w-full flex flex-col ${className}`}>
@ -12,6 +13,8 @@ const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 })
onChange={e => onChange(e.target.value)}
placeholder={placeholder}
/>
<MarkdownHelpText className="mt-2" />
</div>
);

View File

@ -1,4 +1,6 @@
import React, { useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import AppContext from '../../context/AppContext';
import { hexToRgb } from '../../utils';
@ -9,6 +11,25 @@ const Gengar = () => {
const { r, g, b } = hexToRgb(theme.colors.accent);
const Photo = () =>
data.profile.photo !== '' && (
<img
className="w-24 h-24 rounded-full mr-4 object-cover border-4"
style={{
borderColor: theme.colors.background,
}}
src={data.profile.photo}
alt="Resume Photograph"
/>
);
const FullName = () => (
<div>
<h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
<h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
</div>
);
const ContactItem = ({ icon, value }) =>
value && (
<div className="flex items-center mb-3">
@ -31,12 +52,28 @@ const Gengar = () => {
<h6 className="font-bold text-xs uppercase tracking-wide mb-2">{title}</h6>
);
const Objective = () =>
data.objective.enable && (
<div className="h-full flex flex-col justify-center items-start">
<Heading title={data.objective.heading} />
<ReactMarkdown className="text-sm" source={data.objective.body} />
</div>
);
const SkillItem = x => (
<li key={x} className="text-sm py-1">
{x}
</li>
);
const Skills = () =>
data.skills.enable && (
<div className="mb-8">
<Heading title={data.skills.heading} />
<ul>{data.skills.items.map(SkillItem)}</ul>
</div>
);
const EducationItem = x => (
<div key={x.name} className="mb-3">
<div className="flex justify-between items-center">
@ -59,14 +96,45 @@ const Gengar = () => {
</span>
</div>
</div>
<p className="mt-2 text-sm">{x.description}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const AwardCertificationItem = x => (
const Education = () =>
data.education.enable && (
<div className="mb-8">
<Heading title={data.education.heading} />
{data.education.items.map(EducationItem)}
</div>
);
const CertificationItem = x => (
<div key={x.title} className="mb-3">
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const Certifications = () => (
<div className="mb-8">
<Heading title={data.certifications.heading} />
{data.certifications.items.map(CertificationItem)}
</div>
);
const AwardItem = x => (
<div key={x.title} className="mb-3">
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const Awards = () => (
<div className="mb-8">
<Heading title={data.awards.heading} />
{data.awards.items.map(AwardItem)}
</div>
);
@ -81,7 +149,32 @@ const Gengar = () => {
({x.start} - {x.end})
</span>
</div>
<p className="mt-2 text-sm">{x.description}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const Work = () =>
data.work.enable && (
<div className="mb-8">
<Heading title={data.work.heading} />
{data.work.items.map(WorkItem)}
</div>
);
const ExtraItem = x => (
<tr key={x.key}>
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
<td className="border px-4 py-2 text-sm">{x.value}</td>
</tr>
);
const Extras = () =>
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<table className="table-auto">
<tbody>{data.extras.items.map(ExtraItem)}</tbody>
</table>
</div>
);
@ -99,20 +192,8 @@ const Gengar = () => {
style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
>
<div className="flex items-center">
{data.profile.photo !== '' && (
<img
className="w-24 h-24 rounded-full mr-4 object-cover border-4"
style={{
borderColor: theme.colors.background,
}}
src={data.profile.photo}
alt="Resume Photograph"
/>
)}
<div>
<h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
<h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
</div>
<Photo />
<FullName />
</div>
<hr className="w-1/4 my-5 opacity-50" />
@ -127,70 +208,23 @@ const Gengar = () => {
className="col-span-3 px-6 py-8"
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
>
{data.objective.enable && (
<div className="h-full flex flex-col justify-center items-start">
<Heading title={data.objective.heading} />
<p className="text-sm whitespace-pre-wrap">{data.objective.body}</p>
</div>
)}
<Objective />
</div>
<div
className="col-span-2 px-6 py-8"
style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
>
{data.skills.enable && (
<div className="mb-8">
<Heading title={data.skills.heading} />
<ul className="list-disc ml-5">{data.skills.items.map(SkillItem)}</ul>
</div>
)}
<Skills />
<Education />
{data.education.enable && (
<div className="mb-8">
<Heading title={data.education.heading} />
{data.education.items.map(EducationItem)}
</div>
)}
{data.certifications.enable && (
<div className="mb-8">
<Heading title={data.certifications.heading} />
{data.certifications.items.map(AwardCertificationItem)}
</div>
)}
<Certifications />
</div>
<div className="col-span-3 px-6 py-8">
{data.work.enable && (
<div className="mb-8">
<Heading title={data.work.heading} />
{data.work.items.map(WorkItem)}
</div>
)}
{data.awards.enable && (
<div className="mb-8">
<Heading title={data.awards.heading} />
{data.awards.items.map(AwardCertificationItem)}
</div>
)}
{data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<table className="table-auto">
<tbody>
{data.extras.items.map(x => (
<tr key={x.key}>
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
<td className="border px-4 py-2 text-sm">{x.value}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
<Work />
<Awards />
<Extras />
</div>
</div>
</div>

View File

@ -1,4 +1,6 @@
import React, { useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import AppContext from '../../context/AppContext';
const Onyx = () => {
@ -6,24 +8,17 @@ const Onyx = () => {
const { state } = context;
const { data, theme } = state;
return (
<div
style={{
fontFamily: theme.font.family,
backgroundColor: theme.colors.background,
color: theme.colors.primary,
}}
>
<div className="grid grid-cols-4 items-center">
<div className="col-span-3 flex items-center">
{data.profile.photo && (
const Photo = () =>
data.profile.photo && (
<img
className="rounded object-cover mr-4"
src={data.profile.photo}
alt="Resume Photograph"
style={{ width: '120px', height: '120px' }}
/>
)}
);
const Profile = () => (
<div>
<h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
{data.profile.firstName} {data.profile.lastName}
@ -36,148 +31,114 @@ const Onyx = () => {
<span>{data.profile.address.line3}</span>
</div>
</div>
</div>
<div className="col-span-1 text-xs">
{data.profile.phone && (
<div className="flex items-center my-3">
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
phone
</span>
<span className="font-medium">{data.profile.phone}</span>
</div>
)}
{data.profile.website && (
<div className="flex items-center my-3">
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
language
</span>
<span className="font-medium">{data.profile.website}</span>
</div>
)}
{data.profile.email && (
<div className="flex items-center my-3">
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
alternate_email
</span>
<span className="font-medium">{data.profile.email}</span>
</div>
)}
</div>
</div>
);
<hr className="my-6" />
const ContactItem = ({ icon, value }) =>
value && (
<div className="flex items-center my-3">
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
{icon}
</span>
<span className="font-medium">{value}</span>
</div>
);
{data.objective.enable && (
<div>
<h6
className="text-xs font-bold uppercase mt-6 mb-2"
style={{ color: theme.colors.accent }}
>
{data.objective.heading}
const Heading = ({ title }) => (
<h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
{title}
</h6>
<p className="text-sm">{data.objective.body}</p>
</div>
)}
);
{data.work.enable && (
const Objective = () =>
data.objective.enable && (
<div>
<h6
className="text-xs font-bold uppercase mt-6 mb-2"
style={{ color: theme.colors.accent }}
>
{data.work.heading}
</h6>
{data.work.items.map(exp => (
<div key={exp.title} className="mt-3">
<Heading title={data.objective.heading} />
<ReactMarkdown className="text-sm" source={data.objective.body} />
</div>
);
const WorkItem = x => (
<div key={x.title} className="mt-3">
<div className="flex justify-between">
<div>
<h6 className="font-semibold">{exp.title}</h6>
<p className="text-xs">{exp.role}</p>
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.role}</p>
</div>
<span className="text-xs font-medium">
({exp.start} - {exp.end})
({x.start} - {x.end})
</span>
</div>
<p className="mt-2 text-sm">{exp.description}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
))}
</div>
)}
);
{data.education.enable && (
const Work = () =>
data.work.enable && (
<div>
<h6
className="text-xs font-bold uppercase mt-6 mb-2"
style={{ color: theme.colors.accent }}
>
{data.education.heading}
</h6>
{data.education.items.map(edu => (
<div key={edu.name} className="mt-3">
<Heading title={data.work.heading} />
{data.work.items.map(WorkItem)}
</div>
);
const EducationItem = x => (
<div key={x.name} className="mt-3">
<div className="flex justify-between">
<div>
<h6 className="font-semibold">{edu.name}</h6>
<p className="text-xs">{edu.major}</p>
<h6 className="font-semibold">{x.name}</h6>
<p className="text-xs">{x.major}</p>
</div>
<div className="flex flex-col items-end">
<span className="text-sm font-bold">{edu.grade}</span>
<span className="text-sm font-bold">{x.grade}</span>
<span className="text-xs font-medium">
({edu.start} - {edu.end})
({x.start} - {x.end})
</span>
</div>
</div>
<p className="mt-2 text-sm">{edu.description}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
))}
</div>
)}
);
<div className="grid grid-cols-2">
{data.awards.enable && (
const Education = () =>
data.education.enable && (
<div>
<h6
className="text-xs font-bold uppercase mt-6 mb-2"
style={{ color: theme.colors.accent }}
>
{data.awards.heading}
</h6>
{data.awards.items.map(x => (
<Heading title={data.education.heading} />
{data.education.items.map(EducationItem)}
</div>
);
const AwardItem = x => (
<div key={x.title} className="mt-3">
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
))}
</div>
)}
);
{data.certifications.enable && (
const Awards = () =>
data.awards.enable && (
<div>
<h6
className="text-xs font-bold uppercase mt-6 mb-2"
style={{ color: theme.colors.accent }}
>
{data.certifications.heading}
</h6>
{data.certifications.items.map(x => (
<Heading title={data.awards.heading} />
{data.awards.items.map(AwardItem)}
</div>
);
const CertificationItem = x => (
<div key={x.title} className="mt-3">
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
))}
</div>
)}
</div>
);
{data.skills.enable && (
const Certifications = () =>
data.certifications.enable && (
<div>
<h6
className="text-xs font-bold uppercase mt-6 mb-2"
style={{ color: theme.colors.accent }}
>
{data.skills.heading}
</h6>
<div className="mt-1 flex flex-wrap">
{data.skills.items.map(x => (
<Heading title={data.certifications.heading} />
{data.certifications.items.map(CertificationItem)}
</div>
);
const SkillItem = x => (
<span
key={x}
className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
@ -188,31 +149,67 @@ const Onyx = () => {
>
{x}
</span>
))}
</div>
</div>
)}
);
{data.extras.enable && (
const Skills = () =>
data.skills.enable && (
<div>
<h6
className="text-xs font-bold uppercase mt-6 mb-2"
style={{ color: theme.colors.accent }}
>
{data.extras.heading}
</h6>
<table className="w-2/3 table-auto">
<tbody>
{data.extras.items.map(x => (
<Heading title={data.skills.heading} />
<div className="mt-1 flex flex-wrap">{data.skills.items.map(SkillItem)}</div>
</div>
);
const ExtraItem = x => (
<tr key={x.key}>
<td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
<td className="border px-4 py-2 text-sm">{x.value}</td>
</tr>
))}
</tbody>
);
const Extras = () =>
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<table className="w-2/3 table-auto">
<tbody>{data.extras.items.map(ExtraItem)}</tbody>
</table>
</div>
)}
);
return (
<div
style={{
fontFamily: theme.font.family,
backgroundColor: theme.colors.background,
color: theme.colors.primary,
}}
>
<div className="grid grid-cols-4 items-center">
<div className="col-span-3 flex items-center">
<Photo />
<Profile />
</div>
<div className="col-span-1 text-xs">
<ContactItem icon="phone" value={data.profile.phone} />
<ContactItem icon="language" value={data.profile.website} />
<ContactItem icon="alternate_email" value={data.profile.email} />
</div>
</div>
<hr className="my-6" />
<Objective />
<Work />
<Education />
<div className="grid grid-cols-2">
<Awards />
<Certifications />
</div>
<Skills />
<Extras />
</div>
);
};

View File

@ -1,4 +1,6 @@
import React, { useContext } from 'react';
import ReactMarkdown from 'react-markdown';
import AppContext from '../../context/AppContext';
const Pikachu = () => {
@ -6,7 +8,12 @@ const Pikachu = () => {
const { state } = context;
const { data, theme } = state;
const Photo = () => <img className="rounded-full object-cover" src={data.profile.photo} alt="" />;
const Photo = () =>
data.profile.photo !== '' && (
<div className="self-center col-span-3">
<img className="rounded-full object-cover" src={data.profile.photo} alt="" />
</div>
);
const Header = () => (
<div
@ -21,7 +28,7 @@ const Pikachu = () => {
<hr className="my-4 opacity-50" />
<div className="text-sm">{data.objective.body}</div>
<ReactMarkdown className="text-sm" source={data.objective.body} />
</div>
</div>
);
@ -32,11 +39,11 @@ const Pikachu = () => {
<span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
{icon}
</span>
<span className="font-medium">{value}</span>
<span className="font-medium break-all">{value}</span>
</div>
);
const SectionHeading = ({ title }) => (
const Heading = ({ title }) => (
<div
className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
@ -54,6 +61,13 @@ const Pikachu = () => {
</span>
);
const Skills = () => (
<div>
<Heading title={data.skills.heading} />
<div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
</div>
);
const ExtraItem = x => (
<div key={x.key} className="text-sm my-1">
<h6 className="text-xs font-bold">{x.key}</h6>
@ -61,6 +75,14 @@ const Pikachu = () => {
</div>
);
const Extras = () =>
data.extras.enable && (
<div>
<Heading title={data.extras.heading} />
<div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
</div>
);
const WorkItem = x => (
<div key={x.title} className="mb-3">
<div className="flex justify-between items-center">
@ -72,7 +94,15 @@ const Pikachu = () => {
({x.start} - {x.end})
</span>
</div>
<p className="mt-2 text-sm">{x.description}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const Work = () =>
data.work.enable && (
<div>
<Heading title={data.work.heading} />
<div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
</div>
);
@ -92,14 +122,47 @@ const Pikachu = () => {
</span>
</div>
</div>
<p className="mt-2 text-sm">{x.description}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const AwardCertificationItem = x => (
const Education = () =>
data.education.enable && (
<div>
<Heading title={data.education.heading} />
<div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
</div>
);
const AwardItem = x => (
<div key={x.title} className="mb-3">
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const Awards = () =>
data.awards.enable && (
<div>
<Heading title={data.awards.heading} />
<div className="flex flex-col mb-2">{data.awards.items.map(AwardItem)}</div>
</div>
);
const CertificationItem = x => (
<div key={x.title} className="mb-3">
<h6 className="font-semibold">{x.title}</h6>
<p className="text-xs">{x.subtitle}</p>
<ReactMarkdown className="mt-2 text-sm" source={x.description} />
</div>
);
const Certifications = () =>
data.certifications.enable && (
<div>
<Heading title={data.certifications.heading} />
<div className="flex flex-col mb-2">{data.certifications.items.map(CertificationItem)}</div>
</div>
);
@ -111,18 +174,14 @@ const Pikachu = () => {
color: theme.colors.primary,
}}
>
<div className="grid grid-cols-8 col-gap-6 row-gap-8">
{data.profile.photo !== '' && (
<div className="self-center col-span-2">
<div className="grid grid-cols-12 col-gap-6 row-gap-8">
<Photo />
</div>
)}
<div className={`${data.profile.photo !== '' ? 'col-span-6' : 'col-span-8'}`}>
<div className={`${data.profile.photo !== '' ? 'col-span-9' : 'col-span-12'}`}>
<Header />
</div>
<div className="col-span-2">
<div className="col-span-3 overflow-hidden">
<div className="text-sm mb-6">
<ContactItem icon="phone" value={data.profile.phone} />
<ContactItem icon="language" value={data.profile.website} />
@ -130,53 +189,15 @@ const Pikachu = () => {
<ContactItem icon="location_on" value={data.profile.address.line3} />
</div>
{data.skills.enable && (
<div>
<SectionHeading title={data.skills.heading} />
<div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
</div>
)}
{data.extras.enable && (
<div>
<SectionHeading title={data.extras.heading} />
<div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
</div>
)}
<Skills />
<Extras />
</div>
<div className="col-span-6">
{data.work.enable && (
<div>
<SectionHeading title={data.work.heading} />
<div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
</div>
)}
{data.education.enable && (
<div>
<SectionHeading title={data.education.heading} />
<div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
</div>
)}
{data.awards.enable && (
<div>
<SectionHeading title={data.awards.heading} />
<div className="flex flex-col mb-4">
{data.awards.items.map(AwardCertificationItem)}
</div>
</div>
)}
{data.certifications.enable && (
<div>
<SectionHeading title={data.certifications.heading} />
<div className="flex flex-col mb-4">
{data.certifications.items.map(AwardCertificationItem)}
</div>
</div>
)}
<div className="col-span-9">
<Work />
<Education />
<Awards />
<Certifications />
</div>
</div>
</div>