lanyard

app/layout.tsx

@@ -3,7 +3,6 @@ import "../styles/tailwind.css";
 import { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import Navbar from "@/components/navbar";
-import Footer from "@/components/footer";
 
 export const metadata: Metadata = {
   title: "Hey, I'm AutoKill",
@@ -30,8 +29,10 @@ export default function RootLayout({
         <div className="mx-auto max-w-3xl px-5">
           <Navbar />
           {children}
+
+          <div className="py-4 mb-2"></div>
+
           <Analytics />
-          <Footer />
         </div>
       </body>
     </html>

app/not-found.tsx

@@ -1,11 +1,20 @@
-import Animation from '@/components/animation';
+import Animation from "@/components/animation";
 
 export default function NotFound() {
   return (
     <Animation>
-      <div className="text-center">
-        <h1 className="text-4xl font-bold">404</h1>
-        <p className="text-xl">Page not found</p>
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Not Found 🚫</h1>
+        <p className="opacity-90">
+          You have reached a page that does not exist. If you think this is a
+          mistake, please contact me.
+        </p>
+        <a
+          className="bg-white/5 border border-white/10 block border-b-4 cursor-pointer p-3 rounded-lg text-center hover:scale-95 transition-all"
+          href="/"
+        >
+          Go back
+        </a>
       </div>
     </Animation>
   );

app/page.tsx

@@ -1,4 +1,5 @@
 import Animation from "@/components/animation";
+import Lanyard from "@/components/lanyard";
 import Technologies from "@/components/technologies";
 import Works from "@/components/works";
 
@@ -8,8 +9,8 @@ export default function Home() {
       <div className="space-y-10">
         <div className="space-y-4">
           <h1 className="text-5xl font-bold">
-            Hey there, I&apos;m{" "}
-            <span className="text-red-400 bg-clip-text">AutoKill</span> 👋
+            Hey there, I&apos;m <span className="text-red-400">AutoKill</span>{" "}
+            👋
           </h1>
           <p className="opacity-90">
             A software engineer from Belgrade, Serbia. I develop mainly backend
@@ -25,14 +26,21 @@ export default function Home() {
           </div>
         </div>
 
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold">Lanyard 📌</h1>
+          <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+            <Lanyard />
+          </div>
+        </div>
+
         <div className="space-y-4">
           <h1 className="text-4xl font-bold">Works 🔧</h1>
           <p className="opacity-90">
             I built a lot of things, most of them private. If you want to see
             all my public & open source projects, check out my{" "}
             <a
               className="text-red-400 hover:underline underline-offset-4"
-              href="https://github.com/AutoKill"
+              href="https://github.com/camdzic"
               target="_blank"
             >
               GitHub profile

components/lanyard.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import Image from "next/image";
+import { useLanyardWS } from "use-lanyard";
+
+const classNames = {
+  online: "text-green-400",
+  offline: "opacity-60",
+  idle: "text-yellow-400",
+  dnd: "text-red-400",
+};
+
+const capitalize = (string: string) =>
+  string.charAt(0).toUpperCase() + string.slice(1);
+
+export default function Lanyard() {
+  const lanyard = useLanyardWS("1096880369111945257");
+
+  return lanyard ? (
+    <>
+      <a
+        className="bg-white/5 border border-white/10 border-b-4 cursor-pointer p-3 py-4 rounded-lg hover:scale-95 transition-all flex items-center"
+        href="https://discord.com/users/1096880369111945257"
+        target="_blank"
+      >
+        <Image
+          src={`https://cdn.discordapp.com/avatars/1096880369111945257/${lanyard.discord_user.avatar}.png`}
+          width={64}
+          height={64}
+          alt="discord avatar"
+          className="mr-3"
+        />
+
+        <div>
+          <p className="font-bold">Discord</p>
+          <p>{lanyard.discord_user.username}</p>
+          <p className={`${classNames[lanyard.discord_status]}`}>
+            {capitalize(lanyard.discord_status)}
+          </p>
+        </div>
+      </a>
+
+      {lanyard.spotify && (
+        <a
+          className="bg-white/5 border border-white/10 border-b-4 cursor-pointer p-3 py-4 rounded-lg hover:scale-95 transition-all flex items-center"
+          href={`https://open.spotify.com/track/${lanyard.spotify.track_id}`}
+          target="_blank"
+        >
+          {lanyard.spotify.album_art_url && (
+            <Image
+              src={lanyard.spotify.album_art_url}
+              width={64}
+              height={64}
+              alt="discord avatar"
+              className="mr-3"
+            />
+          )}
+
+          <div>
+            <p className="font-bold">Spotify</p>
+            <p>{lanyard.spotify.song}</p>
+            <p className="opacity-60">{lanyard.spotify.artist}</p>
+          </div>
+        </a>
+      )}
+    </>
+  ) : (
+    <>
+      <a className="bg-white/5 border border-white/10 border-b-4 p-3 py-4 rounded-lg">
+        <div className="w-28 animate-pulse">
+          <div className="mt-1 h-4 w-full overflow-hidden rounded-md bg-white/10"></div>
+          <div className="mt-1 h-4 w-2/3 overflow-hidden rounded-md bg-white/10"></div>
+        </div>
+      </a>
+    </>
+  );
+}

next.config.js

@@ -2,6 +2,14 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -14,7 +14,8 @@
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^4.12.0"
+    "react-icons": "^4.12.0",
+    "use-lanyard": "^1.5.2"
   },
   "devDependencies": {
     "@types/node": "^20",