diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index a9ac238..321ba88 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -157,7 +157,6 @@ const Container: React.FC<{
return (
= ({ children }) => (
-
- {children}
-
-);
-
-export default Dashed;
diff --git a/src/components/FlickerList.tsx b/src/components/FlickerList.tsx
new file mode 100644
index 0000000..5529cd2
--- /dev/null
+++ b/src/components/FlickerList.tsx
@@ -0,0 +1,145 @@
+import React from "react";
+import { css, cx } from "@emotion/css";
+import { intersperse, sleep } from "../util";
+
+const tripleBlink = async (el: HTMLElement) => {
+ const delay = 150;
+
+ await sleep(1000);
+ el.style.opacity = "0.5";
+ await sleep(delay);
+ el.style.opacity = "1";
+ await sleep(delay);
+ el.style.opacity = "0.5";
+ await sleep(delay);
+ el.style.opacity = "1";
+ await sleep(delay);
+ el.style.opacity = "0.5";
+ await sleep(delay * 2);
+ el.style.opacity = "1";
+};
+
+const Flicker: React.FC<{
+ children: React.ReactNode;
+ index: number;
+ description: string;
+}> = ({ children, index, description }) => {
+ return (
+
+
+
+ {description}
+
+
+ );
+};
+
+const FlickerList: React.FC<{
+ list: { text: string; description: string }[];
+}> = ({ list }) => {
+ return (
+
li > span > button:focus) li > span > button:not(:focus),
+ &:has(> li > span > button:hover) li > span > button:not(:hover)
+ /* */ {
+ opacity: 0.5 !important;
+ }
+ `}>
+ {[
+ ...intersperse(
+ list.map((item, index) => (
+ -
+
+ {item.text}
+
+
+ )),
+ - ยท
,
+ ),
+ ]}
+
+ );
+};
+
+export default FlickerList;
diff --git a/src/index.css b/src/index.css
index f46b338..69013de 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,6 +27,7 @@ body {
margin: 0;
color: var(--text-colour);
overflow-x: hidden;
+ background-color: var(--bg-colour);
}
code {
diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx
index 53d5e26..3d28eb1 100644
--- a/src/pages/main/Home.tsx
+++ b/src/pages/main/Home.tsx
@@ -1,6 +1,6 @@
import React from "react";
import Container from "../../components/Container";
-import Dashed from "../../components/Dashed";
+import FlickerList from "../../components/FlickerList";
import { ReactComponent as Arrow } from "../../assets/arrow-thin.svg";
import { css, cx } from "@emotion/css";
import { setupCursorTracking } from "../../util";
@@ -15,7 +15,30 @@ const section = css`
const Home: React.FC = () => {
return (
- MKRhere
+
{
`,
)}>
- Welcome to the web home of designer,{" "}
- developer, and architect{" "}
- Anu Rahul Nandhan.
+ Welcome to the web home of Anu Rahul Nandhan.
I'm also commonly known as Muthu Kumar.
diff --git a/src/util/index.ts b/src/util/index.ts
index 5e13520..e31e8b3 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -1,6 +1,17 @@
import React from "react";
import useLocation from "wouter/use-location";
+export const sleep = (t: number) => new Promise(r => setTimeout(r, t));
+
+export function* intersperse(xs: T[], delim: U): Generator {
+ let first = true;
+ for (const x of xs) {
+ if (!first) yield delim;
+ first = false;
+ yield x;
+ }
+}
+
export const getTimeout = () => {
const clearables = new Set();