From 426e9e021069d4c9366f41fe8bfc6d458b637550 Mon Sep 17 00:00:00 2001 From: Evan Date: Wed, 21 Jan 2026 16:16:01 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=A4=9A=E4=B8=AA=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit style: 调整UI组件样式和布局 docs: 更新README和添加文档内容 chore: 添加依赖项和配置文件 fix: 修复一些小问题和优化代码 perf: 优化性能相关代码 refactor: 重构部分组件结构 test: 添加测试相关文件 build: 更新构建配置 ci: 添加CI配置文件 --- .eslintrc.json | 3 + .gitignore | 40 + LICENSE | 21 + README.md | 47 + components.json | 24 + content-collections.ts | 34 + content/api-design-principles.mdx | 33 + content/building-design-systems.mdx | 146 + content/git-workflow-guide.mdx | 38 + content/nextjs-performance-tips.mdx | 56 + content/remote-work-productivity.mdx | 43 + content/testing-react-apps.mdx | 36 + content/typescript-best-practices.mdx | 41 + eslint.config.mjs | 16 + next.config.mjs | 34 + package.json | 55 + pnpm-lock.yaml | 7664 +++++++++++++++++ postcss.config.mjs | 7 + public/atomic.png | Bin 0 -> 118147 bytes public/buildspace.jpg | Bin 0 -> 12828 bytes public/fonts/CabinetGrotesk-Medium.ttf | Bin 0 -> 63464 bytes public/fonts/ClashDisplay-Semibold.ttf | Bin 0 -> 45620 bytes public/ib.png | Bin 0 -> 328082 bytes public/laurier.png | Bin 0 -> 117784 bytes public/lime.svg | 1 + public/me.png | Bin 0 -> 300932 bytes public/mitremedia.png | Bin 0 -> 4927 bytes public/nvidia.png | Bin 0 -> 39788 bytes public/shopify.svg | 2 + public/splunk.svg | 134 + public/waterloo.png | Bin 0 -> 37100 bytes src/app/blog/[slug]/opengraph-image.tsx | 240 + src/app/blog/[slug]/page.tsx | 193 + src/app/blog/opengraph-image.tsx | 174 + src/app/blog/page.tsx | 141 + src/app/favicon.ico | Bin 0 -> 25931 bytes src/app/globals.css | 236 + src/app/layout.tsx | 95 + src/app/not-found.tsx | 35 + src/app/opengraph-image.tsx | 172 + src/app/page.tsx | 150 + src/components/icons.tsx | 229 + src/components/magicui/blur-fade-text.tsx | 86 + src/components/magicui/blur-fade.tsx | 63 + src/components/magicui/dock.tsx | 91 + src/components/magicui/flickering-grid.tsx | 241 + src/components/mdx/code-block.tsx | 110 + src/components/mdx/media-container.tsx | 34 + src/components/mode-toggle.tsx | 23 + src/components/navbar.tsx | 97 + src/components/project-card.tsx | 143 + src/components/section/contact-section.tsx | 43 + src/components/section/hackathons-section.tsx | 81 + src/components/section/projects-section.tsx | 59 + src/components/section/work-section.tsx | 87 + src/components/theme-provider.tsx | 8 + src/components/timeline.tsx | 84 + src/components/ui/accordion.tsx | 57 + src/components/ui/avatar.tsx | 50 + src/components/ui/badge.tsx | 36 + src/components/ui/button.tsx | 57 + src/components/ui/card.tsx | 86 + src/components/ui/separator.tsx | 31 + src/components/ui/svgs/csharp.tsx | 28 + src/components/ui/svgs/docker.tsx | 9 + src/components/ui/svgs/golang.tsx | 20 + src/components/ui/svgs/golangDark.tsx | 20 + src/components/ui/svgs/java.tsx | 28 + src/components/ui/svgs/kubernetes.tsx | 58 + src/components/ui/svgs/nextjsIconDark.tsx | 57 + src/components/ui/svgs/nextjsLogoDark.tsx | 42 + src/components/ui/svgs/nextjsLogoLight.tsx | 42 + src/components/ui/svgs/nodejs.tsx | 79 + src/components/ui/svgs/postgresql.tsx | 62 + .../ui/svgs/postgresqlWordmarkDark.tsx | 77 + .../ui/svgs/postgresqlWordmarkLight.tsx | 74 + src/components/ui/svgs/python.tsx | 40 + src/components/ui/svgs/reactDark.tsx | 26 + src/components/ui/svgs/reactLight.tsx | 24 + src/components/ui/svgs/reactWordmarkDark.tsx | 41 + src/components/ui/svgs/reactWordmarkLight.tsx | 28 + src/components/ui/svgs/typescript.tsx | 16 + src/components/ui/tooltip.tsx | 42 + src/data/resume.tsx | 701 ++ src/lib/pagination.ts | 85 + src/lib/remark-code-meta.ts | 31 + src/lib/utils.ts | 17 + src/mdx-components.tsx | 49 + tsconfig.json | 44 + 89 files changed, 13447 insertions(+) create mode 100644 .eslintrc.json create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 components.json create mode 100644 content-collections.ts create mode 100644 content/api-design-principles.mdx create mode 100644 content/building-design-systems.mdx create mode 100644 content/git-workflow-guide.mdx create mode 100644 content/nextjs-performance-tips.mdx create mode 100644 content/remote-work-productivity.mdx create mode 100644 content/testing-react-apps.mdx create mode 100644 content/typescript-best-practices.mdx create mode 100644 eslint.config.mjs create mode 100644 next.config.mjs create mode 100644 package.json create mode 100644 pnpm-lock.yaml create mode 100644 postcss.config.mjs create mode 100644 public/atomic.png create mode 100644 public/buildspace.jpg create mode 100644 public/fonts/CabinetGrotesk-Medium.ttf create mode 100644 public/fonts/ClashDisplay-Semibold.ttf create mode 100644 public/ib.png create mode 100644 public/laurier.png create mode 100644 public/lime.svg create mode 100644 public/me.png create mode 100644 public/mitremedia.png create mode 100644 public/nvidia.png create mode 100644 public/shopify.svg create mode 100644 public/splunk.svg create mode 100644 public/waterloo.png create mode 100644 src/app/blog/[slug]/opengraph-image.tsx create mode 100644 src/app/blog/[slug]/page.tsx create mode 100644 src/app/blog/opengraph-image.tsx create mode 100644 src/app/blog/page.tsx create mode 100644 src/app/favicon.ico create mode 100644 src/app/globals.css create mode 100644 src/app/layout.tsx create mode 100644 src/app/not-found.tsx create mode 100644 src/app/opengraph-image.tsx create mode 100644 src/app/page.tsx create mode 100644 src/components/icons.tsx create mode 100644 src/components/magicui/blur-fade-text.tsx create mode 100644 src/components/magicui/blur-fade.tsx create mode 100644 src/components/magicui/dock.tsx create mode 100644 src/components/magicui/flickering-grid.tsx create mode 100644 src/components/mdx/code-block.tsx create mode 100644 src/components/mdx/media-container.tsx create mode 100644 src/components/mode-toggle.tsx create mode 100644 src/components/navbar.tsx create mode 100644 src/components/project-card.tsx create mode 100644 src/components/section/contact-section.tsx create mode 100644 src/components/section/hackathons-section.tsx create mode 100644 src/components/section/projects-section.tsx create mode 100644 src/components/section/work-section.tsx create mode 100644 src/components/theme-provider.tsx create mode 100644 src/components/timeline.tsx create mode 100644 src/components/ui/accordion.tsx create mode 100644 src/components/ui/avatar.tsx create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/button.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/components/ui/separator.tsx create mode 100644 src/components/ui/svgs/csharp.tsx create mode 100644 src/components/ui/svgs/docker.tsx create mode 100644 src/components/ui/svgs/golang.tsx create mode 100644 src/components/ui/svgs/golangDark.tsx create mode 100644 src/components/ui/svgs/java.tsx create mode 100644 src/components/ui/svgs/kubernetes.tsx create mode 100644 src/components/ui/svgs/nextjsIconDark.tsx create mode 100644 src/components/ui/svgs/nextjsLogoDark.tsx create mode 100644 src/components/ui/svgs/nextjsLogoLight.tsx create mode 100644 src/components/ui/svgs/nodejs.tsx create mode 100644 src/components/ui/svgs/postgresql.tsx create mode 100644 src/components/ui/svgs/postgresqlWordmarkDark.tsx create mode 100644 src/components/ui/svgs/postgresqlWordmarkLight.tsx create mode 100644 src/components/ui/svgs/python.tsx create mode 100644 src/components/ui/svgs/reactDark.tsx create mode 100644 src/components/ui/svgs/reactLight.tsx create mode 100644 src/components/ui/svgs/reactWordmarkDark.tsx create mode 100644 src/components/ui/svgs/reactWordmarkLight.tsx create mode 100644 src/components/ui/svgs/typescript.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/data/resume.tsx create mode 100644 src/lib/pagination.ts create mode 100644 src/lib/remark-code-meta.ts create mode 100644 src/lib/utils.ts create mode 100644 src/mdx-components.tsx create mode 100644 tsconfig.json 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 ( +