Skip to content

Commit

Permalink
chore: update components
Browse files Browse the repository at this point in the history
  • Loading branch information
rxyhn committed Sep 21, 2024
1 parent 9e8f642 commit 2d9f49c
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 123 deletions.
4 changes: 2 additions & 2 deletions src/components/Button.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ const { icon, href, label } = Astro.props;
<a
href={href}
target="_blank"
class="blend group flex w-fit items-center gap-2 rounded border border-neutral-300 px-3 py-2 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-800"
class="group flex w-fit items-center gap-2 rounded border border-neutral-300 px-3 py-2 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-800"
aria-label={label}
>
<span
class="blend text-sm capitalize text-neutral-600 transition-colors duration-300 ease-in-out group-hover:text-black dark:text-neutral-400 dark:group-hover:text-white"
class="text-sm capitalize text-neutral-600 transition-colors duration-300 ease-in-out group-hover:text-black dark:text-neutral-400 dark:group-hover:text-white"
>
<Icon name={icon} size={20} />
</span>
Expand Down
22 changes: 10 additions & 12 deletions src/components/Card.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ const { url, name, description, highlights, technologies } = Astro.props;
href={url}
target="_blank"
rel="noopener noreferrer"
class="group flex items-center gap-3 rounded-lg border border-black/15 p-4 transition-colors duration-300 hover:bg-black/5 dark:border-white/20 hover:dark:bg-white/10"
class="group flex items-center gap-3 rounded-lg border border-black/15 p-4 transition-colors hover:bg-black/5 dark:border-white/20 hover:dark:bg-white/10"
>
<div
class="w-full text-black/75 transition-colors duration-300 group-hover:text-black dark:text-white/75 dark:group-hover:text-white"
>
<div class="w-full group-hover:text-black dark:group-hover:text-white">
<div class="flex items-center gap-2">
<h3 class="text-base font-bold leading-snug">
<h3
class="text-base font-bold leading-snug text-black/75 dark:text-white/75"
>
{name}
</h3>
<svg
class="h-2.5 w-2.5 -translate-x-1 translate-y-1 -rotate-45 transform transition-transform group-hover:translate-x-0 group-hover:translate-y-0"
class="h-2.5 w-2.5 -translate-x-1 translate-y-1 -rotate-45 transition-transform group-hover:translate-x-0 group-hover:translate-y-0"
viewBox="0 0 13 15"
xmlns="http://www.w3.org/2000/svg"
>
Expand All @@ -36,10 +36,10 @@ const { url, name, description, highlights, technologies } = Astro.props;
stroke-linejoin="round"
>
<polyline
class="opacity-0 transition-opacity duration-300 group-hover:opacity-100"
class="opacity-0 transition-opacity group-hover:opacity-100"
points="5.33 0 10.83 5.5 5.33 11"></polyline>
<line
class="transform opacity-0 transition-transform duration-300 group-hover:translate-x-0 group-hover:opacity-100"
class="opacity-0 transition-transform group-hover:opacity-100"
x1="10.83"
y1="5.5"
x2="0.83"
Expand All @@ -48,16 +48,14 @@ const { url, name, description, highlights, technologies } = Astro.props;
</svg>
</div>
<div class="mt-2 flex flex-col gap-2">
<p class="text-sm">
{description}
</p>
<p class="text-sm text-black/75 dark:text-white/75">{description}</p>
<p class="text-sm text-black/50 dark:text-white/50">
{highlights.join(" ")}
</p>
<ul class="flex flex-wrap gap-2">
{
technologies.map((tech) => (
<li class="flex items-center gap-1 rounded-md border border-black/25 bg-neutral-200/50 px-2 py-1 text-xs dark:border-white/25 dark:bg-neutral-800/50">
<li class="flex items-center gap-1 rounded-md border border-black/25 bg-neutral-200/50 px-2 py-1 text-xs text-black/75 dark:border-white/25 dark:bg-neutral-800/50 dark:text-white/75">
{tech}
</li>
))
Expand Down
44 changes: 18 additions & 26 deletions src/components/DrawerToggle.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,26 @@ import { cn } from "@/lib/utils";

<button
id="drawer_toggle"
aria-label={`Toggle drawer open and closed`}
aria-label="Toggle drawer open and closed"
class={cn(
"flex md:hidden",
"size-9 rounded-full p-2 items-center justify-center",
"md:hidden flex size-9 p-2 rounded-full items-center justify-center",
"text-black/75 dark:text-white/75",
"bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
"stroke-current hover:stroke-black hover:dark:stroke-white",
"hover:bg-black/20 dark:hover:bg-white/20",
"border border-black/25 dark:border-white/25",
"transition-colors duration-300 ease-in-out",
"transition-colors duration-300",
)}
>
<Icon id="drawer-open" name="menu" class="size-full" />
<Icon id="drawer-close" name="close" class="size-full" />
<Icon id="drawer-open" name="menu" class="block size-full" />
<Icon id="drawer-close" name="close" class="hidden size-full" />
</button>

<style>
#drawer_toggle > #drawer-open {
@apply block;
#drawer_toggle.open #drawer-open {
display: none;
}

