Staging

src/components/collapsible-list.tsx

@@ -52,7 +52,7 @@ export function CollapsibleList<T>({
       </CollapsibleContent>
 
       {items.length > max && (
-        <div className="-mt-px flex h-12 items-center justify-center">
+        <div className="screen-line-top -mt-px flex h-12 items-center justify-center">
           <CollapsibleTrigger
             render={
               <Button

src/features/portfolio/data/user.ts

@@ -35,7 +35,7 @@ export const USER: User = {
   about: `
 - I’m Chánh Đại (call me Dai) — a Design Engineer with 5+ years of experience, known for pixel-perfect execution and an obsessive attention to detail.
 - Passionate about exploring new technologies and turning ideas into reality through polished, thoughtfully crafted projects.
-- Creator of [chanhdai.com](https://github.com/ncdai/chanhdai.com) (2k stars), [React Wheel Picker](https://react-wheel-picker.chanhdai.com) (24k+ weekly downloads, ▲Vercel OSS Program), and [ZaDark](https://zadark.com) (80k+ downloads, 30k+ users) — peak metrics.
+- Creator of [chanhdai.com](https://github.com/ncdai/chanhdai.com) (2k stars), [React Wheel Picker](https://react-wheel-picker.chanhdai.com) (26k+ weekly downloads, ▲Vercel OSS Program), and [ZaDark](https://zadark.com) (80k+ downloads, 30k+ users) — peak metrics.
 `,
   avatar: "https://assets.chanhdai.com/images/chanhdai-avatar-ghibli.webp",
   avatarVariants: {

src/lib/fonts.ts

@@ -1,17 +1,15 @@
-import localFont from "next/font/local"
+import { IBM_Plex_Serif } from "next/font/google"
 import { GeistMono } from "geist/font/mono"
-import { GeistPixelSquare } from "geist/font/pixel"
 import { GeistSans } from "geist/font/sans"
 
 import { cn } from "@/lib/utils"
 
 const fontSans = GeistSans
 const fontMono = GeistMono
 
-const fontSerif = localFont({
-  src: "../assets/fonts/charter_regular.woff2",
-  weight: "400",
-  fallback: ["Georgia", "serif"],
+const fontSerif = IBM_Plex_Serif({
+  weight: ["400"],
+  fallback: ["serif"],
   variable: "--font-serif",
 })
 
@@ -22,27 +20,25 @@ const fontSerif = localFont({
 //   variable: "--font-pixel",
 // })
 
-const pixelatedMSSansSerif = localFont({
-  src: [
-    {
-      path: "../assets/fonts/ms_sans_serif.woff2",
-      weight: "400",
-    },
-    {
-      path: "../assets/fonts/ms_sans_serif_bold.woff2",
-      weight: "700",
-    },
-  ],
-  fallback: ["Arial"],
-  variable: "--font-98cn",
-})
+// const pixelatedMSSansSerif = localFont({
+//   src: [
+//     {
+//       path: "../assets/fonts/ms_sans_serif.woff2",
+//       weight: "400",
+//     },
+//     {
+//       path: "../assets/fonts/ms_sans_serif_bold.woff2",
+//       weight: "700",
+//     },
+//   ],
+//   fallback: ["Arial"],
+//   variable: "--font-98cn",
+// })
 
 export const fontVariables = cn(
   fontSans.variable,
   fontMono.variable,
   fontSerif.variable,
-  GeistPixelSquare.variable,
-  pixelatedMSSansSerif.variable,
   "[--font-sans:var(--font-geist-sans)]",
   "[--font-mono:var(--font-geist-mono)]"
 )

src/styles/globals.css

@@ -116,7 +116,6 @@
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
   --font-serif: var(--font-serif);
-  --font-pixel-square: var(--font-geist-pixel-square);
   --font-heading: var(--font-sans);
 
   --default-mono-font-feature-settings: "ss11" 1, "zero" 1, "tnum" 1;