perf(insights): integrate speed-insights (#29)

package.json

@@ -14,6 +14,7 @@
     "@headlessui/react": "^2.1.2",
     "@notionhq/client": "^2.2.15",
     "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.0.12",
     "aos": "^2.3.4",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.11",

src/app/layout.tsx

@@ -5,6 +5,7 @@ import Header from '@/components/header/Header'
 import ScreenSizeDetector from '@/components/screen-size-detector/ScreenSizeDetector'
 import { WEBSITE_URL } from '@/constants/globals'
 import { Analytics } from '@vercel/analytics/react'
+import { SpeedInsights } from '@vercel/speed-insights/next'
 
 import './globals.css'
 import 'aos/dist/aos.css'
@@ -71,6 +72,7 @@ const RootLayout: FC<Props> = ({ children }) => {
           {children}
         </div>
         <Analytics />
+        <SpeedInsights />
         {!isProd && <ScreenSizeDetector />}
       </body>
     </html>

src/app/watch/watchResource.tsx

@@ -120,7 +120,7 @@ const WatchResource: FC<Props> = ({ resource, query, truncate = true }) => {
   return (
     <div className="group relative flex">
       {shiny && (
-        <div className="absolute inset-0 z-0 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 opacity-25 blur transition duration-1000 group-hover:opacity-100 group-hover:duration-200" />
+        <div className="absolute -inset-2 z-0 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 opacity-25 blur transition duration-1000 group-hover:opacity-100 group-hover:duration-200 md:-inset-1" />
       )}
       <a
         href={url}