t128n.dev
1---
2import { Icon } from "astro-icon/components";
3import { cn } from "~/lib/utils";
4
5interface Props {
6 minimal?: boolean;
7}
8
9const { minimal = false } = Astro.props;
10
11const currentPath = Astro.url.pathname;
12
13const socialLinks = [
14 {
15 name: "GitHub",
16 url: "https://github.com/t128n",
17 icon: "simple-icons:github",
18 },
19 {
20 name: "LinkedIn",
21 url: "https://www.linkedin.com/in/torben-haack/",
22 icon: "simple-icons:linkedin",
23 },
24];
25---
26
27<header
28 class={cn({
29 "py-6 border-b border-ink/10": minimal,
30 "py-16": !minimal,
31 })}
32>
33 <div class="container flex flex-row items-baseline justify-between">
34 <a href="/" class="group">
35 {
36 minimal ? (
37 <div class="flex items-baseline gap-3">
38 <div>
39 <h1 class="font-display font-bold text-xl group-hover:opacity-70 transition-opacity">
40 torben haack
41 </h1>
42 </div>
43 </div>
44 ) : (
45 <>
46 <h1 class="font-display font-bold text-4xl">
47 torben haack
48 </h1>
49 <p class="font-serif">[ˈtɔʁbn̩ haːk]</p>
50 </>
51 )
52 }
53 </a>
54 <nav>
55 <ul class="flex flex-row gap-4 list-none m-0 p-0">
56 {
57 socialLinks.map((link) => (
58 <li>
59 <a
60 href={link.url}
61 aria-label={link.name}
62 target="_blank"
63 rel="noopener noreferrer"
64 class="opacity-60 hover:opacity-100 transition-opacity"
65 >
66 <Icon
67 name={link.icon}
68 class={
69 minimal
70 ? "inline-block w-5 h-5"
71 : "inline-block w-6 h-6"
72 }
73 />
74 <span class="sr-only">{link.name}</span>
75 </a>
76 </li>
77 ))
78 }
79 </ul>
80 </nav>
81 </div>
82</header>