mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 21:48:27 -04:00
static header and footer were being re-rendered on every route change
This commit is contained in:
parent
66a244a9c1
commit
17375ef876
GPG Key ID:
2B0C9CF251E69A39
@ -1,5 +0,0 @@
|
||||
.container {
|
||||
max-width: 865px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { NextSeo } from "next-seo";
|
||||
|
||||
import styles from "./Container.module.scss";
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
description?: string;
|
||||
children: unknown;
|
||||
};
|
||||
|
||||
const Container = ({ title, description, children }: Props) => {
|
||||
return (
|
||||
<>
|
||||
<NextSeo
|
||||
title={title}
|
||||
description={description}
|
||||
openGraph={{
|
||||
title: title,
|
||||
}}
|
||||
/>
|
||||
<div className={styles.container}>{children}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Container;
|
||||
@ -5,6 +5,12 @@
|
||||
background-color: var(--background-inner);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 865px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.main {
|
||||
padding: 1.25em;
|
||||
|
||||
@ -1,13 +1,26 @@
|
||||
import Header from "./page-header/Header";
|
||||
import Footer from "./page-footer/Footer";
|
||||
import { NextSeo } from "next-seo";
|
||||
|
||||
import styles from "./Layout.module.scss";
|
||||
|
||||
const Layout = ({ children }) => (
|
||||
type Props = {
|
||||
title?: string;
|
||||
description?: string;
|
||||
children: unknown;
|
||||
};
|
||||
|
||||
const Layout = ({ title, description, children }: Props) => (
|
||||
<>
|
||||
<Header />
|
||||
<main className={styles.main}>{children}</main>
|
||||
<Footer />
|
||||
<NextSeo
|
||||
title={title}
|
||||
description={description}
|
||||
openGraph={{
|
||||
title: title,
|
||||
}}
|
||||
/>
|
||||
|
||||
<main className={styles.main}>
|
||||
<div className={styles.container}>{children}</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@ -9,7 +9,10 @@ const ThemeToggle = ({ className = "" }) => {
|
||||
// avoid hydration mismatch:
|
||||
// https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
|
||||
useEffect(() => setMounted(true), []);
|
||||
if (!mounted) return null;
|
||||
if (!mounted) {
|
||||
// always return one of the bulbs just so there are never flashing layout shifts
|
||||
return <BulbOffIcon className={`icon ${className}`} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
|
||||
@ -3,6 +3,8 @@ import { useRouter } from "next/router";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { DefaultSeo, SocialProfileJsonLd } from "next-seo";
|
||||
import * as Fathom from "fathom-client";
|
||||
import Header from "../components/page-header/Header";
|
||||
import Footer from "../components/page-footer/Footer";
|
||||
import * as config from "../lib/config";
|
||||
import type { AppProps } from "next/app";
|
||||
|
||||
@ -182,7 +184,9 @@ const App = ({ Component, pageProps }: AppProps) => {
|
||||
/>
|
||||
|
||||
<ThemeProvider>
|
||||
<Header />
|
||||
<Component {...pageProps} />
|
||||
<Footer />
|
||||
</ThemeProvider>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import Video from "../components/video/Video";
|
||||
@ -8,39 +7,37 @@ import { TapeIcon } from "../components/icons";
|
||||
import thumbnail from "../public/static/images/birthday/thumb.png";
|
||||
|
||||
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,
|
||||
},
|
||||
<Layout
|
||||
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>
|
||||
},
|
||||
}}
|
||||
controls={true}
|
||||
/>
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
145
pages/cli.tsx
145
pages/cli.tsx
@ -1,6 +1,5 @@
|
||||
import Image from "next/image";
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import { BotIcon } from "../components/icons";
|
||||
@ -8,83 +7,81 @@ import { BotIcon } from "../components/icons";
|
||||
import cliImg from "../public/static/images/cli/screenshot.png";
|
||||
|
||||
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>
|
||||
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>
|
||||
<Layout 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>
|
||||
</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>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
@ -1,58 +1,55 @@
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import ContactForm from "../components/contact/ContactForm";
|
||||
import { MailIcon, LockIcon } from "../components/icons";
|
||||
|
||||
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;
|
||||
}
|
||||
<Layout 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>
|
||||
code {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
word-spacing: -0.175em;
|
||||
white-space: normal;
|
||||
}
|
||||
`}</style>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import Video from "../components/video/Video";
|
||||
@ -7,70 +6,68 @@ import Video from "../components/video/Video";
|
||||
import thumbnail from "../public/static/images/hillary/thumb.png";
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
<Layout
|
||||
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,
|
||||
},
|
||||
}}
|
||||
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>
|
||||
. © 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);
|
||||
}
|
||||
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>
|
||||
. © 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>
|
||||
.copyright a {
|
||||
font-weight: 700;
|
||||
}
|
||||
`}</style>
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
627
pages/index.tsx
627
pages/index.tsx
@ -2,7 +2,6 @@ import Link from "next/link";
|
||||
import isAbsoluteUrl from "is-absolute-url";
|
||||
import { colord } from "colord";
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import { WaveIcon, LockIcon } from "../components/icons";
|
||||
|
||||
type ColorLinkProps = {
|
||||
@ -42,343 +41,341 @@ const ColorLink = ({ href, title, lightColor, darkColor, external = false, child
|
||||
|
||||
const Index = () => (
|
||||
<Layout>
|
||||
<Container>
|
||||
<h1>
|
||||
Hi there! I'm Jake.{" "}
|
||||
<span className="wave">
|
||||
<WaveIcon />
|
||||
</span>
|
||||
</h1>
|
||||
<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&fs=1&showinfo=1&rel=0&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&fs=1&showinfo=1&rel=0&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'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'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);
|
||||
}
|
||||
|
||||
@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>
|
||||
}
|
||||
`}</style>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
123
pages/leo.tsx
123
pages/leo.tsx
@ -1,5 +1,4 @@
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import Video from "../components/video/Video";
|
||||
@ -8,70 +7,68 @@ import thumbnail from "../public/static/images/leo/thumb.png";
|
||||
|
||||
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,
|
||||
},
|
||||
tracks: [
|
||||
{
|
||||
kind: "subtitles",
|
||||
src: "/static/images/leo/subs.en.vtt",
|
||||
srcLang: "en",
|
||||
label: "English",
|
||||
default: true,
|
||||
},
|
||||
],
|
||||
<Layout
|
||||
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>{" "}
|
||||
&{" "}
|
||||
<a href="https://leolaporte.com/" target="_blank" rel="noopener noreferrer">
|
||||
Leo Laporte
|
||||
</a>
|
||||
. © 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>{" "}
|
||||
&{" "}
|
||||
<a href="https://leolaporte.com/" target="_blank" rel="noopener noreferrer">
|
||||
Leo Laporte
|
||||
</a>
|
||||
. © 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>
|
||||
.copyright a {
|
||||
font-weight: 700;
|
||||
}
|
||||
`}</style>
|
||||
</Content>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,468 +1,464 @@
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import { LicenseIcon } from "../components/icons";
|
||||
|
||||
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>
|
||||
<Layout 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>
|
||||
</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>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@ import { MDXRemote } from "next-mdx-remote";
|
||||
import { serialize } from "next-mdx-remote/serialize";
|
||||
import { NextSeo, ArticleJsonLd } from "next-seo";
|
||||
import Layout from "../../components/Layout";
|
||||
import Container from "../../components/Container";
|
||||
import Content from "../../components/Content";
|
||||
import Meta from "../../components/notes/Meta";
|
||||
import mdxComponents from "../../components/mdxComponents";
|
||||
@ -55,14 +54,12 @@ const Note = ({ frontMatter, source }) => (
|
||||
/>
|
||||
|
||||
<Layout>
|
||||
<Container>
|
||||
<Meta {...frontMatter} />
|
||||
<Content>
|
||||
<div className="markdown">
|
||||
<MDXRemote {...source} components={mdxComponents} />
|
||||
</div>
|
||||
</Content>
|
||||
</Container>
|
||||
<Meta {...frontMatter} />
|
||||
<Content>
|
||||
<div className="markdown">
|
||||
<MDXRemote {...source} components={mdxComponents} />
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,15 +1,12 @@
|
||||
import { format } from "date-fns";
|
||||
import Layout from "../../components/Layout";
|
||||
import Container from "../../components/Container";
|
||||
import List from "../../components/notes/List";
|
||||
import { getAllNotes } from "../../lib/parse-notes";
|
||||
import type { GetStaticProps } from "next";
|
||||
|
||||
const Notes = ({ notesByYear }) => (
|
||||
<Layout>
|
||||
<Container title="Notes" description="Recent posts by Jake Jarvis.">
|
||||
<List notesByYear={notesByYear} />
|
||||
</Container>
|
||||
<Layout title="Notes" description="Recent posts by Jake Jarvis.">
|
||||
<List notesByYear={notesByYear} />
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
import Image from "next/image";
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import { FloppyIcon, SirenIcon } from "../components/icons";
|
||||
@ -23,183 +22,181 @@ import img_2018_04 from "../public/static/images/previously/2018_04.png";
|
||||
|
||||
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>
|
||||
<Layout
|
||||
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™
|
||||
</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™
|
||||
</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>
|
||||
|
||||
<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>
|
||||
)
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Content>
|
||||
</Layout>
|
||||
<style jsx global>{`
|
||||
body {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import Content from "../components/Content";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import { PrivacyIcon } from "../components/icons";
|
||||
@ -9,211 +8,209 @@ import { PrivacyIcon } from "../components/icons";
|
||||
import faunaImg from "../public/static/images/privacy/fauna_hits.png";
|
||||
|
||||
const Privacy = () => (
|
||||
<Layout>
|
||||
<Container title="Privacy">
|
||||
<PageTitle
|
||||
title={
|
||||
<>
|
||||
<PrivacyIcon /> Privacy
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Content>
|
||||
<p>Okay, this is an easy one. 😉</p>
|
||||
<Layout 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>
|
||||
<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>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
@ -1,58 +1,55 @@
|
||||
import { graphql } from "@octokit/graphql";
|
||||
import Layout from "../components/Layout";
|
||||
import Container from "../components/Container";
|
||||
import PageTitle from "../components/page/PageTitle";
|
||||
import RepoCard from "../components/projects/RepoCard";
|
||||
import { ProjectsIcon } from "../components/icons";
|
||||
import type { GetStaticProps } from "next";
|
||||
|
||||
const Projects = ({ repos }) => (
|
||||
<Layout>
|
||||
<Container title="Projects">
|
||||
<PageTitle
|
||||
title={
|
||||
<>
|
||||
<ProjectsIcon /> Projects
|
||||
</>
|
||||
<Layout 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>
|
||||
<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>
|
||||
</Layout>
|
||||
);
|
||||
|
||||
|
||||
2129
pages/uses.tsx
2129
pages/uses.tsx
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user