From 9263fd1a734f5423a6e74b473ed0c303309a0e49 Mon Sep 17 00:00:00 2001
From: Stefan Fejes <ns.fejes.stefan@gmail.com>
Date: Tue, 3 Sep 2019 09:58:14 +0200
Subject: [PATCH] add about section on initial page, style sorting

---
 package-lock.json       | 205 +++-------------------------------------
 src/docs/pages/about.js |   2 +-
 src/docs/pages/index.js |  62 +++++++-----
 3 files changed, 56 insertions(+), 213 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0f8dd8e76..11d99fd9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -353,16 +353,6 @@
         "@babel/plugin-syntax-optional-catch-binding": "^7.2.0"
       }
     },
-    "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.2.0.tgz",
-      "integrity": "sha512-ea3Q6edZC/55wEBVZAEz42v528VulyO0eir+7uky/sT4XRcdkWJcFi1aPtitTlwUzGnECWJNExWww1SStt+yWw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.2.0"
-      }
-    },
     "@babel/plugin-proposal-unicode-property-regex": {
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.4.tgz",
@@ -446,15 +436,6 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
-    "@babel/plugin-syntax-optional-chaining": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.2.0.tgz",
-      "integrity": "sha512-HtGCtvp5Uq/jH/WNUPkK6b7rufnCPLLlDAFN7cmACoIjaOOiXxUt3SswU5loHqrhtqTsa/WoLQ1OQ1AGuZqaWA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0"
-      }
-    },
     "@babel/plugin-transform-arrow-functions": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz",
@@ -901,16 +882,6 @@
         "semver": "^5.5.0"
       }
     },
-    "@babel/preset-flow": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.0.0.tgz",
-      "integrity": "sha512-bJOHrYOPqJZCkPVbG1Lot2r5OSsB+iUOaxiHdlOeB1yPWS6evswVHwvkDLZ54WTaTRIk89ds0iHmGZSnxlPejQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-transform-flow-strip-types": "^7.0.0"
-      }
-    },
     "@babel/preset-react": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.0.0.tgz",
@@ -3316,21 +3287,6 @@
         }
       }
     },
-    "babel-preset-gatsby-package": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/babel-preset-gatsby-package/-/babel-preset-gatsby-package-0.1.4.tgz",
-      "integrity": "sha512-OL7xqAQ9yCfnCcRWqwB4XUuFVGBcVJLFs/iCGupmsLqtyz+vtpFVMwCTfg/025zShPkZTTYI+S0ZJSv3eYrikA==",
-      "dev": true,
-      "requires": {
-        "@babel/plugin-proposal-class-properties": "^7.0.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.0.0",
-        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-        "@babel/plugin-transform-runtime": "^7.0.0",
-        "@babel/preset-env": "^7.0.0",
-        "@babel/preset-flow": "^7.0.0",
-        "@babel/preset-react": "^7.0.0"
-      }
-    },
     "babel-preset-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -4588,12 +4544,6 @@
       "integrity": "sha512-fpZ81yYfzentuieinmGnphk0pLkOTMm6MZdVqwd77ROvhko6iujLNGrHH5E7utq3ygWklwfmwuG+A7P+NpqT6w==",
       "dev": true
     },
-    "chain-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
-      "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==",
-      "dev": true
-    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4843,8 +4793,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
           "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "slice-ansi": {
           "version": "1.0.0",
@@ -5515,16 +5464,6 @@
         }
       }
     },
-    "cross-env": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
-      "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^6.0.5",
-        "is-windows": "^1.0.0"
-      }
-    },
     "cross-fetch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-2.2.2.tgz",
@@ -8141,8 +8080,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -8163,14 +8101,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -8185,20 +8121,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -8315,8 +8248,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -8328,7 +8260,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -8343,7 +8274,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -8351,14 +8281,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -8377,7 +8305,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -8458,8 +8385,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8471,7 +8397,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8557,8 +8482,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -8594,7 +8518,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8614,7 +8537,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -8658,14 +8580,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -9518,21 +9438,6 @@
         }
       }
     },