#drawer_toggle > #drawer-close {
@apply hidden;
}

#drawer_toggle.open > #drawer-open {
@apply hidden;
}

#drawer_toggle.open > #drawer-close {
@apply block;
#drawer_toggle.open #drawer-close {
display: block;
}
</style>

Expand All @@ -46,11 +36,13 @@ import { cn } from "@/lib/utils";
drawerButton?.classList.toggle("open");
}

function initializeDrawerButton() {
const drawerButton = document.getElementById("drawer_toggle");
drawerButton?.addEventListener("click", toggleDrawer);
}
document
.getElementById("drawer_toggle")
?.addEventListener("click", toggleDrawer);

document.addEventListener("astro:after-swap", initializeDrawerButton);
initializeDrawerButton();
document.addEventListener("astro:after-swap", () => {
document
.getElementById("drawer_toggle")
?.addEventListener("click", toggleDrawer);
});
</script>
72 changes: 30 additions & 42 deletions src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,51 +12,43 @@ const subpath = pathname.match(/[^/]+/g);
<header id="header" class="fixed top-0 z-50 h-16 w-full print:hidden">
<Container size="md">
<div class="relative h-full w-full">
<div class="absolute left-0 top-1/2 -translate-y-1/2 font-semibold">
<a
href="/"
class="text-black/75 transition-colors duration-300 hover:text-black dark:text-white/75 dark:hover:text-white"
>
<div class="font-bold uppercase">{SITE.TITLE}</div>
</a>
</div>
{/* Logo/Title */}
<a
href="/"
class="absolute left-0 top-1/2 -translate-y-1/2 font-bold uppercase text-black/75 transition-colors duration-300 hover:text-black dark:text-white/75 dark:hover:text-white"
>
{SITE.TITLE}
</a>

<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<nav class="hidden items-center gap-1 text-sm md:flex">
{
LINKS.map((LINK) => (
<a
href={LINK.HREF}
class={cn(
"h-8 rounded-full px-3",
"text-black/75 dark:text-white/75",
"flex items-center justify-center",
"transition-colors duration-300",
pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
? "bg-black text-white dark:bg-white dark:text-black"
: "hover:bg-black/20 hover:text-black dark:hover:bg-white/20 dark:hover:text-white",
)}
>
{LINK.TEXT}
</a>
))
}
</nav>
</div>
{/* Navigation */}
<nav
class="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 items-center gap-1 text-sm md:flex"
>
{
LINKS.map((LINK) => (
<a
href={LINK.HREF}
class={cn(
"flex h-8 items-center justify-center rounded-full px-3 transition-colors duration-300",
pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
? "bg-black text-white dark:bg-white dark:text-black"
: "text-black/75 hover:bg-black/20 hover:text-black dark:text-white/75 dark:hover:bg-white/20 dark:hover:text-white",
)}
>
{LINK.TEXT}
</a>
))
}
</nav>

{/* Icons and Toggles */}
<div class="absolute right-0 top-1/2 flex -translate-y-1/2 gap-2">
<a
href={SITE.REPO_URL}
aria-label="Github repository link"
target="_blank"
rel="noopener noreferrer"
class={cn(
"flex items-center justify-center size-9 rounded-full p-2",
"text-black/75 dark:text-white/75",
"hover:bg-black/20 dark:hover:bg-white/20",
"border border-black/25 dark:border-white/25",
"transition-colors duration-300",
)}
class="flex size-9 items-center justify-center rounded-full border border-black/25 p-2 text-black/75 transition-colors duration-300 hover:bg-black/20 dark:border-white/25 dark:text-white/75 dark:hover:bg-white/20"
>
<Icon name="github" class="block size-full" />
</a>
Expand All @@ -70,11 +62,7 @@ const subpath = pathname.match(/[^/]+/g);
<script is:inline>
function onScroll() {
const header = document.getElementById("header");
if (window.scrollY > 0) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
header.classList.toggle("scrolled", window.scrollY > 0);
}

