Merge pull request #8 from bartvdbraak/feat/content-and-style

Content and style changes

app/layout.tsx

@@ -3,8 +3,8 @@ import localFont from "next/font/local";
 
 import "@/styles/globals.css";
 import { siteConfig } from "@/config/site";
-import { absoluteUrl, cn } from "@/lib/utils";
-import { Analytics } from "@/components/analytics";
+import { cn } from "@/lib/utils";
+import { Analytics } from "@vercel/analytics/react";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
 import { ThemeProvider } from "@/components/theme-provider";
 
@@ -13,13 +13,16 @@ export const metadata = {
     default: siteConfig.name,
     template: `%s | ${siteConfig.name}`,
   },
+  metadataBase: new URL(`https://${siteConfig.url}}`),
   description: siteConfig.description,
   keywords: [
+    "Portfolio",
     "Next.js",
     "React",
-    "Tailwind CSS",
-    "Server Components",
-    "Radix UI",
+    "Azure",
+    "Kubernetes",
+    "DevOps",
+    "Python",
   ],
   authors: [
     {
@@ -27,7 +30,7 @@ export const metadata = {
       url: siteConfig.url,
     },
   ],
-  creator: "shadcn",
+  creator: "bartvdbraak",
   themeColor: [
     { media: "(prefers-color-scheme: light)", color: "white" },
     { media: "(prefers-color-scheme: dark)", color: "black" },
@@ -64,7 +67,6 @@ const fontSans = FontSans({
   variable: "--font-sans",
 });
 
-// Font files can be colocated inside of `pages`
 const fontHeading = localFont({
   src: "../assets/fonts/CalSans-SemiBold.woff2",
   variable: "--font-heading",
@@ -87,9 +89,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           {children}
-          <Analytics />
           <TailwindIndicator />
         </ThemeProvider>
+        <Analytics />
       </body>
     </html>
   );

components/analytics.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import { Analytics as VercelAnalytics } from "@vercel/analytics/react";
-
-export function Analytics() {
-  return <VercelAnalytics />;
-}

components/tailwind-indicator.tsx

@@ -1,16 +1,25 @@
 export function TailwindIndicator() {
   if (process.env.NODE_ENV === "production") return null;
 
+  const breakpoints = [
+    { name: "xs", css: "block sm:hidden" },
+    {
+      name: "sm",
+      css: "hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden",
+    },
+    { name: "md", css: "hidden md:block lg:hidden xl:hidden 2xl:hidden" },
+    { name: "lg", css: "hidden lg:block xl:hidden 2xl:hidden" },
+    { name: "xl", css: "hidden xl:block 2xl:hidden" },
+    { name: "2xl", css: "hidden 2xl:block" },
+  ];
+
   return (
     <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
-      <div className="block sm:hidden">xs</div>
-      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
-        sm
+      {breakpoints.map((breakpoint) => (
+        <div key={breakpoint.name} className={breakpoint.css}>
+          {breakpoint.name}
         </div>
-      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
-      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
-      <div className="hidden xl:block 2xl:hidden">xl</div>
-      <div className="hidden 2xl:block">2xl</div>
+      ))}
     </div>
   );
 }

config/site.ts

@@ -1,7 +1,9 @@
+import { env } from "@/env.mjs";
+
 export const siteConfig = {
   name: "hellob.art",
   description: "a simple portfolio made by bart van der braak.",
-  url: "https://hellob.art",
+  url: env.NEXT_PUBLIC_APP_URL || "https://hellob.art",
   ogImage: "https://hellob.art/og.jpg",
   links: {
     linkedIn: "https://linkedin.com/in/bartvdbraak",