+
+
+
diff --git a/src/themes/card/index.js b/src/themes/card/index.js
index c664d4a..cb795ff 100644
--- a/src/themes/card/index.js
+++ b/src/themes/card/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useCallback } from "react";
import { limitUnit, isMobile } from "../../utils/general";
import Back from "./back";
@@ -11,16 +11,6 @@ const colors = [
{ value: "var(--color-e)", barXScale: 3.5, gradientPosition: "100%" },
];
-const radialBackground = `
- radial-gradient(
- circle at top right,
- black 0%,
- ${colors.map(
- ({ value, gradientPosition }) => `${value} ${gradientPosition}`
- )}
- )
-`;
-
const ColorBar = ({ x, width, left, color }) => {
const height = limitUnit(x) * 100;
return (
@@ -49,7 +39,7 @@ const CardFront = ({ x, mounted }) => {
wannabe polymath
+
(scroll)
{colors.map(({ value, barXScale }, index) => (
@@ -142,34 +132,38 @@ const SkipLink = () => (
);
-const SkipDestination = () =>
;
+const SkipDestination = () =>
;
export default () => {
const [x, setX] = useState(0);
const [mounted, setMounted] = useState(false);
+ // Keep server/client initial render consistent; decide mobile-only after mount.
+ const [scrollLength, setScrollLength] = useState(3);
- const scrollLength = useMemo(() => (isMobile() ? 1.5 : 3));
- const handleScroll = useCallback(
- () =>
- setX(
- limitUnit(window.scrollY / (window.innerHeight * (scrollLength - 1)))
- ),
- [setX]
- );
+ const handleScroll = useCallback(() => {
+ setX(
+ limitUnit(window.scrollY / (window.innerHeight * (scrollLength - 1)))
+ );
+ }, [scrollLength]);
+
+ useEffect(() => {
+ setScrollLength(isMobile() ? 1.5 : 3);
+ }, []);
useEffect(() => {
- window.addEventListener("scroll", handleScroll);
+ window.addEventListener("scroll", handleScroll, { passive: true });
window.addEventListener("resize", handleScroll);
- window.addEventListener("touchmove", handleScroll);
+ window.addEventListener("touchmove", handleScroll, { passive: true });
setMounted(true);
+ handleScroll();
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleScroll);
window.removeEventListener("touchmove", handleScroll);
};
- }, [setMounted]);
+ }, [handleScroll]);
const backgroundTransitionPoint = 0.95;
const backgroundAlpha =
diff --git a/src/themes/simple/index.js b/src/themes/simple/index.js
index ba987e4..531d41d 100644
--- a/src/themes/simple/index.js
+++ b/src/themes/simple/index.js
@@ -1,5 +1,17 @@
-import { Main, Make, Talk, Work } from "../../content";
+import React from "react";
+
+import Content from "../../content";
+import { ChangeThemeButton } from "../theme-context";
export default function SimpleApp() {
- return;
+ return (
+
+ );
}
diff --git a/src/themes/theme-context.js b/src/themes/theme-context.js
index 6cfaee5..1f7e9e2 100644
--- a/src/themes/theme-context.js
+++ b/src/themes/theme-context.js
@@ -6,7 +6,10 @@ export const THEME_SIMPLE = "THEME_SIMPLE";
const THEME_DEFAULT = THEME_CARD;
-const ThemeContext = createContext();
+const ThemeContext = createContext({
+ theme: THEME_DEFAULT,
+ changeTheme: () => {},
+});
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(THEME_DEFAULT);
diff --git a/src/utils/general.js b/src/utils/general.js
index 2f6a371..1d23fea 100644
--- a/src/utils/general.js
+++ b/src/utils/general.js
@@ -4,7 +4,7 @@ export const limitUnit = (x) => limit(x, 0, 1);
export const isMobile = () => {
if (typeof navigator === "undefined") return false;
- return navigator.userAgent.match(/Mobile|iP(hone|od|ad)|Android|IEMobile/);
+ return !!navigator.userAgent.match(/Mobile|iP(hone|od|ad)|Android|IEMobile/);
};
const WINDOW_FALLBACK = {