Update packages

Author: timcole

bun.lockb

@@ -9,22 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "autoprefixer": "10.4.20",
-    "babel-plugin-react-compiler": "^19.0.0-beta-201e55d-20241215",
-    "eslint": "9.17.0",
-    "eslint-config-next": "15.1.2",
-    "next": "15.1.2",
-    "postcss": "8.4.49",
+    "@tailwindcss/postcss": "^4.0.7",
+    "babel-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
+    "eslint": "9.20.1",
+    "eslint-config-next": "15.1.7",
+    "next": "15.1.7",
+    "postcss": "8.5.2",
     "react": "19.0.0",
     "react-dom": "19.0.0",
-    "tailwind-merge": "^2.5.5",
-    "tailwindcss": "3.4.17",
-    "typescript": "5.7.2"
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss": "^4.0.7",
+    "typescript": "5.7.3"
   },
   "devDependencies": {
-    "@types/node": "^22.10.2",
-    "@types/react": "19.0.2",
-    "@types/react-dom": "19.0.2",
-    "prettier": "^3.4.2"
+    "@types/node": "^22.13.4",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "prettier": "^3.5.1"
   }
 }

package.json

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

postcss.config.js

@@ -1,6 +1,18 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-primary-50: #6993a5;
+  --color-primary-100: #618ca0;
+  --color-primary-200: #577c91;
+  --color-primary-300: #4d6c81;
+  --color-primary-400: #445c71;
+  --color-primary-500: #3a4d61;
+  --color-primary-600: #303f51;
+  --color-primary-700: #273241;
+  --color-primary-800: #1d2531;
+  --color-primary-900: #141821;
+  --color-primary-950: #0f1219;
+}
 
 :root {
   color-scheme: only dark;

src/app/globals.css

@@ -93,7 +93,7 @@ const Lanyard: FC = () => {
           className={twMerge(
             'text-green-400 font-semibold',
             jellyfin &&
-              'text-transparent bg-clip-text inline-block bg-gradient-to-br from-purple-500 to-sky-500 drop-shadow-md',
+              'text-transparent bg-clip-text inline-block bg-linear-to-br from-purple-500 to-sky-500 drop-shadow-md',
           )}
         >
           I'm currently {doing.spotify ? 'listening to' : `watching`}

src/components/Lanyard.tsx

@@ -50,7 +50,7 @@ const AboutMe: FC = () => (
     <div className="flex gap-4">
       <div className="sm:flex items-center hidden">
         <img
-          className="object-cover object-center w-44 h-44 rounded-md shadow min-w-32"
+          className="object-cover object-center w-44 h-44 rounded-md shadow-sm min-w-32"
           width={176}
           height={176}
           src="https://t.pics/me.webp"

src/components/about.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 
 const Footer: FC = () => (
   <footer className="bg-primary-800 text-gray-500 px-3 my-2 flex">
-    <div className="flex-shrink px-2 flex gap-4">
+    <div className="shrink px-2 flex gap-4">
       <a
         href="https://github.com/timcole/timcole.me"
         target="_blank"

src/components/footer.tsx

@@ -100,7 +100,7 @@ const Positions: FC = () => {
             </span>
             <span className="mt-1 text-primary-400">{date}</span>
           </div>
-          <div className="text-gray-300 md:flex-grow flex-col gap-3 flex">
+          <div className="text-gray-300 md:grow flex-col gap-3 flex">
             {description}
           </div>
         </div>