Update styles (#1924)

.github/workflows/workflow.yml

@@ -12,5 +12,5 @@ jobs:
         run: bun install
       - name: Lint
         run: bun run lint
-      - name: Prettier check
-        run: bun run format:check
+      # - name: Prettier check
+      #   run: bun run format:check

src/components/Card.jsx

@@ -24,22 +24,33 @@ export function Card({ as: Component = 'div', className, children }) {
   )
 }
 
-Card.Link = function CardLink({ children, ...props }) {
+Card.Link = function CardLink({ children, blank, ...props }) {
   return (
     <>
       <div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 border-2 border-zinc-200/50 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:border group-hover:opacity-100 dark:border-zinc-300/20 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
-      <Link {...props}>
+      <Link {...props} target={blank ? '_blank' : '_self'}>
         <span className="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
         <span className="relative z-10">{children}</span>
       </Link>
     </>
   )
 }
 
-Card.Title = function CardTitle({ as: Component = 'h2', href, children }) {
+Card.Title = function CardTitle({
+  as: Component = 'h2',
+  blank = false,
+  href,
+  children,
+}) {
   return (
     <Component className="text-lg font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
-      {href ? <Card.Link href={href}>{children}</Card.Link> : children}
+      {href ? (
+        <Card.Link blank={blank} href={href}>
+          {children}
+        </Card.Link>
+      ) : (
+        children
+      )}
     </Component>
   )
 }

src/components/Footer.jsx

@@ -86,11 +86,11 @@ export function Footer() {
           <Container.Inner>
             <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
               <div className="flex gap-6 font-medium text-zinc-800 dark:text-zinc-200">
-                <NavLink href="/about">About</NavLink>
-                <NavLink href="/blog">Blog</NavLink>
+                <NavLink href="/about">about</NavLink>
+                <NavLink href="/blog">blog</NavLink>
                 {/* <NavLink href="/projects">Projects</NavLink> */}
-                <NavLink href="/speaking">Speaking</NavLink>
-                <NavLink href="/uses">Uses</NavLink>
+                <NavLink href="/speaking">speaking</NavLink>
+                <NavLink href="/uses">uses</NavLink>
               </div>
               <div className="flex">
                 <a

src/components/Header.jsx

@@ -5,7 +5,7 @@ import { Popover, Transition } from '@headlessui/react'
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
-import avatarImage from '@/images/profile.jpg'
+import avatarImage from '@/images/profile2.png'
 import { Fragment, useEffect, useRef } from 'react'
 
 function CloseIcon(props) {
@@ -121,11 +121,11 @@ function MobileNavigation(props) {
             </div>
             <nav className="mt-6">
               <ul className="-my-2 divide-y divide-zinc-100 text-lg text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
-                <MobileNavItem href="/about">About</MobileNavItem>
-                <MobileNavItem href="/blog">Blog</MobileNavItem>
+                <MobileNavItem href="/about">about</MobileNavItem>
+                <MobileNavItem href="/blog">blog</MobileNavItem>
                 {/* <MobileNavItem href="/projects">Projects</MobileNavItem> */}
-                <MobileNavItem href="/speaking">Speaking</MobileNavItem>
-                <MobileNavItem href="/uses">Uses</MobileNavItem>
+                <MobileNavItem href="/speaking">speaking</MobileNavItem>
+                <MobileNavItem href="/uses">uses</MobileNavItem>
               </ul>
             </nav>
           </Popover.Panel>
@@ -162,11 +162,10 @@ function DesktopNavigation(props) {
   return (
     <nav {...props}>
       <ul className="flex rounded-full bg-white/90 px-3 font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10">
-        <NavItem href="/about">About</NavItem>
-        <NavItem href="/blog">Blog</NavItem>
-        {/* <NavItem href="/projects">Projects</NavItem> */}
-        <NavItem href="/speaking">Speaking</NavItem>
-        <NavItem href="/uses">Uses</NavItem>
+        <NavItem href="/about">about</NavItem>
+        <NavItem href="/blog">blog</NavItem>
+        <NavItem href="/speaking">speaking</NavItem>
+        <NavItem href="/uses">uses</NavItem>
       </ul>
     </nav>
   )

src/components/Section.jsx

@@ -1,12 +1,16 @@
 import { useId } from 'react'
 
-export function Section({ title, children }) {
+export function Section({ title, children, border = true }) {
   let id = useId()
 
   return (
     <section
       aria-labelledby={id}
-      className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40"
+      className={
+        border
+          ? 'md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40'
+          : ''
+      }
     >
       <div className="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
         <h2 id={id} className="font-semibold text-zinc-800 dark:text-zinc-100">

src/components/SimpleLayout.jsx

@@ -4,7 +4,7 @@ export function SimpleLayout({ title, intro, children }) {
   return (
     <Container className="mt-16 sm:mt-32">
       <header className="max-w-2xl">
-        <h1 className="bg-gradient-to-r from-blue-600 to-fuchsia-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent dark:from-blue-300 dark:to-fuchsia-300 sm:text-5xl">
+        <h1 className="font-mono bg-gradient-to-r from-blue-600 to-fuchsia-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent dark:from-blue-300 dark:to-fuchsia-300 sm:text-5xl">
           {title}
         </h1>
         <p className="mt-6 text-lg text-zinc-600 dark:text-zinc-400">{intro}</p>

src/pages/_app.jsx

@@ -1,11 +1,24 @@
 import { useEffect, useRef } from 'react'
+import { Noto_Sans_Display, Noto_Sans_Mono } from 'next/font/google'
+import Head from 'next/head'
 
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
 
 import '@/styles/tailwind.css'
 import 'focus-visible'
 
+const notoDisplay = Noto_Sans_Display({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-noto-display',
+})
+const notoMono = Noto_Sans_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-noto-mono',
+})
+
 function usePrevious(value) {
   let ref = useRef()
 
@@ -26,7 +39,9 @@ export default function App({ Component, pageProps, router }) {
           <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
         </div>
       </div>
-      <div className="relative">
+      <div
+        className={`${notoDisplay.variable} ${notoMono.variable} font-mono relative font-sans`}
+      >
         <Header />
         <main>
           <Component previousPathname={previousPathname} {...pageProps} />

src/pages/_document.jsx

@@ -40,20 +40,6 @@ export default function Document() {
     <Html className="h-full antialiased" lang="en">
       <Head>
         <script dangerouslySetInnerHTML={{ __html: modeScript }} />
-        <link
-          rel="preload"
-          href="/fonts/ibm-plex-sans-var.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="preload"
-          href="/fonts/ibm-plex-sans-var-italic.woff2"
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
         <link
           rel="alternate"
           type="application/rss+xml"

src/pages/about.jsx

@@ -6,8 +6,7 @@ import clsx from 'clsx'
 import { Prose } from '@/components/Prose'
 import { Container } from '@/components/Container'
 import { TwitterIcon, GitHubIcon, LinkedInIcon } from '@/components/SocialIcons'
-// import portraitImage from '@/images/avatar.png'
-import portraitImage from '@/images/profile2.png'
+import speakingImage from '@/images/profile3.JPG'
 
 function SocialLink({ className, href, children, icon: Icon }) {
   return (
@@ -77,7 +76,8 @@ export default function About() {
           <div className="lg:pl-20">
             <div className="max-w-xs px-2.5 lg:max-w-none">
               <Image
-                src={portraitImage}
+                priority
+                src={speakingImage}
                 alt=""
                 sizes="(min-width: 1024px) 32rem, 20rem"
                 className="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
@@ -86,13 +86,12 @@ export default function About() {
           </div>
 
           <Prose className="lg:order-first lg:row-span-2">
-            <h1 className="bg-gradient-to-r from-blue-600 to-fuchsia-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent dark:from-blue-300 dark:to-fuchsia-300 sm:text-5xl">
-              I’m Alessia Bellisario, a software engineer based in New York
-              City.
+            <h1 className="font-mono bg-gradient-to-r from-blue-600 to-fuchsia-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent dark:from-blue-300 dark:to-fuchsia-300 sm:text-5xl">
+              hey there 👋
             </h1>
             <div className="mt-6 space-y-7 text-lg text-zinc-600 dark:text-zinc-400">
               <p>
-                I work on the{' '}
+                I&rsquo;m Alessia :^) I work on the{' '}
                 <a
                   href="https://github.com/apollographql/apollo-client"
                   target="_blank"
@@ -106,9 +105,9 @@ export default function About() {
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  Apollo GraphQL
+                  Apollo
                 </a>{' '}
-                as a Staff Open Source Engineer.
+                as a Staff Software Engineer.
               </p>
               <p>
                 In April 2019 I attended the{' '}
@@ -120,12 +119,11 @@ export default function About() {
                   Recurse Center
                 </a>
                 —I{`'`}m always happy to chat about RC with anyone considering
-                applying!
+                applying.
               </p>
               <p>
                 I{`'`}m using this space to write about programming and
-                occasionally building mechanical keyboards. If any of this is of
-                interest to you, say hi :^) You can reach me at{' '}
+                occasionally building mechanical keyboards. You can reach me at{' '}
                 <a href="mailto:[email protected]">web[at]bellisar.io</a>.
               </p>
               <p>Finally, this site contains no tracking or analytics 💖</p>

src/pages/blog.jsx

@@ -44,8 +44,8 @@ export default function ArticlesIndex({ articles }) {
         />
       </Head>
       <SimpleLayout
-        title="Blog"
-        intro="I've been writing online since 2014. Herein lies a haphazard collection of thoughts on web development accompanied by my annual Year in Review posts. Thanks for visiting 🌈"
+        title="blog"
+        intro="I've been writing sporadically online since 2014. Herein lies a collection of thoughts on web development accompanied by my annual Year in Review posts. Thanks for reading 🌈"
       >
         <div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
           <div className="flex max-w-3xl flex-col space-y-16">

src/pages/index.jsx

@@ -25,7 +25,7 @@ function ApolloLogo(props) {
       preserveAspectRatio="xMidYMid"
     >
       <path
-        fill="#3f20ba"
+        fill="#15252D"
         className="dark:fill-zinc-300 dark:stroke-zinc-500"
         d="M160.227 178.519h27.63L143.75 64.049h-30.549l-44.107 114.47h27.632l7.208-19.39h41.675l-7.544-21.456h-27.44l17.85-49.254 31.752 90.1zm91.112-84.751a6.641 6.641 0 0 0-8.185-4.627 6.648 6.648 0 0 0-4.628 8.183A114.646 114.646 0 0 1 242.704 128c0 63.248-51.456 114.702-114.704 114.702-63.248 0-114.703-51.454-114.703-114.702C13.297 64.751 64.752 13.296 128 13.296c26.793 0 52.718 9.518 73.179 26.456a15.938 15.938 0 0 0-1.238 6.173c0 8.835 7.162 15.997 15.997 15.997s15.997-7.162 15.997-15.997-7.162-15.997-15.997-15.997c-1.701 0-3.338.271-4.876.763C188.022 11.056 158.513 0 128 0 57.421 0 0 57.42 0 128c0 70.579 57.421 127.999 128 127.999 70.579 0 128-57.42 128-127.999a127.95 127.95 0 0 0-4.661-34.232z"
       />
@@ -67,29 +67,6 @@ function BreatherLogo(props) {
   )
 }
 
-function MailIcon(props) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      {...props}
-    >
-      <path
-        d="M2.75 7.75a3 3 0 0 1 3-3h12.5a3 3 0 0 1 3 3v8.5a3 3 0 0 1-3 3H5.75a3 3 0 0 1-3-3v-8.5Z"
-        className="fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500"
-      />
-      <path
-        d="m4 6 6.024 5.479a2.915 2.915 0 0 0 3.952 0L20 6"
-        className="stroke-zinc-400 dark:stroke-zinc-500"
-      />
-    </svg>
-  )
-}
-
 function BriefcaseIcon(props) {
   return (
     <svg
@@ -156,7 +133,7 @@ function Resume() {
   let resume = [
     {
       company: 'Apollo',
-      title: 'Staff Open Source Engineer',
+      title: 'Staff Software Engineer',
       Logo: ApolloLogo,
       start: '2022',
       end: {
@@ -166,14 +143,14 @@ function Resume() {
     },
     {
       company: 'Venmo',
-      title: 'Staff Product Engineer',
+      title: 'Staff Software Engineer',
       Logo: VenmoLogo,
       start: '2020',
       end: '2022',
     },
     {
       company: 'Breather',
-      title: 'Senior Web Engineer',
+      title: 'Senior Software Engineer',
       Logo: BreatherLogo,
       start: '2015',
       end: '2020',
@@ -295,12 +272,12 @@ export default function Home({ articles }) {
       </Head>
       <Container className="mt-9">
         <div className="max-w-lg">
-          <h1 className="bg-gradient-to-r from-blue-600 to-fuchsia-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent dark:from-blue-300 dark:to-fuchsia-300 sm:text-5xl">
+          <h1 className="font-mono bg-gradient-to-r from-blue-600 to-fuchsia-600 bg-clip-text text-4xl font-bold tracking-tight text-transparent dark:from-blue-300 dark:to-fuchsia-300 sm:text-5xl">
             Alessia Bellisario
           </h1>
           <p className="mt-6 text-lg text-zinc-600 dark:text-zinc-400">
             I’m Alessia, a software engineer based in New York City currently
-            building Apollo Client at Apollo GraphQL.
+            building Apollo Client.
           </p>
           <div className="mt-6 flex gap-6">
             <SocialLink