commit 426e9e021069d4c9366f41fe8bfc6d458b637550 Author: Evan Date: Wed Jan 21 16:16:01 2026 +0800 feat: 初始化项目并添加多个功能组件 style: 调整UI组件样式和布局 docs: 更新README和添加文档内容 chore: 添加依赖项和配置文件 fix: 修复一些小问题和优化代码 perf: 优化性能相关代码 refactor: 重构部分组件结构 test: 添加测试相关文件 build: 更新构建配置 ci: 添加CI配置文件 diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f1dae15 --- /dev/null +++ b/.gitignore @@ -0,0 +1,40 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local +.env +.env.* +!.env.example + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts +.content-collections diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f709ac2 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Dillion Verma + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..d25feab --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +
+Portfolio +
+ +# Portfolio [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdillionverma%2Fportfolio) + +Built with next.js, [shadcn/ui](https://ui.shadcn.com/), and [magic ui](https://magicui.design/), deployed on Vercel. + +# Features + +- Setup only takes a few minutes by editing the [single config file](./src/data/resume.tsx) +- Built using Next.js 14, React, Typescript, Shadcn/UI, TailwindCSS, Framer Motion, Magic UI +- Includes a blog +- Responsive for different devices +- Optimized for Next.js and Vercel + +# Getting Started Locally + +1. Clone this repository to your local machine: + + ```bash + git clone https://github.com/dillionverma/portfolio + ``` + +2. Move to the cloned directory + + ```bash + cd portfolio + ``` + +3. Install dependencies: + + ```bash + pnpm install + ``` + +4. Start the local Server: + + ```bash + pnpm dev + ``` + +5. Open the [Config file](./src/data/resume.tsx) and make changes + +# License + +Licensed under the [MIT license](https://github.com/dillionverma/portfolio/blob/main/LICENSE.md). diff --git a/components.json b/components.json new file mode 100644 index 0000000..c2f9ceb --- /dev/null +++ b/components.json @@ -0,0 +1,24 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "registries": { + "@svgl": "https://svgl.app/r/{name}.json" + } +} diff --git a/content-collections.ts b/content-collections.ts new file mode 100644 index 0000000..c112bb6 --- /dev/null +++ b/content-collections.ts @@ -0,0 +1,34 @@ +import { defineCollection, defineConfig } from "@content-collections/core"; +import { compileMDX } from "@content-collections/mdx"; +import remarkGfm from "remark-gfm"; +import { z } from "zod"; +import { remarkCodeMeta } from "./src/lib/remark-code-meta"; + +const posts = defineCollection({ + name: "posts", + directory: "content", + include: "**/*.mdx", + schema: z.object({ + title: z.string(), + publishedAt: z.string(), + updatedAt: z.string().optional(), + author: z.string().optional(), + summary: z.string(), + image: z.string().optional(), + content: z.string(), + }), + transform: async (document, context) => { + const mdx = await compileMDX(context, document, { + remarkPlugins: [remarkGfm, remarkCodeMeta], + }); + return { + ...document, + mdx, + }; + }, +}); + +export default defineConfig({ + collections: [posts], +}); + diff --git a/content/api-design-principles.mdx b/content/api-design-principles.mdx new file mode 100644 index 0000000..f4f15cd --- /dev/null +++ b/content/api-design-principles.mdx @@ -0,0 +1,33 @@ +--- +title: "REST API Design Principles That Stand the Test of Time" +publishedAt: "2024-12-12" +updatedAt: "2024-12-12" +author: "John Doe" +summary: "Learn how to design APIs that developers love to use and are easy to maintain." +image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&h=192&fit=crop" +--- + +# REST API Design Principles That Stand the Test of Time + +Great APIs feel boring in the best way: predictable, consistent, and easy to reason about. When the surface area is simple, teams ship faster and clients break less often. + +This is a lightweight checklist you can keep in mind while designing new endpoints or reviewing an existing API. + +## Core principles + +- Use clear, consistent **resource names** (think nouns). +- Keep behavior aligned with **HTTP semantics** (read vs write). +- Return **consistent response shapes** so clients don’t guess. +- Prefer **sane defaults** with optional query parameters for filtering/sorting. + +## A simple checklist + +1. Pick stable resource paths (plural nouns are a common convention). +2. Use a small set of status codes consistently. +3. Document pagination and what “next/previous” means. +4. Be explicit about authentication and authorization requirements. +5. Add brief examples in docs for the “happy path” and common errors. + +## Wrap-up + +If you optimize for consistency first, your API will be easier to document, easier to test, and easier for others to adopt. diff --git a/content/building-design-systems.mdx b/content/building-design-systems.mdx new file mode 100644 index 0000000..01ff2e8 --- /dev/null +++ b/content/building-design-systems.mdx @@ -0,0 +1,146 @@ +--- +title: "Building Scalable Design Systems with React and Tailwind" +publishedAt: "2024-12-01" +updatedAt: "2024-12-01" +author: "John Doe" +summary: "A comprehensive guide to creating maintainable design systems that scale with your team and product." +image: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&h=192&fit=crop" +--- + +Design systems are the backbone of consistent user interfaces. Here's how to build one that scales. + +## Why Design Systems Matter + +A well-crafted design system provides: + +- **Consistency** across all products +- **Faster development** with reusable components +- **Better collaboration** between designers and developers +- **Reduced technical debt** over time + +## Core Principles + +### 1. Start with Tokens + +Design tokens are the atomic values of your system: + +```typescript title="tokens.ts" +export const tokens = { + colors: { + primary: { + 50: '#eff6ff', + 500: '#3b82f6', + 900: '#1e3a8a', + }, + neutral: { + 0: '#ffffff', + 100: '#f5f5f5', + 900: '#171717', + }, + }, + spacing: { + xs: '0.25rem', + sm: '0.5rem', + md: '1rem', + lg: '1.5rem', + xl: '2rem', + }, + radii: { + sm: '0.25rem', + md: '0.5rem', + lg: '1rem', + full: '9999px', + }, +} as const; +``` + +### 2. Build Primitive Components + +Start with the basics: + +```tsx title="Button.tsx" +import { cva, type VariantProps } from "class-variance-authority"; + +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md font-medium transition-colors", + { + variants: { + variant: { + primary: "bg-primary text-white hover:bg-primary/90", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + }, + size: { + sm: "h-8 px-3 text-sm", + md: "h-10 px-4", + lg: "h-12 px-6 text-lg", + }, + }, + defaultVariants: { + variant: "primary", + size: "md", + }, + } +); + +interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps {} + +export function Button({ variant, size, className, ...props }: ButtonProps) { + return ( +