refactor/feat: ipod nano 7g-style now playing component, discontinue fontawesome, content updates

- redesign NowPlaying widget with iPod Nano 7th generation-inspired UI
- content updates (home, about)
- general code cleanup
- bump deps, clean up
- update README for self hosting
- remove old workflows

components/objects/Button.tsx

@@ -1,30 +1,40 @@
 import React from 'react'
 import Link from 'next/link'
-import { cn } from '@/lib/utils'
 
 interface ButtonProps {
   href: string
-  label: string
-  icon?: React.ElementType
   target?: string
+  variant?: "primary" | "rounded"
   className?: string
+  icon?: React.ReactNode
+  children: React.ReactNode
 }
 
-const Button: React.FC<ButtonProps> = ({ href, label, icon, target, className }) => {
-  return (
-    <Link
-      href={href}
-      className={className ? (
-        cn("inline-flex items-center bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500", className)
-      ) : (
-        "inline-flex items-center bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-      )}
-      target={target}
-    >
-      {icon && React.createElement(icon, { size: 20, className: "mr-2" })}
-      {label}
-    </Link>
-  )
+const Button: React.FC<ButtonProps> = ({ href, target, variant, className, icon, children }) => {
+  if (!variant || variant === "primary") {
+    return (
+      <Link
+        href={href}
+        className={`inline-flex items-center bg-gray-800 text-white font-bold py-2 px-4 rounded-sm shadow-md transition-all duration-300 ease-in-out hover:bg-gray-700 hover:shadow-lg hover:-translate-y-0.5 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 gap-2 ${className}`}
+        target={target}
+      >
+        {icon}
+        {children}
+      </Link>
+    )
+  } else if (variant === "rounded") {
+    return (
+      <Link
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noopener noreferrer" : undefined}
+        className={`bg-gray-700 text-white px-4 py-2 rounded-full hover:bg-gray-600 transition-colors inline-flex items-center justify-center gap-2 whitespace-nowrap ${className}`}
+      >
+        {icon}
+        {children}
+      </Link>
+    )
+  }
 }
 
 export default Button