mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 13:18:26 -04:00
move more junk out of index.css and into components
This commit is contained in:
parent
f62c057f5d
commit
0343aa9be4
GPG Key ID:
2B0C9CF251E69A39
@ -3,6 +3,28 @@
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.content a {
|
||||
color: var(--link);
|
||||
background-image: linear-gradient(var(--link-underline), var(--link-underline));
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% var(--link-underline-size);
|
||||
padding-bottom: var(--link-underline-size);
|
||||
/* background-size is for hover animation, color & border are for theme fading: */
|
||||
transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
|
||||
}
|
||||
|
||||
.content a:hover {
|
||||
background-size: 100% var(--link-underline-size);
|
||||
}
|
||||
|
||||
/* set an anchor's class to `no-underline` to disable all of the above */
|
||||
.content :global(a.no-underline) {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.content {
|
||||
font-size: 0.925em;
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import classNames from "classnames";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import styles from "./Content.module.css";
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Content = (props: Props) => <div className={styles.content} {...props} />;
|
||||
const Content = ({ className, ...rest }: Props) => <div className={classNames(styles.content, className)} {...rest} />;
|
||||
|
||||
export default Content;
|
||||
|
||||
@ -8,9 +8,7 @@
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.row {
|
||||
@ -24,7 +22,7 @@
|
||||
}
|
||||
|
||||
.view_source {
|
||||
padding-bottom: 2px !important;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--light);
|
||||
}
|
||||
|
||||
@ -22,17 +22,15 @@
|
||||
.anchor {
|
||||
margin: 0 0.25em;
|
||||
padding: 0 0.25em;
|
||||
color: var(--medium-light);
|
||||
color: var(--medium-light) !important;
|
||||
font-weight: 300;
|
||||
background: none;
|
||||
transition: none;
|
||||
opacity: 0; /* overridden on hover */
|
||||
}
|
||||
.anchor::before {
|
||||
content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
|
||||
}
|
||||
.anchor:hover {
|
||||
color: var(--link);
|
||||
color: var(--link) !important;
|
||||
}
|
||||
/* make anchor `#` link show up on hover over the corresponding heading */
|
||||
.heading:hover .anchor {
|
||||
|
||||
@ -16,7 +16,7 @@ const Heading = ({ as: Component, id, className, children, ...rest }: Props) =>
|
||||
|
||||
{/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
|
||||
{id && (Component === "h2" || Component === "h3") && (
|
||||
<a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
|
||||
<a className={classNames("no-underline", styles.anchor)} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
|
||||
)}
|
||||
</Component>
|
||||
);
|
||||
|
||||
@ -14,13 +14,10 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.menu li .link:hover {
|
||||
color: var(--link);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.menu li .icon {
|
||||
|
||||
@ -2,13 +2,10 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--medium-dark);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--link);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.selfie {
|
||||
|
||||
@ -8,9 +8,7 @@
|
||||
}
|
||||
|
||||
.meta a {
|
||||
color: var(--medium);
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.meta > div {
|
||||
|
||||
@ -6,9 +6,7 @@
|
||||
}
|
||||
|
||||
.title a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: var(--text);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.title code {
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.section {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.1;
|
||||
margin: 2.4em 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
.link {
|
||||
margin: 0 0.4em;
|
||||
color: var(--text);
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
color: var(--link);
|
||||
color: var(--link) !important;
|
||||
}
|
||||
|
||||
@ -9,7 +9,12 @@ type Props = {
|
||||
};
|
||||
|
||||
const OctocatLink = ({ repo, className }: Props) => (
|
||||
<a className={styles.link} href={`https://github.com/${repo}`} target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
className={classNames("no-underline", styles.link)}
|
||||
href={`https://github.com/${repo}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<OctocatOcticon fill="currentColor" className={classNames("icon", className)} />
|
||||
</a>
|
||||
);
|
||||
|
||||
@ -6,9 +6,7 @@
|
||||
}
|
||||
|
||||
.title a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: var(--text);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
@ -34,13 +34,11 @@
|
||||
}
|
||||
|
||||
.meta_item a {
|
||||
background: none;
|
||||
padding-bottom: 0;
|
||||
color: var(--medium);
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.meta_item a:hover {
|
||||
color: var(--link);
|
||||
color: var(--link) !important;
|
||||
}
|
||||
|
||||
.octicon,
|
||||
|
||||
@ -28,6 +28,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
|
||||
{stars > 0 && (
|
||||
<div className={styles.meta_item}>
|
||||
<a
|
||||
className="no-underline"
|
||||
href={`${url}/stargazers`}
|
||||
title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
|
||||
target="_blank"
|
||||
@ -42,6 +43,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
|
||||
{forks > 0 && (
|
||||
<div className={styles.meta_item}>
|
||||
<a
|
||||
className="no-underline"
|
||||
href={`${url}/network/members`}
|
||||
title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
|
||||
target="_blank"
|
||||
|
||||
591
pages/index.tsx
591
pages/index.tsx
@ -1,312 +1,328 @@
|
||||
import ColorfulLink from "../components/ColorfulLink/ColorfulLink";
|
||||
import Content from "../components/Content/Content";
|
||||
import { WaveIcon, LockIcon } from "../components/Icons";
|
||||
|
||||
const Index = () => (
|
||||
<>
|
||||
<h1>
|
||||
Hi there! I'm Jake.{" "}
|
||||
<span className="wave">
|
||||
<WaveIcon />
|
||||
</span>
|
||||
</h1>
|
||||
<Content>
|
||||
<div className="home">
|
||||
<h1>
|
||||
Hi there! I'm Jake.{" "}
|
||||
<span className="wave">
|
||||
<WaveIcon />
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<h2>
|
||||
I'm a frontend web developer based in{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
Boston
|
||||
</ColorfulLink>
|
||||
.
|
||||
</h2>
|
||||
<h2>
|
||||
I'm a frontend web developer based in{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
Boston
|
||||
</ColorfulLink>
|
||||
.
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
I specialize in{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
modern JS frameworks
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="http://vanilla-js.com/"
|
||||
title="The best JS framework in the world by Eric Wastl"
|
||||
lightColor="#f48024"
|
||||
darkColor="#e18431"
|
||||
external
|
||||
>
|
||||
vanilla JavaScript
|
||||
</ColorfulLink>{" "}
|
||||
to make nifty{" "}
|
||||
<ColorfulLink
|
||||
href="https://jamstack.wtf/"
|
||||
title="WTF is JAMstack?"
|
||||
lightColor="#04a699"
|
||||
darkColor="#08bbac"
|
||||
external
|
||||
>
|
||||
JAMstack sites
|
||||
</ColorfulLink>{" "}
|
||||
with dynamic{" "}
|
||||
<ColorfulLink
|
||||
href="https://nodejs.org/en/"
|
||||
title="Node.js Official Website"
|
||||
lightColor="#6fbc4e"
|
||||
darkColor="#84d95f"
|
||||
external
|
||||
>
|
||||
Node.js
|
||||
</ColorfulLink>{" "}
|
||||
services. But I'm fluent in non-buzzwords like{" "}
|
||||
<ColorfulLink
|
||||
href="https://stitcher.io/blog/php-in-2020"
|
||||
title='"PHP in 2020" by Brent Roose'
|
||||
lightColor="#8892bf"
|
||||
darkColor="#a4afe3"
|
||||
external
|
||||
>
|
||||
PHP
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.ruby-lang.org/en/"
|
||||
title="Ruby Official Website"
|
||||
lightColor="#d34135"
|
||||
darkColor="#f95a4d"
|
||||
external
|
||||
>
|
||||
Ruby
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink
|
||||
href="https://golang.org/"
|
||||
title="Golang Official Website"
|
||||
lightColor="#00acd7"
|
||||
darkColor="#2ad1fb"
|
||||
external
|
||||
>
|
||||
Go
|
||||
</ColorfulLink>{" "}
|
||||
too.
|
||||
</p>
|
||||
<p>
|
||||
I specialize in{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
modern JS frameworks
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="http://vanilla-js.com/"
|
||||
title="The best JS framework in the world by Eric Wastl"
|
||||
lightColor="#f48024"
|
||||
darkColor="#e18431"
|
||||
external
|
||||
>
|
||||
vanilla JavaScript
|
||||
</ColorfulLink>{" "}
|
||||
to make nifty{" "}
|
||||
<ColorfulLink
|
||||
href="https://jamstack.wtf/"
|
||||
title="WTF is JAMstack?"
|
||||
lightColor="#04a699"
|
||||
darkColor="#08bbac"
|
||||
external
|
||||
>
|
||||
JAMstack sites
|
||||
</ColorfulLink>{" "}
|
||||
with dynamic{" "}
|
||||
<ColorfulLink
|
||||
href="https://nodejs.org/en/"
|
||||
title="Node.js Official Website"
|
||||
lightColor="#6fbc4e"
|
||||
darkColor="#84d95f"
|
||||
external
|
||||
>
|
||||
Node.js
|
||||
</ColorfulLink>{" "}
|
||||
services. But I'm fluent in non-buzzwords like{" "}
|
||||
<ColorfulLink
|
||||
href="https://stitcher.io/blog/php-in-2020"
|
||||
title='"PHP in 2020" by Brent Roose'
|
||||
lightColor="#8892bf"
|
||||
darkColor="#a4afe3"
|
||||
external
|
||||
>
|
||||
PHP
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.ruby-lang.org/en/"
|
||||
title="Ruby Official Website"
|
||||
lightColor="#d34135"
|
||||
darkColor="#f95a4d"
|
||||
external
|
||||
>
|
||||
Ruby
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink
|
||||
href="https://golang.org/"
|
||||
title="Golang Official Website"
|
||||
lightColor="#00acd7"
|
||||
darkColor="#2ad1fb"
|
||||
external
|
||||
>
|
||||
Go
|
||||
</ColorfulLink>{" "}
|
||||
too.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Whenever possible, I also apply my experience in{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis/awesome-shodan-queries"
|
||||
title="jakejarvis/awesome-shodan-queries on GitHub"
|
||||
lightColor="#00b81a"
|
||||
darkColor="#57f06d"
|
||||
external
|
||||
>
|
||||
application security
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
|
||||
title='"What is serverless computing?" on Cloudflare'
|
||||
lightColor="#0098ec"
|
||||
darkColor="#43b9fb"
|
||||
external
|
||||
>
|
||||
serverless stacks
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink
|
||||
href="https://xkcd.com/1319/"
|
||||
title='"Automation" on xkcd'
|
||||
lightColor="#ff6200"
|
||||
darkColor="#f46c16"
|
||||
external
|
||||
>
|
||||
DevOps automation
|
||||
</ColorfulLink>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Whenever possible, I also apply my experience in{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis/awesome-shodan-queries"
|
||||
title="jakejarvis/awesome-shodan-queries on GitHub"
|
||||
lightColor="#00b81a"
|
||||
darkColor="#57f06d"
|
||||
external
|
||||
>
|
||||
application security
|
||||
</ColorfulLink>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
|
||||
title='"What is serverless computing?" on Cloudflare'
|
||||
lightColor="#0098ec"
|
||||
darkColor="#43b9fb"
|
||||
external
|
||||
>
|
||||
serverless stacks
|
||||
</ColorfulLink>
|
||||
, and{" "}
|
||||
<ColorfulLink
|
||||
href="https://xkcd.com/1319/"
|
||||
title='"Automation" on xkcd'
|
||||
lightColor="#ff6200"
|
||||
darkColor="#f46c16"
|
||||
external
|
||||
>
|
||||
DevOps automation
|
||||
</ColorfulLink>
|
||||
.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I fell in love with{" "}
|
||||
<ColorfulLink
|
||||
href="/previously/"
|
||||
title="My Terrible, Horrible, No Good, Very Bad First Websites"
|
||||
lightColor="#4169e1"
|
||||
darkColor="#8ca9ff"
|
||||
>
|
||||
frontend web design
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="/notes/my-first-code/"
|
||||
title="Jake's Bulletin Board, circa 2003"
|
||||
lightColor="#9932cc"
|
||||
darkColor="#d588fb"
|
||||
>
|
||||
backend programming
|
||||
</ColorfulLink>{" "}
|
||||
back when my only source of income was{" "}
|
||||
<span className="birthday">
|
||||
<ColorfulLink
|
||||
href="/birthday/"
|
||||
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
|
||||
lightColor="#e40088"
|
||||
darkColor="#fd40b1"
|
||||
>
|
||||
the Tooth Fairy
|
||||
</ColorfulLink>
|
||||
</span>
|
||||
. <span className="quiet">I've improved a bit since then, I think...</span>
|
||||
</p>
|
||||
<p>
|
||||
I fell in love with{" "}
|
||||
<ColorfulLink
|
||||
href="/previously/"
|
||||
title="My Terrible, Horrible, No Good, Very Bad First Websites"
|
||||
lightColor="#4169e1"
|
||||
darkColor="#8ca9ff"
|
||||
>
|
||||
frontend web design
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="/notes/my-first-code/"
|
||||
title="Jake's Bulletin Board, circa 2003"
|
||||
lightColor="#9932cc"
|
||||
darkColor="#d588fb"
|
||||
>
|
||||
backend programming
|
||||
</ColorfulLink>{" "}
|
||||
back when my only source of income was{" "}
|
||||
<span className="birthday">
|
||||
<ColorfulLink
|
||||
href="/birthday/"
|
||||
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
|
||||
lightColor="#e40088"
|
||||
darkColor="#fd40b1"
|
||||
>
|
||||
the Tooth Fairy
|
||||
</ColorfulLink>
|
||||
</span>
|
||||
. <span className="quiet">I've improved a bit since then, I think...</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Over the years, some of my side projects{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
have
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="/leo/"
|
||||
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
|
||||
lightColor="#f78200"
|
||||
darkColor="#fd992a"
|
||||
>
|
||||
been
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
featured
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
by
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
various
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
media
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
outlets
|
||||
</ColorfulLink>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
Over the years, some of my side projects{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
have
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
href="/leo/"
|
||||
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
|
||||
lightColor="#f78200"
|
||||
darkColor="#fd992a"
|
||||
>
|
||||
been
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
featured
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
by
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
various
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
media
|
||||
</ColorfulLink>{" "}
|
||||
<ColorfulLink
|
||||
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"
|
||||
external
|
||||
>
|
||||
outlets
|
||||
</ColorfulLink>
|
||||
.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can find more of my work on{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis"
|
||||
title="Jake Jarvis on GitHub"
|
||||
lightColor="#8d4eff"
|
||||
darkColor="#a379f0"
|
||||
external
|
||||
>
|
||||
GitHub
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.linkedin.com/in/jakejarvis/"
|
||||
title="Jake Jarvis on LinkedIn"
|
||||
lightColor="#0073b1"
|
||||
darkColor="#3b9dd2"
|
||||
external
|
||||
>
|
||||
LinkedIn
|
||||
</ColorfulLink>
|
||||
. I'm always available to connect over{" "}
|
||||
<ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
|
||||
email
|
||||
</ColorfulLink>{" "}
|
||||
<sup className="monospace pgp_key">
|
||||
<ColorfulLink href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external>
|
||||
<LockIcon /> 2B0C 9CF2 51E6 9A39
|
||||
</ColorfulLink>
|
||||
</sup>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://twitter.com/jakejarvis"
|
||||
title="Jake Jarvis on Twitter"
|
||||
lightColor="#00acee"
|
||||
darkColor="#3bc9ff"
|
||||
external
|
||||
>
|
||||
Twitter
|
||||
</ColorfulLink>
|
||||
, or{" "}
|
||||
<ColorfulLink
|
||||
href="sms:+1-617-917-3737"
|
||||
title="Send SMS to +1 (617) 917-3737"
|
||||
lightColor="#6fcc01"
|
||||
darkColor="#8edb34"
|
||||
>
|
||||
SMS
|
||||
</ColorfulLink>{" "}
|
||||
as well!
|
||||
</p>
|
||||
<p>
|
||||
You can find more of my work on{" "}
|
||||
<ColorfulLink
|
||||
href="https://github.com/jakejarvis"
|
||||
title="Jake Jarvis on GitHub"
|
||||
lightColor="#8d4eff"
|
||||
darkColor="#a379f0"
|
||||
external
|
||||
>
|
||||
GitHub
|
||||
</ColorfulLink>{" "}
|
||||
and{" "}
|
||||
<ColorfulLink
|
||||
href="https://www.linkedin.com/in/jakejarvis/"
|
||||
title="Jake Jarvis on LinkedIn"
|
||||
lightColor="#0073b1"
|
||||
darkColor="#3b9dd2"
|
||||
external
|
||||
>
|
||||
LinkedIn
|
||||
</ColorfulLink>
|
||||
. I'm always available to connect over{" "}
|
||||
<ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
|
||||
email
|
||||
</ColorfulLink>{" "}
|
||||
<sup className="monospace pgp_key">
|
||||
<ColorfulLink
|
||||
className="no-underline"
|
||||
href="/pubkey.asc"
|
||||
title="My Public Key"
|
||||
lightColor="#757575"
|
||||
darkColor="#959595"
|
||||
external
|
||||
>
|
||||
<LockIcon /> 2B0C 9CF2 51E6 9A39
|
||||
</ColorfulLink>
|
||||
</sup>
|
||||
,{" "}
|
||||
<ColorfulLink
|
||||
href="https://twitter.com/jakejarvis"
|
||||
title="Jake Jarvis on Twitter"
|
||||
lightColor="#00acee"
|
||||
darkColor="#3bc9ff"
|
||||
external
|
||||
>
|
||||
Twitter
|
||||
</ColorfulLink>
|
||||
, or{" "}
|
||||
<ColorfulLink
|
||||
href="sms:+1-617-917-3737"
|
||||
title="Send SMS to +1 (617) 917-3737"
|
||||
lightColor="#6fcc01"
|
||||
darkColor="#8edb34"
|
||||
>
|
||||
SMS
|
||||
</ColorfulLink>{" "}
|
||||
as well!
|
||||
</p>
|
||||
</div>
|
||||
</Content>
|
||||
|
||||
<style jsx>{`
|
||||
h1 {
|
||||
.home {
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
}
|
||||
.home h1 {
|
||||
margin: 0 0 0.5em -0.03em;
|
||||
font-size: 1.8em;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
h2 {
|
||||
.home 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 {
|
||||
.home p {
|
||||
margin: 0.85em 0;
|
||||
letter-spacing: -0.004em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
p:last-of-type {
|
||||
.home p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.wave {
|
||||
.home .wave {
|
||||
display: inline-block;
|
||||
margin-left: 0.1em;
|
||||
animation: wave 5s infinite;
|
||||
@ -314,19 +330,18 @@ const Index = () => (
|
||||
transform-origin: 65% 80%;
|
||||
will-change: transform;
|
||||
}
|
||||
.pgp_key {
|
||||
.home .pgp_key {
|
||||
margin: 0 0.15em;
|
||||
font-size: 0.65em;
|
||||
word-spacing: -0.3em;
|
||||
}
|
||||
.pgp_key :global(a) {
|
||||
.home .pgp_key :global(a) {
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.quiet {
|
||||
.home .quiet {
|
||||
color: var(--medium-light);
|
||||
}
|
||||
.birthday :global(a:hover) {
|
||||
.home .birthday :global(a:hover) {
|
||||
/* magic wand cursor easter egg */
|
||||
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-18, 5)'>🪄</text></svg>")
|
||||
16 0,
|
||||
@ -334,14 +349,14 @@ const Index = () => (
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
h1 {
|
||||
.home h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
h2 {
|
||||
.home h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
p {
|
||||
font-size: 0.95em;
|
||||
.home p {
|
||||
font-size: 0.925em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { NextSeo } from "next-seo";
|
||||
import { format } from "date-fns";
|
||||
import Content from "../../components/Content/Content";
|
||||
import NotesList from "../../components/NotesList/NotesList";
|
||||
import { getAllNotes } from "../../lib/parse-notes";
|
||||
import type { GetStaticProps } from "next";
|
||||
@ -14,7 +15,9 @@ const Notes = ({ notesByYear }) => (
|
||||
}}
|
||||
/>
|
||||
|
||||
<NotesList notesByYear={notesByYear} />
|
||||
<Content>
|
||||
<NotesList notesByYear={notesByYear} />
|
||||
</Content>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
|
||||
import { ProjectsIcon } from "../components/Icons";
|
||||
import type { GetStaticProps } from "next";
|
||||
import { RepoType } from "../types";
|
||||
import Content from "../components/Content/Content";
|
||||
|
||||
type Props = {
|
||||
repos: RepoType[];
|
||||
@ -23,19 +24,21 @@ const Projects = ({ repos }: Props) => (
|
||||
<ProjectsIcon /> Projects
|
||||
</PageTitle>
|
||||
|
||||
<div className="wrapper">
|
||||
{repos.map((repo: RepoType) => (
|
||||
<div key={repo.name} className="card">
|
||||
<RepositoryCard {...repo} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Content>
|
||||
<div className="wrapper">
|
||||
{repos.map((repo: RepoType) => (
|
||||
<div key={repo.name} className="card">
|
||||
<RepositoryCard {...repo} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="view_more">
|
||||
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
|
||||
View more on GitHub...
|
||||
</a>
|
||||
</p>
|
||||
<p className="view_more">
|
||||
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
|
||||
View more on GitHub...
|
||||
</a>
|
||||
</p>
|
||||
</Content>
|
||||
|
||||
<style jsx>{`
|
||||
.wrapper {
|
||||
@ -44,6 +47,8 @@ const Projects = ({ repos }: Props) => (
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
@ -9,24 +9,7 @@ body {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% var(--link-underline-size);
|
||||
padding-bottom: var(--link-underline-size);
|
||||
transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
|
||||
background-image: linear-gradient(var(--link-underline), var(--link-underline));
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-size: 100% var(--link-underline-size);
|
||||
}
|
||||
|
||||
/* set an anchor's class to `no-underline` to disable all of the above */
|
||||
a.no-underline {
|
||||
background: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* make SVG icons relative in size/position to surrounding text */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user