document.addEventListener("scroll", onScroll);
Expand Down
58 changes: 29 additions & 29 deletions src/components/sections/Awards.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,36 @@ import { awards } from "@cv";
---

<Section className={Astro.props.className} title="Awards">
<ul class="space-y-4 text-black/75 dark:text-white/75">
<ul class="space-y-4">
{
awards.map(({ title, date, awarder }) => {
return (
<li class="flex flex-col items-baseline md:flex-row">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2 hidden h-5 w-5 self-start md:inline-block"
>
<circle cx="12" cy="8" r="7" />
<polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
</svg>
<div class="relative w-full">
<time class="mb-1 text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
{date}
</time>
<h3 class="font-medium text-black dark:text-white">{title}</h3>
<p class="mt-1 text-sm">{awarder}</p>
</div>
</li>
);
})
awards.map(({ title, date, awarder }) => (
<li class="flex flex-col md:flex-row md:items-baseline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2 hidden h-5 w-5 md:inline-block"
>
<circle cx="12" cy="8" r="7" />
<polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
</svg>
<div class="relative w-full">
<time class="text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0">
{date}
</time>
<h3 class="font-medium text-black dark:text-white">{title}</h3>
<p class="mt-1 text-sm text-black/75 dark:text-white/75">
{awarder}
</p>
</div>
</li>
))
}
</ul>
</Section>
17 changes: 9 additions & 8 deletions src/components/sections/Education.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,16 @@ import { education } from "@cv";
---

<Section className={Astro.props.className} title="Education">
<ul class="space-y-4 text-black/75 dark:text-white/75">
<ul class="space-y-4">
{
education.map(
({ institution, startDate, endDate, area, url, summary }) => {
const startYear = new Date(startDate).getFullYear();
const endYear =
endDate != null ? new Date(endDate).getFullYear() : "Present";
const endYear = endDate ? new Date(endDate).getFullYear() : "Present";
const years = `${startYear} - ${endYear}`;

return (
<li class="flex flex-col items-start md:flex-row md:items-baseline">
<li class="flex flex-col md:flex-row md:items-baseline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
Expand All @@ -25,14 +24,14 @@ import { education } from "@cv";
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2 hidden h-5 w-5 self-start md:inline-block"
class="mr-2 hidden h-5 w-5 md:inline-block"
>
<path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" />
<path d="M22 10v6" />
<path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
</svg>
<div class="relative w-full">
<time class="mb-1 text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
<time class="mb-1 text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0">
{years}
</time>
<h3 class="text-base font-medium leading-snug text-black dark:text-white">
Expand All @@ -48,7 +47,7 @@ import { education } from "@cv";
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="ml-1 inline-block h-4 w-4 shrink-0 translate-y-px transition-transform group-hover:-translate-y-1 group-hover:translate-x-1"
class="ml-1 h-4 w-4"
aria-hidden="true"
>
<path
Expand All @@ -62,7 +61,9 @@ import { education } from "@cv";
<span>{institution}</span>
)}
</h3>
<p class="mt-1 text-sm">{area}</p>
<p class="mt-1 text-sm text-black/75 dark:text-white/75">
{area}
</p>
{summary && (
<div class="mt-4 text-sm">
<ul class="space-y-1 text-black/50 dark:text-white/50">
Expand Down
6 changes: 2 additions & 4 deletions src/components/sections/Experience.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,7 @@ import { work } from "@cv";
{/* Content */}
<div class={isLastItem ? "" : "mb-8"}>
<h3 class="font-bold text-black dark:text-white">
{position}
<span>@</span>
{position} <span>@</span>
{url ? (
<a
class="inline-flex items-center hover:text-black/75 dark:hover:text-white/75"
Expand Down Expand Up @@ -76,8 +75,7 @@ import { work } from "@cv";
</h3>
{(location || location_type) && (
<p class="mt-2 text-sm text-black/75 dark:text-white/75">
{location}
{location && location_type && " - "}
{location} {location && location_type && " - "}{" "}
{location_type}
</p>
)}
Expand Down
2 changes: 2 additions & 0 deletions src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,12 @@ html {
}

html {
background-color: white;
color-scheme: light;
}

html.dark {
background-color: black;
color-scheme: dark;
}

Expand Down

0 comments on commit 2d9f49c

Please sign in to comment.