chore(prettier): 🤖 ✨

github-actions[bot] · github-actions[bot] · commit 03e587953921 · 2024-02-07T14:25:51.000Z
diff --git a/components/ExperienceStats.tsx b/components/ExperienceStats.tsx
@@ -34,17 +34,17 @@ export default memo(function ExperienceStats({ then }: { then: Date }) {
       <h1 className="mb-3 text-lg font-medium leading-6 text-slate-700">
         {t('title')}
       </h1>
-      <dl className="mt-5 grid grid-cols-1 gap-5 print:grid-cols-3 sm:grid-cols-3">
+      <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3 print:grid-cols-3">
         {stats.map((item) => (
           <div
             key={item.name}
-            className="group relative overflow-hidden rounded-2xl bg-slate-900 px-4 py-5 print:p-6 sm:p-6"
+            className="group relative overflow-hidden rounded-2xl bg-slate-900 px-4 py-5 sm:p-6 print:p-6"
           >
             <dt className="truncate text-sm font-medium text-slate-400">
               {item.name}
             </dt>
             <Since since={item.since} then={then} />
-            <span className="absolute top-1/2 right-4 -translate-y-6 transform-gpu opacity-25 mix-blend-screen transition-opacity group-hover:opacity-100">
+            <span className="absolute right-4 top-1/2 -translate-y-6 transform-gpu opacity-25 mix-blend-screen transition-opacity group-hover:opacity-100">
               <span className="relative inline-block h-12 w-12">
                 <Image src={item.logo} alt="" layout="fill" />
               </span>
diff --git a/components/ExperienceTimeline.tsx b/components/ExperienceTimeline.tsx
@@ -26,7 +26,7 @@ export default memo(function ExperienceTimeline({
               <div className="relative pb-8">
                 {experienceIdx !== experiences.length - 1 ? (
                   <span
-                    className="absolute top-5 left-6 -ml-px h-full w-0.5 bg-slate-200"
+                    className="absolute left-6 top-5 -ml-px h-full w-0.5 bg-slate-200"
                     aria-hidden="true"
                   />
                 ) : null}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -68,7 +68,7 @@ export default memo(function Footer({
   )
 
   return (
-    <footer className="mt-5 mb-6 py-6 text-center text-xs print:mb-0 print:pb-0">
+    <footer className="mb-6 mt-5 py-6 text-center text-xs print:mb-0 print:pb-0">
       {generated}
       <RelativeWhen
         date={buildDate}
diff --git a/components/LocaleSwitch.tsx b/components/LocaleSwitch.tsx
@@ -46,7 +46,7 @@ export default memo(function LocaleSwitch({
           <Link
             key={locale}
             className={cx(
-              'transform-cpu rounded-[0.4rem] py-1.5 px-3 text-sm font-medium leading-4 ring-white ring-opacity-60 ring-offset-2 ring-offset-slate-400 transition focus:outline-none focus-visible:ring-2 active:scale-95',
+              'transform-cpu rounded-[0.4rem] px-3 py-1.5 text-sm font-medium leading-4 ring-white ring-opacity-60 ring-offset-2 ring-offset-slate-400 transition focus:outline-none focus-visible:ring-2 active:scale-95',
               {
                 'pointer-events-none bg-white text-slate-600 shadow shadow-slate-500/25':
                   locale === currentLocale,
diff --git a/components/OpenSourceStats.tsx b/components/OpenSourceStats.tsx
@@ -68,14 +68,14 @@ export default memo(function OpenSourceStats({
       <h1 className="mb-3 text-lg font-medium leading-6 text-slate-700">
         {t('title')}
       </h1>
-      <dl className="mt-5 grid grid-cols-1 gap-5 print:grid-cols-2 sm:grid-cols-2">
+      <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 print:grid-cols-2">
         {stats.map((item) => (
           <a
             key={item.name}
             href={item.url}
             target="_blank"
             rel="noopener noreferrer"
-            className="overflow-hidden rounded-2xl bg-slate-900 px-4 py-5 transition hover:bg-slate-800 hover:shadow-lg hover:shadow-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-800 focus-visible:ring-offset-2 active:scale-95 active:bg-slate-900 active:shadow-slate-500/75 print:p-6 sm:p-6"
+            className="overflow-hidden rounded-2xl bg-slate-900 px-4 py-5 transition hover:bg-slate-800 hover:shadow-lg hover:shadow-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-800 focus-visible:ring-offset-2 active:scale-95 active:bg-slate-900 active:shadow-slate-500/75 sm:p-6 print:p-6"
           >
             <dt className="truncate text-sm font-medium text-slate-400">
               {t(item.name)}
diff --git a/components/ProfileCard.tsx b/components/ProfileCard.tsx
@@ -48,8 +48,8 @@ export default memo(function ProfileCard({
       <section className="rounded-2xl border border-slate-300 border-opacity-25 bg-slate-50">
         <h1 className="sr-only">{t('title')}</h1>
         <div className="px-6 py-4">
-          <div className="print:flex print:items-center print:justify-between sm:flex sm:items-center sm:justify-between">
-            <div className="print:flex print:space-x-5 sm:flex sm:space-x-5">
+          <div className="sm:flex sm:items-center sm:justify-between print:flex print:items-center print:justify-between">
+            <div className="sm:flex sm:space-x-5 print:flex print:space-x-5">
               <div className="flex-shrink-0">
                 <a
                   className="relative mx-auto block h-20 w-20 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-offset-2"
@@ -65,27 +65,27 @@ export default memo(function ProfileCard({
                     width={256}
                     quality={100}
                   />
-                  <span className="absolute top-0 right-0 bottom-0 left-0 block rounded-full shadow-[inset_0_0_1px_1px_rgba(30,41,59,0.2)]" />
+                  <span className="absolute bottom-0 left-0 right-0 top-0 block rounded-full shadow-[inset_0_0_1px_1px_rgba(30,41,59,0.2)]" />
                 </a>
               </div>
-              <div className="mt-4 text-center print:mt-0 print:pt-1 print:text-left sm:mt-0 sm:pt-1 sm:text-left">
+              <div className="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left print:mt-0 print:pt-1 print:text-left">
                 <p className="text-sm font-medium text-slate-600">
                   {t('role')}
                 </p>
-                <p className="text-xl font-bold text-slate-900 print:text-2xl sm:text-2xl">
+                <p className="text-xl font-bold text-slate-900 sm:text-2xl print:text-2xl">
                   {t('name')}
                 </p>
                 <Subheading t={t} then={then} intl={intl} />
               </div>
             </div>
-            <div className="mt-5 flex justify-center print:mt-0 sm:mt-0">
+            <div className="mt-5 flex justify-center sm:mt-0 print:mt-0">
               <button
                 type="button"
                 className="inline-flex items-center rounded-lg border border-transparent bg-sky-600 px-5 py-2 text-sm font-medium text-white transition hover:bg-sky-700 hover:shadow-sm hover:shadow-sky-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 active:bg-sky-800 print:hidden"
                 onClick={() => window.print()}
               >
                 <PrinterIcon
-                  className="mr-2 -ml-1 h-5 w-5"
+                  className="-ml-1 mr-2 h-5 w-5"
                   aria-hidden="true"
                 />
                 {t('print')}
@@ -98,17 +98,17 @@ export default memo(function ProfileCard({
                 className="hidden items-center rounded-lg border border-transparent bg-slate-100 px-5 py-2 text-sm font-medium text-slate-500 print:inline-flex "
               >
                 <BadgeCheckIcon
-                  className="mr-2 -ml-1 h-5 w-5"
+                  className="-ml-1 mr-2 h-5 w-5"
                   aria-hidden="true"
                 />
                 {t('latest')}
               </a>
             </div>
           </div>
         </div>
-        <div className="border-t border-slate-200 border-opacity-50 px-6 py-4 print:px-6 sm:px-6">
-          <dl className="grid grid-cols-1 gap-x-4 gap-y-5 print:grid-cols-3 sm:grid-cols-3">
-            <div className="sm:order-0 print:order-0 print:row-span-2 sm:col-span-1 sm:row-span-2">
+        <div className="border-t border-slate-200 border-opacity-50 px-6 py-4 sm:px-6 print:px-6">
+          <dl className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-3 print:grid-cols-3">
+            <div className="sm:order-0 print:order-0 sm:col-span-1 sm:row-span-2 print:row-span-2">
               <Dt>{t('address')}</Dt>
               <Dd>
                 <span className="inline-grid grid-cols-1 gap-1">
@@ -120,7 +120,7 @@ export default memo(function ProfileCard({
                 </span>
               </Dd>
             </div>
-            <div className="print:order-1 print:col-span-1 sm:order-1 sm:col-span-1">
+            <div className="sm:order-1 sm:col-span-1 print:order-1 print:col-span-1">
               <Dt>{t('email')}</Dt>
               <Dd>
                 <a
@@ -131,7 +131,7 @@ export default memo(function ProfileCard({
                 </a>
               </Dd>
             </div>
-            <div className="print:order-3 print:col-span-1 sm:order-3 sm:col-span-1">
+            <div className="sm:order-3 sm:col-span-1 print:order-3 print:col-span-1">
               <Dt>{t('phone')}</Dt>
               <Dd>
                 {unlocked?.data?.phone ? (
@@ -148,7 +148,7 @@ export default memo(function ProfileCard({
                 )}
               </Dd>
             </div>
-            <div className="print:order-2 print:col-span-1 sm:order-2 sm:col-span-1">
+            <div className="sm:order-2 sm:col-span-1 print:order-2 print:col-span-1">
               <Dt>GitHub</Dt>
               <Dd>
                 <a
@@ -161,7 +161,7 @@ export default memo(function ProfileCard({
                 </a>
               </Dd>
             </div>
-            <div className="print:order-4 print:col-span-1 sm:order-4 sm:col-span-1">
+            <div className="sm:order-4 sm:col-span-1 print:order-4 print:col-span-1">
               <Dt>LinkedIn</Dt>
               <Dd>
                 <a
@@ -174,7 +174,7 @@ export default memo(function ProfileCard({
                 </a>
               </Dd>
             </div>
-            <div className="print:order-5 print:col-span-3 sm:order-5 sm:col-span-3">
+            <div className="sm:order-5 sm:col-span-3 print:order-5 print:col-span-3">
               <Dt>{t('about')}</Dt>
               <dd
                 className="mt-0.5 text-sm text-slate-900"
@@ -200,8 +200,8 @@ const Subheading = memo(function Birthday({
   const age = differenceInYears(then, birthday)
   return (
     <p className="text-sm font-medium text-slate-600">
-      <span className="block print:inline sm:inline">{t('pronouns')}</span>
-      <span className="hidden print:inline sm:inline">{' • '}</span>
+      <span className="block sm:inline print:inline">{t('pronouns')}</span>
+      <span className="hidden sm:inline print:inline">{' • '}</span>
       {t.rich('subheading', {
         birthday,
         age,
diff --git a/components/References.tsx b/components/References.tsx
@@ -66,7 +66,7 @@ function RedactedLabel() {
 
   return (
     <label
-      className="block h-10 cursor-pointer rounded-2xl bg-white py-2 px-4 text-opacity-50 transition-opacity hover:opacity-100"
+      className="block h-10 cursor-pointer rounded-2xl bg-white px-4 py-2 text-opacity-50 transition-opacity hover:opacity-100"
       htmlFor="unlock-button"
     >
       {t('redacted')}
diff --git a/components/SocialMediaCard.tsx b/components/SocialMediaCard.tsx
@@ -73,14 +73,14 @@ export default function SocialMediaCard({
               height={256}
               width={256}
             />
-            <span className="absolute top-0 bottom-0 left-0 right-0 block rounded-full bg-cyan-700 opacity-70 mix-blend-screen" />
+            <span className="absolute bottom-0 left-0 right-0 top-0 block rounded-full bg-cyan-700 opacity-70 mix-blend-screen" />
           </div>
         )}
         <div className="flex flex-col pl-6 pr-12 text-4xl font-medium leading-10 text-cyan-100">
           <div className="bg-gradient-to-r from-sky-100 to-teal-200 bg-clip-text text-transparent">
             {eyebrow}
           </div>
-          <div className="bg-gradient-to-r from-sky-100 to-teal-400 bg-clip-text pt-3 pb-6 text-9xl font-bold text-transparent">
+          <div className="bg-gradient-to-r from-sky-100 to-teal-400 bg-clip-text pb-6 pt-3 text-9xl font-bold text-transparent">
             {name}
           </div>
           <div className="bg-gradient-to-r from-sky-100 to-teal-400 bg-clip-text text-transparent">
diff --git a/components/UnlockButton.tsx b/components/UnlockButton.tsx
@@ -35,7 +35,7 @@ export default memo(function UnlockButton({
           id="unlock-button"
           type="button"
           className={cx(
-            'group relative flex items-center justify-center whitespace-nowrap rounded-lg border border-cyan-200/50 bg-cyan-100 py-1 px-4 text-sm text-cyan-700 shadow shadow-cyan-100/50 focus:outline-none ',
+            'group relative flex items-center justify-center whitespace-nowrap rounded-lg border border-cyan-200/50 bg-cyan-100 px-4 py-1 text-sm text-cyan-700 shadow shadow-cyan-100/50 focus:outline-none ',
             {
               'transform-gpu transition hover:animate-bounce group-hover:scale-110 group-hover:animate-none':
                 !unlocked,
@@ -47,13 +47,13 @@ export default memo(function UnlockButton({
           onClick={unlocked ? undefined : () => setOpen(true)}
         >
           {unlocked ? (
-            <LockOpenIcon className="mr-1.5 -ml-0.5 h-4" />
+            <LockOpenIcon className="-ml-0.5 mr-1.5 h-4" />
           ) : (
             <>
               {!open && (
-                <div className="pointer-events-none absolute top-0.5 right-3.5 bottom-0.5 left-3.5 z-[-1] animate-ping rounded-lg bg-cyan-100 transition-colors group-hover:animate-none group-hover:bg-opacity-0 group-focus:animate-none group-focus:bg-opacity-0 group-active:animate-none group-active:bg-opacity-0" />
+                <div className="pointer-events-none absolute bottom-0.5 left-3.5 right-3.5 top-0.5 z-[-1] animate-ping rounded-lg bg-cyan-100 transition-colors group-hover:animate-none group-hover:bg-opacity-0 group-focus:animate-none group-focus:bg-opacity-0 group-active:animate-none group-active:bg-opacity-0" />
               )}
-              <LockClosedIcon className="mr-1.5 -ml-0.5 h-4" />
+              <LockClosedIcon className="-ml-0.5 mr-1.5 h-4" />
             </>
           )}
           {unlocked ? t('unlocked') : t('unlock')}
@@ -77,7 +77,7 @@ export default memo(function UnlockButton({
         }}
       >
         {unlocked ? (
-          <div className="px-4 pt-4 pb-4">
+          <div className="px-4 pb-4 pt-4">
             <div className="rounded-md bg-green-50 p-4">
               <div className="flex">
                 <div className="flex-shrink-0">
@@ -106,13 +106,13 @@ export default memo(function UnlockButton({
                 }
               )}
             >
-              <CheckIcon className="mr-2 -ml-1 h-5 w-5" aria-hidden="true" />
+              <CheckIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
               {t('ok')}
             </button>
           </div>
         ) : (
           <form
-            className="px-4 pt-4 pb-4"
+            className="px-4 pb-4 pt-4"
             onSubmit={(event) => {
               event.preventDefault()
               if (!loading) {
@@ -188,7 +188,7 @@ export default memo(function UnlockButton({
             >
               {loading ? (
                 <svg
-                  className="mr-2 -ml-1 h-5 w-5 animate-spin text-white"
+                  className="-ml-1 mr-2 h-5 w-5 animate-spin text-white"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -209,7 +209,7 @@ export default memo(function UnlockButton({
                 </svg>
               ) : (
                 <LockOpenIcon
-                  className="mr-2 -ml-1 h-5 w-5"
+                  className="-ml-1 mr-2 h-5 w-5"
                   aria-hidden="true"
                 />
               )}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -49,8 +49,8 @@ export default function Index({
         <link rel="shortcut icon" type="image/png" href={favicon.src} />
       </Head>
       <div className="h-1 bg-gradient-to-r from-teal-400 to-blue-600" />
-      <main className="mx-auto max-w-[21cm] px-4 pt-4 font-sans text-slate-600 antialiased print:px-10 print:pt-5 sm:px-6 sm:pt-5 lg:px-8">
-        <div className="flex items-center justify-start pb-4 print:hidden sm:pb-5">
+      <main className="mx-auto max-w-[21cm] px-4 pt-4 font-sans text-slate-600 antialiased sm:px-6 sm:pt-5 lg:px-8 print:px-10 print:pt-5">
+        <div className="flex items-center justify-start pb-4 sm:pb-5 print:hidden">
           <LocaleSwitch displayNames={displayNames} />
           <UnlockButton
             error={error}

Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ export default memo(function Footer({`
`68`	`68`	`)`
`69`	`69`
`70`	`70`	`return (`
`71`		`- <footer className="mt-5 mb-6 py-6 text-center text-xs print:mb-0 print:pb-0">`
	`71`	`+ <footer className="mb-6 mt-5 py-6 text-center text-xs print:mb-0 print:pb-0">`
`72`	`72`	`{generated}`
`73`	`73`	`<RelativeWhen`
`74`	`74`	`date={buildDate}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export default memo(function LocaleSwitch({`
`46`	`46`	`<Link`
`47`	`47`	`key={locale}`
`48`	`48`	`className={cx(`
`49`		`- 'transform-cpu rounded-[0.4rem] py-1.5 px-3 text-sm font-medium leading-4 ring-white ring-opacity-60 ring-offset-2 ring-offset-slate-400 transition focus:outline-none focus-visible:ring-2 active:scale-95',`
	`49`	`+ 'transform-cpu rounded-[0.4rem] px-3 py-1.5 text-sm font-medium leading-4 ring-white ring-opacity-60 ring-offset-2 ring-offset-slate-400 transition focus:outline-none focus-visible:ring-2 active:scale-95',`
`50`	`50`	`{`
`51`	`51`	`'pointer-events-none bg-white text-slate-600 shadow shadow-slate-500/25':`
`52`	`52`	`locale === currentLocale,`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ function RedactedLabel() {`
`66`	`66`
`67`	`67`	`return (`
`68`	`68`	`<label`
`69`		`- className="block h-10 cursor-pointer rounded-2xl bg-white py-2 px-4 text-opacity-50 transition-opacity hover:opacity-100"`
	`69`	`+ className="block h-10 cursor-pointer rounded-2xl bg-white px-4 py-2 text-opacity-50 transition-opacity hover:opacity-100"`
`70`	`70`	`htmlFor="unlock-button"`
`71`	`71`	`>`
`72`	`72`	`{t('redacted')}`