package pages

import (
	"personal-site/components"
	"personal-site/components/icons"
	"personal-site/constants"
)

templ Dotfiles() {
	{{ params := constants.NewLayoutParams("Dotfiles") }}
	@components.MainLayout(params) {
		<div class="flex flex-col gap-6">
			<div class="fade-up flex flex-col gap-3" style="animation-delay:0ms">
				<h1 class="text-3xl font-semibold tracking-tight">Dotfiles</h1>
				<div class="flex items-center gap-4">
					<a
						href="https://git.kokopi.dev/kokopi/dotfiles"
						target="_blank"
						class="pointer-events-auto inline-flex items-center gap-1.5 px-3.5 py-2 rounded-md text-sm font-medium bg-zinc-800 text-fg-200 border border-zinc-700 hover:border-zinc-500 hover:text-fg-100 transition-all duration-150"
					>
						@icons.Gitea("size-5")
						Gitea
						@icons.ArrowUpRight("size-4")
					</a>
					<a
						href="https://github.com/kokopi-dev/dotfiles"
						target="_blank"
						class="pointer-events-auto inline-flex items-center gap-1.5 px-3.5 py-2 rounded-md text-sm font-medium bg-zinc-800 text-fg-200 border border-zinc-700 hover:border-zinc-500 hover:text-fg-100 transition-all duration-150"
					>
						@icons.Github("size-5")
						GitHub
						@icons.ArrowUpRight("size-4")
					</a>
				</div>
				<p class="text-fg-200 text-sm leading-relaxed">
					I have been using Linux since 2017, and have gone through several distros. Pretty early on, I have only used window managers (wm) and Arch Linux. Over time, I have gone through bspwm on x11, hyprland on wayland, and mangowc on wayland. Since getting into programming, I have also strictly used only vim + neovim for hobby projects.
				</p>
			</div>
			<hr class="border-fg-300 fade-up" style="animation-delay:80ms"/>
			@components.Image("/static/assets/images/dotfiles-1-1.webp", "dotfiles-1-1", "Arch Linux with mangowc, showing fastfetch")
			@components.Image("/static/assets/images/dotfiles-1-2.webp", "dotfiles-1-2", "Arch Linux with mangowc, showing neovim and a custom rofi launcher")
			@components.Image("/static/assets/images/dotfiles-2.webp", "dotfiles-2", "Arch Linux with hyprland")
			@components.Image("/static/assets/images/dotfiles-3.webp", "dotfiles-3", "Arch Linux with bspwm")
		</div>
		<div></div>
	}
}