-
+const DarkToggle = ({ toggleDark }: { toggleDark: () => void }) => (
+
+
);
-const Socials = ({ className }: { className?: string }) => (
+const Socials = ({
+ className,
+ toggleDark,
+}: {
+ className?: string;
+ toggleDark: () => void;
+}) => (
@@ -169,7 +177,7 @@ const Socials = ({ className }: { className?: string }) => (
);
@@ -185,21 +193,21 @@ const Icon = ({ url, icon }: { url: string; icon: ReactNode }) => (
const Office = () => (
}
+ icon={
}
/>
);
const Twitter = () => (
}
+ icon={
}
/>
);
const GitHub = () => (
}
+ icon={
}
/>
);
@@ -211,7 +219,10 @@ const CV = () => (
);
const Email = () => (
-
} />
+
}
+ />
);
const Text = ({
@@ -221,7 +232,9 @@ const Text = ({
className?: string;
children: ReactNode;
}) => (
-
+
{children}
);
@@ -237,24 +250,27 @@ const Section = ({
return (
-
+
-
+
{header}
@@ -264,17 +280,51 @@ const Section = ({
};
const App: React.FC = () => {
+ const [darkMode, setDarkMode] = useState(
+ window.matchMedia("(prefers-color-scheme: dark)").matches
+ );
+ const toggleDark = () => {
+ setDarkMode(!darkMode);
+ };
+
+ function updateTheme() {
+ if (
+ window.matchMedia &&
+ window.matchMedia("(prefers-color-scheme: dark)").matches
+ ) {
+ setDarkMode(true);
+ } else {
+ // Otherwise, remove it
+ setDarkMode(false);
+ }
+ }
+
+ useEffect(() => {
+ // Add an event listener to react to changes in the system's color scheme
+ window
+ .matchMedia("(prefers-color-scheme: dark)")
+ .addEventListener("change", updateTheme);
+ });
+
+ useEffect(() => {
+ document.documentElement.classList.toggle("dark", darkMode);
+ }, [darkMode]);
+
return (
-
+
-
+
I'm Nimo. I build ergonomic digital tools to make difficult things feel
simple.
-
+
I am a Ph.D. candidate at Carnegie Mellon University, School of
Computer Science, advised by{" "}
Ken Koedinger {" "}
@@ -288,12 +338,14 @@ const App: React.FC = () => {
name="Edgeworth"
desc="Diagrammatic problem generation by program mutation."
link="https://github.com/penrose/penrose/tree/main/packages/edgeworth"
+ dark={darkMode}
>
diff --git a/src/Logo.tsx b/src/Logo.tsx
index dcbffe2..03c8717 100644
--- a/src/Logo.tsx
+++ b/src/Logo.tsx
@@ -8,7 +8,7 @@ export default ({ className }: { className: string }) => (
xmlns="http://www.w3.org/2000/svg"
>
-
+
{name}
diff --git a/src/theme.ts b/src/theme.ts
index 961cbb8..fbb2f8b 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,10 +1,5 @@
export default {
colors: {
primary: "#C559F4",
- // primary: "#2C1EF1",
- icon: "#999",
- },
- sizes: {
- icon: 100,
},
};
diff --git a/tailwind.config.js b/tailwind.config.js
index 1f87c20..b901fa0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,17 +1,20 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
+ darkMode: "class",
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
scale: {
400: "40",
},
- },
- colors: {
- primary: "#C559F4",
- // primary: "#2C1EF1",
- icon: "#999",
- icontext: "#1E1E1E",
+ colors: {
+ primary: "#C559F4",
+ // primary: "#2C1EF1",
+ icon: "#999",
+ "icon-dark": "#bbb",
+ icontext: "#1E1E1E",
+ "icontext-dark": "#fff",
+ },
},
},
plugins: [],
diff --git a/yarn.lock b/yarn.lock
index 8ddf4c5..69dba01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1773,10 +1773,10 @@ three-stdlib@^2.22.10, three-stdlib@^2.23.4:
potpack "^1.0.1"
zstddec "^0.0.2"
-three@^0.148.0:
- version "0.148.0"
- resolved "https://registry.yarnpkg.com/three/-/three-0.148.0.tgz#b6f62f9c84227f8d51c151bf17b67984ded8e4d7"
- integrity sha512-8uzVV+qhTPi0bOFs/3te3RW6hb3urL8jYEl6irjCWo/l6sr8MPNMcClFev/MMYeIxr0gmDcoXTy/8LXh/LXkfw==
+three@^0.152.1:
+ version "0.152.2"
+ resolved "https://registry.yarnpkg.com/three/-/three-0.152.2.tgz#2ee0f2c504d31a4bc29b45495c12bded9fda7bfc"
+ integrity sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw==
tiny-inflate@^1.0.3:
version "1.0.3"