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

remove react-spring dependency

Browse Source
This commit is contained in:
Jake Jarvis
2025-03-08 23:13:32 -05:00
parent 6f31bc53c8
commit e166c63988
18 changed files with 200 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/contact/form.module.css
View File

@ -6,7 +6,6 @@
border-radius: var(--radii-corner);
color: var(--colors-text);
background-color: var(--colors-superDuperLight);
transition: background var(--transitions-fade);
}
.input:focus {

1
app/global.css
View File

@ -1,7 +1,6 @@
body {
font-family: var(--fonts-sans) !important;
background-color: var(--colors-backgroundInner);
transition: background var(--transitions-fade);
}
code,

58
app/page.module.css
View File

@ -34,41 +34,35 @@
display: inline-block;
margin-left: 0.1em;
font-size: 1.2em;
animation: wave 5s ease 1s infinite;
transform-origin: 65% 80%;
}
@media (prefers-reduced-motion: no-preference) {
.wave {
animation: wave 5s ease 1s infinite;
transform-origin: 65% 80%;
will-change: transform;
@keyframes wave {
0% {
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 ~9 out of 10 seconds */
100% {
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);
}
}

134
app/page.tsx
View File

@ -1,38 +1,36 @@
import { useId } from "react";
import { GoLock } from "react-icons/go";
import hash from "@emotion/hash";
import { rgba } from "polished";
import Link from "../components/Link";
import { GoLock } from "react-icons/go";
import UnstyledLink from "../components/Link";
import type { ComponentPropsWithoutRef } from "react";
import type { Route } from "next";
import styles from "./page.module.css";
const ColorfulLink = ({
const Link = ({
lightColor,
darkColor,
children,
...rest
}: ComponentPropsWithoutRef<typeof Link> & {
}: ComponentPropsWithoutRef<typeof UnstyledLink> & {
lightColor: string;
darkColor: string;
}) => {
const uniqueId = `styled_${useId().replaceAll(":", "")}`;
const uniqueId = hash(`${lightColor},${darkColor}`);
return (
<>
<Link id={uniqueId} {...rest}>
{children}
</Link>
<UnstyledLink className={`t_${uniqueId}`} {...rest}>
{children}
<style
// workaround to have react combine all of the inline styles into a single <style> tag in the <head>, see:
// workaround to have react combine all of these inline styles into a single <style> tag up top, see:
// https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet
href={uniqueId}
precedence={styles.page}
>
{`.${styles.page} #${uniqueId}{--colors-link:${lightColor};--colors-linkUnderline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .${styles.page} #${uniqueId}{--colors-link:${darkColor};--colors-linkUnderline:${rgba(darkColor, 0.4)}}`}
{`.t_${uniqueId}{--colors-link:${lightColor};--colors-linkUnderline:${rgba(lightColor, 0.4)}}[data-theme="dark"] .t_${uniqueId}{--colors-link:${darkColor};--colors-linkUnderline:${rgba(darkColor, 0.4)}}`}
</style>
</>
</UnstyledLink>
);
};
@ -45,113 +43,103 @@ export default function Page() {
<h2>
I'm a frontend web developer based in the{" "}
<ColorfulLink
<Link
href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
title='"Boston Accent Trailer - Late Night with Seth Meyers" on YouTube'
lightColor="#fb4d42"
darkColor="#ff5146"
>
Boston
</ColorfulLink>{" "}
</Link>{" "}
area.
</h2>
<p>
I specialize in{" "}
<ColorfulLink
href="https://reactjs.org/"
title="React Official Website"
lightColor="#1091b3"
darkColor="#6fcbe3"
>
<Link href="https://reactjs.org/" title="React Official Website" lightColor="#1091b3" darkColor="#6fcbe3">
React
</ColorfulLink>{" "}
</Link>{" "}
and{" "}
<ColorfulLink
<Link
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>{" "}
</Link>{" "}
to make nifty{" "}
<ColorfulLink href="https://jamstack.wtf/" title="WTF is Jamstack?" lightColor="#04a699" darkColor="#08bbac">
<Link href="https://jamstack.wtf/" title="WTF is Jamstack?" lightColor="#04a699" darkColor="#08bbac">
Jamstack sites
</ColorfulLink>{" "}
</Link>{" "}
with dynamic{" "}
<ColorfulLink
href="https://nodejs.org/en/"
title="Node.js Official Website"
lightColor="#6fbc4e"
darkColor="#84d95f"
>
<Link href="https://nodejs.org/en/" title="Node.js Official Website" lightColor="#6fbc4e" darkColor="#84d95f">
Node.js
</ColorfulLink>{" "}
</Link>{" "}
services. But I still know my way around less buzzwordy stacks like{" "}
<ColorfulLink
<Link
href="https://www.jetbrains.com/lp/php-25/"
title="25 Years of PHP History"
lightColor="#8892bf"
darkColor="#a4afe3"
>
LAMP
</ColorfulLink>
</Link>
, too.
</p>
<p>
Whenever possible, I also apply my experience in{" "}
<ColorfulLink
<Link
href="https://bugcrowd.com/jakejarvis"
title="Jake Jarvis on Bugcrowd"
lightColor="#00b81a"
darkColor="#57f06d"
>
application security
</ColorfulLink>
</Link>
,{" "}
<ColorfulLink
<Link
href="https://www.cloudflare.com/learning/serverless/what-is-serverless/"
title='"What is serverless computing?" on Cloudflare'
lightColor="#0098ec"
darkColor="#43b9fb"
>
serverless stacks
</ColorfulLink>
</Link>
, and{" "}
<ColorfulLink
<Link
href="https://github.com/jakejarvis?tab=repositories&q=github-actions&type=source&language=&sort=stargazers"
title='My repositories tagged with "github-actions" on GitHub'
lightColor="#ff6200"
darkColor="#f46c16"
>
DevOps automation
</ColorfulLink>
</Link>
.
</p>
<p>
I fell in love with{" "}
<ColorfulLink
<Link
href="/previously"
title="My Terrible, Horrible, No Good, Very Bad First Websites"
lightColor="#4169e1"
darkColor="#8ca9ff"
>
frontend web design
</ColorfulLink>{" "}
</Link>{" "}
and{" "}
<ColorfulLink
<Link
href={"/notes/my-first-code" as Route}
title="Jake's Bulletin Board, circa 2003"
lightColor="#9932cc"
darkColor="#d588fb"
>
backend programming
</ColorfulLink>{" "}
</Link>{" "}
when my only source of income was{" "}
<ColorfulLink
<Link
href="/birthday"
title="🎉 Cranky Birthday Boy on VHS Tape 📼"
lightColor="#e40088"
@ -161,74 +149,74 @@ export default function Page() {
}}
>
the Tooth Fairy
</ColorfulLink>
</Link>
. <span style={{ color: "var(--colors-mediumLight)" }}>I've improved a bit since then, I think? 🤷</span>
</p>
<p>
Over the years, some of my side projects{" "}
<ColorfulLink
<Link
href="/leo"
title="Powncer segment on The Lab with Leo Laporte (G4techTV)"
lightColor="#ff1b1b"
darkColor="#f06060"
>
have
</ColorfulLink>{" "}
<ColorfulLink
</Link>{" "}
<Link
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
</Link>{" "}
<Link
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
</Link>{" "}
<Link
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
</Link>{" "}
<Link
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
</Link>{" "}
<Link
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
</Link>{" "}
<Link
href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/"
title='"Your Next Client? The CEO&#39;s Son" on Advertising Age'
lightColor="#973999"
darkColor="#db60dd"
>
outlets
</ColorfulLink>
</Link>
.
</p>
<p>
You can find my work on{" "}
<ColorfulLink
<Link
href="https://github.com/jakejarvis"
rel="me"
title="Jake Jarvis on GitHub"
@ -236,9 +224,9 @@ export default function Page() {
darkColor="#a379f0"
>
GitHub
</ColorfulLink>{" "}
</Link>{" "}
and{" "}
<ColorfulLink
<Link
href="https://www.linkedin.com/in/jakejarvis/"
rel="me"
title="Jake Jarvis on LinkedIn"
@ -246,13 +234,13 @@ export default function Page() {
darkColor="#3b9dd2"
>
LinkedIn
</ColorfulLink>
</Link>
. I'm always available to connect over{" "}
<ColorfulLink href="/contact" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
<Link href="/contact" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
email
</ColorfulLink>{" "}
</Link>{" "}
<sup>
<ColorfulLink
<Link
href={"/pubkey.asc" as Route}
rel="pgpkey authn"
title="My Public Key"
@ -278,10 +266,10 @@ export default function Page() {
>
2B0C 9CF2 51E6 9A39
</span>
</ColorfulLink>
</Link>
</sup>
,{" "}
<ColorfulLink
<Link
href="https://bsky.app/profile/jarv.is"
rel="me"
title="Jake Jarvis on Bluesky"
@ -289,9 +277,9 @@ export default function Page() {
darkColor="#208bfe"
>
Bluesky
</ColorfulLink>
</Link>
, or{" "}
<ColorfulLink
<Link
href="https://fediverse.jarv.is/@jake"
rel="me"
title="Jake Jarvis on Mastodon"
@ -299,7 +287,7 @@ export default function Page() {
darkColor="#7b87ff"
>
Mastodon
</ColorfulLink>{" "}
</Link>{" "}
as well!
</p>
</div>

1
app/projects/page.module.css
View File

@ -16,7 +16,6 @@
border-radius: var(--radii-corner);
font-size: 0.9em;
color: var(--colors-mediumDark);
transition: border var(--transitions-fade);
}
.card .name {

1
app/themes.css
View File

@ -28,7 +28,6 @@
--colors-codeDeletion: #ff1b1b;
--sizes-maxLayoutWidth: 865px;
--radii-corner: 0.6rem;
--transitions-fade: 0.25s ease;
}
[data-theme="dark"] {