-    "gatsby-plugin-transition-link": {
-      "version": "1.12.4",
-      "resolved": "https://registry.npmjs.org/gatsby-plugin-transition-link/-/gatsby-plugin-transition-link-1.12.4.tgz",
-      "integrity": "sha512-+1j/knyO/7soWAokoWvNuta8EzEmBVgsPMQh+8QxHVmwMfhzh+o6AnvPITWgcjFShbb6sC91JO/LQze3T52jeQ==",
-      "dev": true,
-      "requires": {
-        "babel-preset-gatsby-package": "^0.1.2",
-        "color-convert": "^1.9.3",
-        "cross-env": "^5.2.0",
-        "json-bump": "^0.1.3",
-        "polyfill-array-includes": "^1.0.0",
-        "react-transition-group": "^2.5.0",
-        "requestanimationframe-timer": "^1.0.4"
-      }
-    },
     "gatsby-react-router-scroll": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/gatsby-react-router-scroll/-/gatsby-react-router-scroll-2.1.3.tgz",
@@ -10241,12 +10146,6 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
-    "gsap": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz",
-      "integrity": "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ==",
-      "dev": true
-    },
     "gud": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
@@ -11260,8 +11159,7 @@
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "cli-cursor": {
           "version": "2.1.0",
@@ -11284,8 +11182,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
           "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "mimic-fn": {
           "version": "1.2.0",
@@ -11342,7 +11239,6 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -13128,26 +13024,6 @@
       "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
       "dev": true
     },
-    "json-bump": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/json-bump/-/json-bump-0.1.3.tgz",
-      "integrity": "sha512-M8dmYwjHGHg+uvBQRj959sVKtd57pl5F0brla3e8h934pXIBknSpWh49j/AjmoCTcumQhT7Q6iKKuhHdUxD3fQ==",
-      "dev": true,
-      "requires": {
-        "jsonfile": "^3.0.1"
-      },
-      "dependencies": {
-        "jsonfile": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-3.0.1.tgz",
-          "integrity": "sha1-pezG9l9T9mLEQVx2daAzHQmS7GY=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.6"
-          }
-        }
-      }
-    },
     "json-loader": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/json-loader/-/json-loader-0.5.7.tgz",
@@ -13625,8 +13501,7 @@
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "cli-cursor": {
           "version": "2.1.0",
@@ -13697,7 +13572,6 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -15801,12 +15675,6 @@
         "ts-pnp": "^1.1.2"
       }
     },
-    "polyfill-array-includes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/polyfill-array-includes/-/polyfill-array-includes-1.0.0.tgz",
-      "integrity": "sha1-PdoHBHWFnpnWU6zwbsNiLMdvhDA=",
-      "dev": true
-    },
     "portfinder": {
       "version": "1.0.23",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.23.tgz",
@@ -16886,15 +16754,6 @@
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
       "dev": true
     },
-    "raf": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "dev": true,
-      "requires": {
-        "performance-now": "^2.1.0"
-      }
-    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -16979,18 +16838,6 @@
         "prop-types": "^15.5.8"
       }
     },
-    "react-css-transition-replace": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/react-css-transition-replace/-/react-css-transition-replace-3.0.3.tgz",
-      "integrity": "sha512-+EaY+UpHfIZuHF4IfNjQoJmL1zeewxF9P/y6q9hsAN1RTb3x+QRUTldmO4/24q2nGFYEkH+xHF5eAMEAVLYf9Q==",
-      "dev": true,
-      "requires": {
-        "chain-function": "^1.0.0",
-        "dom-helpers": "^3.3.1",
-        "prop-types": "^15.6.1",
-        "warning": "^3.0.0"
-      }
-    },
     "react-dev-utils": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-4.2.3.tgz",
@@ -17377,18 +17224,6 @@
         "shallowequal": "^1.0.1"
       }
     },
-    "react-transition-group": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
-      "dev": true,
-      "requires": {
-        "dom-helpers": "^3.4.0",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -17843,15 +17678,6 @@
         "tough-cookie": "^2.3.3"
       }
     },
-    "requestanimationframe-timer": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/requestanimationframe-timer/-/requestanimationframe-timer-1.0.4.tgz",
-      "integrity": "sha512-5ehtMkIS7RLI/UxjgAEZg6zGLoRdSSzfwjwowpBRImAr8Rbs2pdcS/4tmJ7CAtvYjtO/H+ui96AMkyefzUqUlQ==",
-      "dev": true,
-      "requires": {
-        "raf": "^3.4.0"
-      }
-    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -18409,7 +18235,6 @@
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
       "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
       "dev": true,
