ce6110588f
- Created `src/pages/contact.astro` and `src/pages/zh/contact.astro` to support multilingual contact functionality. - Introduced `contactIntents` and `contactMethods` dynamic configurations in `src/lib/data/contact.ts` for streamlined content management. - Designed responsive and localized layouts with enhanced UX for both languages.
122 lines
3.3 KiB
Plaintext
122 lines
3.3 KiB
Plaintext
---
|
|
import { ClientRouter } from "astro:transitions";
|
|
import BackToTop from "@/components/ui/back-to-top";
|
|
import { useTranslations } from "@/i18n/utils";
|
|
import type { Lang } from "@/types/i18n";
|
|
import { defaultLang } from "@/i18n/ui";
|
|
import "../styles/global.css";
|
|
|
|
interface Props {
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
const lang = Astro.currentLocale as Lang || defaultLang;
|
|
const { title = "Joey Zhao - Portfolio", description = "Engineering-focused personal website" } =
|
|
Astro.props;
|
|
const t = useTranslations(lang);
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang={lang}>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="generator" content={Astro.generator} />
|
|
<meta name="description" content={description} />
|
|
<title>{title} | {t("site.title")}</title>
|
|
<!-- View Transitions for smooth page transitions -->
|
|
<ClientRouter />
|
|
<meta name="view-transition" content="same-origin" />
|
|
{
|
|
import.meta.env.MODE === 'production' && (
|
|
<script defer src="https://cloud.umami.is/script.js" data-website-id="a79f759b-74ae-4165-b738-56d123a1c6be"></script>
|
|
)
|
|
}
|
|
</head>
|
|
<body
|
|
class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary"
|
|
>
|
|
<div
|
|
class="fixed inset-0 -z-10 h-full w-full bg-background"
|
|
>
|
|
<div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(37,99,235,0.12),rgba(255,255,255,0))]"></div>
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(139,92,246,0.08),transparent_40%)]"></div>
|
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(249,115,22,0.05),transparent_40%)]"></div>
|
|
</div>
|
|
<slot />
|
|
<BackToTop client:load />
|
|
</body>
|
|
</html>
|
|
|
|
<script is:inline>
|
|
const getThemePreference = () => {
|
|
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
|
|
return localStorage.getItem("theme");
|
|
}
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
};
|
|
const isDark = getThemePreference() === "dark";
|
|
document.documentElement.classList[isDark ? "add" : "remove"]("dark");
|
|
|
|
if (typeof localStorage !== "undefined") {
|
|
const observer = new MutationObserver(() => {
|
|
const isDark = document.documentElement.classList.contains("dark");
|
|
localStorage.setItem("theme", isDark ? "dark" : "light");
|
|
});
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ["class"],
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
:root {
|
|
--transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
body {
|
|
transition:
|
|
background-color var(--transition-standard),
|
|
color var(--transition-standard);
|
|
}
|
|
|
|
/* Page transition animations */
|
|
@keyframes pageIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
main {
|
|
animation: pageIn 0.4s ease-out forwards;
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
main {
|
|
animation: none;
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
</style>
|