diff --git a/src/components/AuthorCard.tsx b/src/components/AuthorCard.tsx index d869612..72337d2 100644 --- a/src/components/AuthorCard.tsx +++ b/src/components/AuthorCard.tsx @@ -24,7 +24,7 @@ export default function AuthorCard({ lang, author }: AuthorCardProps) {
{/* Avatar */}
-
+
{authorInfo.avatar ? ( diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 52cb714..767191b 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -19,7 +19,7 @@ export default function Footer({ lang: propLang }: FooterProps) { const t = useTranslations(lang); return ( -
+
{lang === 'zh' ? '构建 AI 产品？寻找技术合伙人？联系我！' : 'Building AI Products? Need a Technical Co-founder? Contact me!'} diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx index f3bc398..549b2d9 100644 --- a/src/components/GlassHeader.tsx +++ b/src/components/GlassHeader.tsx @@ -36,13 +36,13 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) { const toggleMenu = () => setIsMenuOpen(!isMenuOpen); return ( - @@ -75,11 +75,11 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) { { children: React.ReactNode; delay?: number; + direction?: 'up' | 'down' | 'left' | 'right' | 'none'; + duration?: number; } export default function MotionWrapper({ children, delay = 0, + direction = 'up', + duration = 0.6, ...props }: MotionWrapperProps) { + const directions = { + up: { y: 30, x: 0 }, + down: { y: -30, x: 0 }, + left: { x: 30, y: 0 }, + right: { x: -30, y: 0 }, + none: { x: 0, y: 0 } + }; + + const initial = { + opacity: 0, + ...directions[direction] + }; + + const whileInView = { + opacity: 1, + x: 0, + y: 0, + transition: { + duration, + delay, + ease: [0.43, 0.13, 0.23, 0.96] + } + }; + return ( {children} diff --git a/src/components/ShareButtons.tsx b/src/components/ShareButtons.tsx index 41cae11..7996c03 100644 --- a/src/components/ShareButtons.tsx +++ b/src/components/ShareButtons.tsx @@ -56,7 +56,7 @@ export default function ShareButtons({ lang, title, url }: ShareButtonsProps) { return (

- + {shareText} @@ -87,7 +87,7 @@ export default function ShareButtons({ lang, title, url }: ShareButtonsProps) { className=" flex items-center justify-center w-12 h-12 rounded-full bg-muted text-muted-foreground transition-all duration-200 - hover:bg-purple-500/10 hover:text-purple-500 + hover:bg-primary/10 hover:text-primary relative " title={copyText} @@ -106,7 +106,7 @@ export default function ShareButtons({ lang, title, url }: ShareButtonsProps) { {/* Copy Success Message */} {copied && ( -
+
diff --git a/src/components/SkillsMarquee.tsx b/src/components/SkillsMarquee.tsx index 9137527..ca0830c 100644 --- a/src/components/SkillsMarquee.tsx +++ b/src/components/SkillsMarquee.tsx @@ -53,7 +53,7 @@ function SkillItem({ skill }: { skill: SkillItem }) { const iconUrl = `https://skillicons.dev/icons?i=${skill.icon}`; return ( -
+
{skill.name} = ({ delayBeforeDelete = 2000, delayBeforeTyping = 700, loop = true, - cursorClassName = 'text-purple-500', + cursorClassName = 'text-primary', className = '', showCursor = true, }) => { diff --git a/src/components/blog/BlogList.astro b/src/components/blog/BlogList.astro index 6c31fbb..ed02946 100644 --- a/src/components/blog/BlogList.astro +++ b/src/components/blog/BlogList.astro @@ -76,7 +76,7 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More'; {posts.length > 0 ? ( posts.map((post, index) => (
-
+
{/* Featured Image */}
@@ -91,7 +91,7 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More'; {/* Content */}
-

+

{post.title} @@ -135,7 +135,7 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More'; {readMoreText} @@ -150,7 +150,7 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More'; )) ) : (
- +

@@ -161,7 +161,7 @@ const readMoreText = lang === 'zh' ? '阅读更多' : 'Read More';

diff --git a/src/components/blog/CategoryCard.astro b/src/components/blog/CategoryCard.astro index 7e92252..a7de5c4 100644 --- a/src/components/blog/CategoryCard.astro +++ b/src/components/blog/CategoryCard.astro @@ -43,7 +43,7 @@ const title = titles[lang] || titles[defaultLang];

- + {title}

@@ -52,7 +52,7 @@ const title = titles[lang] || titles[defaultLang]; const categoryId = categoryMap.get(cat) || cat.toLowerCase(); return ( + class={`block transition-colors duration-200 ${categoryId === currentCategory.toLowerCase() ? 'text-primary font-medium' : 'text-muted-foreground hover:text-primary'}`}> {cat} ); diff --git a/src/components/blog/PostMeta.astro b/src/components/blog/PostMeta.astro index fac5901..c54ca31 100644 --- a/src/components/blog/PostMeta.astro +++ b/src/components/blog/PostMeta.astro @@ -99,13 +99,13 @@ const getReadingTimeText = (minutes: number) => { : cat.toLowerCase(); return ( - + {cat} ); }) ) : ( - + {category} )} diff --git a/src/components/blog/TagCard.astro b/src/components/blog/TagCard.astro index e7e8cad..010a5de 100644 --- a/src/components/blog/TagCard.astro +++ b/src/components/blog/TagCard.astro @@ -43,7 +43,7 @@ const title = titles[lang] || titles[defaultLang];

- + {title}

@@ -54,7 +54,7 @@ const title = titles[lang] || titles[defaultLang]; const isCurrentTag = tagId === currentTag.toLowerCase(); return ( + class={`inline-block px-3 py-1 text-sm rounded-full transition-all duration-200 ${isCurrentTag ? 'bg-primary/20 text-primary font-medium' : 'bg-muted text-muted-foreground hover:bg-primary/20 hover:text-primary'}`}> {tagItem} ); diff --git a/src/components/layout/BlogNavigation.astro b/src/components/layout/BlogNavigation.astro index e67985d..fce0316 100644 --- a/src/components/layout/BlogNavigation.astro +++ b/src/components/layout/BlogNavigation.astro @@ -76,7 +76,7 @@ const nextText = lang === 'zh' ? '下一篇' : 'Next Post'; @@ -91,7 +91,7 @@ const nextText = lang === 'zh' ? '下一篇' : 'Next Post'; diff --git a/src/components/layout/TableOfContents.astro b/src/components/layout/TableOfContents.astro index 4d409a6..e1c0010 100644 --- a/src/components/layout/TableOfContents.astro +++ b/src/components/layout/TableOfContents.astro @@ -14,7 +14,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents';

- + {title} @@ -106,7 +106,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents'; // Remove active state from all links document.querySelectorAll("#toc-list a").forEach((el) => { el.classList.remove( - "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium" + "bg-primary/10", "text-primary", "border-l-primary", "font-medium" ); el.classList.add("text-muted-foreground", "border-transparent"); }); @@ -115,7 +115,7 @@ const title = lang === 'zh' ? '目录' : 'Table of Contents'; if (link) { link.classList.remove("text-muted-foreground", "border-transparent"); link.classList.add( - "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium" + "bg-primary/10", "text-primary", "border-l-primary", "font-medium" ); } } diff --git a/src/components/markdown/HighlightBox.astro b/src/components/markdown/HighlightBox.astro index 533ffed..2a2d8cd 100644 --- a/src/components/markdown/HighlightBox.astro +++ b/src/components/markdown/HighlightBox.astro @@ -69,10 +69,10 @@ const styles = { component: AlertTriangle }, tip: { - bg: 'bg-purple-500/10 dark:bg-purple-500/20', - border: 'border-purple-500/50 dark:border-purple-500/30', - title: 'text-purple-700 dark:text-purple-300', - icon: 'text-purple-500', + bg: 'bg-primary/10 dark:bg-primary/20', + border: 'border-primary/50 dark:border-primary/30', + title: 'text-primary dark:text-primary/80', + icon: 'text-primary', component: Lightbulb }, note: { diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro index 2806eb8..c1c71ab 100644 --- a/src/layouts/AboutLayout.astro +++ b/src/layouts/AboutLayout.astro @@ -21,7 +21,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
-
+
@@ -62,7 +62,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;

- + {lang === 'zh' ? '目录' : 'Table of Contents'} @@ -161,7 +161,7 @@ const lang = Astro.currentLocale as Lang || defaultLang; // Remove active state from all links document.querySelectorAll("#toc-list a").forEach((el) => { el.classList.remove( - "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium" + "bg-primary/10", "text-primary", "border-l-primary", "font-medium" ); el.classList.add("text-muted-foreground", "border-transparent"); }); @@ -170,7 +170,7 @@ const lang = Astro.currentLocale as Lang || defaultLang; if (link) { link.classList.remove("text-muted-foreground", "border-transparent"); link.classList.add( - "bg-purple-500/10", "text-purple-500", "border-l-purple-500", "font-medium" + "bg-primary/10", "text-primary", "border-l-primary", "font-medium" ); } } diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro index c84e131..d0119a7 100644 --- a/src/layouts/BlogLayout.astro +++ b/src/layouts/BlogLayout.astro @@ -18,7 +18,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
-
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9730323..5ed0008 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -24,7 +24,9 @@ const t = useTranslations(lang); - {title}{t('site.title') ? ` | ${t('site.title')}` : ''} + {title}{t('site.title') ? ` | ${t('site.title')}` : ''} + + { import.meta.env.MODE === 'production' && ( @@ -32,10 +34,10 @@ const t = useTranslations(lang); }
@@ -86,4 +88,29 @@ const t = useTranslations(lang); 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; + } + } diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 67f5018..9baa66e 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -48,8 +48,8 @@ const sortedBlogPosts = sortPostsByDate(blogPosts);
-

- Blog +

+ Blog

Thoughts on AI products, full-stack development, and building in public. Exploring the intersection of technology and product building. diff --git a/src/pages/hire.astro b/src/pages/hire.astro index 7ddca03..e3d1761 100644 --- a/src/pages/hire.astro +++ b/src/pages/hire.astro @@ -17,14 +17,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+
- + {lang === 'zh' ? '专业合作' : 'Professional Collaboration'} -

+

{lang === 'zh' ? '合作' : 'Hire Me'}

@@ -41,7 +41,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+
👥

@@ -50,7 +50,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

{lang === 'zh' ? '初创公司' : 'Startups'}

@@ -61,7 +61,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

{lang === 'zh' ? '独立创始人' : 'Indie Hackers'}

@@ -72,7 +72,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

{lang === 'zh' ? '传统企业' : 'Traditional Businesses'}

@@ -83,7 +83,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

{lang === 'zh' ? '技术团队' : 'Technical Teams'}

@@ -114,7 +114,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
-
+
⚡
@@ -207,7 +207,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
-
+
⏰

@@ -329,7 +329,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me'; {lang === 'zh' ? '远程工作' : 'Remote only'} - + {lang === 'zh' ? '中英双语' : 'Bilingual EN/ZH'}

@@ -339,7 +339,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
-
+

@@ -353,14 +353,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
📧 {lang === 'zh' ? '发送邮件' : 'Send Email'} 📡 {lang === 'zh' ? '了解更多关于我' : 'Learn More About Me'} diff --git a/src/pages/index.astro b/src/pages/index.astro index 1c07bae..3e8ba94 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,9 +2,10 @@ import Layout from "@/layouts/Layout.astro"; import GlassHeader from "@/components/GlassHeader"; import SkillsMarquee from "@/components/SkillsMarquee"; - import TypewriterEffect from "@/components/TypewriterEffect"; +import TypewriterEffect from "@/components/TypewriterEffect"; import Footer from "@/components/Footer"; import Container from "@/components/ui/Container.astro"; +import MotionWrapper from "@/components/MotionWrapper"; import { useTranslations } from "@/i18n/utils"; import type { Lang } from "@/types/i18n"; import { defaultLang } from "@/i18n/ui"; @@ -22,22 +23,22 @@ const pageTitle = t('site.title');
-
+
- + - + {t('hero.greeting')} {personalInfo.name}
-

+

{personalInfo.name}

@@ -58,7 +59,7 @@ const pageTitle = t('site.title'); delayBeforeDelete={3500} delayBeforeTyping={1800} loop={true} - cursorClassName="text-purple-600 dark:text-purple-400" + cursorClassName="text-primary dark:text-primary" className="mr-2 font-medium text-muted-foreground" /> 👨‍💻 @@ -72,7 +73,7 @@ const pageTitle = t('site.title');
-

{t('hero.lookingForJob')}

+

{t('hero.lookingForJob')}

{t('hero.digitalNomad')}

@@ -80,7 +81,7 @@ const pageTitle = t('site.title');
@@ -90,7 +91,7 @@ const pageTitle = t('site.title'); @@ -157,13 +158,13 @@ const pageTitle = t('site.title');
- $ + $ whoami
-
Joy Zhao
+
Joy Zhao
- $ + $ cat about.txt
@@ -180,15 +181,15 @@ const pageTitle = t('site.title');
- $ + $ ls projects/
-
+
taskify-app/ e-commerce-platform/ portfolio-site/
- $ + $ _
@@ -201,13 +202,13 @@ const pageTitle = t('site.title'); -
+
- + {lang === 'zh' ? 'featured 项目' : 'Featured Project'} -

+

Elynd

@@ -218,12 +219,12 @@ const pageTitle = t('site.title');

-
-
-
+
+
+
⚡
-
+
{lang === 'zh' ? '让 AI 成为你的共同构建者' : 'Make AI Your Co-Builder'}
@@ -231,7 +232,7 @@ const pageTitle = t('site.title');
-
AI-First
+
AI-First
{lang === 'zh' ? '从第一天就融入 AI 思维' : 'Built with AI from day one'}
@@ -252,14 +253,14 @@ const pageTitle = t('site.title');
🚀 {t('hero.ctaSecondary')} 📡 {lang === 'zh' ? '了解更多' : 'Learn More'} @@ -274,7 +275,7 @@ const pageTitle = t('site.title');
-

+

{t('services.title')}

@@ -302,7 +303,7 @@ const pageTitle = t('site.title');
- + @@ -315,13 +316,13 @@ const pageTitle = t('site.title');
-
+
-

+

{t('about.title')}

@@ -408,7 +409,7 @@ const pageTitle = t('site.title'); 90%
-
+
@@ -421,10 +422,10 @@ const pageTitle = t('site.title');
DevOps - 75% + 75%
-
+
@@ -457,11 +458,11 @@ const pageTitle = t('site.title');
-
+
- + {lang === 'zh' ? '关于我现在正在做什么' : "What's happening now"} -

+

{lang === 'zh' ? '现在' : 'Now'}

@@ -41,7 +41,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';

-
+
🔨

@@ -49,9 +49,9 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';

-
+
-
+
⚡
@@ -62,7 +62,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now'; : 'An open AI workspace for builders to work smarter. Built from first principles of AI, creating fully open, self-hostable collaboration tools.'}

- AI Product + AI Product TypeScript Open Source
@@ -148,7 +148,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
-
+
@@ -169,14 +169,14 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
💼 {lang === 'zh' ? '查看合作方式' : 'View Collaboration Options'} 📧 {lang === 'zh' ? '发送邮件' : 'Send Email'} diff --git a/src/pages/projects.astro b/src/pages/projects.astro index 9cdfd35..747b6d8 100644 --- a/src/pages/projects.astro +++ b/src/pages/projects.astro @@ -32,12 +32,12 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
-
+
-

+

{t('projects.title')}

@@ -51,23 +51,23 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment'); {featuredProject && ( -
+
- + Featured
-
+
-
+
{featuredProject.icon}
- + {t(`project.status.${featuredProject.status}`)} @@ -101,7 +101,7 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
- + {t('project.visit')} @@ -131,7 +131,7 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment'); {productProjects.length > 0 && ( <>
-
+
🛍️

{t('project.type.product')}

diff --git a/src/pages/zh/blog/index.astro b/src/pages/zh/blog/index.astro index 92464d4..e4120a9 100644 --- a/src/pages/zh/blog/index.astro +++ b/src/pages/zh/blog/index.astro @@ -60,8 +60,8 @@ const tags = extractTags(allPostsArray);
-

- 博客 +

+ 博客

关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。 diff --git a/src/pages/zh/hire.astro b/src/pages/zh/hire.astro index e5937b8..010603c 100644 --- a/src/pages/zh/hire.astro +++ b/src/pages/zh/hire.astro @@ -17,14 +17,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+
- + 专业合作 -

+

合作

@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+
👥

@@ -48,7 +48,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

初创公司

@@ -57,7 +57,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

独立创始人

@@ -66,7 +66,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

传统企业

@@ -75,7 +75,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';

-
+

技术团队

@@ -104,7 +104,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
-
+
⚡
@@ -187,7 +187,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
-
+
⏰

@@ -289,7 +289,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me'; 远程工作 - + 中英双语

@@ -299,7 +299,7 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
-
+

@@ -311,14 +311,14 @@ const pageTitle = lang === 'zh' ? '合作' : 'Hire Me';
📧 发送邮件 📡 了解更多关于我 diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro index 2339021..a000bd9 100644 --- a/src/pages/zh/index.astro +++ b/src/pages/zh/index.astro @@ -5,6 +5,7 @@ import SkillsMarquee from "@/components/SkillsMarquee"; import TypewriterEffect from "@/components/TypewriterEffect"; import Footer from "@/components/Footer"; import Container from "@/components/ui/Container.astro"; +import MotionWrapper from "@/components/MotionWrapper"; import { useTranslations } from "@/i18n/utils"; import type { Lang } from "@/types/i18n"; import { defaultLang } from "@/i18n/ui"; @@ -22,22 +23,22 @@ const pageTitle = t('site.title');
-
+
- + - + {t('hero.greeting')} {personalInfo.name}
-

+

{personalInfo.name}

@@ -58,7 +59,7 @@ const pageTitle = t('site.title'); delayBeforeDelete={3500} delayBeforeTyping={1800} loop={true} - cursorClassName="text-purple-600 dark:text-purple-400" + cursorClassName="text-primary dark:text-primary" className="mr-2 font-medium text-muted-foreground" /> 👨‍💻 @@ -72,7 +73,7 @@ const pageTitle = t('site.title');
-

{t('hero.lookingForJob')}

+

{t('hero.lookingForJob')}

{t('hero.digitalNomad')}

@@ -80,7 +81,7 @@ const pageTitle = t('site.title');
@@ -90,7 +91,7 @@ const pageTitle = t('site.title'); @@ -157,13 +158,13 @@ const pageTitle = t('site.title');
- $ + $ whoami
-
Joy Zhao
+
Joy Zhao
- $ + $ cat about.txt
@@ -180,15 +181,15 @@ const pageTitle = t('site.title');
- $ + $ ls projects/
-
+
taskify-app/ e-commerce-platform/ portfolio-site/
- $ + $ _
@@ -201,13 +202,13 @@ const pageTitle = t('site.title'); -
+
- + Featured 项目 -

+

Elynd

@@ -216,12 +217,12 @@ const pageTitle = t('site.title');

-
-
-
+
+
+
⚡
-
+
让 AI 成为你的共同构建者
@@ -229,7 +230,7 @@ const pageTitle = t('site.title');
-
AI-First
+
AI-First
从第一天就融入 AI 思维
@@ -250,14 +251,14 @@ const pageTitle = t('site.title');
🚀 {t('hero.ctaSecondary')} 📡 了解更多 @@ -272,7 +273,7 @@ const pageTitle = t('site.title');
-

+

{t('services.title')}

@@ -300,7 +301,7 @@ const pageTitle = t('site.title');
- + @@ -313,13 +314,13 @@ const pageTitle = t('site.title');
-
+
-

+

{t('about.title')}

@@ -407,7 +408,7 @@ const pageTitle = t('site.title'); 90%
-
+
@@ -420,10 +421,10 @@ const pageTitle = t('site.title');
DevOps - 75% + 75%
-
+
@@ -456,11 +457,11 @@ const pageTitle = t('site.title');
-
+
- + 关于我现在正在做什么 -

+

现在

@@ -39,7 +39,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';

-
+
🔨

@@ -47,9 +47,9 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';

-
+
-
+
⚡
@@ -58,7 +58,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now'; 一个开放的 AI 工作空间，让构建者能够更智能地工作。从 AI 第一性原理出发，打造完全开放、可自托管的协作工具。

- AI 产品 + AI 产品 TypeScript 开源
@@ -138,7 +138,7 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
-
+
@@ -157,14 +157,14 @@ const pageTitle = lang === 'zh' ? '现在' : 'Now';
💼 查看合作方式 📧 发送邮件 diff --git a/src/pages/zh/projects.astro b/src/pages/zh/projects.astro index 0df4dab..5c4ab2a 100644 --- a/src/pages/zh/projects.astro +++ b/src/pages/zh/projects.astro @@ -32,12 +32,12 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
-
+
-

+

{t('projects.title')}

@@ -51,23 +51,23 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment'); {featuredProject && ( -
+
- + Featured 项目
-
+
-
+
{featuredProject.icon}
- + {t(`project.status.${featuredProject.status}`)} @@ -101,7 +101,7 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment');
- + {t('project.visit')} @@ -131,7 +131,7 @@ const experimentProjects = otherProjects.filter(p => p.type === 'experiment'); {productProjects.length > 0 && ( <>
-
+
🛍️

{t('project.type.product')}

diff --git a/src/styles/global.css b/src/styles/global.css index 723c79d..936ca3b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,6 @@ @import "tailwindcss"; @import "tw-animate-css"; +@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); @plugin "@tailwindcss/typography"; /* Blog List Component Styles */ @@ -43,24 +44,24 @@ :root { --radius: 0.75rem; - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); + --background: #F8FAFC; + --foreground: #1E293B; + --card: #FFFFFF; + --card-foreground: #1E293B; + --popover: #FFFFFF; + --popover-foreground: #1E293B; + --primary: #2563EB; + --primary-foreground: #FFFFFF; + --secondary: #E4E4E7; + --secondary-foreground: #1E293B; + --muted: #F4F4F5; + --muted-foreground: #71717A; + --accent: #F97316; + --accent-foreground: #FFFFFF; + --destructive: #EF4444; + --border: #E4E4E7; + --input: #E4E4E7; + --ring: #2563EB; --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); @@ -76,36 +77,39 @@ --sidebar-ring: oklch(0.708 0 0); --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --svg-filter-color: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%); - + /* Modern Design Variables */ - --gradient-primary: linear-gradient(135deg, #8B5CF6, #EC4899); + --gradient-primary: linear-gradient(135deg, #2563EB, #F97316); --gradient-secondary: linear-gradient(135deg, #3B82F6, #10B981); + --gradient-accent: linear-gradient(135deg, #F97316, #FB923C); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); + --shadow-xl: 0 12px 40px rgba(37, 99, 235, 0.15); --animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --animation-smooth: cubic-bezier(0.65, 0, 0.35, 1); + --animation-spring: cubic-bezier(0.22, 1, 0.36, 1); } .dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.205 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.205 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.556 0 0); + --background: #09090B; + --foreground: #F8FAFC; + --card: #18181B; + --card-foreground: #F8FAFC; + --popover: #18181B; + --popover-foreground: #F8FAFC; + --primary: #3B82F6; + --primary-foreground: #FFFFFF; + --secondary: #27272A; + --secondary-foreground: #F8FAFC; + --muted: #27272A; + --muted-foreground: #A1A1AA; + --accent: #FB923C; + --accent-foreground: #09090B; + --destructive: #EF4444; + --border: #27272A; + --input: #27272A; + --ring: #3B82F6; --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); @@ -120,11 +124,12 @@ --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); --svg-filter-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(102%) contrast(101%); - + /* Dark Mode Modern Design Variables */ - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); - --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3); + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); + --shadow-xl: 0 12px 40px rgba(59, 130, 246, 0.2); } @theme inline { @@ -172,11 +177,12 @@ } body { @apply bg-background text-foreground; - font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + font-family: "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-feature-settings: "ss01", "ss02", "cv01", "cv02"; } h1, h2, h3, h4, h5, h6 { @apply font-bold tracking-tight; + font-family: "Archivo", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.2; } a { @@ -186,3 +192,148 @@ @apply rounded-md; } } + +/* Animation utilities */ +@layer utilities { + .animate-fade-in { + animation: fadeIn 0.6s ease-out forwards; + } + + .animate-fade-in-up { + animation: fadeInUp 0.6s ease-out forwards; + } + + .animate-slide-in-left { + animation: slideInLeft 0.5s ease-out forwards; + } + + .animate-slide-in-right { + animation: slideInRight 0.5s ease-out forwards; + } + + .animate-scale-in { + animation: scaleIn 0.4s ease-out forwards; + } + + .animate-bounce-in { + animation: bounceIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; + } + + .hover-lift { + transition: transform 0.3s ease, box-shadow 0.3s ease; + } + + .hover-lift:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); + } + + .dark .hover-lift:hover { + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); + } + + .gradient-text-primary { + background: linear-gradient(135deg, #2563EB, #F97316); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .gradient-text-accent { + background: linear-gradient(135deg, #F97316, #FB923C); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + /* Scroll reveal animations */ + .reveal { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.6s ease-out, transform 0.6s ease-out; + } + + .reveal.active { + opacity: 1; + transform: translateY(0); + } + + /* Reduced motion support */ + @media (prefers-reduced-motion: reduce) { + .animate-fade-in, + .animate-fade-in-up, + .animate-slide-in-left, + .animate-slide-in-right, + .animate-scale-in, + .animate-bounce-in, + .reveal { + animation: none; + opacity: 1; + transform: none; + } + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes bounceIn { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +}