poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update layout and components for improved styling and functionality

Browse Source
This commit is contained in:
Poyraz Avsever
2026-03-10 10:51:22 +03:00
parent bef1cbc901
commit f84d345612
5 changed files with 132 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function RootLayout({
<body className="h-dvh overflow-hidden bg-background text-foreground antialiased"> <body className="h-dvh overflow-hidden bg-background text-foreground antialiased">
<div className="mx-auto flex h-dvh w-full max-w-4xl flex-col overflow-hidden px-4 py-8 sm:px-6 sm:py-10"> <div className="mx-auto flex h-dvh w-full max-w-4xl flex-col overflow-hidden px-4 py-8 sm:px-6 sm:py-10">
<SiteNavbar /> <SiteNavbar />
<main className="flex-1 overflow-hidden py-8">{children}</main> <main className="flex-1 overflow-hidden py-4">{children}</main>
</div> </div>
</body> </body>
</html> </html>
components/home-hero.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export function HomeHero() {
alt="Poyraz Avsever" alt="Poyraz Avsever"
width={240} width={240}
height={240} height={240}
className="absolute right-0 bottom-0 h-auto w-48 object-contain" className="absolute right-0 bottom-0 h-auto w-20 md:w-48 object-contain"
/> />
</div> </div>
</div> </div>
components/references-section.tsx
+1 -5
View File
@@ -1,16 +1,12 @@
"use client"; "use client";
import Link from "next/link"; import Link from "next/link";
import { Typography } from "poyraz-ui/atoms";
import { TestimonialCard } from "poyraz-ui/molecules"; import { TestimonialCard } from "poyraz-ui/molecules";
import { REFERENCES } from "@/data/references"; import { REFERENCES } from "@/data/references";
export function ReferencesSection() { export function ReferencesSection() {
return ( return (
<section className="space-y-3"> <section className="space-y-8 md:pt-12">
<Typography variant="h3" className="text-foreground">
References
</Typography>
<div className="relative overflow-hidden rounded-sm"> <div className="relative overflow-hidden rounded-sm">
<div className="flex w-max gap-3"> <div className="flex w-max gap-3">
components/search-command.tsx
+16 -24
View File
@@ -2,7 +2,7 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo } from "react";
import { import {
CommandPalette, CommandPalette,
CommandPaletteContent, CommandPaletteContent,
@@ -13,15 +13,18 @@ import {
CommandPaletteItem, CommandPaletteItem,
CommandPaletteList, CommandPaletteList,
CommandPaletteSeparator, CommandPaletteSeparator,
CommandPaletteTrigger,
} from "poyraz-ui/molecules"; } from "poyraz-ui/molecules";
import { import {
COMMAND_PALETTE_GROUPS, COMMAND_PALETTE_GROUPS,
type CommandPaletteItem as PaletteItem, type CommandPaletteItem as PaletteItem,
} from "@/lib/command-palette-links"; } from "@/lib/command-palette-links";
export function SearchCommand() { type SearchCommandProps = {
const [open, setOpen] = useState(false); open: boolean;
onOpenChange: (open: boolean) => void;
};
export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
const router = useRouter(); const router = useRouter();
const shortcut = useMemo(() => { const shortcut = useMemo(() => {
@@ -36,15 +39,15 @@ export function SearchCommand() {
if (!isShortcut) return; if (!isShortcut) return;
event.preventDefault(); event.preventDefault();
setOpen((prev) => !prev); onOpenChange(!open);
}; };
window.addEventListener("keydown", onKeyDown); window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown);
}, []); }, [open, onOpenChange]);
const handleCommandSelect = (item: PaletteItem) => { const handleCommandSelect = (item: PaletteItem) => {
setOpen(false); onOpenChange(false);
if (item.external) { if (item.external) {
window.open(item.href, "_blank", "noopener,noreferrer"); window.open(item.href, "_blank", "noopener,noreferrer");
@@ -55,23 +58,12 @@ export function SearchCommand() {
}; };
return ( return (
<CommandPalette open={open} onOpenChange={setOpen}> <CommandPalette open={open} onOpenChange={onOpenChange}>
<CommandPaletteTrigger asChild> <CommandPaletteContent className=" rounded-none p-0 pt-3 w-72 sm:max-w-lg sm:rounded-sm sm:p-0 sm:pt-2">
<button <CommandPaletteInput
type="button" placeholder="Search pages and links..."
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" className="mt-2 pr-10"
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> <CommandPaletteList>
<CommandPaletteEmpty>No results found.</CommandPaletteEmpty> <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
{COMMAND_PALETTE_GROUPS.map((group, index) => ( {COMMAND_PALETTE_GROUPS.map((group, index) => (
components/site-navbar.tsx
+113 -9
View File
@@ -2,6 +2,8 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
import { useMemo, useState } from "react";
import { Avatar, AvatarFallback, AvatarImage, Separator } from "poyraz-ui/atoms"; import { Avatar, AvatarFallback, AvatarImage, Separator } from "poyraz-ui/atoms";
import { import {
DropdownMenu, DropdownMenu,
@@ -10,13 +12,41 @@ import {
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
Sheet,
SheetClose,
SheetContent,
SheetTitle,
SheetTrigger,
} from "poyraz-ui/molecules"; } from "poyraz-ui/molecules";
import { SearchCommand } from "@/components/search-command"; import { SearchCommand } from "@/components/search-command";
import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links"; import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
function getNavLinkClass(isActive: boolean) {
return [
"inline-flex border-b-2 pb-1 text-sm transition-colors",
isActive
? "border-red-600 text-foreground"
: "border-transparent text-foreground/55 hover:text-foreground",
].join(" ");
}
export function SiteNavbar() { export function SiteNavbar() {
const pathname = usePathname();
const [searchOpen, setSearchOpen] = useState(false);
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";
}, []);
const isActiveLink = (href: string) => {
if (href === "/") return pathname === "/";
return pathname === href || pathname.startsWith(`${href}/`);
};
return ( return (
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-border pb-4"> <header className="flex items-center justify-between gap-3 border-b border-border pb-4">
<Link href="/" aria-label="Go to home" className="inline-flex items-center"> <Link href="/" aria-label="Go to home" className="inline-flex items-center">
<Avatar className="h-9 w-9 rounded-sm"> <Avatar className="h-9 w-9 rounded-sm">
<AvatarImage src="/logo/logo.jpeg" alt="Poyraz Avsever" /> <AvatarImage src="/logo/logo.jpeg" alt="Poyraz Avsever" />
@@ -26,18 +56,15 @@ export function SiteNavbar() {
</Avatar> </Avatar>
</Link> </Link>
<div className="flex flex-wrap items-center justify-end gap-3"> <div className="hidden items-center gap-3 md:flex">
<nav aria-label="Main navigation"> <nav aria-label="Main navigation">
<ul className="flex flex-wrap items-center gap-3 text-sm"> <ul className="flex items-center gap-3">
{NAV_LINKS.map((item, index) => ( {NAV_LINKS.map((item, index) => (
<li key={item.id} className="flex items-center gap-3"> <li key={item.id} className="flex items-center gap-3">
{index > 0 && ( {index > 0 && (
<Separator orientation="vertical" className="h-4 bg-border" decorative /> <Separator orientation="vertical" className="h-4 bg-border" decorative />
)} )}
<Link <Link href={item.href} className={getNavLinkClass(isActiveLink(item.href))}>
href={item.href}
className="text-foreground/55 transition-colors hover:text-foreground"
>
{item.label} {item.label}
</Link> </Link>
</li> </li>
@@ -45,8 +72,19 @@ export function SiteNavbar() {
</ul> </ul>
</nav> </nav>
<Separator orientation="vertical" className="hidden h-4 bg-border sm:block" decorative /> <Separator orientation="vertical" className="h-4 bg-border" decorative />
<SearchCommand /> <button
type="button"
onClick={() => setSearchOpen(true)}
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>
<DropdownMenu> <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"> <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">
@@ -72,6 +110,72 @@ export function SiteNavbar() {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>
<div className="flex items-center gap-2 md:hidden">
<Sheet>
<SheetTrigger 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:menu" width={18} height={18} />
<span>Menu</span>
</SheetTrigger>
<SheetContent side="right" className="w-72 p-4">
<SheetTitle className="sr-only">Mobile Menu</SheetTitle>
<div className="flex flex-col gap-4">
<SheetClose asChild>
<button
type="button"
onClick={() => setSearchOpen(true)}
className="inline-flex h-9 w-full cursor-pointer items-center justify-between rounded-sm border border-border px-3 text-sm text-muted-foreground transition-colors hover:text-foreground"
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>
</SheetClose>
<Separator className="bg-border" decorative />
<nav aria-label="Mobile navigation">
<ul className="space-y-2">
{NAV_LINKS.map((item) => (
<li key={item.id}>
<SheetClose asChild>
<Link
href={item.href}
className={getNavLinkClass(isActiveLink(item.href))}
>
{item.label}
</Link>
</SheetClose>
</li>
))}
</ul>
</nav>
<Separator className="bg-border" decorative />
<div className="grid grid-cols-2 gap-2">
{SOCIAL_LINKS.map((item) => (
<Link
key={item.id}
href={item.href}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-2 rounded-sm border border-border px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
>
<Icon icon={item.icon} width={14} height={14} />
<span className="truncate">{item.label}</span>
</Link>
))}
</div>
</div>
</SheetContent>
</Sheet>
</div>
<SearchCommand open={searchOpen} onOpenChange={setSearchOpen} />
</header> </header>
); );
} }