Made an epic showcase website and API!

website/src/components/HomepageFeatures.js

@@ -0,0 +1,72 @@
+import React from "react"
+import clsx from "clsx"
+import styles from "./HomepageFeatures.module.css"
+
+const FeatureList = [
+	{
+		title: "100 Projects with Python",
+		Svg: require("../../static/img/undraw_projects.svg").default,
+		link: "/docs/welcome",
+		description: (
+			<>
+				100 Python projects involving GUIs, websites, web apps, data
+				science, machine learning, games, modern frameworks, and more.
+			</>
+		),
+	},
+	{
+		title: "Website Built with Docusaurus",
+		Svg: require("../../static/img/undraw_docusaurus_react.svg").default,
+		link: "https://docusaurus.io/",
+		description: (
+			<>
+				An optimized showcase website built with Docusaurus, providing a
+				React framework with easy-to-use Markdown/MDX documentation and
+				website customizability.
+			</>
+		),
+	},
+	{
+		title: "Instant README Collection with FastAPI",
+		Svg: require("../../static/img/undraw_fast.svg").default,
+		link: "https://fastapi.tiangolo.com/",
+		description: (
+			<>
+				An optimized FastAPI framework running on a Uvicorn ASGI server
+				continuously deployed with all project READMEs for website
+				display and with READMEs scraped from their project folders on
+				GitHub.
+			</>
+		),
+	},
+]
+
+function Feature({ Svg, title, description, link }) {
+	return (
+		<div className={clsx("col col--4")}>
+			<a href={link}>
+				<div className="text--center">
+					<Svg className={styles.featureSvg} alt={title} />
+				</div>
+			</a>
+			<div className="text--center padding-horiz--md">
+				<h3>{title}</h3>
+				<p>{description}</p>
+			</div>
+		</div>
+	)
+}
+
+export default function HomepageFeatures() {
+	return (
+		<section className={styles.features}>
+			<div className="container">
+				<div className="row">
+					{FeatureList.map((props, idx) => (
+						<Feature key={idx} {...props} />
+					))}
+				</div>
+			</div>
+		</section>
+	)
+}

website/src/components/HomepageFeatures.module.css

@@ -0,0 +1,45 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+.featureSvg {
+	height: 200px;
+	width: 200px;
+	position: relative;
+	display: inline-block;
+	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.featureSvg::after {
+	content: "";
+	border-radius: 5px;
+	position: absolute;
+	z-index: -1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+	-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+	transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.featureSvg:hover {
+	-webkit-transform: scale(1.25, 1.25);
+	transform: scale(1.25, 1.25);
+}
+
+.featureSvg:hover::after {
+	opacity: 1;
+}

website/src/css/custom.css

@@ -0,0 +1,29 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+	--ifm-color-primary: #6cb7ca;
+	--ifm-color-primary-dark: #55acc2;
+	--ifm-color-primary-darker: #4aa6be;
+	--ifm-color-primary-darkest: #3a8b9f;
+	--ifm-color-primary-light: #83c2d2;
+	--ifm-color-primary-lighter: #8ec8d6;
+	--ifm-color-primary-lightest: #b0d8e3;
+	--ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+	background-color: rgba(0, 0, 0, 0.1);
+	display: block;
+	margin: 0 calc(-1 * var(--ifm-pre-padding));
+	padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme="dark"] .docusaurus-highlight-code-line {
+	background-color: rgba(38, 28, 44, 0.3);
+}

website/src/pages/index.js

@@ -0,0 +1,42 @@
+import React from "react"
+import clsx from "clsx"
+import Layout from "@theme/Layout"
+import Link from "@docusaurus/Link"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+import styles from "./index.module.css"
+import HomepageFeatures from "../components/HomepageFeatures"
+
+function HomepageHeader() {
+	const { siteConfig } = useDocusaurusContext()
+	return (
+		<header className={clsx("hero hero--primary", styles.heroBanner)}>
+			<div className="container">
+				<h1 className="hero__title">{siteConfig.title}</h1>
+				<p className="hero__subtitle">{siteConfig.tagline}</p>
+				<div className={styles.buttons}>
+					<Link
+						className="button button--secondary button--lg"
+						to="/docs/welcome"
+					>
+						Start here
+					</Link>
+				</div>
+			</div>
+		</header>
+	)
+}
+
+export default function Home() {
+	const { siteConfig } = useDocusaurusContext()
+	return (
+		<Layout
+			title={`${siteConfig.title}`}
+			description="100 Days, 100 Projects, 100 Days of Code. By Mueez Khan."
+		>
+			<HomepageHeader />
+			<main>
+				<HomepageFeatures />
+			</main>
+		</Layout>
+	)
+}

website/src/pages/index.module.css

@@ -0,0 +1,25 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+	padding: 4rem 0;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+	.heroBanner {
+		padding: 2rem;
+	}
+}
+
+.buttons {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

website/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.