fix performance issues

Author: Austin1serb

.vscode/settings.json

@@ -1,18 +1,29 @@
 {
   "workbench.colorCustomizations": {
+    "editor.findMatchHighlightBorder": "#ff0000",
+    "editor.selectionHighlightBackground": "#006eff55",
+    "editor.selectionBackground": "#006effA5",
+    "highlight": "#ff0000",
+    "editor.findMatchBackground": "#3cff0085",
+    "editor.findMatchHighlightForeground": "#000000ea",
+    "editorLineNumber.foreground": "#9e95ffdf",
     "activityBar.background": "#3060fd",
-    "activityBar.inactiveForeground": "#a9a9a9",
-    "activityBar.foreground": "#fdfdfd",
     "titleBar.activeBackground": "#3060fd",
     "titleBar.activeForeground": "#FBFBFE",
+    "editor.lineHighlightBorder": "#9fced11f",
     "tab.activeBackground": "#232635",
     "tab.hoverBackground": "#2d3144",
     "editorIndentGuide.activeBackground1": "#95ff00",
     "editorUnnecessaryCode.border": "#ff0000",
     "list.activeSelectionBackground": "#0f74e098",
     "list.activeSelectionForeground": "#ffffff",
     "list.inactiveSelectionBackground": "#0f74e083",
-    "list.hoverBackground": "#0f74e0d8"
+    "list.hoverBackground": "#0f74e0d8",
+    "terminal.background": "#00000000",
+    "activityBar.inactiveForeground": "#a9a9a9",
+    "activityBar.foreground": "#fdfdfd",
+    "titleBar.inactiveBackground": "#0F2A64",
+    "titleBar.inactiveForeground": "#F8FAFE"
   },
   "typescript.tsdk": "node_modules/typescript/lib",
   "postman.settings.dotenv-detection-notification-visibility": false,

app/(site)/page.tsx

@@ -6,26 +6,11 @@ import { RecruiterContact } from "../components/RecruiterContact"
 import { Metadata } from "next"
 import { SITE_CONFIG, SITE_SLUGS } from "@/config/siteConfig"
 import { homeGraph } from "@/config/schemas"
-import Script from "next/script"
 
 export const metadata: Metadata = {
   title: SITE_CONFIG.title,
   description:
-    "Explore the web developer portfolio of Austin Serb, a full-stack engineer building fast, modern web applications. See what a professional coding portfolio looks like, featuring projects in React, Next.js, and the custom-built React-Zero-UI library.",
-
-  keywords: [
-    "Austin Serb",
-    "Web Developer Portfolio",
-    "Serbyte",
-    "React Zero-UI",
-    "Next.js",
-    "React",
-    "TypeScript",
-    "Full-Stack Engineer",
-    "Seattle",
-
-    "React Developer Portfolio",
-  ],
+    "Explore the web developer portfolio of Austin Serb, a full-stack engineer building fast, modern web applications. See what a professional coding portfolio looks like, featuring projects in React, Next.js, and a custom-built React-Zero-UI library.",
   authors: [{ name: "Austin Serb" }],
   creator: "Austin Serb",
   alternates: {
@@ -36,7 +21,7 @@ export const metadata: Metadata = {
 const PortfolioPage: React.FC = () => {
   return (
     <main className="overflow-hidden">
-      <Script
+      <script
         id="id-site-schema"
         type="application/ld+json"
         dangerouslySetInnerHTML={{

app/(site)/projects/ProjectsStatic.tsx

@@ -118,8 +118,8 @@ export const ProjectsStatic: React.FC = () => {
       <div className="inside-container-small">
         <div className="relative z-4 grid grid-cols-1 grid-rows-1 gap-4 md:grid-cols-2 md:grid-rows-2">
           {STATIC_PROJECTS.map((project) => {
-            const ProjectWrapper = project.isExternal ? "a" : Link
-            const wrapperProps = project.isExternal
+            const Tag = project.isExternal ? "a" : Link
+            const tagProps = project.isExternal
               ? {
                   href: project.href,
                   target: "_blank",
@@ -135,9 +135,9 @@ export const ProjectsStatic: React.FC = () => {
                 }
 
             return (
-              <ProjectWrapper key={project.id} {...wrapperProps}>
+              <Tag key={project.id} {...tagProps}>
                 <Card src={project.src} alt={project.alt} color={project.color} type={project.type} reveal={false} text={project.text} />
-              </ProjectWrapper>
+              </Tag>
             )
           })}
         </div>

app/(site)/projects/page.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import { WorkHero } from "./WorkHero"
 import { ProjectsStatic } from "./ProjectsStatic"
 import { RecruiterContact } from "@/app/components/RecruiterContact"
@@ -18,6 +17,7 @@ const page = () => {
   return (
     <main className="relative z-1">
       <script
+        id="id-projects-schema"
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify(projectsGraph),

app/components/AnimatedText.tsx

@@ -23,12 +23,10 @@ const letter: Variants = {
   hidden: {
     opacity: 0,
     y: 20,
-    filter: "blur(4px)",
   },
   visible: {
     opacity: 1,
     y: 0,
-    filter: "blur(0px)",
   },
 }
 

app/components/DotCursor.tsx

@@ -1,6 +1,6 @@
 // app/_components/DotCursor.tsx
 "use client"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import { frame, useSpring } from "motion/react"
 import { MotionDiv, MotionSpan } from "../utils/lazy-ui"
 
@@ -12,6 +12,7 @@ const MAX_W = 260 // hard cap so long labels don't get silly-wide
 const spring = { stiffness: 400, damping: 50, restDelta: 0.001 }
 
 export function DotCursor() {
+  const [enabled, setEnabled] = useState(false)
   const labelRef = useRef<HTMLSpanElement>(null)
   const lastTargetRef = useRef<HTMLElement | null>(null)
 
@@ -23,6 +24,11 @@ export function DotCursor() {
   const labelOpacity = useSpring(0, { stiffness: 300, damping: 40 })
 
   useEffect(() => {
+    const isFinePointer = typeof window !== "undefined" && window.matchMedia("(pointer: fine)").matches
+    const reduceMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    if (!isFinePointer || reduceMotion) return
+    setEnabled(true)
+
     const onMove = (ev: PointerEvent) => {
       const { clientX, clientY } = ev
       frame.read(() => {
@@ -80,7 +86,9 @@ export function DotCursor() {
       window.removeEventListener("pointermove", onMove)
       window.removeEventListener("pointerleave", onLeaveWindow)
     }
-  }, [x, y, w, h, labelOpacity])
+  }, [enabled, x, y, w, h, labelOpacity])
+
+  if (!enabled) return null
 
   return (
     <MotionDiv

app/components/ProjectSection/ProjectDisplay.tsx

@@ -6,13 +6,12 @@ import { LargeReview } from "../LargeReview"
 import { MoreProjectsSection } from "./MoreProjectsSection"
 import { ProjectData } from "../../data/project-data"
 import { RecruiterContact } from "../RecruiterContact"
-import Script from "next/script"
 import { buildProjectGraphMinimal } from "@/config/schemas"
 
 const ProjectDisplay: React.FC<{ projectData: ProjectData }> = ({ projectData }) => {
   return (
     <main className="overflow-hidden">
-      <Script
+      <script
         id="id-project-schema"
         type="application/ld+json"
         dangerouslySetInnerHTML={{

app/components/TopBar/TopBarV2.tsx

@@ -27,7 +27,7 @@ export const TopBarV2: React.FC = () => {
             <ul className="md:scrolled-up:opacity-0 md:scrolled-up:max-w-0 md:scrolled-down:opacity-100 md:scrolled-down:max-w-96 hidden items-center gap-4 font-medium transition-all duration-300 ease-in-out md:flex">
               {navItems.map((item) => (
                 <li key={item.name} className="flex">
-                  <Link href={item.href} className="bubble-hover p-1 px-2">
+                  <Link prefetch={false} href={item.href} className="bubble-hover p-1 px-2">
                     {item.name}
                   </Link>
                 </li>

app/layout.tsx

@@ -8,7 +8,7 @@ import { MotionWrapper } from "./utils/lazy-ui"
 import { Analytics } from "@vercel/analytics/next"
 import { bodyAttributes } from "@zero-ui/attributes"
 import { ViewTransitions } from "./utils/ViewTransition"
-import { BottomBlurOverlay } from "./ui/BlurBottomOverlay"
+// import { BottomBlurOverlay } from "./ui/BlurBottomOverlay"
 // import { LazySplashCursor } from "./utils/lazy-splash-cursor"
 // import { DesktopCursor } from "./utils/lazy-dot-cursor"
 import { siteGraph } from "@/config/schemas"
@@ -37,10 +37,10 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
           {/* <DesktopCursor /> */}
           <ViewTransitions />
 
-          <div className="custom:mx-auto xxs:mx-3.5 pointer-events-none absolute inset-0 z-1 max-w-6xl [background-image:url('/assets/framer-noise.png')] [background-size:128px] bg-repeat opacity-6 md:mx-5 lg:mx-8" />
+          <div className="custom:mx-auto xxs:mx-3.5 pointer-events-none absolute inset-0 z-1 max-w-6xl [background-image:url('/assets/framer-noise.png')] bg-size-[128px] bg-repeat opacity-6 md:mx-5 lg:mx-8" />
           <div className={`${switzer.variable} font-switzer subpixel-antialiased`}>
             <div className="custom:mx-auto xxs:border-x pointer-events-none absolute inset-0 z-0 mx-3.5 max-w-6xl border-gray-200 md:mx-5 lg:mx-8" />
-            <BottomBlurOverlay />
+            {/* <BottomBlurOverlay /> */}
             <TopBarV2 />
             {children}
 

config/siteConfig.ts

@@ -1,7 +1,7 @@
 export const DOMAIN_URL = "https://www.austinserb.com"
 
 export const SITE_CONFIG = {
-  title: "Austin Serb - Web Developer Portfolio | React & Next.js",
+  title: "Austin Serb - Web Developer Portfolio",
   description: "Portfolio of Austin Serb, Seattle-based full-stack engineer. Specializing in Next.js, React, TypeScript, and Tailwind CSS.",
   url: DOMAIN_URL ?? "http://localhost:3000",
   siteName: "Austin Serb",