jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 16:46:39 -04:00
Code Issues Activity

consistent use of arrow functions/default exports

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-02 15:16:07 -05:00
parent cd5a1b191a
commit ca614e1a1a
34 changed files with 2956 additions and 2985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Container.tsx
View File

@ -10,7 +10,7 @@ type Props = {
children: unknown;
};
export default function Container({ title, description, children }: Props) {
const Container = ({ title, description, children }: Props) => {
const router = useRouter();
return (
@ -27,4 +27,6 @@ export default function Container({ title, description, children }: Props) {
<div className={styles.container}>{children}</div>
</>
);
}
};
export default Container;

6
components/Content.tsx
View File

@ -4,6 +4,6 @@ type Props = {
children: unknown;
};
export default function Content({ children }: Props) {
return <div className={styles.content}>{children}</div>;
}
const Content = ({ children }: Props) => <div className={styles.content}>{children}</div>;
export default Content;

18
components/Layout.tsx
View File

@ -3,12 +3,12 @@ import Footer from "./page-footer/Footer";
import styles from "./Layout.module.scss";
export default function Layout({ children }) {
return (
<>
<Header />
<main className={styles.main}>{children}</main>
<Footer />
</>
);
}
const Layout = ({ children }) => (
<>
<Header />
<main className={styles.main}>{children}</main>
<Footer />
</>
);
export default Layout;

6
components/clipboard/CopyButton.tsx
View File

@ -10,7 +10,7 @@ type Props = {
timeout?: number;
};
export default function CopyButton({ content, timeout = 2000 }: Props) {
const CopyButton = ({ content, timeout = 2000 }: Props) => {
const [copied, setCopied] = useState(false);
const handleCopy = (e) => {
@ -54,4 +54,6 @@ export default function CopyButton({ content, timeout = 2000 }: Props) {
)}
</button>
);
}
};
export default CopyButton;

6
components/contact/ContactForm.tsx
View File

@ -5,7 +5,7 @@ import { SendIcon } from "../icons";
import styles from "./ContactForm.module.scss";
export default function ContactForm() {
const ContactForm = () => {
// status/feedback:
const [status, setStatus] = useState({ success: false, message: "" });
// keep track of fetch:
@ -136,4 +136,6 @@ export default function ContactForm() {
</div>
</form>
);
}
};
export default ContactForm;

6
components/hits/Hits.tsx
View File

