jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-01-11 03:22:57 -05:00
Code Issues Activity

move more junk out of index.css and into components

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-22 18:52:29 -05:00
parent f62c057f5d
commit 0343aa9be4
19 changed files with 371 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Content/Content.module.css
View File

@@ -3,6 +3,28 @@
line-height: 1.7; 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) { @media screen and (max-width: 768px) {
.content { .content {
font-size: 0.925em; font-size: 0.925em;

4
components/Content/Content.tsx
View File

@@ -1,11 +1,13 @@
import classNames from "classnames";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import styles from "./Content.module.css"; import styles from "./Content.module.css";
type Props = { type Props = {
children: ReactNode; 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; export default Content;

6
components/Footer/Footer.module.css
View File

@@ -8,9 +8,7 @@
} }
.footer a { .footer a {
color: var(--medium-dark); color: inherit;
background: none;
padding-bottom: 0;
} }
.row { .row {
@@ -24,7 +22,7 @@
} }
.view_source { .view_source {
padding-bottom: 2px !important; padding-bottom: 2px;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: var(--light); border-color: var(--light);
} }

6
components/Heading/Heading.module.css
View File

@@ -22,17 +22,15 @@
.anchor { .anchor {
margin: 0 0.25em; margin: 0 0.25em;
padding: 0 0.25em; padding: 0 0.25em;
color: var(--medium-light); color: var(--medium-light) !important;
font-weight: 300; font-weight: 300;
background: none;
transition: none;
opacity: 0; /* overridden on hover */ opacity: 0; /* overridden on hover */
} }
.anchor::before { .anchor::before {
content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */ content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
} }
.anchor:hover { .anchor:hover {
color: var(--link); color: var(--link) !important;
} }
/* make anchor `#` link show up on hover over the corresponding heading */ /* make anchor `#` link show up on hover over the corresponding heading */
.heading:hover .anchor { .heading:hover .anchor {

2
components/Heading/Heading.tsx
View File

@@ -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. */} {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
{id && (Component === "h2" || Component === "h3") && ( {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> </Component>
); );

3
components/Menu/Menu.module.css
View File

@@ -14,13 +14,10 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--medium-dark); color: var(--medium-dark);
background: none;
padding-bottom: 0;
} }
.menu li .link:hover { .menu li .link:hover {
color: var(--link); color: var(--link);
transition: none;
} }
.menu li .icon { .menu li .icon {

3
components/Name/Name.module.css
View File

@@ -2,13 +2,10 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--medium-dark); color: var(--medium-dark);
background: none;
padding-bottom: 0;
} }
.link:hover { .link:hover {
color: var(--link); color: var(--link);
transition: none;
} }
.selfie { .selfie {

4
components/NoteMeta/NoteMeta.module.css
View File

@@ -8,9 +8,7 @@
} }
.meta a { .meta a {
color: var(--medium); color: inherit;
background: none;
padding-bottom: 0;
} }
.meta > div { .meta > div {

4
components/NoteTitle/NoteTitle.module.css
View File

@@ -6,9 +6,7 @@
} }
.title a { .title a {
background: none; color: inherit;
padding-bottom: 0;
color: var(--text);
} }
.title code { .title code {

2
components/NotesList/NotesList.module.css
View File

@@ -1,4 +1,6 @@
.section { .section {
font-size: 1.1em;
line-height: 1.1;
margin: 2.4em 0; margin: 2.4em 0;
} }

6
components/OctocatLink/OctocatLink.module.css
View File

@@ -1,10 +1,8 @@
.link { .link {
margin: 0 0.4em; margin: 0 0.4em;
color: var(--text); color: var(--text) !important;
background: none !important;
padding-bottom: 0;
} }
.link:hover { .link:hover {
color: var(--link); color: var(--link) !important;
} }

7
components/OctocatLink/OctocatLink.tsx
View File

@@ -9,7 +9,12 @@ type Props = {
}; };
const OctocatLink = ({ repo, className }: 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)} /> <OctocatOcticon fill="currentColor" className={classNames("icon", className)} />
</a> </a>
); );

4
components/PageTitle/PageTitle.module.css
View File

@@ -6,9 +6,7 @@
} }
.title a { .title a {
background: none; color: inherit;
padding-bottom: 0;
color: var(--text);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {

6
components/RepositoryCard/RepositoryCard.module.css
View File

@@ -34,13 +34,11 @@
} }
.meta_item a { .meta_item a {
background: none; color: inherit !important;
padding-bottom: 0;
color: var(--medium);
} }
.meta_item a:hover { .meta_item a:hover {
color: var(--link); color: var(--link) !important;
} }
.octicon, .octicon,

2
components/RepositoryCard/RepositoryCard.tsx
View File

@@ -28,6 +28,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
{stars > 0 && ( {stars > 0 && (
<div className={styles.meta_item}> <div className={styles.meta_item}>
<a <a
className="no-underline"
href={`${url}/stargazers`} href={`${url}/stargazers`}
title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`} title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
target="_blank" target="_blank"
@@ -42,6 +43,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
{forks > 0 && ( {forks > 0 && (
<div className={styles.meta_item}> <div className={styles.meta_item}>
<a <a
className="no-underline"
href={`${url}/network/members`} href={`${url}/network/members`}
title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`} title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
target="_blank" target="_blank"

591
pages/index.tsx
View File

@@ -1,312 +1,328 @@
import ColorfulLink from "../components/ColorfulLink/ColorfulLink"; import ColorfulLink from "../components/ColorfulLink/ColorfulLink";
import Content from "../components/Content/Content";
import { WaveIcon, LockIcon } from "../components/Icons"; import { WaveIcon, LockIcon } from "../components/Icons";
const Index = () => ( const Index = () => (
<> <>
<h1> <Content>
Hi there! I'm Jake.{" "} <div className="home">
<span className="wave"> <h1>
<WaveIcon /> Hi there! I'm Jake.{" "}
</span> <span className="wave">
</h1> <WaveIcon />
</span>
</h1>
<h2> <h2>
I'm a frontend web developer based in{" "} I'm a frontend web developer based in{" "}
<ColorfulLink <ColorfulLink
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3" href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube' title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
lightColor="#fb4d42" lightColor="#fb4d42"
darkColor="#ff5146" darkColor="#ff5146"
external external
> >
Boston Boston
</ColorfulLink> </ColorfulLink>
. .
</h2> </h2>
<p> <p>
I specialize in{" "} I specialize in{" "}
<ColorfulLink <ColorfulLink
href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/" href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/"
title='"The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen' title='"The Brutal Lifecycle of JavaScript Frameworks" by Ian Allen'
lightColor="#1091b3" lightColor="#1091b3"
darkColor="#6fcbe3" darkColor="#6fcbe3"
external external
> >
modern JS frameworks modern JS frameworks
</ColorfulLink>{" "} </ColorfulLink>{" "}
and{" "} and{" "}
<ColorfulLink <ColorfulLink
href="http://vanilla-js.com/" href="http://vanilla-js.com/"
title="The best JS framework in the world by Eric Wastl" title="The best JS framework in the world by Eric Wastl"
lightColor="#f48024" lightColor="#f48024"
darkColor="#e18431" darkColor="#e18431"
external external
> >
vanilla JavaScript vanilla JavaScript
</ColorfulLink>{" "} </ColorfulLink>{" "}
to make nifty{" "} to make nifty{" "}
<ColorfulLink <ColorfulLink
href="https://jamstack.wtf/" href="https://jamstack.wtf/"
title="WTF is JAMstack?" title="WTF is JAMstack?"
lightColor="#04a699" lightColor="#04a699"
darkColor="#08bbac" darkColor="#08bbac"
external external
> >
JAMstack sites JAMstack sites
</ColorfulLink>{" "} </ColorfulLink>{" "}
with dynamic{" "} with dynamic{" "}
<ColorfulLink <ColorfulLink
href="https://nodejs.org/en/" href="https://nodejs.org/en/"
title="Node.js Official Website" title="Node.js Official Website"
lightColor="#6fbc4e" lightColor="#6fbc4e"
darkColor="#84d95f" darkColor="#84d95f"
external external
> >
Node.js Node.js
</ColorfulLink>{" "} </ColorfulLink>{" "}
services. But I'm fluent in non-buzzwords like{" "} services. But I'm fluent in non-buzzwords like{" "}
<ColorfulLink <ColorfulLink
href="https://stitcher.io/blog/php-in-2020" href="https://stitcher.io/blog/php-in-2020"
title='"PHP in 2020" by Brent Roose' title='"PHP in 2020" by Brent Roose'
lightColor="#8892bf" lightColor="#8892bf"
darkColor="#a4afe3" darkColor="#a4afe3"
external external
> >
PHP PHP
</ColorfulLink> </ColorfulLink>
,{" "} ,{" "}
<ColorfulLink <ColorfulLink
href="https://www.ruby-lang.org/en/" href="https://www.ruby-lang.org/en/"
title="Ruby Official Website" title="Ruby Official Website"
lightColor="#d34135" lightColor="#d34135"
darkColor="#f95a4d" darkColor="#f95a4d"
external external
> >
Ruby Ruby
</ColorfulLink> </ColorfulLink>
, and{" "} , and{" "}
<ColorfulLink <ColorfulLink
href="https://golang.org/" href="https://golang.org/"
title="Golang Official Website" title="Golang Official Website"
lightColor="#00acd7" lightColor="#00acd7"
darkColor="#2ad1fb" darkColor="#2ad1fb"
external external
> >
Go Go
</ColorfulLink>{" "} </ColorfulLink>{" "}
too. too.
</p> </p>
<p> <p>
Whenever possible, I also apply my experience in{" "} Whenever possible, I also apply my experience in{" "}
<ColorfulLink <ColorfulLink
href="https://github.com/jakejarvis/awesome-shodan-queries" href="https://github.com/jakejarvis/awesome-shodan-queries"
title="jakejarvis/awesome-shodan-queries on GitHub" title="jakejarvis/awesome-shodan-queries on GitHub"
lightColor="#00b81a" lightColor="#00b81a"
darkColor="#57f06d" darkColor="#57f06d"
external external
> >
application security application security
</ColorfulLink> </ColorfulLink>
,{" "} ,{" "}
<ColorfulLink <ColorfulLink
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/" href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
title='"What is serverless computing?" on Cloudflare' title='"What is serverless computing?" on Cloudflare'
lightColor="#0098ec" lightColor="#0098ec"
darkColor="#43b9fb" darkColor="#43b9fb"
external external
> >
serverless stacks serverless stacks
</ColorfulLink> </ColorfulLink>
, and{" "} , and{" "}
<ColorfulLink <ColorfulLink
href="https://xkcd.com/1319/" href="https://xkcd.com/1319/"
title='"Automation" on xkcd' title='"Automation" on xkcd'
lightColor="#ff6200" lightColor="#ff6200"
darkColor="#f46c16" darkColor="#f46c16"
external external
> >
DevOps automation DevOps automation
</ColorfulLink> </ColorfulLink>
. .
</p> </p>
<p> <p>
I fell in love with{" "} I fell in love with{" "}
<ColorfulLink <ColorfulLink
href="/previously/" href="/previously/"
title="My Terrible, Horrible, No Good, Very Bad First Websites" title="My Terrible, Horrible, No Good, Very Bad First Websites"
lightColor="#4169e1" lightColor="#4169e1"
darkColor="#8ca9ff" darkColor="#8ca9ff"
> >
frontend web design frontend web design
</ColorfulLink>{" "} </ColorfulLink>{" "}
and{" "} and{" "}
<ColorfulLink <ColorfulLink
href="/notes/my-first-code/" href="/notes/my-first-code/"
title="Jake's Bulletin Board, circa 2003" title="Jake's Bulletin Board, circa 2003"
lightColor="#9932cc" lightColor="#9932cc"
darkColor="#d588fb" darkColor="#d588fb"
> >
backend programming backend programming
</ColorfulLink>{" "} </ColorfulLink>{" "}
back when my only source of income was{" "} back when my only source of income was{" "}
<span className="birthday"> <span className="birthday">
<ColorfulLink <ColorfulLink
href="/birthday/" href="/birthday/"
title="🎉 Cranky Birthday Boy on VHS Tape 📼" title="🎉 Cranky Birthday Boy on VHS Tape 📼"
lightColor="#e40088" lightColor="#e40088"
darkColor="#fd40b1" darkColor="#fd40b1"
> >
the Tooth Fairy the Tooth Fairy
</ColorfulLink> </ColorfulLink>
</span> </span>
. <span className="quiet">I've improved a bit since then, I think...</span> . <span className="quiet">I've improved a bit since then, I think...</span>
</p> </p>
<p> <p>
Over the years, some of my side projects{" "} Over the years, some of my side projects{" "}
<ColorfulLink <ColorfulLink
href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/" href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/"
title='"Student designs iPhone JoeyTracker app" on The Tufts Daily' title='"Student designs iPhone JoeyTracker app" on The Tufts Daily'
lightColor="#ff1b1b" lightColor="#ff1b1b"
darkColor="#f06060" darkColor="#f06060"
external external
> >
have have
</ColorfulLink>{" "} </ColorfulLink>{" "}
<ColorfulLink <ColorfulLink
href="/leo/" href="/leo/"
title="Powncer segment on The Lab with Leo Laporte (G4techTV)" title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
lightColor="#f78200" lightColor="#f78200"
darkColor="#fd992a" darkColor="#fd992a"
> >
been been
</ColorfulLink>{" "} </ColorfulLink>{" "}
<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" 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)' title='"The Facebook Effect" by David Kirkpatrick (Google Books)'
lightColor="#f2b702" lightColor="#f2b702"
darkColor="#ffcc2e" darkColor="#ffcc2e"
external external
> >
featured featured
</ColorfulLink>{" "} </ColorfulLink>{" "}
<ColorfulLink <ColorfulLink
href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm" href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm"
title='"The new Facebook is on a roll" on CNN Money' title='"The new Facebook is on a roll" on CNN Money'
lightColor="#5ebd3e" lightColor="#5ebd3e"
darkColor="#78df55" darkColor="#78df55"
external external
> >
by by
</ColorfulLink>{" "} </ColorfulLink>{" "}
<ColorfulLink <ColorfulLink
href="https://www.wired.com/2007/04/our-web-servers/" href="https://www.wired.com/2007/04/our-web-servers/"
title='"Middio: A YouTube Scraper for Major Label Music Videos" on Wired' title='"Middio: A YouTube Scraper for Major Label Music Videos" on Wired'
lightColor="#009cdf" lightColor="#009cdf"
darkColor="#29bfff" darkColor="#29bfff"
external external
> >
various various
</ColorfulLink>{" "} </ColorfulLink>{" "}
<ColorfulLink <ColorfulLink
href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/" 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' title='"Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom'
lightColor="#3e49bb" lightColor="#3e49bb"
darkColor="#7b87ff" darkColor="#7b87ff"
external external
> >
media media
</ColorfulLink>{" "} </ColorfulLink>{" "}
<ColorfulLink <ColorfulLink
href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/" href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/"
title='"Your Next Client? The CEO&#39;s Son" on Advertising Age' title='"Your Next Client? The CEO&#39;s Son" on Advertising Age'
lightColor="#973999" lightColor="#973999"
darkColor="#db60dd" darkColor="#db60dd"
external external
> >
outlets outlets
</ColorfulLink> </ColorfulLink>
. .
</p> </p>
<p> <p>
You can find more of my work on{" "} You can find more of my work on{" "}
<ColorfulLink <ColorfulLink
href="https://github.com/jakejarvis" href="https://github.com/jakejarvis"
title="Jake Jarvis on GitHub" title="Jake Jarvis on GitHub"
lightColor="#8d4eff" lightColor="#8d4eff"
darkColor="#a379f0" darkColor="#a379f0"
external external
> >
GitHub GitHub
</ColorfulLink>{" "} </ColorfulLink>{" "}
and{" "} and{" "}
<ColorfulLink <ColorfulLink
href="https://www.linkedin.com/in/jakejarvis/" href="https://www.linkedin.com/in/jakejarvis/"
title="Jake Jarvis on LinkedIn" title="Jake Jarvis on LinkedIn"
lightColor="#0073b1" lightColor="#0073b1"
darkColor="#3b9dd2" darkColor="#3b9dd2"
external external
> >
LinkedIn LinkedIn
</ColorfulLink> </ColorfulLink>
. I'm always available to connect over{" "} . I'm always available to connect over{" "}
<ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050"> <ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
email email
</ColorfulLink>{" "} </ColorfulLink>{" "}
<sup className="monospace pgp_key"> <sup className="monospace pgp_key">
<ColorfulLink href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external> <ColorfulLink
<LockIcon /> 2B0C 9CF2 51E6 9A39 className="no-underline"
</ColorfulLink> href="/pubkey.asc"
</sup> title="My Public Key"
,{" "} lightColor="#757575"
<ColorfulLink darkColor="#959595"
href="https://twitter.com/jakejarvis" external
title="Jake Jarvis on Twitter" >
lightColor="#00acee" <LockIcon /> 2B0C 9CF2 51E6 9A39
darkColor="#3bc9ff" </ColorfulLink>
external </sup>
> ,{" "}
Twitter <ColorfulLink
</ColorfulLink> href="https://twitter.com/jakejarvis"
, or{" "} title="Jake Jarvis on Twitter"
<ColorfulLink lightColor="#00acee"
href="sms:+1-617-917-3737" darkColor="#3bc9ff"
title="Send SMS to +1 (617) 917-3737" external
lightColor="#6fcc01" >
darkColor="#8edb34" Twitter
> </ColorfulLink>
SMS , or{" "}
</ColorfulLink>{" "} <ColorfulLink
as well! href="sms:+1-617-917-3737"
</p> title="Send SMS to +1 (617) 917-3737"
lightColor="#6fcc01"
darkColor="#8edb34"
>
SMS
</ColorfulLink>{" "}
as well!
</p>
</div>
</Content>
<style jsx>{` <style jsx>{`
h1 { .home {
font-size: 1.1em;
line-height: 1;
}
.home h1 {
margin: 0 0 0.5em -0.03em; margin: 0 0 0.5em -0.03em;
font-size: 1.8em; font-size: 1.8em;
font-weight: 500; font-weight: 500;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
h2 { .home h2 {
margin: 0.5em 0 0.5em -0.03em; margin: 0.5em 0 0.5em -0.03em;
font-size: 1.35em; font-size: 1.35em;
font-weight: 400; font-weight: 400;
letter-spacing: -0.016em; letter-spacing: -0.016em;
line-height: 1.4; line-height: 1.4;
} }
p { .home p {
margin: 0.85em 0; margin: 0.85em 0;
letter-spacing: -0.004em; letter-spacing: -0.004em;
line-height: 1.7; line-height: 1.7;
} }
p:last-of-type { .home p:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
.wave { .home .wave {
display: inline-block; display: inline-block;
margin-left: 0.1em; margin-left: 0.1em;
animation: wave 5s infinite; animation: wave 5s infinite;
@@ -314,19 +330,18 @@ const Index = () => (
transform-origin: 65% 80%; transform-origin: 65% 80%;
will-change: transform; will-change: transform;
} }
.pgp_key { .home .pgp_key {
margin: 0 0.15em; margin: 0 0.15em;
font-size: 0.65em; font-size: 0.65em;
word-spacing: -0.3em; word-spacing: -0.3em;
} }
.pgp_key :global(a) { .home .pgp_key :global(a) {
background: none !important; background: none !important;
padding-bottom: 0;
} }
.quiet { .home .quiet {
color: var(--medium-light); color: var(--medium-light);
} }
.birthday :global(a:hover) { .home .birthday :global(a:hover) {
/* magic wand cursor easter egg */ /* 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>") 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, 16 0,
@@ -334,14 +349,14 @@ const Index = () => (
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
h1 { .home h1 {
font-size: 1.5em; font-size: 1.5em;
} }
h2 { .home h2 {
font-size: 1.2em; font-size: 1.2em;
} }
p { .home p {
font-size: 0.95em; font-size: 0.925em;
} }
} }

5
pages/notes/index.tsx
View File

@@ -1,5 +1,6 @@
import { NextSeo } from "next-seo"; import { NextSeo } from "next-seo";
import { format } from "date-fns"; import { format } from "date-fns";
import Content from "../../components/Content/Content";
import NotesList from "../../components/NotesList/NotesList"; import NotesList from "../../components/NotesList/NotesList";
import { getAllNotes } from "../../lib/parse-notes"; import { getAllNotes } from "../../lib/parse-notes";
import type { GetStaticProps } from "next"; import type { GetStaticProps } from "next";
@@ -14,7 +15,9 @@ const Notes = ({ notesByYear }) => (
}} }}
/> />
<NotesList notesByYear={notesByYear} /> <Content>
<NotesList notesByYear={notesByYear} />
</Content>
</> </>
); );

29
pages/projects.tsx
View File

@@ -5,6 +5,7 @@ import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
import { ProjectsIcon } from "../components/Icons"; import { ProjectsIcon } from "../components/Icons";
import type { GetStaticProps } from "next"; import type { GetStaticProps } from "next";
import { RepoType } from "../types"; import { RepoType } from "../types";
import Content from "../components/Content/Content";
type Props = { type Props = {
repos: RepoType[]; repos: RepoType[];
@@ -23,19 +24,21 @@ const Projects = ({ repos }: Props) => (
<ProjectsIcon /> Projects <ProjectsIcon /> Projects
</PageTitle> </PageTitle>
<div className="wrapper"> <Content>
{repos.map((repo: RepoType) => ( <div className="wrapper">
<div key={repo.name} className="card"> {repos.map((repo: RepoType) => (
<RepositoryCard {...repo} /> <div key={repo.name} className="card">
</div> <RepositoryCard {...repo} />
))} </div>
</div> ))}
</div>
<p className="view_more"> <p className="view_more">
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
View more on GitHub... View more on GitHub...
</a> </a>
</p> </p>
</Content>
<style jsx>{` <style jsx>{`
.wrapper { .wrapper {
@@ -44,6 +47,8 @@ const Projects = ({ repos }: Props) => (
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
font-size: 1.1em;
line-height: 1.1;
} }
.card { .card {

17
styles/index.css
View File

@@ -9,24 +9,7 @@ body {
} }
a { a {
color: var(--link);
text-decoration: none; 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 */ /* make SVG icons relative in size/position to surrounding text */