Add logo image to the public directory

2026-03-10 09:36:47 +03:00
parent 437080eb35
commit 29a0a8a893
9 changed files with 1690 additions and 5 deletions
@@ -1 +1,2 @@
@import "tailwindcss";
+@import "poyraz-ui/preset.css";
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
+import { SiteNavbar } from "@/components/site-navbar";
 import "./globals.css";

-
 export const metadata: Metadata = {
  title:
    "Poyraz Avsever - Portfolio - Freelancer - Fullstack Developer - Web Developer",
@@ -44,8 +44,11 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body>
-        {children}
+      <body className="min-h-dvh bg-background text-foreground antialiased">
+        <div className="mx-auto flex min-h-dvh w-full max-w-4xl flex-col px-4 py-8 sm:px-6 sm:py-10">
+          <SiteNavbar />
+          <main className="flex-1 py-8">{children}</main>
+        </div>
      </body>
    </html>
  );
@@ -0,0 +1,101 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import {
+  CommandPalette,
+  CommandPaletteContent,
+  CommandPaletteEmpty,
+  CommandPaletteFooter,
+  CommandPaletteGroup,
+  CommandPaletteInput,
+  CommandPaletteItem,
+  CommandPaletteList,
+  CommandPaletteSeparator,
+  CommandPaletteTrigger,
+} from "poyraz-ui/molecules";
+import {
+  COMMAND_PALETTE_GROUPS,
+  type CommandPaletteItem as PaletteItem,
+} from "@/lib/command-palette-links";
+
+export function SearchCommand() {
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+
+  const shortcut = useMemo(() => {
+    if (typeof window === "undefined") return "Ctrl K";
+    const isMac = /(Mac|iPhone|iPad)/i.test(window.navigator.platform);
+    return isMac ? "Cmd K" : "Ctrl K";
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      const isShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k";
+      if (!isShortcut) return;
+
+      event.preventDefault();
+      setOpen((prev) => !prev);
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  const handleCommandSelect = (item: PaletteItem) => {
+    setOpen(false);
+
+    if (item.external) {
+      window.open(item.href, "_blank", "noopener,noreferrer");
+      return;
+    }
+
+    router.push(item.href);
+  };
+
+  return (
+    <CommandPalette open={open} onOpenChange={setOpen}>
+      <CommandPaletteTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex h-8 w-44 cursor-pointer items-center justify-between rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground sm:w-52"
+          aria-label="Open command palette"
+        >
+          <span className="inline-flex items-center gap-2">
+            <Icon icon="mdi:magnify" width={16} height={16} />
+            <span>Search</span>
+          </span>
+          <span className="text-xs text-muted-foreground/80">{shortcut}</span>
+        </button>
+      </CommandPaletteTrigger>
+
+      <CommandPaletteContent className="rounded-sm">
+        <CommandPaletteInput placeholder="Search pages and links..." />
+        <CommandPaletteList>
+          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
+          {COMMAND_PALETTE_GROUPS.map((group, index) => (
+            <div key={group.id}>
+              {index > 0 && <CommandPaletteSeparator />}
+              <CommandPaletteGroup heading={group.heading}>
+                {group.items.map((item) => (
+                  <CommandPaletteItem
+                    key={item.id}
+                    icon={<Icon icon={item.icon} width={16} height={16} />}
+                    onClick={() => handleCommandSelect(item)}
+                    className="cursor-pointer"
+                  >
+                    {item.label}
+                  </CommandPaletteItem>
+                ))}
+              </CommandPaletteGroup>
+            </div>
+          ))}
+        </CommandPaletteList>
+        <CommandPaletteFooter className="text-xs text-muted-foreground">
+          Press {shortcut} to open quickly
+        </CommandPaletteFooter>
+      </CommandPaletteContent>
+    </CommandPalette>
+  );
+}
@@ -0,0 +1,77 @@
+"use client";
+
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage, Separator } from "poyraz-ui/atoms";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "poyraz-ui/molecules";
+import { SearchCommand } from "@/components/search-command";
+import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
+
+export function SiteNavbar() {
+  return (
+    <header className="flex flex-wrap items-center justify-between gap-4 border-b border-border pb-4">
+      <Link href="/" aria-label="Go to home" className="inline-flex items-center">
+        <Avatar className="h-9 w-9 rounded-sm">
+          <AvatarImage src="/logo/logo.jpeg" alt="Poyraz Avsever" />
+          <AvatarFallback className="rounded-sm bg-muted text-xs font-semibold">
+            PA
+          </AvatarFallback>
+        </Avatar>
+      </Link>
+
+      <div className="flex flex-wrap items-center justify-end gap-3">
+        <nav aria-label="Main navigation">
+          <ul className="flex flex-wrap items-center gap-3 text-sm">
+            {NAV_LINKS.map((item, index) => (
+              <li key={item.id} className="flex items-center gap-3">
+                {index > 0 && (
+                  <Separator orientation="vertical" className="h-4 bg-border" decorative />
+                )}
+                <Link
+                  href={item.href}
+                  className="text-foreground/55 transition-colors hover:text-foreground"
+                >
+                  {item.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        <Separator orientation="vertical" className="hidden h-4 bg-border sm:block" decorative />
+        <SearchCommand />
+
+        <DropdownMenu>
+          <DropdownMenuTrigger className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
+            <Icon icon="mdi:share-variant" width={16} height={16} />
+            <span>Social</span>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-52 rounded-sm">
+            <DropdownMenuLabel>Social Links</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {SOCIAL_LINKS.map((item) => (
+              <DropdownMenuItem key={item.id} asChild>
+                <Link
+                  href={item.href}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="flex items-center gap-2"
+                >
+                  <Icon icon={item.icon} width={16} height={16} />
+                  <span>{item.label}</span>
+                </Link>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,39 @@
+import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
+
+export type CommandPaletteItem = {
+  id: string;
+  label: string;
+  href: string;
+  icon: string;
+  external?: boolean;
+};
+
+export type CommandPaletteGroup = {
+  id: string;
+  heading: string;
+  items: CommandPaletteItem[];
+};
+
+export const COMMAND_PALETTE_GROUPS: CommandPaletteGroup[] = [
+  {
+    id: "navigation",
+    heading: "Navigation",
+    items: NAV_LINKS.map((item) => ({
+      id: item.id,
+      label: item.label,
+      href: item.href,
+      icon: "mdi:compass-outline",
+    })),
+  },
+  {
+    id: "social",
+    heading: "Social",
+    items: SOCIAL_LINKS.map((item) => ({
+      id: item.id,
+      label: item.label,
+      href: item.href,
+      icon: item.icon,
+      external: true,
+    })),
+  },
+] as const;
@@ -0,0 +1,70 @@
+export const NAV_LINKS = [
+  { id: "home", label: "Home", href: "/" },
+  { id: "about", label: "About", href: "/about" },
+  { id: "blog", label: "Blog", href: "/blog" },
+  { id: "projects", label: "Projects", href: "/projects" },
+  { id: "contact", label: "Contact", href: "/contact" },
+] as const;
+
+export const SOCIAL_LINKS = [
+  {
+    id: "email",
+    label: "E-Mail",
+    href: "mailto:poyrazavsever@gmail.com",
+    icon: "mdi:email",
+  },
+  {
+    id: "linkedin",
+    label: "LinkedIn",
+    href: "https://www.linkedin.com/in/poyrazavsever/",
+    icon: "mdi:linkedin",
+  },
+  {
+    id: "github",
+    label: "GitHub",
+    href: "https://github.com/poyrazavsever",
+    icon: "mdi:github",
+  },
+  {
+    id: "instagram",
+    label: "Instagram",
+    href: "https://instagram.com/poyraz_avsever",
+    icon: "mdi:instagram",
+  },
+  {
+    id: "youtube",
+    label: "YouTube",
+    href: "https://youtube.com/@poyrazavsever",
+    icon: "mdi:youtube",
+  },
+  {
+    id: "medium",
+    label: "Medium",
+    href: "https://medium.com/@poyrazavsever",
+    icon: "mdi:medium",
+  },
+  {
+    id: "x",
+    label: "X",
+    href: "https://x.com/poyrazavsever",
+    icon: "ri:twitter-x-fill",
+  },
+  {
+    id: "behance",
+    label: "Behance",
+    href: "https://behance.net/poyrazavsever",
+    icon: "mdi:behance",
+  },
+  {
+    id: "spotify",
+    label: "Spotify",
+    href: "https://open.spotify.com/user/3136fdjkc5p4cbzmuxhvqdd4b2hu",
+    icon: "mdi:spotify",
+  },
+  {
+    id: "buy-me-a-coffee",
+    label: "Buy Me a Coffee",
+    href: "https://buymeacoffee.com/poyrazavsever",
+    icon: "mdi:coffee",
+  },
+] as const;
@@ -9,9 +9,12 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@iconify/react": "^6.0.2",
    "next": "16.1.6",
+    "poyraz-ui": "^2.0.1",
    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.2"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",