feat: finish home + header

.env.example

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=
+DATABASE_HOST=
+DATABASE_USERNAME=
+DATABASE_PASSWORD=

.eslintrc.cjs

@@ -0,0 +1,41 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path')
+
+/** @type {import("eslint").Linter.Config} */
+const config = {
+ overrides: [
+ {
+ extends: [
+ 'plugin:@typescript-eslint/recommended-requiring-type-checking',
+ ],
+ files: ['*.ts', '*.tsx'],
+ parserOptions: {
+ project: path.join(__dirname, 'tsconfig.json'),
+ },
+ },
+ ],
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ project: path.join(__dirname, 'tsconfig.json'),
+ },
+ plugins: ['@typescript-eslint', 'simple-import-sort', 'unused-imports'],
+ extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended'],
+ rules: {
+ '@typescript-eslint/consistent-type-imports': [
+ 'warn',
+ {
+ prefer: 'type-imports',
+ fixStyle: 'inline-type-imports',
+ },
+ ],
+ '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+ '@typescript-eslint/no-unsafe-call': 'warn',
+ '@typescript-eslint/no-unsafe-member-access': 'warn',
+
+ 'simple-import-sort/imports': 'error',
+ 'simple-import-sort/exports': 'warn',
+ 'unused-imports/no-unused-imports': 'error',
+ },
+}
+
+module.exports = config

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
@@ -35,5 +36,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# contentlayer
-.contentlayer
+# vs code
+.vscode

app/(home)/Photos.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import Image from 'next/image'
+import React from 'react'
+
+import image5 from '~/assets/highlights/highlight-cali.jpeg'
+import image1 from '~/assets/highlights/highlight-cat.jpeg'
+import image3 from '~/assets/highlights/highlight-controller.jpg'
+import image6 from '~/assets/highlights/highlight-push.png'
+import image2 from '~/assets/highlights/highlight-workshop.jpg'
+import image4 from '~/assets/highlights/highlight-zolplay.jpg'
+
+const images = [image1, image2, image3, image4, image5, image6]
+const alts = [
+ '我的猫躺在我的工作台桌子上的键盘旁边',
+ '我在西雅图城市大学举办的技术演讲',
+ 'Xbox 团队给我专属定制的控制器',
+ '佐玩的办公室大厅，背景墙挂着一个黑色的佐玩氛围布',
+ '我举着酒杯看着手机',
+ '我在用 Ableton Push 制作电子乐',
+]
+
+export function Photos() {
+ const [width, setWidth] = React.useState(0)
+ const [isCompact, setIsCompact] = React.useState(false)
+ const expandedWidth = React.useMemo(() => width * 1.38, [width])
+
+ React.useEffect(() => {
+ const handleResize = () => {
+ // 640px is the breakpoint for md
+ if (window.innerWidth < 640) {
+ setIsCompact(true)
+ return setWidth(window.innerWidth / 2 - 64)
+ }
+
+ setWidth(window.innerWidth / images.length - 4 * images.length)
+ }
+
+ window.addEventListener('resize', handleResize)
+ handleResize()
+
+ return () => {
+ window.removeEventListener('resize', handleResize)
+ }
+ }, [])
+
+ return (
+ <motion.div
+ className="mt-16 sm:mt-20"
+ initial={{ opacity: 0, y: 20 }}
+ animate={{ opacity: 1, y: 0 }}
+ >
+ <div className="-my-4 flex w-full snap-x snap-proximity scroll-pl-4 gap-4 overflow-x-auto px-4 py-4 sm:gap-6 md:overflow-x-hidden md:px-0">
+ {images.map((image, idx) => (
+ <motion.div
+ key={image.src}
+ className="relative h-40 flex-none shrink-0 snap-start overflow-hidden rounded-xl bg-zinc-100 ring-2 ring-lime-900/50 dark:bg-zinc-800 dark:ring-lime-300/10 md:h-72 md:rounded-3xl"
+ animate={{
+ width,
+ opacity: isCompact ? 1 : 0.85,
+ filter: isCompact ? 'saturate(0.8)' : 'saturate(0.7)',
+ rotate: idx % 2 === 0 ? 2 : -1,
+ }}
+ whileHover={
+ isCompact
+ ? {}
+ : {
+ width: expandedWidth,
+ opacity: 1,
+ filter: 'saturate(1)',
+ }
+ }
+ layout
+ >
+ <Image
+ src={image}
+ alt={alts[idx] ?? ''}
+ sizes="(min-width: 640px) 18rem, 11rem"
+ className="pointer-events-none absolute inset-0 h-full w-full select-none object-cover"
+ priority
+ />
+ </motion.div>
+ ))}
+ </div>
+ </motion.div>
+ )
+}

