feat: lazy-loading and standards compliance

src/components/FlickerList.tsx

@@ -136,7 +136,7 @@ const FlickerList: React.FC<{
 							</Flicker>
 						</li>
 					)),
-					<li>·</li>,
+					index => <li key={index}>·</li>,
 				),
 			]}
 		</ul>

src/index.tsx

@@ -1,20 +1,16 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
-
 import { createRoot } from "react-dom/client";
-
 import useLocation from "wouter/use-location";
 
-import Home from "./pages/main/Home";
-import Exp from "./pages/main/Exp";
-import Projects from "./pages/main/Projects";
-import Contact from "./pages/main/Contact";
-import Live from "./pages/main/Live";
-
-import NotFound from "./pages/main/404";
-import BlogHome from "./pages/blog/Home";
-import { BlogPost } from "./pages/blog/components/BlogContent";
 import { normalise } from "./util";
 
+const Home = lazy(() => import("./pages/main/Home"));
+const Exp = lazy(() => import("./pages/main/Exp"));
+const Projects = lazy(() => import("./pages/main/Projects"));
+const Contact = lazy(() => import("./pages/main/Contact"));
+
+const NotFound = lazy(() => import("./pages/main/404"));
+
 function App() {
 	const [location, navigate] = useLocation();
 
@@ -30,14 +26,16 @@ function App() {
 	if (normalised.startsWith("/experience/")) return <Exp />;
 	if (normalised === "/projects") return <Projects />;
 	if (normalised === "/contact") return <Contact />;
-	if (normalised === "/live") return <Live />;
+	// if (normalised === "/live") return <Live />;
-	if (normalised === "/blog") return <BlogHome />;
+	// if (normalised === "/blog") return <BlogHome />;
-	if (location.startsWith("/blog")) return <BlogPost />;
+	// if (location.startsWith("/blog")) return <BlogPost />;
 	return <NotFound />;
 }
 
 createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
-		<App />
+		<Suspense>
+			<App />
+		</Suspense>
 	</React.StrictMode>,
 );

src/pages/main/Home.tsx

@@ -17,27 +17,25 @@ const Home: React.FC = () => {
 		<Container>
 			<section>
 				<h1>MKRhere</h1>
-				<p>
+				<FlickerList
-					<FlickerList
+					list={[
-						list={[
+						{
-							{
+							text: "Designer",
-								text: "Designer",
+							description:
-								description:
+								"Graphic design is my passion 🤓 I have plenty of experience with Figma and Adobe Suite tools (especially Photoshop and InDesign)",
-									"Graphic design is my passion 🤓 I have plenty of experience with Figma and Adobe Suite tools (especially Photoshop and InDesign)",
+						},
-							},
+						{
-							{
+							text: "Developer",
-								text: "Developer",
+							description:
-								description:
+								"🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer",
-									"🧑🏻‍💻 I started developing websites in 2015, and in 2017 I joined The Devs Network, catapulting my growth as a full-time developer",
+						},
-							},
+						{
-							{
+							text: "Architect",
-								text: "Architect",
+							description:
-								description:
+								"I have a formal degree in architecture! I'm an architect in both construction and software 😉",
-									"I have a formal degree in architecture! I'm an architect in both construction and software 😉",
+						},
-							},
+					]}
-						]}
+				/>
-					/>
-				</p>
 			</section>
 			<section
 				className={cx(

src/util/index.ts

@@ -3,12 +3,20 @@ import useLocation from "wouter/use-location";
 
 export const sleep = (t: number) => new Promise(r => setTimeout(r, t));
 
-export function* intersperse<T, U>(xs: T[], delim: U): Generator<T | U> {
+export function* intersperse<T, U>(
+	xs: T[],
+	delim: (index: number) => U,
+): Generator<T | U> {
 	let first = true;
+	let i = 0;
 	for (const x of xs) {
-		if (!first) yield delim;
+		if (!first) {
+			yield delim(i);
+			i++;
+		}
 		first = false;
 		yield x;
+		i++;
 	}
 }