-      "optional": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/src/docs/pages/about.js b/src/docs/pages/about.js
index 445eb4fc2..45c9b329a 100644
--- a/src/docs/pages/about.js
+++ b/src/docs/pages/about.js
@@ -34,7 +34,7 @@ const AboutPage = ({ isDarkMode }) => (
       </SimpleCard>
       <SimpleCard title='Our story'>
         <p style={{ textAlign: 'justify' }}>
-          The <strong>30 seconds</strong> movement started back in December, 2017, with the release of <a href='https://github.com/30-seconds/30-seconds-of-code' target='_blank' rel='noopener noreferrer'>30 seconds of code</a> by <a href='https://github.com/Chalarangelo' target='_blank' rel='noopener noreferrer'>Angelos Chalaris</a>. Since then, hundreds of developers have contributed snippets to over 6 repositories, creating a thriving community of people willing to help each other write better code. 
+          The <strong>30 seconds</strong> movement started back in December, 2017, with the release of <a href='https://github.com/30-seconds/30-seconds-of-code' target='_blank' rel='noopener noreferrer'>30 seconds of code</a> by <a href='https://github.com/Chalarangelo' target='_blank' rel='noopener noreferrer'>Angelos Chalaris</a>. Since then, hundreds of developers have contributed snippets to over 6 repositories, creating a thriving community of people willing to help each other write better code.
         </p>
         <p style={{ textAlign: 'justify' }}>
           In late 2018, the <a href='https://github.com/30-seconds'>30 seconds organization</a> was formed on GitHub, in order to expand upon existing projects and ensure that they will remain high-quality resources in the future.
diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js
index 6114decdc..4c291c1ff 100644
--- a/src/docs/pages/index.js
+++ b/src/docs/pages/index.js
@@ -1,14 +1,15 @@
-import React from 'react';
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import { connect } from 'react-redux';
-import { pushNewPage, pushNewQuery } from '../state/app';
-
-import Shell from '../components/Shell';
-import Meta from '../components/Meta';
-import Search from '../components/Search';
-import SnippetCard from '../components/SnippetCard';
+import React from 'react';
 
 import { getRawCodeBlocks as getCodeBlocks } from '../util';
+import { pushNewPage, pushNewQuery } from '../state/app';
+import SnippetCard from '../components/SnippetCard';
+import SimpleCard from '../components/SimpleCard';
+import Search from '../components/Search';
+import Shell from '../components/Shell';
+import Meta from '../components/Meta';
+
 
 // ===================================================
 // Home page (splash and search)
@@ -78,21 +79,38 @@ const IndexPage = props => {
             <strong>{searchQuery}</strong>.
           </p>
         ) : (
-          <>
-            <p className='light-sub'>
-              Click on a snippet's name to view its code.
+              <>
+                <p className='light-sub'>
+                  Click on a snippet's name to view its code.
             </p>
-            <h2 className='page-sub-title'>Search results</h2>
-            {searchResults.map(snippet => (
-              <SnippetCard
-                short
-                key={`snippet_${snippet.id}`}
-                snippetData={snippet}
-                isDarkMode={props.isDarkMode}
-              />
-            ))}
-          </>
-        )}
+                <h2 className='page-sub-title'>Search results</h2>
+                {searchResults.map(snippet => (
+                  <SnippetCard
+                    short
+                    key={`snippet_${snippet.id}`}
+                    snippetData={snippet}
+                    isDarkMode={props.isDarkMode}
+                  />
+                ))}
+              </>
+            )}
+        <SimpleCard title='About us'>
+          <p style={{ textAlign: 'justify' }}><strong>30 seconds</strong> provides high-quality learning resources for developers of all skill levels in the form of snippet collections in various programming languages since its inception in 2017. Today, <strong>30 seconds</strong> consists of a community of over 250 contributors and  more than 10 maintainers, dedicated to creating the best short-form learning resources for software developers. Our goal is to make software development more accessible and help the open-source community grow by helping people learn to code for free.<br /><br /><Link to='/about'>Read more...</Link></p>
+        </SimpleCard>
+        <SimpleCard title='Our other projects'>
+          <ul>
+            {
+              [
+                { name: '30 seconds of Code', url: 'https://30secondsofcode.org/' },
+                { name: '30 seconds of CSS', url: 'https://css.30secondsofcode.org/' },
+                { name: '30 seconds of Interviews', url: 'https://30secondsofinterviews.org/' },
+                { name: '30 seconds of Knowledge', url: 'https://30secondsofknowledge.org/' },
+                { name: '30 seconds of React', url: 'https://react.30secondsofcode.org/' },
+                { name: '30 seconds of PHP', url: 'https://php.30secondsofcode.org/' },
+              ].map(v => (<li><a href={v.url} key={`link_${v.name}`} target='_blank' rel='noopener noreferrer'>{v.name}</a></li>))
+            }
+          </ul>
+        </SimpleCard>
       </Shell>
     </>
   );