app/ThemeProvider.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ThemeProviderProps } from 'next-themes/dist/types'
+
+// https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564
+
+export function ThemeProvider(props: ThemeProviderProps) {
+ return <NextThemesProvider {...props} />
+}

app/ThemeSwitcher.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import React from 'react'
+import { TbCircleHalf2, TbMoon, TbSun } from 'react-icons/tb'
+
+import { Tooltip } from '~/components/ui/Tooltip'
+
+const themes = [
+ {
+ label: '浅色模式',
+ value: 'light',
+ icon: TbSun,
+ },
+ {
+ label: '深色模式',
+ value: 'dark',
+ icon: TbMoon,
+ },
+ {
+ label: '跟随系统',
+ value: 'system',
+ icon: TbCircleHalf2,
+ },
+]
+export function ThemeSwitcher() {
+ const [mounted, setMounted] = React.useState(false)
+ const { setTheme, theme } = useTheme()
+ const ThemeIcon = React.useMemo(
+ () => themes.find((t) => t.value === theme)?.icon ?? TbCircleHalf2,
+ [theme]
+ )
+
+ React.useEffect(() => setMounted(true), [])
+
+ function toggleTheme() {
+ if (theme === 'system') {
+ setTheme('dark')
+ } else if (theme === 'dark') {
+ setTheme('light')
+ } else {
+ setTheme('system')
+ }
+ }
+
+ if (!mounted) {
+ return null
+ }
+
+ return (
+ <Tooltip.Provider>
+ <Tooltip.Root disableHoverableContent>
+ <Tooltip.Trigger asChild>
+ <button
+ type="button"
+ aria-label="切换颜色主题"
+ className="group rounded-full bg-gradient-to-b from-zinc-50/20 to-white/80 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:from-zinc-900/30 dark:to-zinc-800/80 dark:ring-white/10 dark:hover:ring-white/20"
+ onClick={toggleTheme}
+ >
+ <ThemeIcon className="h-6 w-6 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-200" />
+ </button>
+ </Tooltip.Trigger>
+ <Tooltip.Content>
+ {themes.find((t) => t.value === theme)?.label}
+ </Tooltip.Content>
+ </Tooltip.Root>
+ </Tooltip.Provider>
+ )
+}

app/about/page.tsx

@@ -0,0 +1,9 @@
+import { Container } from '~/components/ui/Container'
+
+export default function AboutPage() {
+ return (
+ <Container>
+ <h1 className="mt-10">给我点时间开发一下...</h1>
+ </Container>
+ )
+}

app/app.d.ts

@@ -0,0 +1,16 @@
+type MdxFrontMatter = {
+ title: string
+ publishedAt: string
+ tags: string[]
+ image?: string
+ summary?: string
+}
+type MDXComponent = {
+ default: React.FC
+ meta: MdxFrontMatter
+}
+
+declare module '*.mdx' {
+ export default MDXComponent
+ export const meta: MdxFrontMatter
+}

app/globals.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+::selection {
+ background-color: theme('colors.lime.500');
+ color: theme('colors.lime.950');
+}
+
+@keyframes typing-pulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+}

app/layout.tsx

@@ -0,0 +1,45 @@
+import '~/app/globals.css'
+
+import { ClerkProvider } from '@clerk/nextjs/app-beta'
+
+import { ThemeProvider } from '~/app/ThemeProvider'
+import { Header } from '~/components/layouts/Header'
+import { sansFont } from '~/lib/font'
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <html
+ lang="zh"
+ className={`${sansFont.variable} m-0 h-full p-0 font-sans antialiased`}
+ suppressHydrationWarning
+ >
+ <body className="flex h-full flex-col bg-zinc-50 bg-[url('/grid-black.svg')] bg-top bg-repeat dark:bg-primary-900 dark:bg-[url('/grid.svg')]">
+ <span className="pointer-events-none fixed top-0 block h-[800px] w-full select-none bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(5,5,5,0.045)_0%,rgba(0,0,0,0)_100%)] dark:bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0)_100%)]" />
+ <ThemeProvider
+ attribute="class"
+ defaultTheme="system"
+ enableSystem
+ disableTransitionOnChange
+ >
+ <ClerkProvider>
+ <div className="fixed inset-0 flex justify-center sm:px-8">
+ <div className="flex w-full max-w-7xl lg:px-8">
+ <div className="w-full bg-zinc-50/90 ring-1 ring-zinc-100 dark:bg-zinc-900/80 dark:ring-zinc-400/20" />
+ </div>
+ </div>
+
+ <div className="relative text-slate-50">
+ <Header />
+
+ <main>{children}</main>
+ </div>
+ </ClerkProvider>
+ </ThemeProvider>
+ </body>
+ </html>
+ )
+}