mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 15:28:28 -04:00
352 lines
9.4 KiB
TypeScript
352 lines
9.4 KiB
TypeScript
import Link, { LinkProps } from "../components/Link";
|
|
import { styled, keyframes, darkTheme } from "../lib/styles/stitches.config";
|
|
|
|
const ColorfulLink = ({
|
|
lightColor,
|
|
darkColor,
|
|
css,
|
|
...rest
|
|
}: LinkProps & {
|
|
lightColor: string;
|
|
darkColor: string;
|
|
}) => {
|
|
return (
|
|
<Link
|
|
css={{
|
|
color: lightColor,
|
|
setUnderlineVar: { color: lightColor },
|
|
|
|
[`.${darkTheme} &`]: {
|
|
color: darkColor,
|
|
setUnderlineVar: { color: darkColor },
|
|
},
|
|
|
|
...css,
|
|
}}
|
|
{...rest}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const H1 = styled("h1", {
|
|
margin: "0 0 0.5em -1px", // misaligned left margin, super nitpicky
|
|
fontSize: "1.8em",
|
|
fontWeight: 500,
|
|
lineHeight: 1.1,
|
|
color: "$text",
|
|
|
|
"@medium": {
|
|
fontSize: "1.6em",
|
|
},
|
|
});
|
|
|
|
const H2 = styled("h2", {
|
|
margin: "0.5em 0 0.5em -1px", // misaligned left margin, super nitpicky
|
|
fontSize: "1.35em",
|
|
fontWeight: 400,
|
|
lineHeight: 1.4,
|
|
color: "$text",
|
|
|
|
"@medium": {
|
|
fontSize: "1.25em",
|
|
},
|
|
});
|
|
|
|
const Paragraph = styled("p", {
|
|
margin: "0.85em 0",
|
|
lineHeight: 1.7,
|
|
color: "$text",
|
|
|
|
"&:last-of-type": {
|
|
marginBottom: 0,
|
|
},
|
|
|
|
"@medium": {
|
|
fontSize: "0.95em",
|
|
lineHeight: 1.825,
|
|
},
|
|
});
|
|
|
|
const Wave = styled("span", {
|
|
display: "inline-block",
|
|
marginLeft: "0.1em",
|
|
fontSize: "1.2em",
|
|
|
|
"@media (prefers-reduced-motion: no-preference)": {
|
|
animation: `${keyframes({
|
|
"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 ~9 out of 10 seconds
|
|
"100%": { transform: "rotate(0deg)" },
|
|
})} 5s ease 1s infinite`,
|
|
transformOrigin: "65% 80%",
|
|
willChange: "transform",
|
|
},
|
|
});
|
|
|
|
const Sup = styled("sup", {
|
|
margin: "0 0.15em",
|
|
fontSize: "0.65em",
|
|
});
|
|
|
|
const PGPKey = styled("code", {
|
|
marginLeft: "0.15em",
|
|
wordSpacing: "-0.4em",
|
|
});
|
|
|
|
const Quiet = styled("span", {
|
|
color: "$mediumLight",
|
|
});
|
|
|
|
const EasterEgg = styled(ColorfulLink, {
|
|
// rotated 🪄 emoji on hover
|
|
"&:hover": {
|
|
cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
|
|
},
|
|
});
|
|
|
|
const Index = () => (
|
|
<>
|
|
<H1>
|
|
Hi there! I'm Jake. <Wave>👋</Wave>
|
|
</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"
|
|
>
|
|
Boston
|
|
</ColorfulLink>
|
|
.
|
|
</H2>
|
|
|
|
<Paragraph>
|
|
I specialize in{" "}
|
|
<ColorfulLink href="https://reactjs.org/" title="React Official Website" lightColor="#1091b3" darkColor="#6fcbe3">
|
|
React
|
|
</ColorfulLink>{" "}
|
|
and{" "}
|
|
<ColorfulLink
|
|
href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/"
|
|
title='"The Cost of Javascript Frameworks" by Tim Kadlec'
|
|
lightColor="#f48024"
|
|
darkColor="#e18431"
|
|
>
|
|
vanilla JavaScript
|
|
</ColorfulLink>{" "}
|
|
to make nifty{" "}
|
|
<ColorfulLink href="https://jamstack.wtf/" title="WTF is Jamstack?" lightColor="#04a699" darkColor="#08bbac">
|
|
Jamstack sites
|
|
</ColorfulLink>{" "}
|
|
with dynamic{" "}
|
|
<ColorfulLink
|
|
href="https://nodejs.org/en/"
|
|
title="Node.js Official Website"
|
|
lightColor="#6fbc4e"
|
|
darkColor="#84d95f"
|
|
>
|
|
Node.js
|
|
</ColorfulLink>{" "}
|
|
services. But I still know my way around less buzzwordy stacks like{" "}
|
|
<ColorfulLink
|
|
href="https://www.jetbrains.com/lp/php-25/"
|
|
title="25 Years of PHP History"
|
|
lightColor="#8892bf"
|
|
darkColor="#a4afe3"
|
|
>
|
|
LAMP
|
|
</ColorfulLink>
|
|
, too.
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
Whenever possible, I also apply my experience in{" "}
|
|
<ColorfulLink
|
|
href="https://bugcrowd.com/jakejarvis"
|
|
title="Jake Jarvis on Bugcrowd"
|
|
lightColor="#00b81a"
|
|
darkColor="#57f06d"
|
|
>
|
|
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"
|
|
>
|
|
serverless stacks
|
|
</ColorfulLink>
|
|
, and{" "}
|
|
<ColorfulLink href="https://xkcd.com/1319/" title='"Automation" on xkcd' lightColor="#ff6200" darkColor="#f46c16">
|
|
DevOps automation
|
|
</ColorfulLink>
|
|
.
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
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{" "}
|
|
<EasterEgg
|
|
href="/birthday/"
|
|
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
|
|
lightColor="#e40088"
|
|
darkColor="#fd40b1"
|
|
>
|
|
the Tooth Fairy
|
|
</EasterEgg>
|
|
. <Quiet>I've improved a bit since then, I think? 🤷</Quiet>
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
Over the years, some of my side projects{" "}
|
|
<ColorfulLink
|
|
href="/leo/"
|
|
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
|
|
lightColor="#ff1b1b"
|
|
darkColor="#f06060"
|
|
>
|
|
have
|
|
</ColorfulLink>{" "}
|
|
<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="#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"
|
|
>
|
|
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"
|
|
>
|
|
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"
|
|
>
|
|
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"
|
|
>
|
|
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"
|
|
>
|
|
outlets
|
|
</ColorfulLink>
|
|
.
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
You can find more of my work on{" "}
|
|
<ColorfulLink
|
|
href="https://github.com/jakejarvis"
|
|
rel="me"
|
|
title="Jake Jarvis on GitHub"
|
|
lightColor="#8d4eff"
|
|
darkColor="#a379f0"
|
|
>
|
|
GitHub
|
|
</ColorfulLink>{" "}
|
|
and{" "}
|
|
<ColorfulLink
|
|
href="https://www.linkedin.com/in/jakejarvis/"
|
|
rel="me"
|
|
title="Jake Jarvis on LinkedIn"
|
|
lightColor="#0073b1"
|
|
darkColor="#3b9dd2"
|
|
>
|
|
LinkedIn
|
|
</ColorfulLink>
|
|
. I'm always available to connect over{" "}
|
|
<ColorfulLink href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
|
|
email
|
|
</ColorfulLink>{" "}
|
|
<Sup>
|
|
<ColorfulLink
|
|
href="/pubkey.asc"
|
|
rel="pgpkey authn"
|
|
title="My Public Key"
|
|
lightColor="#757575"
|
|
darkColor="#959595"
|
|
underline={false}
|
|
forceNewWindow
|
|
>
|
|
🔐 <PGPKey>2B0C 9CF2 51E6 9A39</PGPKey>
|
|
</ColorfulLink>
|
|
</Sup>
|
|
,{" "}
|
|
<ColorfulLink
|
|
href="https://twitter.com/jakejarvis"
|
|
rel="me"
|
|
title="Jake Jarvis on Twitter"
|
|
lightColor="#00acee"
|
|
darkColor="#3bc9ff"
|
|
>
|
|
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!
|
|
</Paragraph>
|
|
</>
|
|
);
|
|
|
|
export default Index;
|