@ -2,7 +2,7 @@ import useSWR from "swr";
import { fetcher } from "../../lib/fetcher";
import Loading from "../loading/Loading";
export default function Hits({ slug }) {
const Hits = ({ slug }) => {
// start fetching repos from API immediately
const { data, error } = useSWR(`/api/hits/?slug=${encodeURIComponent(slug)}`, fetcher, {
// avoid double (or more) counting views
@ -25,4 +25,6 @@ export default function Hits({ slug }) {
{data.hits.toLocaleString("en-US")}
</span>
);
}
};
export default Hits;

6
components/loading/Loading.tsx
View File

@ -4,7 +4,7 @@ type Props = {
width: number;
};
export default function Loading({ boxes = 3, timing = 0.1, width }: Props) {
const Loading = ({ boxes = 3, timing = 0.1, width }: Props) => {
// each box is just an empty div
const divs = [];
@ -53,4 +53,6 @@ export default function Loading({ boxes = 3, timing = 0.1, width }: Props) {
`}</style>
</div>
);
}
};
export default Loading;

6
components/notes/List.tsx
View File

@ -9,7 +9,7 @@ type NoteProps = {
slug: string;
};
export default function List({ notesByYear }) {
const List = ({ notesByYear }) => {
const sections = [];
Object.entries(notesByYear).forEach(([year, notes]: [string, NoteProps[]]) => {
@ -36,4 +36,6 @@ export default function List({ notesByYear }) {
const reversed = sections.reverse();
return <>{reversed}</>;
}
};
export default List;

106
components/notes/Meta.tsx
View File

@ -13,58 +13,58 @@ export type Props = {
tags?: string[];
};
export default function Meta({ title, date, slug, tags = [] }: Props) {
return (
<>
<div className={styles.meta}>
<div className={styles.date}>
<span>
<DateIcon className={`icon ${styles.icon}`} />
</span>
<span title={format(parseISO(date), "PPppp")}>
<Link href={`/notes/${slug}/`}>{format(parseISO(date), "MMMM d, yyyy")}</Link>
</span>
</div>
{tags.length > 0 && (
<div className={styles.tags}>
<span>
<TagIcon className={`icon ${styles.icon}`} />
</span>
{tags.map((tag) => (
<span key={tag} className={styles.tag}>
{tag}
</span>
))}
</div>
)}
<div>
<span>
<EditIcon className={`icon ${styles.icon}`} />
</span>
<span>
<a
href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
target="_blank"
rel="noopener noreferrer"
title={`Edit "${title}" on GitHub`}
>
Improve This Post
</a>
</span>
</div>
<div>
<span>
<ViewsIcon className={`icon ${styles.icon}`} />
</span>
<Hits slug={`notes/${slug}`} />
</div>
const Meta = ({ title, date, slug, tags = [] }: Props) => (
<>
<div className={styles.meta}>
<div className={styles.date}>
<span>
<DateIcon className={`icon ${styles.icon}`} />
</span>
<span title={format(parseISO(date), "PPppp")}>
<Link href={`/notes/${slug}/`}>{format(parseISO(date), "MMMM d, yyyy")}</Link>
</span>
</div>
{tags.length > 0 && (
<div className={styles.tags}>
<span>
<TagIcon className={`icon ${styles.icon}`} />
</span>
{tags.map((tag) => (
<span key={tag} className={styles.tag}>
{tag}
</span>
))}
</div>
)}
<div>
<span>
<EditIcon className={`icon ${styles.icon}`} />
</span>
<span>
<a
href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
target="_blank"
rel="noopener noreferrer"
title={`Edit "${title}" on GitHub`}
>
Improve This Post
</a>
</span>
</div>
<div>
<span>
<ViewsIcon className={`icon ${styles.icon}`} />
</span>
<Hits slug={`notes/${slug}`} />
</div>
</div>
<h1 className={styles.title}>
<Link href={`/notes/${slug}/`}>
<a>{title}</a>
</Link>
</h1>
</>
);
}
<h1 className={styles.title}>
<Link href={`/notes/${slug}/`}>
<a>{title}</a>
</Link>
</h1>
</>
);
export default Meta;

76
components/page-footer/Footer.tsx
View File

@ -4,42 +4,42 @@ import * as config from "../../lib/config";
import styles from "./Footer.module.scss";
export default function Footer() {
return (
<footer className={styles.footer}>
<div className={styles.row}>
<div className={styles.copyright}>
Content{" "}
<Link href="/license/" prefetch={false}>
<a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
</Link>
,{" "}
<Link href="/previously/" prefetch={false}>
<a title="Previously on...">2001 –</a>
</Link>{" "}
{new Date().getFullYear()}.
</div>
<div className={styles.powered_by}>
Made with{" "}
<span className={styles.beat}>
<HeartIcon alt="Love" />
</span>{" "}
and{" "}
<a href="https://nextjs.org/" title="Powered by Next.js" target="_blank" rel="noopener noreferrer">
<NextjsIcon alt="Next.js" fill="currentColor" />
</a>
.{" "}
<a
href={`https://github.com/${config.githubRepo}`}
title="View Source on GitHub"
className={styles.view_source}
target="_blank"
rel="noopener noreferrer"
>
View source.
</a>
</div>
const Footer = () => (
<footer className={styles.footer}>
<div className={styles.row}>
<div className={styles.copyright}>
Content{" "}
<Link href="/license/" prefetch={false}>
<a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
</Link>
,{" "}
<Link href="/previously/" prefetch={false}>
<a title="Previously on...">2001 –</a>
</Link>{" "}
{new Date().getFullYear()}.
</div>
</footer>
);
}
<div className={styles.powered_by}>
Made with{" "}
<span className={styles.beat}>
<HeartIcon alt="Love" />
</span>{" "}
and{" "}
<a href="https://nextjs.org/" title="Powered by Next.js" target="_blank" rel="noopener noreferrer">
<NextjsIcon alt="Next.js" fill="currentColor" />
</a>
.{" "}
<a
href={`https://github.com/${config.githubRepo}`}
title="View Source on GitHub"
className={styles.view_source}
target="_blank"
rel="noopener noreferrer"
>
View source.
</a>
</div>
</div>
</footer>
);
export default Footer;

20
components/page-header/Header.tsx
View File

@ -3,13 +3,13 @@ import Menu from "./Menu";
import styles from "./Header.module.scss";
export default function Header() {
return (
<header className={styles.header}>
<nav className={styles.nav}>
<Name />
<Menu />
</nav>
</header>
);
}
const Header = () => (
<header className={styles.header}>
<nav className={styles.nav}>
<Name />
<Menu />
</nav>
</header>
);
export default Header;

36
components/page-header/Menu.tsx
View File

@ -4,7 +4,7 @@ import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
import styles from "./Menu.module.scss";
const menuItems = [
const links = [
{
icon: <HomeIcon className={`icon ${styles.icon}`} />,
text: "Home",
@ -30,21 +30,21 @@ const menuItems = [
// ensure the theme toggle isn't evaluated server-side
const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
export default function Menu() {
return (
<ul className={styles.menu}>
{menuItems.map((item, index) => (
<li key={index} className={styles.item}>
<Link href={item.href} prefetch={false}>
<a className={styles.link}>
{item.icon} <span className={styles.text}>{item.text}</span>
</a>
</Link>
</li>
))}
<li className={`${styles.item} ${styles.theme_toggle}`}>
<ThemeToggle className={styles.icon} />
const Menu = () => (
<ul className={styles.menu}>
{links.map((link, index) => (
<li key={index} className={styles.item}>
<Link href={link.href} prefetch={false}>
<a className={styles.link}>
{link.icon} <span className={styles.text}>{link.text}</span>
</a>
</Link>
</li>
</ul>
);
}
))}
<li className={`${styles.item} ${styles.theme_toggle}`}>
<ThemeToggle className={styles.icon} />
</li>
</ul>
);
export default Menu;

40
components/page-header/Name.tsx
View File

@ -5,23 +5,23 @@ import selfiePic from "../../public/static/images/me.jpg";
import styles from "./Name.module.scss";
export default function Name() {
return (
<Link href="/">
<a className={styles.title}>
<span className={styles.selfie}>
<Image
src={selfiePic}
alt="Photo of Jake Jarvis"
width={75}
height={75}
quality={60}
layout="intrinsic"
priority
/>
</span>
<span className={styles.name}>Jake Jarvis</span>
</a>
</Link>
);
}
const Name = () => (
<Link href="/">
<a className={styles.title}>
<span className={styles.selfie}>
<Image
src={selfiePic}
alt="Photo of Jake Jarvis"
width={75}
height={75}
quality={60}
layout="intrinsic"
priority
/>
</span>
<span className={styles.name}>Jake Jarvis</span>
</a>
</Link>
);
export default Name;

14
components/page-header/ThemeToggle.tsx
View File

@ -6,15 +6,15 @@ import styles from "./ThemeToggle.module.scss";
// store preference in local storage
const storageKey = "dark_mode";
export const getDarkPref = () => localStorage.getItem(storageKey);
export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
const getDarkPref = () => localStorage.getItem(storageKey);
const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
// use the `<html data-theme="...">` as a hint to what the theme was set to outside of the button component
// TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
// sets appropriate `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property
export const updateDOM = (dark: boolean) => {
const updateDOM = (dark: boolean) => {
document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
document.documentElement.style.colorScheme = dark ? "dark" : "light";
document.head
@ -22,7 +22,7 @@ export const updateDOM = (dark: boolean) => {
?.setAttribute("content", dark ? config.themeColorDark : config.themeColorLight);
};
export default function ThemeToggle({ className = "" }) {
const ThemeToggle = ({ className = "" }) => {
// sync button up with theme and preference states after initialization
const [dark, setDark] = useState(isDark());
const [saved, setSaved] = useState(!!getDarkPref());
@ -66,4 +66,6 @@ export default function ThemeToggle({ className = "" }) {
{dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
</button>
);
}
};
export default ThemeToggle;

6
components/page/PageTitle.tsx
View File

@ -6,7 +6,7 @@ type Props = {
title: unknown;
};
export default function PageTitle({ title }: Props) {
const PageTitle = ({ title }: Props) => {
const router = useRouter();
return (
@ -14,4 +14,6 @@ export default function PageTitle({ title }: Props) {
<a href={router.asPath}>{title}</a>
</h1>
);
}
};
export default PageTitle;

138
components/projects/RepoCard.tsx
View File

@ -16,77 +16,77 @@ type Props = {
updatedAt: string;
};
export default function RepoCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
return (
<div className={styles.card}>
<a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">
{name}
</a>
const RepoCard = ({ name, url, description, language, stars, forks, updatedAt }: Props) => (
<div className={styles.card}>
<a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">
{name}
</a>
{description && <p className={styles.description}>{description}</p>}
{description && <p className={styles.description}>{description}</p>}
<div className={styles.meta}>
{language && (
<div className={styles.meta_item}>
<span className={styles.language_color}>
<style jsx>{`
span {
background-color: ${language.color};
}
`}</style>
</span>
<span>{language.name}</span>
</div>
)}
{stars > 0 && (
<div className={styles.meta_item}>
<a
href={`${url}/stargazers`}
title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
target="_blank"
rel="noopener noreferrer"
>
<StarOcticon fill="currentColor" className={styles.octicon} />
<span>{stars.toLocaleString("en-US")}</span>
</a>
</div>
)}
{forks > 0 && (
<div className={styles.meta_item}>
<a
href={`${url}/network/members`}
title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
target="_blank"
rel="noopener noreferrer"
>
<ForkOcticon fill="currentColor" className={styles.octicon} />
<span>{forks.toLocaleString("en-US")}</span>
</a>
</div>
)}
<div
className={styles.meta_item}
title={intlFormat(
parseISO(updatedAt),
{
year: "numeric",
month: "short",
day: "numeric",
hour: "numeric",
minute: "numeric",
timeZoneName: "short",
},
{
locale: "en-US",
}
)}
>
<span>Updated {formatDistanceToNowStrict(parseISO(updatedAt), { addSuffix: true })}</span>
<div className={styles.meta}>
{language && (
<div className={styles.meta_item}>
<span className={styles.language_color}>
<style jsx>{`
span {
background-color: ${language.color};
}
`}</style>
</span>
<span>{language.name}</span>
</div>
)}
{stars > 0 && (
<div className={styles.meta_item}>
<a
href={`${url}/stargazers`}
title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
target="_blank"
rel="noopener noreferrer"
>
<StarOcticon fill="currentColor" className={styles.octicon} />
<span>{stars.toLocaleString("en-US")}</span>
</a>
</div>
)}
{forks > 0 && (
<div className={styles.meta_item}>
<a
href={`${url}/network/members`}
title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
target="_blank"
rel="noopener noreferrer"
>
<ForkOcticon fill="currentColor" className={styles.octicon} />
<span>{forks.toLocaleString("en-US")}</span>
</a>
</div>
)}
<div
className={styles.meta_item}
title={intlFormat(
parseISO(updatedAt),
{
year: "numeric",
month: "short",
day: "numeric",
hour: "numeric",
minute: "numeric",
timeZoneName: "short",
},
{
locale: "en-US",
}
)}
>
<span>Updated {formatDistanceToNowStrict(parseISO(updatedAt), { addSuffix: true })}</span>
</div>
</div>
);
}
</div>
);
export default RepoCard;

14
components/video/FullPageVideo.tsx
View File

@ -3,10 +3,10 @@ import type { ReactPlayerProps } from "react-player";
import styles from "./FullPageVideo.module.scss";
export default function FullPageVideo(props: ReactPlayerProps) {
return (
<div className={styles.wrapper}>
<ReactPlayer className={styles.react_player} width="100%" height="100%" {...props} />
</div>
);
}
const FullPageVideo = (props: ReactPlayerProps) => (
<div className={styles.wrapper}>
<ReactPlayer className={styles.react_player} width="100%" height="100%" {...props} />
</div>
);
export default FullPageVideo;

6
pages/_app.tsx
View File

@ -18,7 +18,7 @@ import "../styles/typography.scss";
import "../styles/highlight.scss";
import "../styles/index.scss";
export default function App({ Component, pageProps }: AppProps) {
const App = ({ Component, pageProps }: AppProps) => {
const router = useRouter();
useEffect(() => {
@ -202,4 +202,6 @@ export default function App({ Component, pageProps }: AppProps) {
<Component {...pageProps} />
</>
);
}
};
export default App;

78
pages/birthday.tsx
View File

@ -7,43 +7,41 @@ import { TapeIcon } from "../components/icons";
import thumbnail from "../public/static/images/birthday/thumb.png";
export default function Birthday() {
return (
<>
<Layout>
<Container
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
description="The origin of my hatred for the Happy Birthday song."
>
<PageTitle
title={
<>
<TapeIcon /> 1996.MOV
</>
}
/>
<Content>
<Video
url={[
{ src: "/static/images/birthday/birthday.webm", type: "video/webm" },
{ src: "/static/images/birthday/birthday.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
},
}}
controls={true}
/>
</Content>
</Container>
</Layout>
</>
);
}
const Birthday = () => (
<Layout>
<Container
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
description="The origin of my hatred for the Happy Birthday song."
>
<PageTitle
title={
<>
<TapeIcon /> 1996.MOV
</>
}
/>
<Content>
<Video
url={[
{ src: "/static/images/birthday/birthday.webm", type: "video/webm" },
{ src: "/static/images/birthday/birthday.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
},
}}
controls={true}
/>
</Content>
</Container>
</Layout>
);
export default Birthday;

159
pages/cli.tsx
View File

@ -7,88 +7,85 @@ import { BotIcon } from "../components/icons";
import cliImg from "../public/static/images/cli/screenshot.png";
export default function CLI() {
return (
<Layout>
<Container
title="CLI"
description="AKA, the most useless Node module ever published, in history, by anyone, ever."
>
<PageTitle
title={
<>
<BotIcon /> CLI
</>
}
/>
<Content>
<blockquote>
<p>
The{" "}
<a href="https://jarv.is/" target="_blank" rel="noopener noreferrer">
Jake Jarvis
</a>{" "}
CLI (aka the most useless Node module ever published, in history, by anyone, ever).
</p>
</blockquote>
<a
className="no-underline"
href="https://www.npmjs.com/package/@jakejarvis/cli"
target="_blank"
rel="noopener noreferrer"
>
<Image src={cliImg} placeholder="blur" alt="Terminal Screenshot" />
</a>
<h2>Usage</h2>
<pre>
<code>npx @jakejarvis/cli</code>
</pre>
<h2>Inspired by</h2>
<ul>
<li>
<a href="https://github.com/sindresorhus/sindresorhus-cli" target="_blank" rel="noopener noreferrer">
@sindresorhus/sindresorhus-cli
</a>
</li>
<li>
<a href="https://github.com/yg/ygcodes" target="_blank" rel="noopener noreferrer">
@yg/ygcodes
</a>
</li>
</ul>
<h2>Built with</h2>
<ul>
<li>
<a href="https://github.com/vadimdemedes/ink" target="_blank" rel="noopener noreferrer">
ink
</a>{" "}
- React for interactive command-line apps
</li>
<li>
<a href="https://github.com/sindresorhus/meow" target="_blank" rel="noopener noreferrer">
meow
</a>{" "}
- CLI helper
</li>
</ul>
const CLI = () => (
<Layout>
<Container title="CLI" description="AKA, the most useless Node module ever published, in history, by anyone, ever.">
<PageTitle
title={
<>
<BotIcon /> CLI
</>
}
/>
<Content>
<blockquote>
<p>
<a href="https://github.com/jakejarvis/jakejarvis/tree/main/cli" target="_blank" rel="noreferrer">
View source on GitHub.
</a>
</p>
<h2>License</h2>
<p>
MIT ©{" "}
The{" "}
<a href="https://jarv.is/" target="_blank" rel="noopener noreferrer">
Jake Jarvis
</a>
,{" "}
<a href="https://sindresorhus.com" target="_blank" rel="noopener noreferrer">
Sindre Sorhus
</a>
</a>{" "}
CLI (aka the most useless Node module ever published, in history, by anyone, ever).
</p>
</Content>
</Container>
</Layout>
);
}
</blockquote>
<a
className="no-underline"
href="https://www.npmjs.com/package/@jakejarvis/cli"
target="_blank"
rel="noopener noreferrer"
>
<Image src={cliImg} placeholder="blur" alt="Terminal Screenshot" />
</a>
<h2>Usage</h2>
<pre>
<code>npx @jakejarvis/cli</code>
</pre>
<h2>Inspired by</h2>
<ul>
<li>
<a href="https://github.com/sindresorhus/sindresorhus-cli" target="_blank" rel="noopener noreferrer">
@sindresorhus/sindresorhus-cli
</a>
</li>
<li>
<a href="https://github.com/yg/ygcodes" target="_blank" rel="noopener noreferrer">
@yg/ygcodes
</a>
</li>
</ul>
<h2>Built with</h2>
<ul>
<li>
<a href="https://github.com/vadimdemedes/ink" target="_blank" rel="noopener noreferrer">
ink
</a>{" "}
- React for interactive command-line apps
</li>
<li>
<a href="https://github.com/sindresorhus/meow" target="_blank" rel="noopener noreferrer">
meow
</a>{" "}
- CLI helper
</li>
</ul>
<p>
<a href="https://github.com/jakejarvis/jakejarvis/tree/main/cli" target="_blank" rel="noreferrer">
View source on GitHub.
</a>
</p>
<h2>License</h2>
<p>
MIT ©{" "}
<a href="https://jarv.is/" target="_blank" rel="noopener noreferrer">
Jake Jarvis
</a>
,{" "}
<a href="https://sindresorhus.com" target="_blank" rel="noopener noreferrer">
Sindre Sorhus
</a>
</p>
</Content>
</Container>
</Layout>
);
export default CLI;

104
pages/contact.tsx
View File

@ -4,56 +4,56 @@ import PageTitle from "../components/page/PageTitle";
import ContactForm from "../components/contact/ContactForm";
import { MailIcon, LockIcon } from "../components/icons";
export default function Contact() {
return (
<Layout>
<Container title="Contact Me">
<PageTitle
title={
<>
<MailIcon /> Contact Me
</>
}
/>
<div>
<p>
Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
<a href="mailto:jake@jarv.is">email me directly</a>, send me a{" "}
<a
href="https://twitter.com/messages/compose?recipient_id=229769022"
target="_blank"
rel="noopener nofollow noreferrer"
>
direct message on Twitter
</a>
, or <a href="sms:+1-617-917-3737">text me</a>.
</p>
<p>
<LockIcon /> You can grab my public key here:{" "}
<a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
<code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
</a>
.
</p>
<ContactForm />
</div>
<style jsx>{`
div {
max-width: 600px;
margin: 0 auto;
font-size: 0.9em;
line-height: 1.7;
}
const Contact = () => (
<Layout>
<Container title="Contact Me">
<PageTitle
title={
<>
<MailIcon /> Contact Me
</>
}
/>
<div>
<p>
Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
<a href="mailto:jake@jarv.is">email me directly</a>, send me a{" "}
<a
href="https://twitter.com/messages/compose?recipient_id=229769022"
target="_blank"
rel="noopener nofollow noreferrer"
>
direct message on Twitter
</a>
, or <a href="sms:+1-617-917-3737">text me</a>.
</p>
<p>
<LockIcon /> You can grab my public key here:{" "}
<a href="/pubkey.asc" title="My Public PGP Key" target="_blank" rel="pgpkey authn noopener">
<code>6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39</code>
</a>
.
</p>
<ContactForm />
</div>
<style jsx>{`
div {
max-width: 600px;
margin: 0 auto;
font-size: 0.9em;
line-height: 1.7;
}
code {
background: none;
border: 0;
padding: 0;
word-spacing: -0.175em;
white-space: normal;
}
`}</style>
</Container>
</Layout>
);
}
code {
background: none;
border: 0;
padding: 0;
word-spacing: -0.175em;
white-space: normal;
}
`}</style>
</Container>
</Layout>
);
export default Contact;

4
pages/feed.atom.ts
View File

@ -2,6 +2,8 @@ import { getAllNotes } from "../lib/parse-notes";
import { buildFeed } from "../lib/build-feed";
import type { GetServerSideProps } from "next";
const AtomPage = () => null;
export const getServerSideProps: GetServerSideProps = async (context) => {
const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
const feed = buildFeed(notes);
@ -16,6 +18,4 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};
};
const AtomPage = () => null;
export default AtomPage;

4
pages/feed.xml.ts
View File

@ -2,6 +2,8 @@ import { getAllNotes } from "../lib/parse-notes";
import { buildFeed } from "../lib/build-feed";
import type { GetServerSideProps } from "next";
const RssPage = () => null;
export const getServerSideProps: GetServerSideProps = async (context) => {
const notes = getAllNotes(["title", "date", "image", "slug", "description"]);
const feed = buildFeed(notes);
@ -16,6 +18,4 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};
};
const RssPage = () => null;
export default RssPage;

136
pages/hillary.tsx
View File

@ -6,74 +6,72 @@ import Video from "../components/video/FullPageVideo";
import thumbnail from "../public/static/images/hillary/thumb.png";
export default function Hillary() {
return (
<>
<Layout>
<Container
title="My Brief Apperance in Hillary Clinton's DNC Video"
description="My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse."
>
<PageTitle title="My Brief Apperance in Hillary Clinton's DNC Video" />
<Content>
<Video
url={[
{ src: "/static/images/hillary/convention-720p.webm", type: "video/webm" },
{ src: "/static/images/hillary/convention-720p.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
tracks: [
{
kind: "subtitles",
src: "/static/images/hillary/subs.en.vtt",
srcLang: "en",
label: "English",
default: true,
},
],
const Hillary = () => (
<Layout>
<Container
title="My Brief Apperance in Hillary Clinton's DNC Video"
description="My brief apperance in one of Hillary Clinton's 2016 DNC convention videos on substance abuse."
>
<PageTitle title="My Brief Apperance in Hillary Clinton's DNC Video" />
<Content>
<Video
url={[
{ src: "/static/images/hillary/convention-720p.webm", type: "video/webm" },
{ src: "/static/images/hillary/convention-720p.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
tracks: [
{
kind: "subtitles",
src: "/static/images/hillary/subs.en.vtt",
srcLang: "en",
label: "English",
default: true,
},
}}
controls={true}
/>
<p className="copyright">
Video is property of{" "}
<a href="https://www.hillaryclinton.com/" target="_blank" rel="noopener noreferrer">
Hillary for America
</a>
, the{" "}
<a href="https://democrats.org/" target="_blank" rel="noopener noreferrer">
Democratic National Committee
</a>
, and{" "}
<a href="https://cnnpressroom.blogs.cnn.com/" target="_blank" rel="noopener noreferrer">
CNN / WarnerMedia
</a>
. &copy; 2016.
</p>
<style jsx>{`
.copyright {
text-align: center;
font-size: 0.9em;
line-height: 1.8;
margin: 1.25em 1em 0.5em;
color: var(--medium-light);
}
],
},
}}
controls={true}
/>
<p className="copyright">
Video is property of{" "}
<a href="https://www.hillaryclinton.com/" target="_blank" rel="noopener noreferrer">
Hillary for America
</a>
, the{" "}
<a href="https://democrats.org/" target="_blank" rel="noopener noreferrer">
Democratic National Committee
</a>
, and{" "}
<a href="https://cnnpressroom.blogs.cnn.com/" target="_blank" rel="noopener noreferrer">
CNN / WarnerMedia
</a>
. &copy; 2016.
</p>
<style jsx>{`
.copyright {
text-align: center;
font-size: 0.9em;
line-height: 1.8;
margin: 1.25em 1em 0.5em;
color: var(--medium-light);
}
.copyright a {
font-weight: 700;
}
`}</style>
</Content>
</Container>
</Layout>
</>
);
}
.copyright a {
font-weight: 700;
}
`}</style>
</Content>
</Container>
</Layout>
);
export default Hillary;

654
pages/index.tsx
View File

@ -39,362 +39,346 @@ const ColorLink = ({ children, href, lightColor, darkColor, title, external = fa
);
};
export default function Index() {
return (
<Layout>
<Container>
<h1>
Hi there! I'm Jake.{" "}
<span className="wave">
<WaveIcon />
</span>
</h1>
const Index = () => (
<Layout>
<Container>
<h1>
Hi there! I'm Jake.{" "}
<span className="wave">
<WaveIcon />
</span>
</h1>
<h2>
I'm a frontend web developer based in{" "}
<ColorLink
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
lightColor="#fb4d42"
darkColor="#ff5146"
>
Boston
</ColorLink>
.
</h2>
<h2>
I'm a frontend web developer based in{" "}
<ColorLink
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
lightColor="#fb4d42"
darkColor="#ff5146"
>
Boston
</ColorLink>
.
</h2>
<p>
I specialize in{" "}
<ColorLink
href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/"
title='"The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen'
lightColor="#1091b3"
darkColor="#6fcbe3"
>
modern JS frameworks
</ColorLink>{" "}
and{" "}
<ColorLink
href="http://vanilla-js.com/"
title="The best JS framework in the world by Eric Wastl"
lightColor="#f48024"
darkColor="#e18431"
>
vanilla JavaScript
</ColorLink>{" "}
to make nifty{" "}
<ColorLink href="https://jamstack.wtf/" title="WTF is JAMstack?" lightColor="#04a699" darkColor="#08bbac">
JAMstack sites
</ColorLink>{" "}
with dynamic{" "}
<ColorLink
href="https://nodejs.org/en/"
title="Node.js Official Website"
lightColor="#6fbc4e"
darkColor="#84d95f"
>
Node.js
</ColorLink>{" "}
services. But I'm fluent in non-buzzwords like{" "}
<ColorLink
href="https://stitcher.io/blog/php-in-2020"
title='"PHP in 2020" by Brent Roose'
lightColor="#8892bf"
darkColor="#a4afe3"
>
PHP
</ColorLink>
,{" "}
<ColorLink
href="https://www.ruby-lang.org/en/"
title="Ruby Official Website"
lightColor="#d34135"
darkColor="#f95a4d"
>
Ruby
</ColorLink>
, and{" "}
<ColorLink
href="https://golang.org/"
title="Golang Official Website"
lightColor="#00acd7"
darkColor="#2ad1fb"
>
Go
</ColorLink>{" "}
too.
</p>
<p>
I specialize in{" "}
<ColorLink
href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/"
title='"The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen'
lightColor="#1091b3"
darkColor="#6fcbe3"
>
modern JS frameworks
</ColorLink>{" "}
and{" "}
<ColorLink
href="http://vanilla-js.com/"
title="The best JS framework in the world by Eric Wastl"
lightColor="#f48024"
darkColor="#e18431"
>
vanilla JavaScript
</ColorLink>{" "}
to make nifty{" "}
<ColorLink href="https://jamstack.wtf/" title="WTF is JAMstack?" lightColor="#04a699" darkColor="#08bbac">
JAMstack sites
</ColorLink>{" "}
with dynamic{" "}
<ColorLink
href="https://nodejs.org/en/"
title="Node.js Official Website"
lightColor="#6fbc4e"
darkColor="#84d95f"
>
Node.js
</ColorLink>{" "}
services. But I'm fluent in non-buzzwords like{" "}
<ColorLink
href="https://stitcher.io/blog/php-in-2020"
title='"PHP in 2020" by Brent Roose'
lightColor="#8892bf"
darkColor="#a4afe3"
>
PHP
</ColorLink>
,{" "}
<ColorLink
href="https://www.ruby-lang.org/en/"
title="Ruby Official Website"
lightColor="#d34135"
darkColor="#f95a4d"
>
Ruby
</ColorLink>
, and{" "}
<ColorLink href="https://golang.org/" title="Golang Official Website" lightColor="#00acd7" darkColor="#2ad1fb">
Go
</ColorLink>{" "}
too.
</p>
<p>
Whenever possible, I also apply my experience in{" "}
<ColorLink
href="https://github.com/jakejarvis/awesome-shodan-queries"
title="jakejarvis/awesome-shodan-queries on GitHub"
lightColor="#00b81a"
darkColor="#57f06d"
>
application security
</ColorLink>
,{" "}
<ColorLink
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
title='"What is serverless computing?" on Cloudflare'
lightColor="#0098ec"
darkColor="#43b9fb"
>
serverless stacks
</ColorLink>
, and{" "}
<ColorLink
href="https://xkcd.com/1319/"
title='"Automation" on xkcd'
lightColor="#ff6200"
darkColor="#f46c16"
>
DevOps automation
</ColorLink>
.
</p>
<p>
Whenever possible, I also apply my experience in{" "}
<ColorLink
href="https://github.com/jakejarvis/awesome-shodan-queries"
title="jakejarvis/awesome-shodan-queries on GitHub"
lightColor="#00b81a"
darkColor="#57f06d"
>
application security
</ColorLink>
,{" "}
<ColorLink
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
title='"What is serverless computing?" on Cloudflare'
lightColor="#0098ec"
darkColor="#43b9fb"
>
serverless stacks
</ColorLink>
, and{" "}
<ColorLink href="https://xkcd.com/1319/" title='"Automation" on xkcd' lightColor="#ff6200" darkColor="#f46c16">
DevOps automation
</ColorLink>
.
</p>
<p>
I fell in love with{" "}
<p>
I fell in love with{" "}
<ColorLink
href="/previously/"
title="My Terrible, Horrible, No Good, Very Bad First Websites"
lightColor="#4169e1"
darkColor="#8ca9ff"
>
frontend web design
</ColorLink>{" "}
and{" "}
<ColorLink
href="/notes/my-first-code/"
title="Jake's Bulletin Board, circa 2003"
lightColor="#9932cc"
darkColor="#d588fb"
>
backend programming
</ColorLink>{" "}
back when my only source of income was{" "}
<span className="birthday">
<ColorLink
href="/previously/"
title="My Terrible, Horrible, No Good, Very Bad First Websites"
lightColor="#4169e1"
darkColor="#8ca9ff"
href="/birthday/"
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
lightColor="#e40088"
darkColor="#fd40b1"
>
frontend web design
</ColorLink>{" "}
and{" "}
<ColorLink
href="/notes/my-first-code/"
title="Jake's Bulletin Board, circa 2003"
lightColor="#9932cc"
darkColor="#d588fb"
>
backend programming
</ColorLink>{" "}
back when my only source of income was{" "}
<span className="birthday">
<ColorLink
href="/birthday/"
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
lightColor="#e40088"
darkColor="#fd40b1"
>
the Tooth Fairy
</ColorLink>
</span>
. <span className="quiet">I've improved a bit since then, I think...</span>
</p>
<p>
Over the years, some of my side projects{" "}
<ColorLink
href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/"
title='"Student designs iPhone JoeyTracker app" on The Tufts Daily'
lightColor="#ff1b1b"
darkColor="#f06060"
>
have
</ColorLink>{" "}
<ColorLink
href="/leo/"
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
lightColor="#f78200"
darkColor="#fd992a"
>
been
</ColorLink>{" "}
<ColorLink
href="https://www.google.com/books/edition/The_Facebook_Effect/RRUkLhyGZVgC?hl=en&gbpv=1&dq=%22jake%20jarvis%22&pg=PA226&printsec=frontcover&bsq=%22jake%20jarvis%22"
title='"The Facebook Effect" by David Kirkpatrick (Google Books)'
lightColor="#f2b702"
darkColor="#ffcc2e"
>
featured
</ColorLink>{" "}
<ColorLink
href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm"
title='"The new Facebook is on a roll" on CNN Money'
lightColor="#5ebd3e"
darkColor="#78df55"
>
by
</ColorLink>{" "}
<ColorLink
href="https://www.wired.com/2007/04/our-web-servers/"
title='"Middio: A YouTube Scraper for Major Label Music Videos" on Wired'
lightColor="#009cdf"
darkColor="#29bfff"
>
various
</ColorLink>{" "}
<ColorLink
href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/"
title='"Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom'
lightColor="#3e49bb"
darkColor="#7b87ff"
>
media
</ColorLink>{" "}
<ColorLink
href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/"
title='"Your Next Client? The CEO&#39;s Son" on Advertising Age'
lightColor="#973999"
darkColor="#db60dd"
>
outlets
the Tooth Fairy
</ColorLink>
.
</p>
</span>
. <span className="quiet">I've improved a bit since then, I think...</span>
</p>
<p>
You can find more of my work on{" "}
<ColorLink
href="https://github.com/jakejarvis"
title="Jake Jarvis on GitHub"
lightColor="#8d4eff"
darkColor="#a379f0"
>
GitHub
</ColorLink>{" "}
and{" "}
<ColorLink
href="https://www.linkedin.com/in/jakejarvis/"
title="Jake Jarvis on LinkedIn"
lightColor="#0073b1"
darkColor="#3b9dd2"
>
LinkedIn
</ColorLink>
. I'm always available to connect over{" "}
<ColorLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
email
</ColorLink>{" "}
<sup className="monospace pgp_key">
<ColorLink
href="/pubkey.asc"
title="My Public Key"
lightColor="#757575"
darkColor="#959595"
external={true}
>
<LockIcon className="icon" /> 2B0C 9CF2 51E6 9A39
</ColorLink>
</sup>
,{" "}
<ColorLink
href="https://twitter.com/jakejarvis"
title="Jake Jarvis on Twitter"
lightColor="#00acee"
darkColor="#3bc9ff"
>
Twitter
</ColorLink>
, or{" "}
<ColorLink
href="sms:+1-617-917-3737"
title="Send SMS to +1 (617) 917-3737"
lightColor="#6fcc01"
darkColor="#8edb34"
>
SMS
</ColorLink>{" "}
as well!
</p>
<p>
Over the years, some of my side projects{" "}
<ColorLink
href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/"
title='"Student designs iPhone JoeyTracker app" on The Tufts Daily'
lightColor="#ff1b1b"
darkColor="#f06060"
>
have
</ColorLink>{" "}
<ColorLink
href="/leo/"
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
lightColor="#f78200"
darkColor="#fd992a"
>
been
</ColorLink>{" "}
<ColorLink
href="https://www.google.com/books/edition/The_Facebook_Effect/RRUkLhyGZVgC?hl=en&gbpv=1&dq=%22jake%20jarvis%22&pg=PA226&printsec=frontcover&bsq=%22jake%20jarvis%22"
title='"The Facebook Effect" by David Kirkpatrick (Google Books)'
lightColor="#f2b702"
darkColor="#ffcc2e"
>
featured
</ColorLink>{" "}
<ColorLink
href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm"
title='"The new Facebook is on a roll" on CNN Money'
lightColor="#5ebd3e"
darkColor="#78df55"
>
by
</ColorLink>{" "}
<ColorLink
href="https://www.wired.com/2007/04/our-web-servers/"
title='"Middio: A YouTube Scraper for Major Label Music Videos" on Wired'
lightColor="#009cdf"
darkColor="#29bfff"
>
various
</ColorLink>{" "}
<ColorLink
href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/"
title='"Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom'
lightColor="#3e49bb"
darkColor="#7b87ff"
>
media
</ColorLink>{" "}
<ColorLink
href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/"
title='"Your Next Client? The CEO&#39;s Son" on Advertising Age'
lightColor="#973999"
darkColor="#db60dd"
>
outlets
</ColorLink>
.
</p>
<style jsx>{`
<p>
You can find more of my work on{" "}
<ColorLink
href="https://github.com/jakejarvis"
title="Jake Jarvis on GitHub"
lightColor="#8d4eff"
darkColor="#a379f0"
>
GitHub
</ColorLink>{" "}
and{" "}
<ColorLink
href="https://www.linkedin.com/in/jakejarvis/"
title="Jake Jarvis on LinkedIn"
lightColor="#0073b1"
darkColor="#3b9dd2"
>
LinkedIn
</ColorLink>
. I'm always available to connect over{" "}
<ColorLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
email
</ColorLink>{" "}
<sup className="monospace pgp_key">
<ColorLink href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external={true}>
<LockIcon className="icon" /> 2B0C 9CF2 51E6 9A39
</ColorLink>
</sup>
,{" "}
<ColorLink
href="https://twitter.com/jakejarvis"
title="Jake Jarvis on Twitter"
lightColor="#00acee"
darkColor="#3bc9ff"
>
Twitter
</ColorLink>
, or{" "}
<ColorLink
href="sms:+1-617-917-3737"
title="Send SMS to +1 (617) 917-3737"
lightColor="#6fcc01"
darkColor="#8edb34"
>
SMS
</ColorLink>{" "}
as well!
</p>
<style jsx>{`
h1 {
margin: 0 0 0.5em -0.03em;
font-size: 1.8em;
font-weight: 500;
letter-spacing: -0.01em;
}
h2 {
margin: 0.5em 0 0.5em -0.03em;
font-size: 1.35em;
font-weight: 400;
letter-spacing: -0.016em;
line-height: 1.4;
}
p {
margin: 0.85em 0;
letter-spacing: -0.004em;
line-height: 1.7;
}
p:last-of-type {
margin-bottom: 0;
}
.wave {
display: inline-block;
margin-left: 0.1em;
animation: wave 5s infinite;
animation-delay: 1s;
transform-origin: 65% 80%;
will-change: transform;
}
.pgp_key {
margin: 0 0.15em;
font-size: 0.65em;
word-spacing: -0.3em;
}
.pgp_key :global(a) {
background: none !important;
padding-bottom: 0;
}
.quiet {
color: var(--medium-light);
}
.birthday :global(a:hover) {
cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 36%27 width=%2720%27 height=%2720%27%3E%3Cg fill=%27none%27%3E%3Cpath fill=%27%23292F33%27 d=%27m2.651 6.073 26.275 26.276c.391.391 2.888-2.107 2.497-2.497L5.148 3.576c-.39-.391-2.888 2.107-2.497 2.497z%27/%3E%3Cpath fill=%27%2366757F%27 d=%27M29.442 31.23 3.146 4.934l.883-.883 26.296 26.296z%27/%3E%3Cpath fill=%27%23E1E8ED%27 d=%27m33.546 33.483-.412.412-.671.671a.967.967 0 0 1-.255.169.988.988 0 0 1-1.159-.169l-2.102-2.102.495-.495.883-.883 1.119-1.119 2.102 2.102a.999.999 0 0 1 0 1.414zM4.029 4.79l-.883.883-.495.495L.442 3.96a.988.988 0 0 1-.169-1.159.967.967 0 0 1 .169-.255l.671-.671.412-.412a.999.999 0 0 1 1.414 0l2.208 2.208L4.029 4.79z%27/%3E%3Cpath fill=%27%23F5F8FA%27 d=%27m30.325 30.497 2.809 2.809-.671.671a.967.967 0 0 1-.255.169l-2.767-2.767.884-.882zM3.146 5.084.273 2.211a.967.967 0 0 1 .169-.255l.671-.671 2.916 2.916-.883.883z%27/%3E%3Cpath fill=%27%23FFAC33%27 d=%27m27.897 10.219 1.542.571.6 2.2a.667.667 0 0 0 1.287 0l.6-2.2 1.542-.571a.665.665 0 0 0 0-1.25l-1.534-.568-.605-2.415a.667.667 0 0 0-1.293 0l-.605 2.415-1.534.568a.665.665 0 0 0 0 1.25m-16.936 9.628 2.61.966.966 2.61a1.103 1.103 0 0 0 2.07 0l.966-2.61 2.609-.966a1.103 1.103 0 0 0 0-2.07l-2.609-.966-.966-2.61a1.105 1.105 0 0 0-2.07 0l-.966 2.61-2.61.966a1.104 1.104 0 0 0 0 2.07M23.13 4.36l1.383.512.512 1.382a.585.585 0 0 0 1.096 0l.512-1.382 1.382-.512a.584.584 0 0 0 0-1.096l-1.382-.512-.512-1.382a.585.585 0 0 0-1.096 0l-.512 1.382-1.383.512a.585.585 0 0 0 0 1.096%27/%3E%3C/g%3E%3C/svg%3E")
0 0,
auto;
}
@media screen and (max-width: 768px) {
h1 {
margin: 0 0 0.5em -0.03em;
font-size: 1.8em;
font-weight: 500;
letter-spacing: -0.01em;
font-size: 1.5em;
}
h2 {
margin: 0.5em 0 0.5em -0.03em;
font-size: 1.35em;
font-weight: 400;
letter-spacing: -0.016em;
line-height: 1.4;
font-size: 1.2em;
}
p {
margin: 0.85em 0;
letter-spacing: -0.004em;
line-height: 1.7;
font-size: 0.95em;
}
p:last-of-type {
margin-bottom: 0;
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
.wave {
display: inline-block;
margin-left: 0.1em;
animation: wave 5s infinite;
animation-delay: 1s;
transform-origin: 65% 80%;
will-change: transform;
5% {
transform: rotate(14deg);
}
.pgp_key {
margin: 0 0.15em;
font-size: 0.65em;
word-spacing: -0.3em;
10% {
transform: rotate(-8deg);
}
.pgp_key :global(a) {
background: none !important;
padding-bottom: 0;
15% {
transform: rotate(14deg);
}
.quiet {
color: var(--medium-light);
20% {
transform: rotate(-4deg);
}
.birthday :global(a:hover) {
cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 36 36%27 width=%2720%27 height=%2720%27%3E%3Cg fill=%27none%27%3E%3Cpath fill=%27%23292F33%27 d=%27m2.651 6.073 26.275 26.276c.391.391 2.888-2.107 2.497-2.497L5.148 3.576c-.39-.391-2.888 2.107-2.497 2.497z%27/%3E%3Cpath fill=%27%2366757F%27 d=%27M29.442 31.23 3.146 4.934l.883-.883 26.296 26.296z%27/%3E%3Cpath fill=%27%23E1E8ED%27 d=%27m33.546 33.483-.412.412-.671.671a.967.967 0 0 1-.255.169.988.988 0 0 1-1.159-.169l-2.102-2.102.495-.495.883-.883 1.119-1.119 2.102 2.102a.999.999 0 0 1 0 1.414zM4.029 4.79l-.883.883-.495.495L.442 3.96a.988.988 0 0 1-.169-1.159.967.967 0 0 1 .169-.255l.671-.671.412-.412a.999.999 0 0 1 1.414 0l2.208 2.208L4.029 4.79z%27/%3E%3Cpath fill=%27%23F5F8FA%27 d=%27m30.325 30.497 2.809 2.809-.671.671a.967.967 0 0 1-.255.169l-2.767-2.767.884-.882zM3.146 5.084.273 2.211a.967.967 0 0 1 .169-.255l.671-.671 2.916 2.916-.883.883z%27/%3E%3Cpath fill=%27%23FFAC33%27 d=%27m27.897 10.219 1.542.571.6 2.2a.667.667 0 0 0 1.287 0l.6-2.2 1.542-.571a.665.665 0 0 0 0-1.25l-1.534-.568-.605-2.415a.667.667 0 0 0-1.293 0l-.605 2.415-1.534.568a.665.665 0 0 0 0 1.25m-16.936 9.628 2.61.966.966 2.61a1.103 1.103 0 0 0 2.07 0l.966-2.61 2.609-.966a1.103 1.103 0 0 0 0-2.07l-2.609-.966-.966-2.61a1.105 1.105 0 0 0-2.07 0l-.966 2.61-2.61.966a1.104 1.104 0 0 0 0 2.07M23.13 4.36l1.383.512.512 1.382a.585.585 0 0 0 1.096 0l.512-1.382 1.382-.512a.584.584 0 0 0 0-1.096l-1.382-.512-.512-1.382a.585.585 0 0 0-1.096 0l-.512 1.382-1.383.512a.585.585 0 0 0 0 1.096%27/%3E%3C/g%3E%3C/svg%3E")
0 0,
auto;
25% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg);
}
@media screen and (max-width: 768px) {
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
p {
font-size: 0.95em;
}
// pause for 3.5 out of 5 seconds
100% {
transform: rotate(0deg);
}
}
`}</style>
</Container>
</Layout>
);
@keyframes wave {
0% {
transform: rotate(0deg);
}
5% {
transform: rotate(14deg);
}
10% {
transform: rotate(-8deg);
}
15% {
transform: rotate(14deg);
}
20% {
transform: rotate(-4deg);
}
25% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg);
}
// pause for 3.5 out of 5 seconds
100% {
transform: rotate(0deg);
}
}
`}</style>
</Container>
</Layout>
);
}
export default Index;

138
pages/leo.tsx
View File

@ -6,74 +6,74 @@ import Video from "../components/video/FullPageVideo";
import thumbnail from "../public/static/images/leo/thumb.png";
export default function Leo() {
return (
<>
<Layout>
<Container
title='Facebook App on "The Lab with Leo Laporte"'
description="Powncer app featured in Leo Laporte's TechTV show."
>
<PageTitle title='Facebook App on "The Lab with Leo Laporte"' />
<Content>
<Video
url={[
{ src: "/static/images/leo/leo.webm", type: "video/webm" },
{ src: "/static/images/leo/leo.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
tracks: [
{
kind: "subtitles",
src: "/static/images/leo/subs.en.vtt",
srcLang: "en",
label: "English",
default: true,
},
],
const Leo = () => (
<>
<Layout>
<Container
title='Facebook App on "The Lab with Leo Laporte"'
description="Powncer app featured in Leo Laporte's TechTV show."
>
<PageTitle title='Facebook App on "The Lab with Leo Laporte"' />
<Content>
<Video
url={[
{ src: "/static/images/leo/leo.webm", type: "video/webm" },
{ src: "/static/images/leo/leo.mp4", type: "video/mp4" },
]}
config={{
// @ts-ignore
file: {
attributes: {
poster: thumbnail.src,
controlsList: "nodownload",
preload: "metadata",
autoPlay: false,
},
}}
controls={true}
/>
<p className="copyright">
Video is property of{" "}
<a
href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/"
target="_blank"
rel="noopener noreferrer"
>
G4techTV Canada
</a>{" "}
&amp;{" "}
<a href="https://leolaporte.com/" target="_blank" rel="noopener noreferrer">
Leo Laporte
</a>
. &copy; 2007 G4 Media, Inc.
</p>
<style jsx>{`
.copyright {
text-align: center;
font-size: 0.9em;
line-height: 1.8;
margin: 1.25em 1em 0.5em;
color: var(--medium-light);
}
tracks: [
{
kind: "subtitles",
src: "/static/images/leo/subs.en.vtt",
srcLang: "en",
label: "English",
default: true,
},
],
},
}}
controls={true}
/>
<p className="copyright">
Video is property of{" "}
<a
href="https://web.archive.org/web/20070511004304/http://www.g4techtv.ca/"
target="_blank"
rel="noopener noreferrer"
>
G4techTV Canada
</a>{" "}
&amp;{" "}
<a href="https://leolaporte.com/" target="_blank" rel="noopener noreferrer">
Leo Laporte
</a>
. &copy; 2007 G4 Media, Inc.
</p>
<style jsx>{`
.copyright {
text-align: center;
font-size: 0.9em;
line-height: 1.8;
margin: 1.25em 1em 0.5em;
color: var(--medium-light);
}
.copyright a {
font-weight: 700;
}
`}</style>
</Content>
</Container>
</Layout>
</>
);
}
.copyright a {
font-weight: 700;
}
`}</style>
</Content>
</Container>
</Layout>
</>
);
export default Leo;

910
pages/license.tsx
View File

@ -4,472 +4,466 @@ import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import { LicenseIcon } from "../components/icons";
export default function License() {
return (
<Layout>
<Container title="License">
<PageTitle
title={
<>
<LicenseIcon /> License
</>
}
/>
<Content>
<p>
Unless otherwise noted, content on this website is published under the{" "}
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">
<strong>Creative Commons Attribution 4.0 International Public License</strong>
</a>{" "}
(CC-BY-4.0), which means that you can copy, redistribute, remix, transform, and build upon the content for
any purpose as long as you give appropriate credit (such as a hyperlink to the original URL).
</p>
<p>
The{" "}
<a href="https://creativecommons.org/licenses/by/4.0/legalcode" target="_blank" rel="noopener noreferrer">
full license
</a>{" "}
is re-printed below.
</p>
<hr />
<h2>Creative Commons Attribution 4.0 International Public License</h2>
<p className="center">
<a
className="no-underline"
href="https://creativecommons.org/licenses/by/4.0/"
target="_blank"
rel="noopener noreferrer"
aria-label="Creative Commons Attribution 4.0"
>
<svg width="120" height="42">
<path d="M3.1.5l113.4.2c1.6 0 3-.2 3 3.2l-.1 37.3H.3V3.7C.3 2.1.4.5 3 .5z" fill="#aab2ab"></path>
<path d="M117.8 0H2.2C1 0 0 1 0 2.2v39.3c0 .3.2.5.5.5h119c.3 0 .5-.2.5-.5V2.2c0-1.2-1-2.2-2.2-2.2zM2.2 1h115.6c.6 0 1.2.6 1.2 1.2v27.3H36.2a17.8 17.8 0 01-31.1 0H1V2.2C1 1.6 1.5 1 2.1 1z"></path>
const License = () => (
<Layout>
<Container title="License">
<PageTitle
title={
<>
<LicenseIcon /> License
</>
}
/>
<Content>
<p>
Unless otherwise noted, content on this website is published under the{" "}
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">
<strong>Creative Commons Attribution 4.0 International Public License</strong>
</a>{" "}
(CC-BY-4.0), which means that you can copy, redistribute, remix, transform, and build upon the content for any
purpose as long as you give appropriate credit (such as a hyperlink to the original URL).
</p>
<p>
The{" "}
<a href="https://creativecommons.org/licenses/by/4.0/legalcode" target="_blank" rel="noopener noreferrer">
full license
</a>{" "}
is re-printed below.
</p>
<hr />
<h2>Creative Commons Attribution 4.0 International Public License</h2>
<p className="center">
<a
className="no-underline"
href="https://creativecommons.org/licenses/by/4.0/"
target="_blank"
rel="noopener noreferrer"
aria-label="Creative Commons Attribution 4.0"
>
<svg width="120" height="42">
<path d="M3.1.5l113.4.2c1.6 0 3-.2 3 3.2l-.1 37.3H.3V3.7C.3 2.1.4.5 3 .5z" fill="#aab2ab"></path>
<path d="M117.8 0H2.2C1 0 0 1 0 2.2v39.3c0 .3.2.5.5.5h119c.3 0 .5-.2.5-.5V2.2c0-1.2-1-2.2-2.2-2.2zM2.2 1h115.6c.6 0 1.2.6 1.2 1.2v27.3H36.2a17.8 17.8 0 01-31.1 0H1V2.2C1 1.6 1.5 1 2.1 1z"></path>
<path
d="M73.8 32.7l.9.1.6.3.5.5.1.8c0 .3 0 .6-.2.8l-.7.6c.4 0 .7.3 1 .6l.2 1-.1 1-.6.5-.7.4H70.7v-6.6h3.1zm-.2 2.7c.3 0 .5 0 .7-.2l.2-.6v-.3l-.3-.3H74l-.4-.1h-1.4v1.5h1.5zm.1 2.8h.4l.4-.1.2-.3v-.4c0-.4 0-.6-.2-.8l-.8-.2h-1.6v1.8h1.6zM76.5 32.7h1.6l1.6 2.7 1.5-2.7H83l-2.5 4.1v2.6h-1.5v-2.6l-2.4-4zM34.3 19.6a13.6 13.6 0 01-27.3 0 13.6 13.6 0 0127.3 0z"
fill="#fff"
></path>
<path d="M31.7 8.5c3 3 4.5 6.7 4.5 11.1a15.4 15.4 0 01-15.6 15.6 15 15 0 01-11-4.6 15 15 0 01-4.6-11c0-4.3 1.5-8 4.6-11.1 3-3 6.7-4.5 11-4.5 4.4 0 8 1.5 11.1 4.5zm-20 2a12.5 12.5 0 00-3.9 9.1c0 3.5 1.3 6.5 3.8 9s5.6 3.8 9 3.8c3.5 0 6.6-1.3 9.2-3.8a12 12 0 003.6-9c0-3.6-1.2-6.6-3.7-9a12.3 12.3 0 00-9-3.8c-3.6 0-6.6 1.2-9 3.7zm6.7 7.6c-.4-.9-1-1.3-1.8-1.3-1.4 0-2 1-2 2.8 0 1.8.6 2.8 2 2.8 1 0 1.6-.5 2-1.4l1.9 1a4.4 4.4 0 01-4.1 2.5c-1.4 0-2.5-.5-3.4-1.3-.8-.9-1.3-2-1.3-3.6 0-1.5.5-2.7 1.3-3.5 1-1 2-1.3 3.3-1.3 2 0 3.3.7 4.1 2.2l-2 1zm9 0c-.4-.9-1-1.3-1.8-1.3-1.4 0-2 1-2 2.8 0 1.8.6 2.8 2 2.8 1 0 1.6-.5 2-1.4l2 1a4.4 4.4 0 01-4.2 2.5c-1.4 0-2.5-.5-3.3-1.3-.9-.9-1.3-2-1.3-3.6 0-1.5.4-2.7 1.3-3.5.8-1 2-1.3 3.2-1.3 2 0 3.3.7 4.2 2.2l-2.1 1z"></path>
<g transform="matrix(.99377 0 0 .99367 -177.7 0)">
<circle cx="255.6" cy="15.3" r="10.8" fill="#fff"></circle>
<path d="M258.7 12.2c0-.4-.4-.8-.8-.8h-4.7c-.5 0-.8.4-.8.8V17h1.3v5.6h3.6V17h1.4v-4.8z"></path>
<circle cx="255.5" cy="9.2" r="1.6"></circle>
<path
d="M73.8 32.7l.9.1.6.3.5.5.1.8c0 .3 0 .6-.2.8l-.7.6c.4 0 .7.3 1 .6l.2 1-.1 1-.6.5-.7.4H70.7v-6.6h3.1zm-.2 2.7c.3 0 .5 0 .7-.2l.2-.6v-.3l-.3-.3H74l-.4-.1h-1.4v1.5h1.5zm.1 2.8h.4l.4-.1.2-.3v-.4c0-.4 0-.6-.2-.8l-.8-.2h-1.6v1.8h1.6zM76.5 32.7h1.6l1.6 2.7 1.5-2.7H83l-2.5 4.1v2.6h-1.5v-2.6l-2.4-4zM34.3 19.6a13.6 13.6 0 01-27.3 0 13.6 13.6 0 0127.3 0z"
fill="#fff"
clipRule="evenodd"
d="M255.5 3.4c-3.2 0-6 1.1-8.2 3.4A11.4 11.4 0 00244 15c0 3.2 1.1 6 3.4 8.2 2.3 2.3 5 3.4 8.2 3.4 3.2 0 6-1.1 8.4-3.4a11 11 0 003.3-8.2c0-3.3-1.1-6-3.4-8.3-2.2-2.3-5-3.4-8.3-3.4zm0 2.1c2.7 0 5 1 6.8 2.8a9.2 9.2 0 012.8 6.8c0 2.7-1 4.9-2.7 6.7-2 1.9-4.2 2.8-6.8 2.8-2.7 0-5-1-6.8-2.8A9.2 9.2 0 01246 15c0-2.6 1-4.9 2.8-6.8a9 9 0 016.8-2.8z"
fillRule="evenodd"
></path>
<path d="M31.7 8.5c3 3 4.5 6.7 4.5 11.1a15.4 15.4 0 01-15.6 15.6 15 15 0 01-11-4.6 15 15 0 01-4.6-11c0-4.3 1.5-8 4.6-11.1 3-3 6.7-4.5 11-4.5 4.4 0 8 1.5 11.1 4.5zm-20 2a12.5 12.5 0 00-3.9 9.1c0 3.5 1.3 6.5 3.8 9s5.6 3.8 9 3.8c3.5 0 6.6-1.3 9.2-3.8a12 12 0 003.6-9c0-3.6-1.2-6.6-3.7-9a12.3 12.3 0 00-9-3.8c-3.6 0-6.6 1.2-9 3.7zm6.7 7.6c-.4-.9-1-1.3-1.8-1.3-1.4 0-2 1-2 2.8 0 1.8.6 2.8 2 2.8 1 0 1.6-.5 2-1.4l1.9 1a4.4 4.4 0 01-4.1 2.5c-1.4 0-2.5-.5-3.4-1.3-.8-.9-1.3-2-1.3-3.6 0-1.5.5-2.7 1.3-3.5 1-1 2-1.3 3.3-1.3 2 0 3.3.7 4.1 2.2l-2 1zm9 0c-.4-.9-1-1.3-1.8-1.3-1.4 0-2 1-2 2.8 0 1.8.6 2.8 2 2.8 1 0 1.6-.5 2-1.4l2 1a4.4 4.4 0 01-4.2 2.5c-1.4 0-2.5-.5-3.3-1.3-.9-.9-1.3-2-1.3-3.6 0-1.5.4-2.7 1.3-3.5.8-1 2-1.3 3.2-1.3 2 0 3.3.7 4.2 2.2l-2.1 1z"></path>
<g transform="matrix(.99377 0 0 .99367 -177.7 0)">
<circle cx="255.6" cy="15.3" r="10.8" fill="#fff"></circle>
<path d="M258.7 12.2c0-.4-.4-.8-.8-.8h-4.7c-.5 0-.8.4-.8.8V17h1.3v5.6h3.6V17h1.4v-4.8z"></path>
<circle cx="255.5" cy="9.2" r="1.6"></circle>
<path
clipRule="evenodd"
d="M255.5 3.4c-3.2 0-6 1.1-8.2 3.4A11.4 11.4 0 00244 15c0 3.2 1.1 6 3.4 8.2 2.3 2.3 5 3.4 8.2 3.4 3.2 0 6-1.1 8.4-3.4a11 11 0 003.3-8.2c0-3.3-1.1-6-3.4-8.3-2.2-2.3-5-3.4-8.3-3.4zm0 2.1c2.7 0 5 1 6.8 2.8a9.2 9.2 0 012.8 6.8c0 2.7-1 4.9-2.7 6.7-2 1.9-4.2 2.8-6.8 2.8-2.7 0-5-1-6.8-2.8A9.2 9.2 0 01246 15c0-2.6 1-4.9 2.8-6.8a9 9 0 016.8-2.8z"
fillRule="evenodd"
></path>
</g>
</svg>
</a>
</g>
</svg>
</a>
</p>
<blockquote>
<p>
<em>
Creative Commons Corporation ("Creative Commons") is not a law firm and does not provide legal services or
legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other
relationship. Creative Commons makes its licenses and related information available on an "as-is" basis.
Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and
conditions, or any related information. Creative Commons disclaims all liability for damages resulting
from their use to the fullest extent possible.
</em>
</p>
<blockquote>
</blockquote>
<h3>Using Creative Commons Public Licenses</h3>
<p>
Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights
holders may use to share original works of authorship and other material subject to copyright and certain
other rights specified in the public license below. The following considerations are for informational
purposes only, are not exhaustive, and do not form part of our licenses.
</p>
<ul>
<li>
<p>
<em>
Creative Commons Corporation ("Creative Commons") is not a law firm and does not provide legal services
or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or
other relationship. Creative Commons makes its licenses and related information available on an "as-is"
basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their
terms and conditions, or any related information. Creative Commons disclaims all liability for damages
resulting from their use to the fullest extent possible.
</em>
</p>
</blockquote>
<h3>Using Creative Commons Public Licenses</h3>
<p>
Creative Commons public licenses provide a standard set of terms and conditions that creators and other
rights holders may use to share original works of authorship and other material subject to copyright and
certain other rights specified in the public license below. The following considerations are for
informational purposes only, are not exhaustive, and do not form part of our licenses.
</p>
<ul>
<li>
<p>
<strong>Considerations for licensors:</strong> Our public licenses are intended for use by those
authorized to give the public permission to use material in ways otherwise restricted by copyright and
certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and
conditions of the license they choose before applying it. Licensors should also secure all rights
necessary before applying our licenses so that the public can reuse the material as expected. Licensors
should clearly mark any material not subject to the license. This includes other CC-licensed material,
or material used under an exception or limitation to copyright.{" "}
<a
href="https://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors"
target="_blank"
rel="noopener noreferrer"
>
More considerations for licensors
</a>
.
</p>
</li>
<li>
<p>
<strong>Considerations for the public:</strong> By using one of our public licenses, a licensor grants
the public permission to use the licensed material under specified terms and conditions. If the
licensor's permission is not necessary for any reason–for example, because of any applicable exception
or limitation to copyright–then that use is not regulated by the license. Our licenses grant only
permissions under copyright and certain other rights that a licensor has authority to grant. Use of the
licensed material may still be restricted for other reasons, including because others have copyright or
other rights in the material. A licensor may make special requests, such as asking that all changes be
marked or described. Although not required by our licenses, you are encouraged to respect those requests
where reasonable.{" "}
<a
href="https://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees"
target="_blank"
rel="noopener noreferrer"
>
More considerations for the public
</a>
.
</p>
</li>
</ul>
<h3>Licensed Rights</h3>
<p>
By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and
conditions of this Creative Commons Attribution 4.0 International Public License ("Public License"). To the
extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in
consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in
consideration of benefits the Licensor receives from making the Licensed Material available under these
terms and conditions.
</p>
<h3>Section 1 – Definitions.</h3>
<p>
a. <strong>Adapted Material</strong> means material subject to Copyright and Similar Rights that is derived
from or based upon the Licensed Material and in which the Licensed Material is translated, altered,
arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and
Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a
musical work, performance, or sound recording, Adapted Material is always produced where the Licensed
Material is synched in timed relation with a moving image.
</p>
<p>
b. <strong>Adapter's License</strong> means the license You apply to Your Copyright and Similar Rights in
Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
</p>
<p>
c. <strong>Copyright and Similar Rights</strong> means copyright and/or similar rights closely related to
copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License,
the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
</p>
<p>
d. <strong>Effective Technological Measures</strong> means those measures that, in the absence of proper
authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international agreements.
</p>
<p>
e. <strong>Exceptions and Limitations</strong> means fair use, fair dealing, and/or any other exception or
limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
</p>
<p>
f. <strong>Licensed Material</strong> means the artistic or literary work, database, or other material to
which the Licensor applied this Public License.
</p>
<p>
g. <strong>Licensed Rights</strong> means the rights granted to You subject to the terms and conditions of
this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license.
</p>
<p>
h. <strong>Licensor</strong> means the individual(s) or entity(ies) granting rights under this Public
License.
</p>
<p>
i. <strong>Share</strong> means to provide material to the public by any means or process that requires
permission under the Licensed Rights, such as reproduction, public display, public performance,
distribution, dissemination, communication, or importation, and to make material available to the public
including in ways that members of the public may access the material from a place and at a time individually
chosen by them.
</p>
<p>
j. <strong>Sui Generis Database Rights</strong> means rights other than copyright resulting from Directive
96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
</p>
<p>
k. <strong>You</strong> means the individual or entity exercising the Licensed Rights under this Public
License. <strong>Your</strong> has a corresponding meaning.
</p>
<h3>Section 2 – Scope.</h3>
<p>
a.{" "}
<em>
<strong>License grant.</strong>
</em>
</p>
<ol>
<li>
<p>
Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide,
royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in
the Licensed Material to:
</p>
<p>A. reproduce and Share the Licensed Material, in whole or in part; and</p>
<p>B. produce, reproduce, and Share Adapted Material.</p>
</li>
<li>
<p>
<strong>Exceptions and Limitations.</strong> For the avoidance of doubt, where Exceptions and
Limitations apply to Your use, this Public License does not apply, and You do not need to comply with
its terms and conditions.
</p>
</li>
<li>
<p>
<strong>Term.</strong> The term of this Public License is specified in Section 6(a).
</p>
</li>
<li>
<p>
<strong>Media and formats; technical modifications allowed.</strong> The Licensor authorizes You to
exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to
make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any
right or authority to forbid You from making technical modifications necessary to exercise the Licensed
Rights, including technical modifications necessary to circumvent Effective Technological Measures. For
purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never
produces Adapted Material.
</p>
</li>
<li>
<p>
<strong>Downstream recipients.</strong>
</p>
<p>
A. <strong>Offer from the Licensor – Licensed Material.</strong> Every recipient of the Licensed
Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the
terms and conditions of this Public License.
</p>
<p>
B. <strong>No downstream restrictions.</strong> You may not offer or impose any additional or different
terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing
so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
</p>
</li>
<li>
<p>
<strong>No endorsement.</strong> Nothing in this Public License constitutes or may be construed as
permission to assert or imply that You are, or that Your use of the Licensed Material is, connected
with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to
receive attribution as provided in Section 3(a)(1)(A)(i).
</p>
</li>
</ol>
<p>
b.{" "}
<em>
<strong>Other rights.</strong>
</em>
</p>
<ol>
<li>
<p>
Moral rights, such as the right of integrity, are not licensed under this Public License, nor are
publicity, privacy, and/or other similar personality rights; however, to the extent possible, the
Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent
necessary to allow You to exercise the Licensed Rights, but not otherwise.
</p>
</li>
<li>
<p>Patent and trademark rights are not licensed under this Public License.</p>
</li>
<li>
<p>
To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of
the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable
statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right
to collect such royalties.
</p>
</li>
</ol>
<h3>Section 3 – License Conditions.</h3>
<p>Your exercise of the Licensed Rights is expressly made subject to the following conditions.</p>
<p>
a.{" "}
<em>
<strong>Attribution.</strong>
</em>
</p>
<ol>
<li>
<p>If You Share the Licensed Material (including in modified form), You must:</p>
<p>A. retain the following if it is supplied by the Licensor with the Licensed Material:</p>
<p>
i. identification of the creator(s) of the Licensed Material and any others designated to receive
attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
</p>
<p>ii. a copyright notice;</p>
<p>iii. a notice that refers to this Public License;</p>
<p>iv. a notice that refers to the disclaimer of warranties;</p>
<p>v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;</p>
<p>
B. indicate if You modified the Licensed Material and retain an indication of any previous
modifications; and
</p>
<p>
C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the
URI or hyperlink to, this Public License.
</p>
</li>
<li>
<p>
You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means,
and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the
conditions by providing a URI or hyperlink to a resource that includes the required information.
</p>
</li>
<li>
<p>
If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to
the extent reasonably practicable.
</p>
</li>
<li>
<p>
If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients
of the Adapted Material from complying with this Public License.
</p>
</li>
</ol>
<h3>Section 4 – Sui Generis Database Rights.</h3>
<p>
Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed
Material:
</p>
<p>
a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share
all or a substantial portion of the contents of the database;
</p>
<p>
b. if You include all or a substantial portion of the database contents in a database in which You have Sui
Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its
individual contents) is Adapted Material; and
</p>
<p>
c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the
contents of the database.
</p>
<p>
For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this
Public License where the Licensed Rights include other Copyright and Similar Rights.
</p>
<h3>Section 5 – Disclaimer of Warranties and Limitation of Liability.</h3>
<p>
a.{" "}
<strong>
Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the
Licensed Material as-is and as-available, and makes no representations or warranties of any kind
concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without
limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement,
absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known
or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may
not apply to You.
</strong>
</p>
<p>
b.{" "}
<strong>
To the extent possible, in no event will the Licensor be liable to You on any legal theory (including,
without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential,
punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or
use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses,
costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this
limitation may not apply to You.
</strong>
</p>
<p>
c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner
that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
</p>
<h3>Section 6 – Term and Termination.</h3>
<p>
a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if
You fail to comply with this Public License, then Your rights under this Public License terminate
automatically.
</p>
<p>b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:</p>
<ol>
<li>
<p>
automatically as of the date the violation is cured, provided it is cured within 30 days of Your
discovery of the violation; or
</p>
</li>
<li>
<p>upon express reinstatement by the Licensor.</p>
</li>
</ol>
<p>
For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek
remedies for Your violations of this Public License.
</p>
<p>
c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or
conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this
Public License.
</p>
<p>d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.</p>
<h3>Section 7 – Other Terms and Conditions.</h3>
<p>
a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You
unless expressly agreed.
</p>
<p>
b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are
separate from and independent of the terms and conditions of this Public License.
</p>
<h3>Section 8 – Interpretation.</h3>
<p>
a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit,
restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without
permission under this Public License.
</p>
<p>
b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be
automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be
reformed, it shall be severed from this Public License without affecting the enforceability of the remaining
terms and conditions.
</p>
<p>
c. No term or condition of this Public License will be waived and no failure to comply consented to unless
expressly agreed to by the Licensor.
</p>
<p>
d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any
privileges and immunities that apply to the Licensor or You, including from the legal processes of any
jurisdiction or authority.
</p>
<blockquote>
<p>
Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to
apply one of its public licenses to material it publishes and in those instances will be considered the
"Licensor." The text of the Creative Commons public licenses is dedicated to the public domain under the{" "}
<strong>Considerations for licensors:</strong> Our public licenses are intended for use by those
authorized to give the public permission to use material in ways otherwise restricted by copyright and
certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and
conditions of the license they choose before applying it. Licensors should also secure all rights
necessary before applying our licenses so that the public can reuse the material as expected. Licensors
should clearly mark any material not subject to the license. This includes other CC-licensed material, or
material used under an exception or limitation to copyright.{" "}
<a
href="https://creativecommons.org/publicdomain/zero/1.0/legalcode"
href="https://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors"
target="_blank"
rel="noopener noreferrer"
>
<em>CC0 Public Domain Dedication</em>
</a>
. Except for the limited purpose of indicating that material is shared under a Creative Commons public
license or as otherwise permitted by the Creative Commons policies published at{" "}
<a href="https://creativecommons.org/policies" target="_blank" rel="noopener noreferrer">
creativecommons.org/policies
</a>
, Creative Commons does not authorize the use of the trademark "Creative Commons" or any other trademark
or logo of Creative Commons without its prior written consent including, without limitation, in connection
with any unauthorized modifications to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this
paragraph does not form part of the public licenses.
</p>
<p>
Creative Commons may be contacted at{" "}
<a href="https://creativecommons.org/" target="_blank" rel="noopener noreferrer">
creativecommons.org
More considerations for licensors
</a>
.
</p>
</blockquote>
</Content>
</Container>
</Layout>
);
}
</li>
<li>
<p>
<strong>Considerations for the public:</strong> By using one of our public licenses, a licensor grants the
public permission to use the licensed material under specified terms and conditions. If the licensor's
permission is not necessary for any reason–for example, because of any applicable exception or limitation
to copyright–then that use is not regulated by the license. Our licenses grant only permissions under
copyright and certain other rights that a licensor has authority to grant. Use of the licensed material
may still be restricted for other reasons, including because others have copyright or other rights in the
material. A licensor may make special requests, such as asking that all changes be marked or described.
Although not required by our licenses, you are encouraged to respect those requests where reasonable.{" "}
<a
href="https://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees"
target="_blank"
rel="noopener noreferrer"
>
More considerations for the public
</a>
.
</p>
</li>
</ul>
<h3>Licensed Rights</h3>
<p>
By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and
conditions of this Creative Commons Attribution 4.0 International Public License ("Public License"). To the
extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in
consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in
consideration of benefits the Licensor receives from making the Licensed Material available under these terms
and conditions.
</p>
<h3>Section 1 – Definitions.</h3>
<p>
a. <strong>Adapted Material</strong> means material subject to Copyright and Similar Rights that is derived
from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged,
transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights
held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work,
performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in
timed relation with a moving image.
</p>
<p>
b. <strong>Adapter's License</strong> means the license You apply to Your Copyright and Similar Rights in Your
contributions to Adapted Material in accordance with the terms and conditions of this Public License.
</p>
<p>
c. <strong>Copyright and Similar Rights</strong> means copyright and/or similar rights closely related to
copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the
rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
</p>
<p>
d. <strong>Effective Technological Measures</strong> means those measures that, in the absence of proper
authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international agreements.
</p>
<p>
e. <strong>Exceptions and Limitations</strong> means fair use, fair dealing, and/or any other exception or
limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
</p>
<p>
f. <strong>Licensed Material</strong> means the artistic or literary work, database, or other material to
which the Licensor applied this Public License.
</p>
<p>
g. <strong>Licensed Rights</strong> means the rights granted to You subject to the terms and conditions of
this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license.
</p>
<p>
h. <strong>Licensor</strong> means the individual(s) or entity(ies) granting rights under this Public License.
</p>
<p>
i. <strong>Share</strong> means to provide material to the public by any means or process that requires
permission under the Licensed Rights, such as reproduction, public display, public performance, distribution,
dissemination, communication, or importation, and to make material available to the public including in ways
that members of the public may access the material from a place and at a time individually chosen by them.
</p>
<p>
j. <strong>Sui Generis Database Rights</strong> means rights other than copyright resulting from Directive
96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
</p>
<p>
k. <strong>You</strong> means the individual or entity exercising the Licensed Rights under this Public
License. <strong>Your</strong> has a corresponding meaning.
</p>
<h3>Section 2 – Scope.</h3>
<p>
a.{" "}
<em>
<strong>License grant.</strong>
</em>
</p>
<ol>
<li>
<p>
Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide,
royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the
Licensed Material to:
</p>
<p>A. reproduce and Share the Licensed Material, in whole or in part; and</p>
<p>B. produce, reproduce, and Share Adapted Material.</p>
</li>
<li>
<p>
<strong>Exceptions and Limitations.</strong> For the avoidance of doubt, where Exceptions and Limitations
apply to Your use, this Public License does not apply, and You do not need to comply with its terms and
conditions.
</p>
</li>
<li>
<p>
<strong>Term.</strong> The term of this Public License is specified in Section 6(a).
</p>
</li>
<li>
<p>
<strong>Media and formats; technical modifications allowed.</strong> The Licensor authorizes You to
exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make
technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or
authority to forbid You from making technical modifications necessary to exercise the Licensed Rights,
including technical modifications necessary to circumvent Effective Technological Measures. For purposes
of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces
Adapted Material.
</p>
</li>
<li>
<p>
<strong>Downstream recipients.</strong>
</p>
<p>
A. <strong>Offer from the Licensor – Licensed Material.</strong> Every recipient of the Licensed Material
automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and
conditions of this Public License.
</p>
<p>
B. <strong>No downstream restrictions.</strong> You may not offer or impose any additional or different
terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing
so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
</p>
</li>
<li>
<p>
<strong>No endorsement.</strong> Nothing in this Public License constitutes or may be construed as
permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with,
or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive
attribution as provided in Section 3(a)(1)(A)(i).
</p>
</li>
</ol>
<p>
b.{" "}
<em>
<strong>Other rights.</strong>
</em>
</p>
<ol>
<li>
<p>
Moral rights, such as the right of integrity, are not licensed under this Public License, nor are
publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor
waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to
allow You to exercise the Licensed Rights, but not otherwise.
</p>
</li>
<li>
<p>Patent and trademark rights are not licensed under this Public License.</p>
</li>
<li>
<p>
To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of
the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable
statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to
collect such royalties.
</p>
</li>
</ol>
<h3>Section 3 – License Conditions.</h3>
<p>Your exercise of the Licensed Rights is expressly made subject to the following conditions.</p>
<p>
a.{" "}
<em>
<strong>Attribution.</strong>
</em>
</p>
<ol>
<li>
<p>If You Share the Licensed Material (including in modified form), You must:</p>
<p>A. retain the following if it is supplied by the Licensor with the Licensed Material:</p>
<p>
i. identification of the creator(s) of the Licensed Material and any others designated to receive
attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
</p>
<p>ii. a copyright notice;</p>
<p>iii. a notice that refers to this Public License;</p>
<p>iv. a notice that refers to the disclaimer of warranties;</p>
<p>v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;</p>
<p>
B. indicate if You modified the Licensed Material and retain an indication of any previous modifications;
and
</p>
<p>
C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the
URI or hyperlink to, this Public License.
</p>
</li>
<li>
<p>
You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and
context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the
conditions by providing a URI or hyperlink to a resource that includes the required information.
</p>
</li>
<li>
<p>
If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the
extent reasonably practicable.
</p>
</li>
<li>
<p>
If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of
the Adapted Material from complying with this Public License.
</p>
</li>
</ol>
<h3>Section 4 – Sui Generis Database Rights.</h3>
<p>
Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
</p>
<p>
a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share
all or a substantial portion of the contents of the database;
</p>
<p>
b. if You include all or a substantial portion of the database contents in a database in which You have Sui
Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its
individual contents) is Adapted Material; and
</p>
<p>
c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the
contents of the database.
</p>
<p>
For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public
License where the Licensed Rights include other Copyright and Similar Rights.
</p>
<h3>Section 5 – Disclaimer of Warranties and Limitation of Liability.</h3>
<p>
a.{" "}
<strong>
Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the
Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning
the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation,
warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent
or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable.
Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.
</strong>
</p>
<p>
b.{" "}
<strong>
To the extent possible, in no event will the Licensor be liable to You on any legal theory (including,
without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential,
punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use
of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs,
expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may
not apply to You.
</strong>
</p>
<p>
c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner
that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
</p>
<h3>Section 6 – Term and Termination.</h3>
<p>
a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You
fail to comply with this Public License, then Your rights under this Public License terminate automatically.
</p>
<p>b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:</p>
<ol>
<li>
<p>
automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery
of the violation; or
</p>
</li>
<li>
<p>upon express reinstatement by the Licensor.</p>
</li>
</ol>
<p>
For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies
for Your violations of this Public License.
</p>
<p>
c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or
conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this
Public License.
</p>
<p>d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.</p>
<h3>Section 7 – Other Terms and Conditions.</h3>
<p>
a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You
unless expressly agreed.
</p>
<p>
b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are
separate from and independent of the terms and conditions of this Public License.
</p>
<h3>Section 8 – Interpretation.</h3>
<p>
a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit,
restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without
permission under this Public License.
</p>
<p>
b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be
automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be
reformed, it shall be severed from this Public License without affecting the enforceability of the remaining
terms and conditions.
</p>
<p>
c. No term or condition of this Public License will be waived and no failure to comply consented to unless
expressly agreed to by the Licensor.
</p>
<p>
d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any
privileges and immunities that apply to the Licensor or You, including from the legal processes of any
jurisdiction or authority.
</p>
<blockquote>
<p>
Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply
one of its public licenses to material it publishes and in those instances will be considered the
"Licensor." The text of the Creative Commons public licenses is dedicated to the public domain under the{" "}
<a
href="https://creativecommons.org/publicdomain/zero/1.0/legalcode"
target="_blank"
rel="noopener noreferrer"
>
<em>CC0 Public Domain Dedication</em>
</a>
. Except for the limited purpose of indicating that material is shared under a Creative Commons public
license or as otherwise permitted by the Creative Commons policies published at{" "}
<a href="https://creativecommons.org/policies" target="_blank" rel="noopener noreferrer">
creativecommons.org/policies
</a>
, Creative Commons does not authorize the use of the trademark "Creative Commons" or any other trademark or
logo of Creative Commons without its prior written consent including, without limitation, in connection with
any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or
agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form
part of the public licenses.
</p>
<p>
Creative Commons may be contacted at{" "}
<a href="https://creativecommons.org/" target="_blank" rel="noopener noreferrer">
creativecommons.org
</a>
.
</p>
</blockquote>
</Content>
</Container>
</Layout>
);
export default License;

92
pages/notes/[slug].tsx
View File

@ -19,54 +19,52 @@ import rehypeExternalLinks from "rehype-external-links";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
export default function Page({ source, frontMatter, slug }) {
return (
<>
<NextSeo
title={frontMatter.title}
description={frontMatter.description}
openGraph={{
title: frontMatter.title,
type: "article",
article: {
publishedTime: frontMatter.date,
const Note = ({ source, frontMatter, slug }) => (
<>
<NextSeo
title={frontMatter.title}
description={frontMatter.description}
openGraph={{
title: frontMatter.title,
type: "article",
article: {
publishedTime: frontMatter.date,
},
images: [
{
url: `${config.baseURL}${frontMatter.image}`,
alt: frontMatter.title,
},
images: [
{
url: `${config.baseURL}${frontMatter.image}`,
alt: frontMatter.title,
},
],
}}
twitter={{
handle: `@${config.twitterHandle}`,
site: `@${config.twitterHandle}`,
cardType: "summary_large_image",
}}
/>
<ArticleJsonLd
url={`${config.baseURL}/notes/${slug}`}
title={frontMatter.title}
description={frontMatter.description}
datePublished={frontMatter.date}
dateModified={frontMatter.date}
images={[`${config.baseURL}${frontMatter.image}`]}
authorName={[config.authorName]}
publisherName={config.siteName}
publisherLogo={`${config.baseURL}/static/images/me.jpg`}
/>
],
}}
twitter={{
handle: `@${config.twitterHandle}`,
site: `@${config.twitterHandle}`,
cardType: "summary_large_image",
}}
/>
<ArticleJsonLd
url={`${config.baseURL}/notes/${slug}`}
title={frontMatter.title}
description={frontMatter.description}
datePublished={frontMatter.date}
dateModified={frontMatter.date}
images={[`${config.baseURL}${frontMatter.image}`]}
authorName={[config.authorName]}
publisherName={config.siteName}
publisherLogo={`${config.baseURL}/static/images/me.jpg`}
/>
<Layout>
<Container>
<Meta {...frontMatter} slug={slug} />
<Content>
<MDXRemote {...source} components={mdxComponents} />
</Content>
</Container>
</Layout>
</>
);
}
<Layout>
<Container>
<Meta {...frontMatter} slug={slug} />
<Content>
<MDXRemote {...source} components={mdxComponents} />
</Content>
</Container>
</Layout>
</>
);
export const getStaticProps: GetStaticProps = async ({ params }) => {
const filePath = path.join(NOTES_PATH, `${params.slug}.mdx`);
@ -111,3 +109,5 @@ export const getStaticPaths: GetStaticPaths = async () => {
fallback: false,
};
};
export default Note;

20
pages/notes/index.tsx
View File

@ -6,17 +6,13 @@ import List from "../../components/notes/List";
import { getAllNotes } from "../../lib/parse-notes";
import type { GetStaticProps } from "next";
export default function Notes({ notesByYear }) {
return (
<>
<Layout>
<Container title="Notes" description="Recent posts by Jake Jarvis.">
<List notesByYear={notesByYear} />
</Container>
</Layout>
</>
);
}
const Notes = ({ notesByYear }) => (
<Layout>
<Container title="Notes" description="Recent posts by Jake Jarvis.">
<List notesByYear={notesByYear} />
</Container>
</Layout>
);
export const getStaticProps: GetStaticProps = async () => {
const allNotes = getAllNotes(["date", "slug", "title"]);
@ -30,3 +26,5 @@ export const getStaticProps: GetStaticProps = async () => {
},
};
};
export default Notes;

426
pages/previously.tsx
View File

@ -21,229 +21,229 @@ import img_2009_07 from "../public/static/images/previously/2009_07.png";
import img_2012_09 from "../public/static/images/previously/2012_09.png";
import img_2018_04 from "../public/static/images/previously/2018_04.png";
export default function Previously() {
return (
<>
<Layout>
<Container
title="Previously on..."
description="An incredibly embarrassing and somewhat painful down of this site's memory lane..."
>
<PageTitle
title={
<>
<FloppyIcon /> Previously on...
</>
}
/>
<Content>
<figure>
const Previously = () => (
<>
<Layout>
<Container
title="Previously on..."
description="An incredibly embarrassing and somewhat painful down of this site's memory lane..."
>
<PageTitle
title={
<>
<FloppyIcon /> Previously on...
</>
}
/>
<Content>
<figure>
<a
className="no-underline"
href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
target="_blank"
rel="noopener noreferrer"
>
<Image src={img_wayback} placeholder="blur" alt="Timeline of this website's past." />
</a>
<figcaption>
...the{" "}
<a
className="no-underline"
href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
target="_blank"
rel="noopener noreferrer"
>
<Image src={img_wayback} placeholder="blur" alt="Timeline of this website's past." />
Cringey Chronicles&trade;
</a>{" "}
of this website's past.
</figcaption>
</figure>
<hr />
<p>
<SirenIcon /> <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
<code>
color: <span className="limegreen">limegreen</span>
</code>
...{" "}
<a href="https://y2k.app/" target="_blank" rel="noopener noreferrer">
Click for the{" "}
<strong>
<em>FULL</em>
</strong>{" "}
experience anyway.
</a>
</p>
<figure>
<iframe
className="y2k_frame"
src="https://jakejarvis.github.io/my-first-website/"
title="My Terrible, Horrible, No Good, Very Bad First Website"
></iframe>
<figcaption>
November 2001 (
<a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
archived source
</a>
<figcaption>
...the{" "}
<a
href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
target="_blank"
rel="noopener noreferrer"
>
Cringey Chronicles&trade;
</a>{" "}
of this website's past.
</figcaption>
</figure>
)
</figcaption>
</figure>
<hr />
<hr />
<p>
<SirenIcon /> <strong>Trigger warning:</strong> marquees, Comic Sans MS, popups,{" "}
<code>
color: <span className="limegreen">limegreen</span>
</code>
...{" "}
<a href="https://y2k.app/" target="_blank" rel="noopener noreferrer">
Click for the{" "}
<strong>
<em>FULL</em>
</strong>{" "}
experience anyway.
<figure>
<Image src={img_2002_02} placeholder="blur" alt="February 2002" />
<figcaption>February 2002</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2002_10} placeholder="blur" alt="October 2002" />
<figcaption>October 2002</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2003_08} placeholder="blur" alt="August 2003" />
<figcaption>August 2003</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2004_11} placeholder="blur" alt="November 2004" />
<figcaption>November 2004</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2006_04} placeholder="blur" alt="April 2006" />
<figcaption>April 2006</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2006_05} placeholder="blur" alt="May 2006" />
<figcaption>May 2006</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2007_01} placeholder="blur" alt="January 2007" />
<figcaption>January 2007</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2007_04} placeholder="blur" alt="April 2007" />
<figcaption>April 2007</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2007_05} placeholder="blur" alt="May 2007" />
<figcaption>May 2007</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2009_07} placeholder="blur" alt="July 2009" />
<figcaption>July 2009</figcaption>
</figure>
<hr />
<figure>
<a
className="no-underline"
href="https://github.com/jakejarvis/jarv.is/tree/v1"
target="_blank"
rel="noopener noreferrer"
>
<Image src={img_2012_09} placeholder="blur" alt="September 2012" />
</a>
<figcaption>
September 2012 (
<a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
archived source
</a>
</p>
<figure>
<iframe
className="y2k_frame"
src="https://jakejarvis.github.io/my-first-website/"
title="My Terrible, Horrible, No Good, Very Bad First Website"
></iframe>
<figcaption>
November 2001 (
<a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
archived source
</a>
)
</figcaption>
</figure>
)
</figcaption>
</figure>
<hr />
<hr />
<figure>
<Image src={img_2002_02} placeholder="blur" alt="February 2002" />
<figcaption>February 2002</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2002_10} placeholder="blur" alt="October 2002" />
<figcaption>October 2002</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2003_08} placeholder="blur" alt="August 2003" />
<figcaption>August 2003</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2004_11} placeholder="blur" alt="November 2004" />
<figcaption>November 2004</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2006_04} placeholder="blur" alt="April 2006" />
<figcaption>April 2006</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2006_05} placeholder="blur" alt="May 2006" />
<figcaption>May 2006</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2007_01} placeholder="blur" alt="January 2007" />
<figcaption>January 2007</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2007_04} placeholder="blur" alt="April 2007" />
<figcaption>April 2007</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2007_05} placeholder="blur" alt="May 2007" />
<figcaption>May 2007</figcaption>
</figure>
<hr />
<figure>
<Image src={img_2009_07} placeholder="blur" alt="July 2009" />
<figcaption>July 2009</figcaption>
</figure>
<hr />
<figure>
<a
className="no-underline"
href="https://github.com/jakejarvis/jarv.is/tree/v1"
target="_blank"
rel="noopener noreferrer"
>
<Image src={img_2012_09} placeholder="blur" alt="September 2012" />
<figure>
<a
className="no-underline"
href="https://github.com/jakejarvis/jarv.is/tree/v2"
target="_blank"
rel="noopener noreferrer"
>
<Image src={img_2018_04} placeholder="blur" alt="April 2018" />
</a>
<figcaption>
April 2018 (
<a href="https://github.com/jakejarvis/jarv.is/tree/v2" target="_blank" rel="noopener noreferrer">
archived source
</a>
<figcaption>
September 2012 (
<a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
archived source
</a>
)
</figcaption>
</figure>
)
</figcaption>
</figure>
</Content>
</Container>
</Layout>
<style jsx global>{`
body {
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;
font-weight: 600 !important;
}
header nav a span {
font-size: 1.1em !important;
font-weight: 700 !important;
}
header nav > a span:nth-of-type(2) {
font-size: 1.4em !important;
font-weight: 700 !important;
}
main > div > div {
font-size: 1.1em !important;
text-align: center;
}
main > div > div p {
font-size: 0.95em;
}
main > div > div strong {
font-weight: 900;
}
main > div > div code {
font-size: 0.85em;
font-weight: 400;
}
main > div > div figure:last-of-type {
margin-bottom: 0;
}
footer > div {
font-size: 0.95em !important;
}
.y2k_frame {
width: 100%;
height: 500px;
border: 2px solid #e3d18c;
}
.limegreen {
color: #32cd32;
}
`}</style>
</>
);
<hr />
<figure>
<a
className="no-underline"
href="https://github.com/jakejarvis/jarv.is/tree/v2"
target="_blank"
rel="noopener noreferrer"
>
<Image src={img_2018_04} placeholder="blur" alt="April 2018" />
</a>
<figcaption>
April 2018 (
<a href="https://github.com/jakejarvis/jarv.is/tree/v2" target="_blank" rel="noopener noreferrer">
archived source
</a>
)
</figcaption>
</figure>
</Content>
</Container>
</Layout>
<style jsx global>{`
body {
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;
font-weight: 600 !important;
}
header nav a span {
font-size: 1.1em !important;
font-weight: 700 !important;
}
header nav > a span:nth-of-type(2) {
font-size: 1.4em !important;
font-weight: 700 !important;
}
main > div > div {
font-size: 1.1em !important;
text-align: center;
}
main > div > div p {
font-size: 0.95em;
}
main > div > div strong {
font-weight: 900;
}
main > div > div code {
font-size: 0.85em;
font-weight: 400;
}
main > div > div figure:last-of-type {
margin-bottom: 0;
}
footer > div {
font-size: 0.95em !important;
}
.y2k_frame {
width: 100%;
height: 500px;
border: 2px solid #e3d18c;
}
.limegreen {
color: #32cd32;
}
`}</style>
</>
);
}
export default Previously;

394
pages/privacy.tsx
View File

@ -8,213 +8,213 @@ import { PrivacyIcon } from "../components/icons";
import faunaImg from "../public/static/images/privacy/fauna_hits.png";
export default function Privacy() {
return (
<Layout>
<Container title="Privacy">
<PageTitle
title={
<>
<PrivacyIcon /> Privacy
</>
}
/>
<Content>
<p>Okay, this is an easy one. 😉</p>
const Privacy = () => (
<Layout>
<Container title="Privacy">
<PageTitle
title={
<>
<PrivacyIcon /> Privacy
</>
}
/>
<Content>
<p>Okay, this is an easy one. 😉</p>
<h2 id="hosting">Hosting</h2>
<h2 id="hosting">Hosting</h2>
<p>
Pages and first-party assets on this website are served by{" "}
<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
<strong>▲ Vercel</strong>
</a>
. Refer to their{" "}
<a href="https://vercel.com/legal/privacy-policy" target="_blank" rel="noopener noreferrer">
privacy policy
</a>{" "}
for more information.
</p>
<p>
For a likely excessive level of privacy and security, this website is also mirrored on the{" "}
<a href="https://www.torproject.org/" target="_blank" rel="noopener noreferrer">
🧅 Tor network
</a>{" "}
at:
</p>
<blockquote>
<p>
Pages and first-party assets on this website are served by{" "}
<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">
<strong>▲ Vercel</strong>
</a>
. Refer to their{" "}
<a href="https://vercel.com/legal/privacy-policy" target="_blank" rel="noopener noreferrer">
privacy policy
</a>{" "}
for more information.
</p>
<p>
For a likely excessive level of privacy and security, this website is also mirrored on the{" "}
<a href="https://www.torproject.org/" target="_blank" rel="noopener noreferrer">
🧅 Tor network
</a>{" "}
at:
</p>
<blockquote>
<p>
<a
href="http://jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion"
target="_blank"
rel="noopener noreferrer"
>
<strong>jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion</strong>
</a>
</p>
</blockquote>
<h2 id="analytics">Analytics</h2>
<p>
A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e.{" "}
<code>hits = hits + 1</code>) in a{" "}
<a href="https://fauna.com/" target="_blank" rel="noopener noreferrer">
Fauna
</a>{" "}
database. Individual views and identifying (or non-identifying) details are{" "}
<strong>never stored or logged</strong>.
</p>
<p>
The{" "}
<a
href="https://github.com/jakejarvis/jarv.is/blob/main/pages/api/hits.ts"
href="http://jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion"
target="_blank"
rel="noopener noreferrer"
>
serverless function
</a>{" "}
and{" "}
<strong>jarvis2i2vp4j4tbxjogsnqdemnte5xhzyi7hziiyzxwge3hzmh57zad.onion</strong>
</a>
</p>
</blockquote>
<h2 id="analytics">Analytics</h2>
<p>
A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e.{" "}
<code>hits = hits + 1</code>) in a{" "}
<a href="https://fauna.com/" target="_blank" rel="noopener noreferrer">
Fauna
</a>{" "}
database. Individual views and identifying (or non-identifying) details are{" "}
<strong>never stored or logged</strong>.
</p>
<p>
The{" "}
<a
href="https://github.com/jakejarvis/jarv.is/blob/main/pages/api/hits.ts"
target="_blank"
rel="noopener noreferrer"
>
serverless function
</a>{" "}
and{" "}
<a
href="https://github.com/jakejarvis/jarv.is/blob/main/components/hits/Hits.tsx"
target="_blank"
rel="noopener noreferrer"
>
client script
</a>{" "}
are open source, and{" "}
<a href="https://github.com/jakejarvis/website-stats" target="_blank" rel="noopener noreferrer">
snapshots of the database
</a>{" "}
are public.
</p>
<Image src={faunaImg} placeholder="blur" alt="The entire database schema." />
<p>
<a href="https://usefathom.com/ref/ZEYG0O" target="_blank" rel="noopener noreferrer">
<strong>Fathom Analytics</strong>
</a>
, a <em>very</em>{" "}
<a href="https://usefathom.com/privacy-focused-web-analytics" target="_blank" rel="noopener noreferrer">
privacy-focused
</a>{" "}
service, is also used to gain insights into referrers, search terms, etc.{" "}
<strong>without collecting anything identifiable about you</strong>. (My{" "}
<a href="/stats/" target="_blank" rel="noopener noreferrer">
dashboard
</a>{" "}
is completely public, too!)
</p>
<iframe src="https://app.usefathom.com/share/wbgnqukw/jarv.is" title="Fathom Analytics dashboard">
<style jsx>{`
iframe {
width: 100%;
height: 500px;
border: 2px solid var(--kinda-light);
}
`}</style>
</iframe>
<p>
<a href="https://vercel.com/analytics" target="_blank" rel="noopener noreferrer">
<strong>Vercel Analytics</strong>
</a>{" "}
keeps track of{" "}
<a href="https://vercel.com/docs/concepts/analytics/web-vitals" target="_blank" rel="noopener noreferrer">
"web vitals"
</a>{" "}
(input delays, layout shifts, etc.), also in an anonymous and aggregate fashion.
</p>
<h2 id="third-party">Third-Party Content</h2>
<p>
Occasionally, embedded content from third-party services is included in posts, and some may contain tracking
code that is outside of my control. Please refer to their privacy policies for more information:
</p>
<ul>
<li>
<a href="https://blog.codepen.io/documentation/privacy/" target="_blank" rel="noopener noreferrer">
CodePen
</a>
</li>
<li>
<a href="https://www.facebook.com/policy.php" target="_blank" rel="noopener noreferrer">
Facebook
</a>
</li>
<li>
<a
href="https://github.com/jakejarvis/jarv.is/blob/main/components/hits/Hits.tsx"
href="https://docs.github.com/en/github/site-policy/github-privacy-statement"
target="_blank"
rel="noopener noreferrer"
>
client script
</a>{" "}
are open source, and{" "}
<a href="https://github.com/jakejarvis/website-stats" target="_blank" rel="noopener noreferrer">
snapshots of the database
</a>{" "}
are public.
</p>
<Image src={faunaImg} placeholder="blur" alt="The entire database schema." />
<p>
<a href="https://usefathom.com/ref/ZEYG0O" target="_blank" rel="noopener noreferrer">
<strong>Fathom Analytics</strong>
GitHub
</a>
, a <em>very</em>{" "}
<a href="https://usefathom.com/privacy-focused-web-analytics" target="_blank" rel="noopener noreferrer">
privacy-focused
</a>{" "}
service, is also used to gain insights into referrers, search terms, etc.{" "}
<strong>without collecting anything identifiable about you</strong>. (My{" "}
<a href="/stats/" target="_blank" rel="noopener noreferrer">
dashboard
</a>{" "}
is completely public, too!)
</p>
<iframe src="https://app.usefathom.com/share/wbgnqukw/jarv.is" title="Fathom Analytics dashboard">
<style jsx>{`
iframe {
width: 100%;
height: 500px;
border: 2px solid var(--kinda-light);
}
`}</style>
</iframe>
<p>
<a href="https://vercel.com/analytics" target="_blank" rel="noopener noreferrer">
<strong>Vercel Analytics</strong>
</a>{" "}
keeps track of{" "}
<a href="https://vercel.com/docs/concepts/analytics/web-vitals" target="_blank" rel="noopener noreferrer">
"web vitals"
</a>{" "}
(input delays, layout shifts, etc.), also in an anonymous and aggregate fashion.
</p>
</li>
<li>
<a href="https://soundcloud.com/pages/privacy" target="_blank" rel="noopener noreferrer">
SoundCloud
</a>
</li>
<li>
<a href="https://twitter.com/en/privacy" target="_blank" rel="noopener noreferrer">
Twitter
</a>
</li>
<li>
<a href="https://vimeo.com/privacy" target="_blank" rel="noopener noreferrer">
Vimeo
</a>
</li>
<li>
<a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">
YouTube
</a>
</li>
</ul>
<h2 id="third-party">Third-Party Content</h2>
<p>
Occasionally, embedded content from third-party services is included in posts, and some may contain tracking
code that is outside of my control. Please refer to their privacy policies for more information:
</p>
<ul>
<li>
<a href="https://blog.codepen.io/documentation/privacy/" target="_blank" rel="noopener noreferrer">
CodePen
</a>
</li>
<li>
<a href="https://www.facebook.com/policy.php" target="_blank" rel="noopener noreferrer">
Facebook
</a>
</li>
<li>
<a
href="https://docs.github.com/en/github/site-policy/github-privacy-statement"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
</li>
<li>
<a href="https://soundcloud.com/pages/privacy" target="_blank" rel="noopener noreferrer">
SoundCloud
</a>
</li>
<li>
<a href="https://twitter.com/en/privacy" target="_blank" rel="noopener noreferrer">
Twitter
</a>
</li>
<li>
<a href="https://vimeo.com/privacy" target="_blank" rel="noopener noreferrer">
Vimeo
</a>
</li>
<li>
<a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">
YouTube
</a>
</li>
</ul>
<h2 id="hcaptcha">Fighting Spam</h2>
<p>
Using{" "}
<a href="https://www.hcaptcha.com/" target="_blank" rel="noopener noreferrer">
<strong>hCaptcha</strong>
</a>{" "}
to fight bot spam on the <Link href="/contact/">contact form</Link> was an easy choice over seemingly
unavoidable alternatives like{" "}
<a href="https://developers.google.com/recaptcha/" target="_blank" rel="noopener noreferrer">
reCAPTCHA
</a>
.
</p>
<p>
You can refer to hCaptcha's{" "}
<a href="https://www.hcaptcha.com/privacy" target="_blank" rel="noopener noreferrer">
privacy policy
</a>{" "}
and{" "}
<a href="https://www.hcaptcha.com/terms" target="_blank" rel="noopener noreferrer">
terms of service
</a>{" "}
for more details. While some information is sent to the hCaptcha API about your behavior{" "}
<strong>(on the contact page only)</strong>, at least you won't be helping a certain internet conglomerate{" "}
<a
href="https://blog.cloudflare.com/moving-from-recaptcha-to-hcaptcha/"
target="_blank"
rel="noopener noreferrer"
>
train their self-driving cars
</a>
. 🚗
</p>
<p>
I also enabled the setting to donate 100% of my{" "}
<a href="https://humanprotocol.org/?lng=en-US" target="_blank" rel="noopener noreferrer">
HMT token
</a>{" "}
earnings to the{" "}
<a href="https://wikimediafoundation.org/" target="_blank" rel="noopener noreferrer">
Wikimedia Foundation
</a>
, for what it's worth. (A few cents, probably... 💰)
</p>
</Content>
</Container>
</Layout>
);
<h2 id="hcaptcha">Fighting Spam</h2>
<p>
Using{" "}
<a href="https://www.hcaptcha.com/" target="_blank" rel="noopener noreferrer">
<strong>hCaptcha</strong>
</a>{" "}
to fight bot spam on the <Link href="/contact/">contact form</Link> was an easy choice over seemingly
unavoidable alternatives like{" "}
<a href="https://developers.google.com/recaptcha/" target="_blank" rel="noopener noreferrer">
reCAPTCHA
</a>
.
</p>
<p>
You can refer to hCaptcha's{" "}
<a href="https://www.hcaptcha.com/privacy" target="_blank" rel="noopener noreferrer">
privacy policy
</a>{" "}
and{" "}
<a href="https://www.hcaptcha.com/terms" target="_blank" rel="noopener noreferrer">
terms of service
</a>{" "}
for more details. While some information is sent to the hCaptcha API about your behavior{" "}
<strong>(on the contact page only)</strong>, at least you won't be helping a certain internet conglomerate{" "}
<a
href="https://blog.cloudflare.com/moving-from-recaptcha-to-hcaptcha/"
target="_blank"
rel="noopener noreferrer"
>
train their self-driving cars
</a>
. 🚗
</p>
<p>
I also enabled the setting to donate 100% of my{" "}
<a href="https://humanprotocol.org/?lng=en-US" target="_blank" rel="noopener noreferrer">
HMT token
</a>{" "}
earnings to the{" "}
<a href="https://wikimediafoundation.org/" target="_blank" rel="noopener noreferrer">
Wikimedia Foundation
</a>
, for what it's worth. (A few cents, probably... 💰)
</p>
</Content>
</Container>
</Layout>
);
}
export default Privacy;

96
pages/projects.tsx
View File

@ -6,57 +6,55 @@ import RepoCard from "../components/projects/RepoCard";
import { ProjectsIcon } from "../components/icons";
import type { GetStaticProps } from "next";
export default function Projects({ repos }) {
return (
<Layout>
<Container title="Projects">
<PageTitle
title={
<>
<ProjectsIcon /> Projects
</>
const Projects = ({ repos }) => (
<Layout>
<Container title="Projects">
<PageTitle
title={
<>
<ProjectsIcon /> Projects
</>
}
/>
<div>
{repos.map((repo) => (
<div key={repo.name} className="repo_card">
<RepoCard {...repo} />
</div>
))}
<style jsx>{`
div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
/>
<div>
{repos.map((repo) => (
<div key={repo.name} className="repo_card">
<RepoCard {...repo} />
</div>
))}
div .repo_card {
flex-grow: 1;
margin: 0.5em;
width: 370px;
}
`}</style>
</div>
<style jsx>{`
div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
div .repo_card {
flex-grow: 1;
margin: 0.5em;
width: 370px;
}
`}</style>
</div>
<p>
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
View more on GitHub...
</a>
<style jsx>{`
p {
text-align: center;
margin-bottom: 0;
}
`}</style>
</p>
</Container>
</Layout>
);
}
<p>
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
View more on GitHub...
</a>
<style jsx>{`
p {
text-align: center;
margin-bottom: 0;
}
`}</style>
</p>
</Container>
</Layout>
);
export const getStaticProps: GetStaticProps = async () => {
// https://docs.github.com/en/graphql/reference/objects#repository
@ -119,3 +117,5 @@ export const getStaticProps: GetStaticProps = async () => {
revalidate: 600,
};
};
export default Projects;

2160
pages/uses.tsx
View File

File diff suppressed because it is too large Load Diff

50
yarn.lock
View File

@ -1525,9 +1525,9 @@
integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
"@types/node@*":
version "17.0.5"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.5.tgz#57ca67ec4e57ad9e4ef5a6bab48a15387a1c83e0"
integrity sha512-w3mrvNXLeDYV1GKTZorGJQivK6XLCoGwpnyJFbJVK/aTBQUxOCaa/GlFAAN3OTDFcb7h5tiFG+YXCO2By+riZw==
version "17.0.6"
resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.6.tgz#cc1589c9ee853b389e67e8fb4384e0f250a139b9"
integrity sha512-+XBAjfZmmivILUzO0HwBJoYkAyyySSLg5KCGBDFLomJo0sV6szvVLAf4ANZZ0pfWzgEds5KmGLG9D5hfEqOhaA==
"@types/normalize-package-data@^2.4.0":
version "2.4.1"
@ -1999,14 +1999,14 @@ camelcase@^5.3.1:
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
camelcase@^6.2.0:
version "6.2.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.1.tgz#250fd350cfd555d0d2160b1d51510eaf8326e86e"
integrity sha512-tVI4q5jjFV5CavAU8DXfza/TJcZutVKo/5Foskmsqcm0MsL91moHvwiGNnqaa2o6PF/7yT5ikDRcVcl8Rj6LCA==
version "6.3.0"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001294:
version "1.0.30001294"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz#4849f27b101fd59ddee3751598c663801032533d"
integrity sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==
version "1.0.30001295"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001295.tgz#68a60f8f0664f342b2835c5d8898b4faea7b3d51"
integrity sha512-lSP16vcyC0FEy0R4ECc9duSPoKoZy+YkpGkue9G4D81OfPnliopaZrU10+qtPdT8PbGXad/PNx43TIQrOmJZSQ==
ccount@^1.0.0:
version "1.1.0"
@ -2201,17 +2201,17 @@ copy-to-clipboard@^3.3.1:
toggle-selection "^1.0.6"
core-js-compat@^3.18.0, core-js-compat@^3.19.1:
version "3.20.1"
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.20.1.tgz#96917b4db634fbbbc7b36575b2e8fcbf7e4f9691"
integrity sha512-AVhKZNpqMV3Jz8hU0YEXXE06qoxtQGsAqU0u1neUngz5IusDJRX/ZJ6t3i7mS7QxNyEONbCo14GprkBrxPlTZA==
version "3.20.2"
resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.20.2.tgz#d1ff6936c7330959b46b2e08b122a8b14e26140b"
integrity sha512-qZEzVQ+5Qh6cROaTPFLNS4lkvQ6mBzE3R6A6EEpssj7Zr2egMHgsy4XapdifqJDGC9CBiNv7s+ejI96rLNQFdg==
dependencies:
browserslist "^4.19.1"
semver "7.0.0"
core-js-pure@^3.19.0:
version "3.20.1"
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.1.tgz#f7a2c62f98de83e4da8fca7b78846d3a2f542145"
integrity sha512-yeNNr3L9cEBwNy6vhhIJ0nko7fE7uFO6PgawcacGt2VWep4WqQx0RiqlkgSP7kqUMC1IKdfO9qPeWXcUheHLVQ==
version "3.20.2"
resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.2.tgz#5d263565f0e34ceeeccdc4422fae3e84ca6b8c0f"
integrity sha512-CmWHvSKn2vNL6p6StNp1EmMIfVY/pqn3JLAjfZQ8WZGPOlGoO92EkX9/Mk81i6GxvoPXjUqEQnpM3rJ5QxxIOg==
cosmiconfig@^7.0.1:
version "7.0.1"
@ -2587,13 +2587,12 @@ eslint-import-resolver-typescript@^2.4.0:
tsconfig-paths "^3.9.0"
eslint-module-utils@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.1.tgz#b435001c9f8dd4ab7f6d0efcae4b9696d4c24b7c"
integrity sha512-fjoetBXQZq2tSTWZ9yWVl2KuFrTZZH3V+9iD1V1RfpDgxzJR+mPd/KZmMiA8gbPqdBzpNiEHOuT7IYEWxrH0zQ==
version "2.7.2"
resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz#1d0aa455dcf41052339b63cada8ab5fd57577129"
integrity sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==
dependencies:
debug "^3.2.7"
find-up "^2.1.0"
pkg-dir "^2.0.0"
eslint-plugin-import@^2.25.2:
version "2.25.3"
@ -4458,9 +4457,9 @@ picocolors@^1.0.0:
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
version "2.3.0"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
version "2.3.1"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
pidtree@^0.3.0:
version "0.3.1"
@ -4472,13 +4471,6 @@ pify@^3.0.0:
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
pkg-dir@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
dependencies:
find-up "^2.1.0"
pkg-dir@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760"