Initial commit: 12个专业个人简历作品集项目
This commit is contained in:
KQL
80
个人简历_大健康/.claude/settings.local.json
Normal file
80
个人简历_大健康/.claude/settings.local.json
Normal file
@@ -0,0 +1,80 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(git init:*)",
|
||||
"Bash(git add:*)",
|
||||
"Bash(git rm:*)",
|
||||
"Bash(rm:*)",
|
||||
"Bash(git commit:*)",
|
||||
"Bash(git remote add:*)",
|
||||
"Bash(git branch:*)",
|
||||
"Bash(git push:*)",
|
||||
"Bash(mv:*)",
|
||||
"Bash(python3:*)",
|
||||
"Bash(cp:*)",
|
||||
"Bash(lsof:*)",
|
||||
"Bash(git clone:*)",
|
||||
"Bash(kill:*)",
|
||||
"Bash(curl:*)",
|
||||
"Bash(chmod:*)",
|
||||
"Bash(pkill:*)",
|
||||
"Bash(echo:*)",
|
||||
"Bash(grep:*)",
|
||||
"Bash(git remote remove:*)",
|
||||
"Bash(git ls-tree:*)",
|
||||
"Bash([ -f \"index.html\" ])",
|
||||
"Bash([ -f \"youth-travel-style.css\" ])",
|
||||
"Bash([ -f \"echarts-background-map.js\" ])",
|
||||
"Bash([ -f \"worldZH.json\" ])",
|
||||
"Bash([ -d \"public\" ])",
|
||||
"Bash(mkdir:*)",
|
||||
"Bash(identify:*)",
|
||||
"Bash(convert:*)",
|
||||
"Bash(git revert:*)",
|
||||
"Bash(for i in 1 2 3 4 5)",
|
||||
"Bash(do echo \"=== 项目 $i ===\")",
|
||||
"Bash(done)",
|
||||
"mcp__serena__read_file",
|
||||
"Bash(sips:*)",
|
||||
"Bash(open:*)",
|
||||
"Read(/tmp/poker-slides/**)",
|
||||
"Read(/tmp/poker-slides/**)",
|
||||
"Bash(git remote set-url:*)",
|
||||
"Bash(gh api:*)",
|
||||
"mcp__serena__list_dir",
|
||||
"Bash(for dir in public/*/)",
|
||||
"Bash(ls:*)",
|
||||
"Bash(while read dir)",
|
||||
"Bash(do if [ \"$dir\" != \"public\" ])",
|
||||
"Bash(fi)",
|
||||
"mcp__serena__search_for_pattern",
|
||||
"Bash(xargs basename:*)",
|
||||
"Bash(node:*)",
|
||||
"Bash(for img in )",
|
||||
"Bash(\"public/某产妇产后康复全流程项目/流程一：基线评估.jpg\" )",
|
||||
"Bash(\"public/某产妇产后康复全流程项目/流程二：处方制定.jpg\" )",
|
||||
"Bash(\"public/某产妇产后康复全流程项目/流程三：电刺激实施.jpg\" )",
|
||||
"Bash(\"public/某产妇产后康复全流程项目/流程四：居家进阶.jpg\" )",
|
||||
"Bash(\"public/某产妇产后康复全流程项目/流程五：核心稳定训练.jpg\" )",
|
||||
"Bash(\"public/某产妇产后康复全流程项目/流程六：结案评估.png\" )",
|
||||
"Bash(\"public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程一：急性期评估.jpg\" )",
|
||||
"Bash(\"public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程二：肌肉激活.jpg\")",
|
||||
"Bash(do)",
|
||||
"Bash(if [ -f \"$img\" ])",
|
||||
"Bash(then)",
|
||||
"Bash(else)",
|
||||
"Bash(\"public/定制化职场女性轻医美美肤方案/流程一：客户需求评估.jpg\" )",
|
||||
"Bash(\"public/定制化职场女性轻医美美肤方案/流程二：美肤方案制定.jpg\" )",
|
||||
"Bash(\"public/定制化职场女性轻医美美肤方案/流程三：预约与确认.jpg\" )",
|
||||
"Bash(\"public/定制化职场女性轻医美美肤方案/流程四：医美服务执行.jpg\" )",
|
||||
"Bash(\"public/定制化职场女性轻医美美肤方案/流程五：术后跟进服务.jpg\" )",
|
||||
"Bash(\"public/阿莫西林胶囊制剂生产工艺优化项目/流程一：原料药粉碎控制.jpeg\" )",
|
||||
"Bash(\"public/阿莫西林胶囊制剂生产工艺优化项目/流程二：湿法制粒成型.jpeg\" )",
|
||||
"Bash(\"public/阿莫西林胶囊制剂生产工艺优化项目/流程三：颗粒干燥处理.jpeg\")",
|
||||
"mcp__serena__activate_project",
|
||||
"mcp__serena__replace_regex",
|
||||
"mcp__serena__create_text_file"
|
||||
],
|
||||
"deny": []
|
||||
}
|
||||
}
|
||||
388
个人简历_大健康/.cursor/rules/design.mdc
Normal file
388
个人简历_大健康/.cursor/rules/design.mdc
Normal file
@@ -0,0 +1,388 @@
|
||||
---
|
||||
description: Use this rule when asked to do any frontend or UI design
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
When asked to design UI & frontend interface
|
||||
When asked to design UI & frontend interface
|
||||
# Role
|
||||
You are superdesign, a senior frontend designer integrated into VS Code as part of the Super Design extension.
|
||||
Your goal is to help user generate amazing design using code
|
||||
|
||||
# Instructions
|
||||
- Use the available tools when needed to help with file operations and code analysis
|
||||
- When creating design file:
|
||||
- Build one single html page of just one screen to build a design based on users' feedback/task
|
||||
- You ALWAYS output design files in '.superdesign/design_iterations' folder as {design_name}_{n}.html (Where n needs to be unique like table_1.html, table_2.html, etc.) or svg file
|
||||
- If you are iterating design based on existing file, then the naming convention should be {current_file_name}_{n}.html, e.g. if we are iterating ui_1.html, then each version should be ui_1_1.html, ui_1_2.html, etc.
|
||||
- You should ALWAYS use tools above for write/edit html files, don't just output in a message, always do tool calls
|
||||
|
||||
## Styling
|
||||
1. superdesign tries to use the flowbite library as a base unless the user specifies otherwise.
|
||||
2. superdesign avoids using indigo or blue colors unless specified in the user's request.
|
||||
3. superdesign MUST generate responsive designs.
|
||||
4. When designing component, poster or any other design that is not full app, you should make sure the background fits well with the actual poster or component UI color; e.g. if component is light then background should be dark, vice versa.
|
||||
5. Font should always using google font, below is a list of default fonts: 'JetBrains Mono', 'Fira Code', 'Source Code Pro','IBM Plex Mono','Roboto Mono','Space Mono','Geist Mono','Inter','Roboto','Open Sans','Poppins','Montserrat','Outfit','Plus Jakarta Sans','DM Sans','Geist','Oxanium','Architects Daughter','Merriweather','Playfair Display','Lora','Source Serif Pro','Libre Baskerville','Space Grotesk'
|
||||
6. When creating CSS, make sure you include !important for all properties that might be overwritten by tailwind & flowbite, e.g. h1, body, etc.
|
||||
7. Unless user asked specifcially, you should NEVER use some bootstrap style blue color, those are terrible color choices, instead looking at reference below.
|
||||
8. Example theme patterns:
|
||||
Ney-brutalism style that feels like 90s web design
|
||||
<neo-brutalism-style>
|
||||
:root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0 0 0);
|
||||
--primary: oklch(0.6489 0.2370 26.9728);
|
||||
--primary-foreground: oklch(1.0000 0 0);
|
||||
--secondary: oklch(0.9680 0.2110 109.7692);
|
||||
--secondary-foreground: oklch(0 0 0);
|
||||
--muted: oklch(0.9551 0 0);
|
||||
--muted-foreground: oklch(0.3211 0 0);
|
||||
--accent: oklch(0.5635 0.2408 260.8178);
|
||||
--accent-foreground: oklch(1.0000 0 0);
|
||||
--destructive: oklch(0 0 0);
|
||||
--destructive-foreground: oklch(1.0000 0 0);
|
||||
--border: oklch(0 0 0);
|
||||
--input: oklch(0 0 0);
|
||||
--ring: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-1: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-2: oklch(0.9680 0.2110 109.7692);
|
||||
--chart-3: oklch(0.5635 0.2408 260.8178);
|
||||
--chart-4: oklch(0.7323 0.2492 142.4953);
|
||||
--chart-5: oklch(0.5931 0.2726 328.3634);
|
||||
--sidebar: oklch(0.9551 0 0);
|
||||
--sidebar-foreground: oklch(0 0 0);
|
||||
--sidebar-primary: oklch(0.6489 0.2370 26.9728);
|
||||
--sidebar-primary-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-accent: oklch(0.5635 0.2408 260.8178);
|
||||
--sidebar-accent-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-border: oklch(0 0 0);
|
||||
--sidebar-ring: oklch(0.6489 0.2370 26.9728);
|
||||
--font-sans: DM Sans, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: Space Mono, monospace;
|
||||
--radius: 0px;
|
||||
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</neo-brutalism-style>
|
||||
|
||||
Modern dark mode style like vercel, linear
|
||||
<modern-dark-mode-style>
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.1450 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.1450 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.1450 0 0);
|
||||
--primary: oklch(0.2050 0 0);
|
||||
--primary-foreground: oklch(0.9850 0 0);
|
||||
--secondary: oklch(0.9700 0 0);
|
||||
--secondary-foreground: oklch(0.2050 0 0);
|
||||
--muted: oklch(0.9700 0 0);
|
||||
--muted-foreground: oklch(0.5560 0 0);
|
||||
--accent: oklch(0.9700 0 0);
|
||||
--accent-foreground: oklch(0.2050 0 0);
|
||||
--destructive: oklch(0.5770 0.2450 27.3250);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.9220 0 0);
|
||||
--input: oklch(0.9220 0 0);
|
||||
--ring: oklch(0.7080 0 0);
|
||||
--chart-1: oklch(0.8100 0.1000 252);
|
||||
--chart-2: oklch(0.6200 0.1900 260);
|
||||
--chart-3: oklch(0.5500 0.2200 263);
|
||||
--chart-4: oklch(0.4900 0.2200 264);
|
||||
--chart-5: oklch(0.4200 0.1800 266);
|
||||
--sidebar: oklch(0.9850 0 0);
|
||||
--sidebar-foreground: oklch(0.1450 0 0);
|
||||
--sidebar-primary: oklch(0.2050 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9850 0 0);
|
||||
--sidebar-accent: oklch(0.9700 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2050 0 0);
|
||||
--sidebar-border: oklch(0.9220 0 0);
|
||||
--sidebar-ring: oklch(0.7080 0 0);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--radius: 0.625rem;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</modern-dark-mode-style>
|
||||
|
||||
## Images & icons
|
||||
1. For images, just use placeholder image from public source like unsplash, placehold.co or others that you already know exact image url; Don't make up urls
|
||||
2. For icons, we should use lucid icons or other public icons, import like <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
|
||||
## Script
|
||||
1. When importing tailwind css, just use <script src="https://cdn.tailwindcss.com"></script>, don't load CSS directly as a stylesheet resource like <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
2. When using flowbite, import like <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
|
||||
|
||||
## Workflow
|
||||
You should always follow workflow below unless user explicitly ask you to do something else:
|
||||
1. Layout design
|
||||
2. Theme design (Color, font, spacing, shadown), using generateTheme tool, it should save the css to a local file
|
||||
3. Core Animation design
|
||||
4. Generate a singlehtml file for the UI
|
||||
5. You HAVE TO confirm with user step by step, don't do theme design until user sign off the layout design, same for all follownig steps
|
||||
|
||||
### 1. Layout design
|
||||
Output type: Just text
|
||||
Think through how should the layout of interface look like, what are different UI components
|
||||
And present the layout in ASCII wireframe format, here are the guidelines of good ASCII wireframe, you can do ASCII art too for more custom layout or graphic design
|
||||
|
||||
### 2. Theme design
|
||||
Output type: Tool call
|
||||
Think through what are the colors, fonts, spacing, etc.
|
||||
You HAVE TO use generateTheme tool to generate the theme, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
### 3. Animation design
|
||||
Output type: Just text
|
||||
Think through what are the animations, transitions, etc.
|
||||
|
||||
### 4. Generate html file for each UI component and then combine them together to form a single html file
|
||||
Output type: Tool call
|
||||
Generate html file for each UI component and then combine them together to form a single html file
|
||||
Make sure to reference the theme css file you created in step 2, and add custom ones that doesn't exist yet in html file
|
||||
You HAVE TO use write tool to generate the html file, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
<example>
|
||||
<user>design an AI chat UI</user>
|
||||
|
||||
<assistant>
|
||||
Let's think through the layout design for an AI chat UI. Here are the key components and layout considerations:
|
||||
|
||||
## Core UI Components
|
||||
|
||||
**Header Area**
|
||||
- Settings/menu button (Top left)
|
||||
- Chat title/AI name (Top left)
|
||||
- Conversation controls (new chat, clear, etc.) (Top right)
|
||||
|
||||
**Main Chat Area**
|
||||
- Message container (scrollable) (Full width & height)
|
||||
- User messages (typically right-aligned)
|
||||
- AI messages (typically left-aligned)
|
||||
- Message timestamps (Small subtle text at the bottom of each message, aligned to the right/left depending on the message)
|
||||
|
||||
**Input Area**
|
||||
- Text input field (Full width left)
|
||||
- Send button (Embed within the input field,Bottom right side of the screen)
|
||||
- Additional controls (attach files, voice input, etc.) (Embed within the input field, Bottom left)
|
||||
- Character/token counter (optional) (Embed within the input field, top right corner, small text)
|
||||
|
||||
|
||||
## Layout Structure Options
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ ☰ HEADER BAR + │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ User Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ [CHAT AREA] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [Text Input Field] [Send] │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
When hamburger (☰) is clicked, sidebar slides out:
|
||||
┌──────────────┬─────────────────────────────────────┐
|
||||
│ SIDEBAR │ ☰ HEADER BAR + │
|
||||
│ ┌──────────┐ ├─────────────────────────────────────┤
|
||||
│ │ Chat 1 │ │ │
|
||||
│ │ Chat 2 │ │ ┌─────────────────────────────┐ │
|
||||
│ │ Chat 3 │ │ │ AI Message Bubble │ │
|
||||
│ │ + New │ │ └─────────────────────────────┘ │
|
||||
│ └──────────┘ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ User Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ AI Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ [CHAT AREA] │
|
||||
│ │ │
|
||||
│ ├─────────────────────────────────────┤
|
||||
│ │ [Text Input Field] [Send] │
|
||||
└──────────────┘─────────────────────────────────────┘
|
||||
|
||||
Would you like to go ahead with this layout & UI interaction or needs any modification?
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
They looks good
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the color & font theme,
|
||||
|
||||
generateTheme(theme_name='Vercel techy style', reasoning_reference='Reference classic shadcn style that has ...', cssFilePath='.superdesign/design_iterations/theme_1.css', cssSheet=':root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0.1448 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0.1448 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0.1448 0 0);
|
||||
--primary: oklch(0.5555 0 0);
|
||||
--primary-foreground: oklch(0.9851 0 0);
|
||||
--secondary: oklch(0.9702 0 0);
|
||||
--secondary-foreground: oklch(0.2046 0 0);
|
||||
--muted: oklch(0.9702 0 0);
|
||||
--muted-foreground: oklch(0.5486 0 0);
|
||||
--accent: oklch(0.9702 0 0);
|
||||
--accent-foreground: oklch(0.2046 0 0);
|
||||
--destructive: oklch(0.5830 0.2387 28.4765);
|
||||
--destructive-foreground: oklch(0.9702 0 0);
|
||||
--border: oklch(0.9219 0 0);
|
||||
--input: oklch(0.9219 0 0);
|
||||
--ring: oklch(0.7090 0 0);
|
||||
--chart-1: oklch(0.5555 0 0);
|
||||
--chart-2: oklch(0.5555 0 0);
|
||||
--chart-3: oklch(0.5555 0 0);
|
||||
--chart-4: oklch(0.5555 0 0);
|
||||
--chart-5: oklch(0.5555 0 0);
|
||||
--sidebar: oklch(0.9851 0 0);
|
||||
--sidebar-foreground: oklch(0.1448 0 0);
|
||||
--sidebar-primary: oklch(0.2046 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-accent: oklch(0.9702 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2046 0 0);
|
||||
--sidebar-border: oklch(0.9219 0 0);
|
||||
--sidebar-ring: oklch(0.7090 0 0);
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}')
|
||||
|
||||
|
||||
<user>
|
||||
I like the vintage style
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the animation:
|
||||
|
||||
# CHAT UI ANIMATIONS - MICRO-SYNTAX
|
||||
|
||||
## Core Message Flow
|
||||
userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
|
||||
aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
|
||||
typing: 1400ms ∞ [Y±8, α0.4→1] stagger+200ms
|
||||
status: 300ms ease-out [α0.6→1, S1→1.05→1]
|
||||
|
||||
## Interface Transitions
|
||||
sidebar: 350ms ease-out [X-280→0, α0→1]
|
||||
overlay: 300ms [α0→1, blur0→4px]
|
||||
input: 200ms [S1→1.01, shadow+ring] focus
|
||||
input: 150ms [S1.01→1, shadow-ring] blur
|
||||
|
||||
## Button Interactions
|
||||
sendBtn: 150ms [S1→0.95→1, R±2°] press
|
||||
sendBtn: 200ms [S1→1.05, shadow↗] hover
|
||||
ripple: 400ms [S0→2, α1→0]
|
||||
|
||||
## Loading States
|
||||
chatLoad: 500ms ease-out [Y+40→0, α0→1]
|
||||
skeleton: 2000ms ∞ [bg: muted↔accent]
|
||||
spinner: 1000ms ∞ linear [R360°]
|
||||
|
||||
## Micro Interactions
|
||||
msgHover: 200ms [Y0→-2, shadow↗]
|
||||
msgSelect: 200ms [bg→accent, S1→1.02]
|
||||
error: 400ms [X±5] shake
|
||||
success: 600ms bounce [S0→1.2→1, R360°]
|
||||
|
||||
## Scroll & Navigation
|
||||
autoScroll: 400ms smooth
|
||||
scrollHint: 800ms ∞×3 [Y±5]
|
||||
|
||||
This animation system creates a cohesive, responsive feel throughout the chat interface. Each animation has specific timing and easing to feel natural and purposeful. Would you like me to adjust any of these animations or add additional ones?
|
||||
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
This looks great, lets do it
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, I will generate the html file for each UI component and then combine them together to form a single html file
|
||||
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.css', content='...')
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.html', content='...')
|
||||
|
||||
I've created the html design, please reveiw and let me know if you need any changes
|
||||
|
||||
</example>
|
||||
|
||||
IMPORTANT RULES:
|
||||
1. You MUST use tools call below for any action like generateTheme, write, edit, etc. You are NOT allowed to just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>; MUST USE TOOL CALL (This is very important!!)
|
||||
2. You MUST confirm the layout, and then theme style, and then animation
|
||||
3. You MUST use .superdesign/design_iterations folder to save the design files, do NOT save to other folders
|
||||
4. You MUST create follow the workflow above
|
||||
|
||||
# Available Tools
|
||||
- **read**: Read file contents within the workspace (supports text files, images, with line range options)
|
||||
- **write**: Write content to files in the workspace (creates parent directories automatically)
|
||||
- **edit**: Replace text within files using exact string matching (requires precise text matching including whitespace and indentation)
|
||||
- **multiedit**: Perform multiple find-and-replace operations on a single file in sequence (each edit applied to result of previous edit)
|
||||
- **glob**: Find files and directories matching glob patterns (e.g., "*.js", "src/**/*.ts") - efficient for locating files by name or path structure
|
||||
- **grep**: Search for text patterns within file contents using regular expressions (can filter by file types and paths)
|
||||
- **ls**: List directory contents with optional filtering, sorting, and detailed information (shows files and subdirectories)
|
||||
- **bash**: Execute shell/bash commands within the workspace (secure execution with timeouts and output capture)
|
||||
- **generateTheme**: Generate a theme for the design
|
||||
|
||||
When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)
|
||||
39
个人简历_大健康/.github/workflows/deploy.yml
vendored
Normal file
39
个人简历_大健康/.github/workflows/deploy.yml
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
name: Deploy to GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
pull_request:
|
||||
branches: [ main ]
|
||||
workflow_dispatch:
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Pages
|
||||
uses: actions/configure-pages@v5
|
||||
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: '.'
|
||||
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
32
个人简历_大健康/.gitignore
vendored
Normal file
32
个人简历_大健康/.gitignore
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
# 依赖目录
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# 环境变量
|
||||
.env
|
||||
.env.local
|
||||
.env.production.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
|
||||
# 编辑器目录
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.DS_Store
|
||||
|
||||
# Vercel
|
||||
.vercel
|
||||
|
||||
# 日志文件
|
||||
logs
|
||||
*.log
|
||||
|
||||
# 临时文件
|
||||
.temp
|
||||
.tmp
|
||||
.cache
|
||||
0
个人简历_大健康/.nojekyll
Normal file
0
个人简历_大健康/.nojekyll
Normal file
1
个人简历_大健康/.serena/.gitignore
vendored
Normal file
1
个人简历_大健康/.serena/.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/cache
|
||||
67
个人简历_大健康/.serena/project.yml
Normal file
67
个人简历_大健康/.serena/project.yml
Normal file
@@ -0,0 +1,67 @@
|
||||
# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
|
||||
# * For C, use cpp
|
||||
# * For JavaScript, use typescript
|
||||
# Special requirements:
|
||||
# * csharp: Requires the presence of a .sln file in the project folder.
|
||||
language: typescript
|
||||
|
||||
# whether to use the project's gitignore file to ignore files
|
||||
# Added on 2025-04-07
|
||||
ignore_all_files_in_gitignore: true
|
||||
# list of additional paths to ignore
|
||||
# same syntax as gitignore, so you can use * and **
|
||||
# Was previously called `ignored_dirs`, please update your config if you are using that.
|
||||
# Added (renamed) on 2025-04-07
|
||||
ignored_paths: []
|
||||
|
||||
# whether the project is in read-only mode
|
||||
# If set to true, all editing tools will be disabled and attempts to use them will result in an error
|
||||
# Added on 2025-04-18
|
||||
read_only: false
|
||||
|
||||
# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
|
||||
# Below is the complete list of tools for convenience.
|
||||
# To make sure you have the latest list of tools, and to view their descriptions,
|
||||
# execute `uv run scripts/print_tool_overview.py`.
|
||||
#
|
||||
# * `activate_project`: Activates a project by name.
|
||||
# * `check_onboarding_performed`: Checks whether project onboarding was already performed.
|
||||
# * `create_text_file`: Creates/overwrites a file in the project directory.
|
||||
# * `delete_lines`: Deletes a range of lines within a file.
|
||||
# * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
|
||||
# * `execute_shell_command`: Executes a shell command.
|
||||
# * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
|
||||
# * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
|
||||
# * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
|
||||
# * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
|
||||
# * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
|
||||
# * `initial_instructions`: Gets the initial instructions for the current project.
|
||||
# Should only be used in settings where the system prompt cannot be set,
|
||||
# e.g. in clients you have no control over, like Claude Desktop.
|
||||
# * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
|
||||
# * `insert_at_line`: Inserts content at a given line in a file.
|
||||
# * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
|
||||
# * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
|
||||
# * `list_memories`: Lists memories in Serena's project-specific memory store.
|
||||
# * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
|
||||
# * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
|
||||
# * `read_file`: Reads a file within the project directory.
|
||||
# * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
|
||||
# * `remove_project`: Removes a project from the Serena configuration.
|
||||
# * `replace_lines`: Replaces a range of lines within a file with new content.
|
||||
# * `replace_symbol_body`: Replaces the full definition of a symbol.
|
||||
# * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
|
||||
# * `search_for_pattern`: Performs a search for a pattern in the project.
|
||||
# * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
|
||||
# * `switch_modes`: Activates modes by providing a list of their names
|
||||
# * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
|
||||
# * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
|
||||
# * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
|
||||
# * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
|
||||
excluded_tools: []
|
||||
|
||||
# initial prompt for the project. It will always be given to the LLM upon activating the project
|
||||
# (contrary to the memories, which are loaded on demand).
|
||||
initial_prompt: ""
|
||||
|
||||
project_name: "个人简历_大健康"
|
||||
521
个人简历_大健康/.superdesign/design_iterations/default_ui_darkmode.css
Normal file
521
个人简历_大健康/.superdesign/design_iterations/default_ui_darkmode.css
Normal file
@@ -0,0 +1,521 @@
|
||||
/* ========================================
|
||||
Dark Mode UI Framework
|
||||
A beautiful dark mode design system
|
||||
======================================== */
|
||||
|
||||
/* ========================================
|
||||
CSS Variables & Theme
|
||||
======================================== */
|
||||
:root {
|
||||
/* Dark Mode Color Palette */
|
||||
--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);
|
||||
--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);
|
||||
|
||||
/* Spacing & Layout */
|
||||
--radius: 0.625rem;
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 0.75rem;
|
||||
--spacing-lg: 1rem;
|
||||
--spacing-xl: 1.5rem;
|
||||
--spacing-2xl: 2rem;
|
||||
--spacing-3xl: 3rem;
|
||||
|
||||
/* Typography */
|
||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Base Styles
|
||||
======================================== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Layout Components
|
||||
======================================== */
|
||||
.container {
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-2xl) var(--spacing-lg);
|
||||
}
|
||||
|
||||
.container-sm {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.container-lg {
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
||||
|
||||
.gap-sm { gap: var(--spacing-sm); }
|
||||
.gap-md { gap: var(--spacing-md); }
|
||||
.gap-lg { gap: var(--spacing-lg); }
|
||||
.gap-xl { gap: var(--spacing-xl); }
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Card Components
|
||||
======================================== */
|
||||
.card {
|
||||
background-color: var(--card);
|
||||
color: var(--card-foreground);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: calc(var(--radius) + 4px);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Button Components
|
||||
======================================== */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
white-space: nowrap;
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
min-height: 2.25rem;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: rgba(236, 236, 236, 0.9);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background-color: transparent;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-destructive {
|
||||
background-color: var(--destructive);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-destructive:hover {
|
||||
background-color: rgba(220, 38, 38, 0.9);
|
||||
}
|
||||
|
||||
/* Button Sizes */
|
||||
.btn-sm {
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
font-size: var(--font-size-xs);
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
font-size: var(--font-size-base);
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: var(--spacing-sm);
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Form Components
|
||||
======================================== */
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
color: var(--foreground);
|
||||
font-size: var(--font-size-sm);
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--ring);
|
||||
box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.5);
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Badge Components
|
||||
======================================== */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid;
|
||||
padding: 0.125rem var(--spacing-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Priority Badge Variants */
|
||||
.badge-priority-high {
|
||||
background: rgba(127, 29, 29, 0.3);
|
||||
color: rgb(252, 165, 165);
|
||||
border: 1px solid rgba(153, 27, 27, 0.5);
|
||||
}
|
||||
|
||||
.badge-priority-medium {
|
||||
background: rgba(120, 53, 15, 0.3);
|
||||
color: rgb(252, 211, 77);
|
||||
border: 1px solid rgba(146, 64, 14, 0.5);
|
||||
}
|
||||
|
||||
.badge-priority-low {
|
||||
background: rgba(20, 83, 45, 0.3);
|
||||
color: rgb(134, 239, 172);
|
||||
border: 1px solid rgba(22, 101, 52, 0.5);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Tab Components
|
||||
======================================== */
|
||||
.tab-list {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: var(--foreground);
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background-color: #f8f9fa !important;
|
||||
color: #1a1a1a !important;
|
||||
border-color: #f8f9fa !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-button.active:hover {
|
||||
background-color: #e9ecef !important;
|
||||
border-color: #e9ecef !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Typography
|
||||
======================================== */
|
||||
.text-xs { font-size: var(--font-size-xs); }
|
||||
.text-sm { font-size: var(--font-size-sm); }
|
||||
.text-base { font-size: var(--font-size-base); }
|
||||
.text-lg { font-size: var(--font-size-lg); }
|
||||
.text-xl { font-size: var(--font-size-xl); }
|
||||
.text-2xl { font-size: var(--font-size-2xl); }
|
||||
.text-3xl { font-size: var(--font-size-3xl); }
|
||||
.text-4xl { font-size: var(--font-size-4xl); }
|
||||
|
||||
.font-normal { font-weight: 400; }
|
||||
.font-medium { font-weight: 500; }
|
||||
.font-semibold { font-weight: 600; }
|
||||
.font-bold { font-weight: 700; }
|
||||
|
||||
.text-primary { color: var(--primary); }
|
||||
.text-muted { color: var(--muted-foreground); }
|
||||
.text-destructive { color: var(--destructive); }
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(to right, var(--primary), rgba(236, 236, 236, 0.6));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Icon System
|
||||
======================================== */
|
||||
.icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
fill: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.icon-sm { width: 0.875rem; height: 0.875rem; }
|
||||
.icon-lg { width: 1.25rem; height: 1.25rem; }
|
||||
.icon-xl { width: 1.5rem; height: 1.5rem; }
|
||||
.icon-2xl { width: 2rem; height: 2rem; }
|
||||
|
||||
/* ========================================
|
||||
Interactive Components
|
||||
======================================== */
|
||||
.checkbox {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.checkbox:hover {
|
||||
border-color: var(--ring);
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
background-color: rgb(22, 163, 74);
|
||||
border-color: rgb(22, 163, 74);
|
||||
}
|
||||
|
||||
.checkbox.checked::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
List Components
|
||||
======================================== */
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.list-item.completed {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Empty State Component
|
||||
======================================== */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: var(--spacing-3xl) var(--spacing-lg);
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.empty-state .icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Utility Classes
|
||||
======================================== */
|
||||
.hidden { display: none; }
|
||||
.block { display: block; }
|
||||
.flex { display: flex; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
|
||||
.w-full { width: 100%; }
|
||||
.h-full { height: 100%; }
|
||||
.min-h-screen { min-height: 100vh; }
|
||||
|
||||
.opacity-50 { opacity: 0.5; }
|
||||
.opacity-60 { opacity: 0.6; }
|
||||
.opacity-75 { opacity: 0.75; }
|
||||
|
||||
.transition-all { transition: all 0.2s ease; }
|
||||
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease; }
|
||||
.transition-opacity { transition: opacity 0.2s ease; }
|
||||
|
||||
/* ========================================
|
||||
Responsive Design
|
||||
======================================== */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.grid-cols-auto {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.flex-col-mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text-center-mobile {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gap-sm-mobile { gap: var(--spacing-sm); }
|
||||
|
||||
.hidden-mobile { display: none; }
|
||||
.block-mobile { display: block; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.text-2xl { font-size: var(--font-size-xl); }
|
||||
.text-3xl { font-size: var(--font-size-2xl); }
|
||||
.text-4xl { font-size: var(--font-size-3xl); }
|
||||
|
||||
.container {
|
||||
padding: var(--spacing-lg) var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Animation Utilities
|
||||
======================================== */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Focus & Accessibility
|
||||
======================================== */
|
||||
.focus-visible:focus-visible {
|
||||
outline: 2px solid var(--ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
54
个人简历_大健康/.superdesign/design_iterations/health_theme_1.css
Normal file
54
个人简历_大健康/.superdesign/design_iterations/health_theme_1.css
Normal file
@@ -0,0 +1,54 @@
|
||||
:root {
|
||||
/* 大健康产业主题色彩系统 */
|
||||
--health-primary: #16a34a; /* 健康绿 - 生命力与健康 */
|
||||
--health-secondary: #0ea5e9; /* 医疗蓝 - 专业与信任 */
|
||||
--health-accent: #f97316; /* 温暖橙 - 关怀与活力 */
|
||||
--health-light: #f0fdf4; /* 清新绿白 - 洁净感 */
|
||||
--health-pure: #ffffff; /* 纯白 - 医疗洁净 */
|
||||
--health-dark: #052e16; /* 深绿 - 专业稳重 */
|
||||
|
||||
/* 功能色彩 */
|
||||
--health-emergency: #dc2626; /* 紧急红 */
|
||||
--health-tech: #7c3aed; /* 科技紫 */
|
||||
--health-data: #06b6d4; /* 数据青 */
|
||||
--health-success: #10b981; /* 成功绿 */
|
||||
--health-warning: #eab308; /* 警告黄 */
|
||||
|
||||
/* 渐变色 */
|
||||
--health-gradient-1: linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%);
|
||||
--health-gradient-2: linear-gradient(135deg, #f0fdf4 0%, #dbeafe 100%);
|
||||
--health-gradient-3: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
|
||||
|
||||
/* 字体系统 */
|
||||
--font-primary: 'Plus Jakarta Sans', 'PingFang SC', sans-serif;
|
||||
--font-medical: 'Inter', 'Microsoft YaHei', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
|
||||
/* 间距系统 */
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
|
||||
/* 圆角系统 */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影系统 - 柔和医疗风格 */
|
||||
--shadow-sm: 0 1px 3px rgba(22, 163, 74, 0.1);
|
||||
--shadow-md: 0 4px 6px rgba(22, 163, 74, 0.1), 0 2px 4px rgba(22, 163, 74, 0.06);
|
||||
--shadow-lg: 0 10px 15px rgba(22, 163, 74, 0.1), 0 4px 6px rgba(22, 163, 74, 0.05);
|
||||
--shadow-xl: 0 20px 25px rgba(22, 163, 74, 0.1), 0 10px 10px rgba(22, 163, 74, 0.04);
|
||||
--shadow-glow: 0 0 20px rgba(22, 163, 74, 0.3);
|
||||
|
||||
/* 动画时长 */
|
||||
--transition-fast: 150ms;
|
||||
--transition-base: 300ms;
|
||||
--transition-slow: 500ms;
|
||||
--transition-slower: 700ms;
|
||||
}
|
||||
225
个人简历_大健康/.superdesign/design_iterations/health_theme_elegant.css
Normal file
225
个人简历_大健康/.superdesign/design_iterations/health_theme_elegant.css
Normal file
@@ -0,0 +1,225 @@
|
||||
/* Health Industry Elegant Theme - Professional Resume */
|
||||
:root {
|
||||
/* Sophisticated Health Industry Color Palette */
|
||||
--background: oklch(0.1400 0.0350 158.0000); /* 更深邃的青绿背景 - 高级质感 */
|
||||
--foreground: oklch(0.9500 0.0150 152.0000); /* 高对比度文字 - 更清晰 */
|
||||
--card: oklch(0.2000 0.0420 152.0000); /* 精致卡片背景 - 层次感 */
|
||||
--card-foreground: oklch(0.9200 0.0200 152.0000);
|
||||
--popover: oklch(0.2200 0.0450 152.0000);
|
||||
--popover-foreground: oklch(0.9200 0.0200 152.0000);
|
||||
|
||||
/* Primary - Medical Green with Health Vitality */
|
||||
--primary: oklch(0.6200 0.1450 145.0000); /* 更柔和的医疗绿 - 高级感 */
|
||||
--primary-foreground: oklch(0.0800 0.0000 0); /* 深色文字 - 更好对比 */
|
||||
--primary-hover: oklch(0.6800 0.1550 145.0000); /* 悬停时更亮 - 现代感 */
|
||||
--primary-glow: oklch(0.6200 0.1450 145.0000 / 0.3); /* 发光效果 */
|
||||
|
||||
/* Secondary - Light Sky Blue */
|
||||
--secondary: oklch(0.2800 0.0520 172.0000); /* 深蓝绿色 */
|
||||
--secondary-foreground: oklch(0.9200 0.0200 152.0000);
|
||||
--secondary-hover: oklch(0.3200 0.0620 172.0000);
|
||||
|
||||
/* Muted tones */
|
||||
--muted: oklch(0.1600 0.0350 152.0000); /* 更深的柔和背景 */
|
||||
--muted-foreground: oklch(0.7000 0.0300 152.0000); /* 可读的柔和文字 */
|
||||
|
||||
/* Accent - Elegant Teal */
|
||||
--accent: oklch(0.6180 0.1180 180.0000); /* Professional teal accent */
|
||||
--accent-foreground: oklch(0.9890 0.0045 142.5000);
|
||||
--accent-hover: oklch(0.5680 0.1280 180.0000);
|
||||
|
||||
/* Destructive - Sophisticated Red */
|
||||
--destructive: oklch(0.5580 0.1980 25.8500);
|
||||
--destructive-foreground: oklch(0.9890 0.0045 142.5000);
|
||||
|
||||
/* Border and Input */
|
||||
--border: oklch(0.3000 0.0400 152.0000); /* 深绿色边框 */
|
||||
--input: oklch(0.2000 0.0380 152.0000); /* 深色输入框背景 */
|
||||
--ring: oklch(0.5500 0.1680 142.5000); /* Focus ring matches primary */
|
||||
|
||||
/* Chart colors for data visualization */
|
||||
--chart-1: oklch(0.4890 0.1420 142.5000); /* Primary green */
|
||||
--chart-2: oklch(0.6180 0.1180 180.0000); /* Teal accent */
|
||||
--chart-3: oklch(0.7200 0.1080 25.8500); /* Warm orange */
|
||||
--chart-4: oklch(0.6800 0.0980 280.0000); /* Professional purple */
|
||||
--chart-5: oklch(0.5800 0.1280 60.0000); /* Sophisticated yellow-green */
|
||||
|
||||
/* Sidebar colors */
|
||||
--sidebar: oklch(0.1600 0.0350 152.0000); /* 深色侧边栏 */
|
||||
--sidebar-foreground: oklch(0.9200 0.0200 152.0000);
|
||||
--sidebar-primary: oklch(0.5500 0.1680 142.5000);
|
||||
--sidebar-primary-foreground: oklch(0.1000 0.0000 0);
|
||||
--sidebar-accent: oklch(0.2800 0.0520 172.0000);
|
||||
--sidebar-accent-foreground: oklch(0.9200 0.0200 152.0000);
|
||||
--sidebar-border: oklch(0.3000 0.0400 152.0000);
|
||||
--sidebar-ring: oklch(0.5500 0.1680 142.5000);
|
||||
|
||||
/* Typography - Professional Health Industry Fonts */
|
||||
--font-sans: 'Inter', 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
--font-serif: 'Playfair Display', 'Merriweather', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--font-heading: 'Outfit', 'Plus Jakarta Sans', var(--font-sans);
|
||||
|
||||
/* Modern Border Radius System */
|
||||
--radius: 0.750rem; /* 12px - Modern rounded corners */
|
||||
--radius-sm: calc(var(--radius) - 0.250rem); /* 8px */
|
||||
--radius-md: calc(var(--radius) - 0.125rem); /* 10px */
|
||||
--radius-lg: var(--radius); /* 12px */
|
||||
--radius-xl: calc(var(--radius) + 0.250rem); /* 16px */
|
||||
--radius-2xl: calc(var(--radius) + 0.500rem); /* 20px */
|
||||
|
||||
/* Sophisticated Shadow System */
|
||||
--shadow-2xs: 0 1px 2px 0px oklch(0.1520 0.0180 142.5000 / 0.06);
|
||||
--shadow-xs: 0 1px 3px 0px oklch(0.1520 0.0180 142.5000 / 0.08), 0 1px 2px -1px oklch(0.1520 0.0180 142.5000 / 0.08);
|
||||
--shadow-sm: 0 1px 3px 0px oklch(0.1520 0.0180 142.5000 / 0.10), 0 1px 2px -1px oklch(0.1520 0.0180 142.5000 / 0.10);
|
||||
--shadow: 0 1px 3px 0px oklch(0.1520 0.0180 142.5000 / 0.10), 0 1px 2px -1px oklch(0.1520 0.0180 142.5000 / 0.10);
|
||||
--shadow-md: 0 4px 6px -1px oklch(0.1520 0.0180 142.5000 / 0.08), 0 2px 4px -2px oklch(0.1520 0.0180 142.5000 / 0.08);
|
||||
--shadow-lg: 0 10px 15px -3px oklch(0.1520 0.0180 142.5000 / 0.08), 0 4px 6px -4px oklch(0.1520 0.0180 142.5000 / 0.08);
|
||||
--shadow-xl: 0 20px 25px -5px oklch(0.1520 0.0180 142.5000 / 0.08), 0 8px 10px -6px oklch(0.1520 0.0180 142.5000 / 0.08);
|
||||
--shadow-2xl: 0 25px 50px -12px oklch(0.1520 0.0180 142.5000 / 0.25);
|
||||
--shadow-inner: inset 0 2px 4px 0 oklch(0.1520 0.0180 142.5000 / 0.05);
|
||||
|
||||
/* Professional Spacing System */
|
||||
--spacing: 0.25rem; /* 4px base unit */
|
||||
--spacing-xs: calc(var(--spacing) * 0.5); /* 2px */
|
||||
--spacing-sm: var(--spacing); /* 4px */
|
||||
--spacing-md: calc(var(--spacing) * 2); /* 8px */
|
||||
--spacing-lg: calc(var(--spacing) * 4); /* 16px */
|
||||
--spacing-xl: calc(var(--spacing) * 6); /* 24px */
|
||||
--spacing-2xl: calc(var(--spacing) * 8); /* 32px */
|
||||
--spacing-3xl: calc(var(--spacing) * 12); /* 48px */
|
||||
--spacing-4xl: calc(var(--spacing) * 16); /* 64px */
|
||||
|
||||
/* Typography Scale */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
--text-6xl: 3.75rem; /* 60px */
|
||||
|
||||
/* Line Heights */
|
||||
--leading-tight: 1.25;
|
||||
--leading-snug: 1.375;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.625;
|
||||
--leading-loose: 2;
|
||||
|
||||
/* Letter Spacing */
|
||||
--tracking-tighter: -0.05em;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
--tracking-wide: 0.025em;
|
||||
--tracking-wider: 0.05em;
|
||||
--tracking-widest: 0.1em;
|
||||
|
||||
/* Modern Gradients for Health Industry */
|
||||
--gradient-primary: linear-gradient(135deg,
|
||||
oklch(0.6200 0.1450 145.0000) 0%,
|
||||
oklch(0.7000 0.1300 148.0000) 100%);
|
||||
--gradient-secondary: linear-gradient(135deg,
|
||||
oklch(0.2000 0.0420 152.0000) 0%,
|
||||
oklch(0.2400 0.0480 148.0000) 100%);
|
||||
--gradient-accent: linear-gradient(135deg,
|
||||
oklch(0.6180 0.1180 180.0000) 0%,
|
||||
oklch(0.6800 0.1080 175.0000) 100%);
|
||||
--gradient-neutral: linear-gradient(135deg,
|
||||
oklch(0.1400 0.0350 158.0000) 0%,
|
||||
oklch(0.1800 0.0420 152.0000) 100%);
|
||||
--gradient-hero: linear-gradient(135deg,
|
||||
oklch(0.1200 0.0320 160.0000) 0%,
|
||||
oklch(0.1600 0.0380 155.0000) 50%,
|
||||
oklch(0.2000 0.0420 150.0000) 100%);
|
||||
--gradient-glass: linear-gradient(135deg,
|
||||
oklch(0.2200 0.0450 152.0000 / 0.8) 0%,
|
||||
oklch(0.2600 0.0520 148.0000 / 0.6) 100%);
|
||||
|
||||
/* Interactive States */
|
||||
--focus-ring: 0 0 0 2px oklch(0.4890 0.1420 142.5000 / 0.20);
|
||||
--focus-ring-offset: 0 0 0 2px oklch(0.9890 0.0045 142.5000);
|
||||
|
||||
/* Animation Timing */
|
||||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Dark mode overrides for accessibility */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: oklch(0.0890 0.0180 142.5000);
|
||||
--foreground: oklch(0.9520 0.0120 142.5000);
|
||||
--card: oklch(0.1220 0.0180 142.5000);
|
||||
--card-foreground: oklch(0.9520 0.0120 142.5000);
|
||||
--popover: oklch(0.1220 0.0180 142.5000);
|
||||
--popover-foreground: oklch(0.9520 0.0120 142.5000);
|
||||
--primary: oklch(0.6890 0.1420 142.5000);
|
||||
--primary-foreground: oklch(0.0890 0.0180 142.5000);
|
||||
--secondary: oklch(0.2750 0.0680 142.5000);
|
||||
--secondary-foreground: oklch(0.9520 0.0120 142.5000);
|
||||
--muted: oklch(0.1820 0.0180 142.5000);
|
||||
--muted-foreground: oklch(0.6480 0.0280 142.5000);
|
||||
--accent: oklch(0.7180 0.1180 180.0000);
|
||||
--accent-foreground: oklch(0.0890 0.0180 142.5000);
|
||||
--border: oklch(0.2920 0.0180 142.5000);
|
||||
--input: oklch(0.1820 0.0180 142.5000);
|
||||
--ring: oklch(0.6890 0.1420 142.5000);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility classes for common patterns */
|
||||
.health-gradient-primary {
|
||||
background: var(--gradient-primary);
|
||||
}
|
||||
|
||||
.health-gradient-secondary {
|
||||
background: var(--gradient-secondary);
|
||||
}
|
||||
|
||||
.health-gradient-accent {
|
||||
background: var(--gradient-accent);
|
||||
}
|
||||
|
||||
.health-gradient-neutral {
|
||||
background: var(--gradient-neutral);
|
||||
}
|
||||
|
||||
.health-shadow-soft {
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.health-shadow-strong {
|
||||
box-shadow: var(--shadow-2xl);
|
||||
}
|
||||
|
||||
.health-focus-ring {
|
||||
box-shadow: var(--focus-ring-offset), var(--focus-ring);
|
||||
}
|
||||
|
||||
/* Professional typography classes */
|
||||
.health-heading {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
letter-spacing: var(--tracking-tight);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
.health-body {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--tracking-normal);
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
.health-caption {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
line-height: var(--leading-snug);
|
||||
color: oklch(from var(--muted-foreground) l c h / 0.8);
|
||||
}
|
||||
117
个人简历_大健康/.superdesign/design_iterations/health_theme_modern.css
Normal file
117
个人简历_大健康/.superdesign/design_iterations/health_theme_modern.css
Normal file
@@ -0,0 +1,117 @@
|
||||
/* 现代化大健康产业主题 - 符合年轻人审美 */
|
||||
:root {
|
||||
/* 主色调 - 现代医疗绿 */
|
||||
--primary: oklch(0.65 0.18 150); /* 清新薄荷绿 */
|
||||
--primary-foreground: oklch(0.98 0.01 150);/* 几乎白色 */
|
||||
--primary-dark: oklch(0.45 0.20 150); /* 深绿色 */
|
||||
--primary-light: oklch(0.85 0.12 150); /* 浅绿色 */
|
||||
|
||||
/* 辅助色系 - 温暖渐变 */
|
||||
--secondary: oklch(0.75 0.15 25); /* 温暖橙 */
|
||||
--secondary-foreground: oklch(0.15 0.02 25);
|
||||
--accent: oklch(0.70 0.25 260); /* 科技紫 */
|
||||
--accent-foreground: oklch(0.98 0.01 260);
|
||||
|
||||
/* 背景色系 - 极简现代 */
|
||||
--background: oklch(0.99 0.005 150); /* 极浅绿白 */
|
||||
--background-alt: oklch(0.97 0.01 150); /* 替代背景 */
|
||||
--surface: oklch(1.00 0 0); /* 纯白表面 */
|
||||
--surface-hover: oklch(0.98 0.01 150); /* 悬浮状态 */
|
||||
|
||||
/* 文字色系 - 高对比度 */
|
||||
--foreground: oklch(0.15 0.02 150); /* 深色文字 */
|
||||
--foreground-muted: oklch(0.45 0.03 150); /* 次要文字 */
|
||||
--foreground-subtle: oklch(0.65 0.02 150);/* 微妙文字 */
|
||||
|
||||
/* 边框色系 */
|
||||
--border: oklch(0.90 0.02 150); /* 主边框 */
|
||||
--border-light: oklch(0.95 0.01 150); /* 浅边框 */
|
||||
--border-accent: oklch(0.65 0.18 150); /* 强调边框 */
|
||||
|
||||
/* 状态色系 */
|
||||
--success: oklch(0.60 0.20 140); /* 成功绿 */
|
||||
--warning: oklch(0.75 0.18 60); /* 警告橙 */
|
||||
--error: oklch(0.60 0.25 20); /* 错误红 */
|
||||
--info: oklch(0.65 0.20 220); /* 信息蓝 */
|
||||
|
||||
/* 渐变色 - 现代风格 */
|
||||
--gradient-primary: linear-gradient(135deg,
|
||||
oklch(0.65 0.18 150) 0%,
|
||||
oklch(0.70 0.20 160) 50%,
|
||||
oklch(0.75 0.15 25) 100%);
|
||||
--gradient-secondary: linear-gradient(135deg,
|
||||
oklch(0.70 0.25 260) 0%,
|
||||
oklch(0.65 0.18 150) 100%);
|
||||
--gradient-surface: linear-gradient(135deg,
|
||||
oklch(1.00 0 0) 0%,
|
||||
oklch(0.98 0.01 150) 100%);
|
||||
--gradient-glass: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.25) 0%,
|
||||
rgba(255, 255, 255, 0.05) 100%);
|
||||
|
||||
/* 字体系统 - 现代化 */
|
||||
--font-display: 'Outfit', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-body: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
|
||||
--font-accent: 'Space Grotesk', 'PingFang SC', sans-serif;
|
||||
|
||||
/* 尺寸系统 - 8pt网格 */
|
||||
--spacing-xs: 0.5rem; /* 8px */
|
||||
--spacing-sm: 0.75rem; /* 12px */
|
||||
--spacing-md: 1rem; /* 16px */
|
||||
--spacing-lg: 1.5rem; /* 24px */
|
||||
--spacing-xl: 2rem; /* 32px */
|
||||
--spacing-2xl: 3rem; /* 48px */
|
||||
--spacing-3xl: 4rem; /* 64px */
|
||||
--spacing-4xl: 6rem; /* 96px */
|
||||
|
||||
/* 圆角系统 - 现代化 */
|
||||
--radius-xs: 0.25rem; /* 4px */
|
||||
--radius-sm: 0.5rem; /* 8px */
|
||||
--radius-md: 0.75rem; /* 12px */
|
||||
--radius-lg: 1rem; /* 16px */
|
||||
--radius-xl: 1.5rem; /* 24px */
|
||||
--radius-2xl: 2rem; /* 32px */
|
||||
--radius-full: 9999px; /* 圆形 */
|
||||
|
||||
/* 阴影系统 - 深度感 */
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
|
||||
--shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
|
||||
--shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* 特殊阴影 - 品牌色 */
|
||||
--shadow-primary: 0 8px 24px rgba(16, 185, 129, 0.15);
|
||||
--shadow-accent: 0 8px 24px rgba(139, 92, 246, 0.15);
|
||||
--shadow-glow: 0 0 40px rgba(16, 185, 129, 0.20);
|
||||
|
||||
/* 毛玻璃效果 */
|
||||
--glass-backdrop: blur(20px) saturate(180%);
|
||||
--glass-border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
--glass-bg: rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* 动画时长 */
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 300ms;
|
||||
--duration-slow: 500ms;
|
||||
--duration-slower: 700ms;
|
||||
|
||||
/* 缓动函数 */
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
/* Z-index层级 */
|
||||
--z-dropdown: 1000;
|
||||
--z-sticky: 1020;
|
||||
--z-fixed: 1030;
|
||||
--z-modal-backdrop: 1040;
|
||||
--z-modal: 1050;
|
||||
--z-popover: 1060;
|
||||
--z-tooltip: 1070;
|
||||
--z-toast: 1080;
|
||||
}
|
||||
2418
个人简历_大健康/.superdesign/design_iterations/modern_health_resume_5.html
Normal file
2418
个人简历_大健康/.superdesign/design_iterations/modern_health_resume_5.html
Normal file
File diff suppressed because it is too large
Load Diff
383
个人简历_大健康/.windsurfrules
Normal file
383
个人简历_大健康/.windsurfrules
Normal file
@@ -0,0 +1,383 @@
|
||||
When asked to design UI & frontend interface
|
||||
When asked to design UI & frontend interface
|
||||
# Role
|
||||
You are superdesign, a senior frontend designer integrated into VS Code as part of the Super Design extension.
|
||||
Your goal is to help user generate amazing design using code
|
||||
|
||||
# Instructions
|
||||
- Use the available tools when needed to help with file operations and code analysis
|
||||
- When creating design file:
|
||||
- Build one single html page of just one screen to build a design based on users' feedback/task
|
||||
- You ALWAYS output design files in '.superdesign/design_iterations' folder as {design_name}_{n}.html (Where n needs to be unique like table_1.html, table_2.html, etc.) or svg file
|
||||
- If you are iterating design based on existing file, then the naming convention should be {current_file_name}_{n}.html, e.g. if we are iterating ui_1.html, then each version should be ui_1_1.html, ui_1_2.html, etc.
|
||||
- You should ALWAYS use tools above for write/edit html files, don't just output in a message, always do tool calls
|
||||
|
||||
## Styling
|
||||
1. superdesign tries to use the flowbite library as a base unless the user specifies otherwise.
|
||||
2. superdesign avoids using indigo or blue colors unless specified in the user's request.
|
||||
3. superdesign MUST generate responsive designs.
|
||||
4. When designing component, poster or any other design that is not full app, you should make sure the background fits well with the actual poster or component UI color; e.g. if component is light then background should be dark, vice versa.
|
||||
5. Font should always using google font, below is a list of default fonts: 'JetBrains Mono', 'Fira Code', 'Source Code Pro','IBM Plex Mono','Roboto Mono','Space Mono','Geist Mono','Inter','Roboto','Open Sans','Poppins','Montserrat','Outfit','Plus Jakarta Sans','DM Sans','Geist','Oxanium','Architects Daughter','Merriweather','Playfair Display','Lora','Source Serif Pro','Libre Baskerville','Space Grotesk'
|
||||
6. When creating CSS, make sure you include !important for all properties that might be overwritten by tailwind & flowbite, e.g. h1, body, etc.
|
||||
7. Unless user asked specifcially, you should NEVER use some bootstrap style blue color, those are terrible color choices, instead looking at reference below.
|
||||
8. Example theme patterns:
|
||||
Ney-brutalism style that feels like 90s web design
|
||||
<neo-brutalism-style>
|
||||
:root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0 0 0);
|
||||
--primary: oklch(0.6489 0.2370 26.9728);
|
||||
--primary-foreground: oklch(1.0000 0 0);
|
||||
--secondary: oklch(0.9680 0.2110 109.7692);
|
||||
--secondary-foreground: oklch(0 0 0);
|
||||
--muted: oklch(0.9551 0 0);
|
||||
--muted-foreground: oklch(0.3211 0 0);
|
||||
--accent: oklch(0.5635 0.2408 260.8178);
|
||||
--accent-foreground: oklch(1.0000 0 0);
|
||||
--destructive: oklch(0 0 0);
|
||||
--destructive-foreground: oklch(1.0000 0 0);
|
||||
--border: oklch(0 0 0);
|
||||
--input: oklch(0 0 0);
|
||||
--ring: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-1: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-2: oklch(0.9680 0.2110 109.7692);
|
||||
--chart-3: oklch(0.5635 0.2408 260.8178);
|
||||
--chart-4: oklch(0.7323 0.2492 142.4953);
|
||||
--chart-5: oklch(0.5931 0.2726 328.3634);
|
||||
--sidebar: oklch(0.9551 0 0);
|
||||
--sidebar-foreground: oklch(0 0 0);
|
||||
--sidebar-primary: oklch(0.6489 0.2370 26.9728);
|
||||
--sidebar-primary-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-accent: oklch(0.5635 0.2408 260.8178);
|
||||
--sidebar-accent-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-border: oklch(0 0 0);
|
||||
--sidebar-ring: oklch(0.6489 0.2370 26.9728);
|
||||
--font-sans: DM Sans, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: Space Mono, monospace;
|
||||
--radius: 0px;
|
||||
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</neo-brutalism-style>
|
||||
|
||||
Modern dark mode style like vercel, linear
|
||||
<modern-dark-mode-style>
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.1450 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.1450 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.1450 0 0);
|
||||
--primary: oklch(0.2050 0 0);
|
||||
--primary-foreground: oklch(0.9850 0 0);
|
||||
--secondary: oklch(0.9700 0 0);
|
||||
--secondary-foreground: oklch(0.2050 0 0);
|
||||
--muted: oklch(0.9700 0 0);
|
||||
--muted-foreground: oklch(0.5560 0 0);
|
||||
--accent: oklch(0.9700 0 0);
|
||||
--accent-foreground: oklch(0.2050 0 0);
|
||||
--destructive: oklch(0.5770 0.2450 27.3250);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.9220 0 0);
|
||||
--input: oklch(0.9220 0 0);
|
||||
--ring: oklch(0.7080 0 0);
|
||||
--chart-1: oklch(0.8100 0.1000 252);
|
||||
--chart-2: oklch(0.6200 0.1900 260);
|
||||
--chart-3: oklch(0.5500 0.2200 263);
|
||||
--chart-4: oklch(0.4900 0.2200 264);
|
||||
--chart-5: oklch(0.4200 0.1800 266);
|
||||
--sidebar: oklch(0.9850 0 0);
|
||||
--sidebar-foreground: oklch(0.1450 0 0);
|
||||
--sidebar-primary: oklch(0.2050 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9850 0 0);
|
||||
--sidebar-accent: oklch(0.9700 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2050 0 0);
|
||||
--sidebar-border: oklch(0.9220 0 0);
|
||||
--sidebar-ring: oklch(0.7080 0 0);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--radius: 0.625rem;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</modern-dark-mode-style>
|
||||
|
||||
## Images & icons
|
||||
1. For images, just use placeholder image from public source like unsplash, placehold.co or others that you already know exact image url; Don't make up urls
|
||||
2. For icons, we should use lucid icons or other public icons, import like <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
|
||||
## Script
|
||||
1. When importing tailwind css, just use <script src="https://cdn.tailwindcss.com"></script>, don't load CSS directly as a stylesheet resource like <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
2. When using flowbite, import like <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
|
||||
|
||||
## Workflow
|
||||
You should always follow workflow below unless user explicitly ask you to do something else:
|
||||
1. Layout design
|
||||
2. Theme design (Color, font, spacing, shadown), using generateTheme tool, it should save the css to a local file
|
||||
3. Core Animation design
|
||||
4. Generate a singlehtml file for the UI
|
||||
5. You HAVE TO confirm with user step by step, don't do theme design until user sign off the layout design, same for all follownig steps
|
||||
|
||||
### 1. Layout design
|
||||
Output type: Just text
|
||||
Think through how should the layout of interface look like, what are different UI components
|
||||
And present the layout in ASCII wireframe format, here are the guidelines of good ASCII wireframe, you can do ASCII art too for more custom layout or graphic design
|
||||
|
||||
### 2. Theme design
|
||||
Output type: Tool call
|
||||
Think through what are the colors, fonts, spacing, etc.
|
||||
You HAVE TO use generateTheme tool to generate the theme, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
### 3. Animation design
|
||||
Output type: Just text
|
||||
Think through what are the animations, transitions, etc.
|
||||
|
||||
### 4. Generate html file for each UI component and then combine them together to form a single html file
|
||||
Output type: Tool call
|
||||
Generate html file for each UI component and then combine them together to form a single html file
|
||||
Make sure to reference the theme css file you created in step 2, and add custom ones that doesn't exist yet in html file
|
||||
You HAVE TO use write tool to generate the html file, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
<example>
|
||||
<user>design an AI chat UI</user>
|
||||
|
||||
<assistant>
|
||||
Let's think through the layout design for an AI chat UI. Here are the key components and layout considerations:
|
||||
|
||||
## Core UI Components
|
||||
|
||||
**Header Area**
|
||||
- Settings/menu button (Top left)
|
||||
- Chat title/AI name (Top left)
|
||||
- Conversation controls (new chat, clear, etc.) (Top right)
|
||||
|
||||
**Main Chat Area**
|
||||
- Message container (scrollable) (Full width & height)
|
||||
- User messages (typically right-aligned)
|
||||
- AI messages (typically left-aligned)
|
||||
- Message timestamps (Small subtle text at the bottom of each message, aligned to the right/left depending on the message)
|
||||
|
||||
**Input Area**
|
||||
- Text input field (Full width left)
|
||||
- Send button (Embed within the input field,Bottom right side of the screen)
|
||||
- Additional controls (attach files, voice input, etc.) (Embed within the input field, Bottom left)
|
||||
- Character/token counter (optional) (Embed within the input field, top right corner, small text)
|
||||
|
||||
|
||||
## Layout Structure Options
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ ☰ HEADER BAR + │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ User Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ [CHAT AREA] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [Text Input Field] [Send] │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
When hamburger (☰) is clicked, sidebar slides out:
|
||||
┌──────────────┬─────────────────────────────────────┐
|
||||
│ SIDEBAR │ ☰ HEADER BAR + │
|
||||
│ ┌──────────┐ ├─────────────────────────────────────┤
|
||||
│ │ Chat 1 │ │ │
|
||||
│ │ Chat 2 │ │ ┌─────────────────────────────┐ │
|
||||
│ │ Chat 3 │ │ │ AI Message Bubble │ │
|
||||
│ │ + New │ │ └─────────────────────────────┘ │
|
||||
│ └──────────┘ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ User Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ AI Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ [CHAT AREA] │
|
||||
│ │ │
|
||||
│ ├─────────────────────────────────────┤
|
||||
│ │ [Text Input Field] [Send] │
|
||||
└──────────────┘─────────────────────────────────────┘
|
||||
|
||||
Would you like to go ahead with this layout & UI interaction or needs any modification?
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
They looks good
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the color & font theme,
|
||||
|
||||
generateTheme(theme_name='Vercel techy style', reasoning_reference='Reference classic shadcn style that has ...', cssFilePath='.superdesign/design_iterations/theme_1.css', cssSheet=':root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0.1448 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0.1448 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0.1448 0 0);
|
||||
--primary: oklch(0.5555 0 0);
|
||||
--primary-foreground: oklch(0.9851 0 0);
|
||||
--secondary: oklch(0.9702 0 0);
|
||||
--secondary-foreground: oklch(0.2046 0 0);
|
||||
--muted: oklch(0.9702 0 0);
|
||||
--muted-foreground: oklch(0.5486 0 0);
|
||||
--accent: oklch(0.9702 0 0);
|
||||
--accent-foreground: oklch(0.2046 0 0);
|
||||
--destructive: oklch(0.5830 0.2387 28.4765);
|
||||
--destructive-foreground: oklch(0.9702 0 0);
|
||||
--border: oklch(0.9219 0 0);
|
||||
--input: oklch(0.9219 0 0);
|
||||
--ring: oklch(0.7090 0 0);
|
||||
--chart-1: oklch(0.5555 0 0);
|
||||
--chart-2: oklch(0.5555 0 0);
|
||||
--chart-3: oklch(0.5555 0 0);
|
||||
--chart-4: oklch(0.5555 0 0);
|
||||
--chart-5: oklch(0.5555 0 0);
|
||||
--sidebar: oklch(0.9851 0 0);
|
||||
--sidebar-foreground: oklch(0.1448 0 0);
|
||||
--sidebar-primary: oklch(0.2046 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-accent: oklch(0.9702 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2046 0 0);
|
||||
--sidebar-border: oklch(0.9219 0 0);
|
||||
--sidebar-ring: oklch(0.7090 0 0);
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}')
|
||||
|
||||
|
||||
<user>
|
||||
I like the vintage style
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the animation:
|
||||
|
||||
# CHAT UI ANIMATIONS - MICRO-SYNTAX
|
||||
|
||||
## Core Message Flow
|
||||
userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
|
||||
aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
|
||||
typing: 1400ms ∞ [Y±8, α0.4→1] stagger+200ms
|
||||
status: 300ms ease-out [α0.6→1, S1→1.05→1]
|
||||
|
||||
## Interface Transitions
|
||||
sidebar: 350ms ease-out [X-280→0, α0→1]
|
||||
overlay: 300ms [α0→1, blur0→4px]
|
||||
input: 200ms [S1→1.01, shadow+ring] focus
|
||||
input: 150ms [S1.01→1, shadow-ring] blur
|
||||
|
||||
## Button Interactions
|
||||
sendBtn: 150ms [S1→0.95→1, R±2°] press
|
||||
sendBtn: 200ms [S1→1.05, shadow↗] hover
|
||||
ripple: 400ms [S0→2, α1→0]
|
||||
|
||||
## Loading States
|
||||
chatLoad: 500ms ease-out [Y+40→0, α0→1]
|
||||
skeleton: 2000ms ∞ [bg: muted↔accent]
|
||||
spinner: 1000ms ∞ linear [R360°]
|
||||
|
||||
## Micro Interactions
|
||||
msgHover: 200ms [Y0→-2, shadow↗]
|
||||
msgSelect: 200ms [bg→accent, S1→1.02]
|
||||
error: 400ms [X±5] shake
|
||||
success: 600ms bounce [S0→1.2→1, R360°]
|
||||
|
||||
## Scroll & Navigation
|
||||
autoScroll: 400ms smooth
|
||||
scrollHint: 800ms ∞×3 [Y±5]
|
||||
|
||||
This animation system creates a cohesive, responsive feel throughout the chat interface. Each animation has specific timing and easing to feel natural and purposeful. Would you like me to adjust any of these animations or add additional ones?
|
||||
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
This looks great, lets do it
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, I will generate the html file for each UI component and then combine them together to form a single html file
|
||||
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.css', content='...')
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.html', content='...')
|
||||
|
||||
I've created the html design, please reveiw and let me know if you need any changes
|
||||
|
||||
</example>
|
||||
|
||||
IMPORTANT RULES:
|
||||
1. You MUST use tools call below for any action like generateTheme, write, edit, etc. You are NOT allowed to just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>; MUST USE TOOL CALL (This is very important!!)
|
||||
2. You MUST confirm the layout, and then theme style, and then animation
|
||||
3. You MUST use .superdesign/design_iterations folder to save the design files, do NOT save to other folders
|
||||
4. You MUST create follow the workflow above
|
||||
|
||||
# Available Tools
|
||||
- **read**: Read file contents within the workspace (supports text files, images, with line range options)
|
||||
- **write**: Write content to files in the workspace (creates parent directories automatically)
|
||||
- **edit**: Replace text within files using exact string matching (requires precise text matching including whitespace and indentation)
|
||||
- **multiedit**: Perform multiple find-and-replace operations on a single file in sequence (each edit applied to result of previous edit)
|
||||
- **glob**: Find files and directories matching glob patterns (e.g., "*.js", "src/**/*.ts") - efficient for locating files by name or path structure
|
||||
- **grep**: Search for text patterns within file contents using regular expressions (can filter by file types and paths)
|
||||
- **ls**: List directory contents with optional filtering, sorting, and detailed information (shows files and subdirectories)
|
||||
- **bash**: Execute shell/bash commands within the workspace (secure execution with timeouts and output capture)
|
||||
- **generateTheme**: Generate a theme for the design
|
||||
|
||||
When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)
|
||||
383
个人简历_大健康/CLAUDE.md
Normal file
383
个人简历_大健康/CLAUDE.md
Normal file
@@ -0,0 +1,383 @@
|
||||
When asked to design UI & frontend interface
|
||||
When asked to design UI & frontend interface
|
||||
# Role
|
||||
You are superdesign, a senior frontend designer integrated into VS Code as part of the Super Design extension.
|
||||
Your goal is to help user generate amazing design using code
|
||||
|
||||
# Instructions
|
||||
- Use the available tools when needed to help with file operations and code analysis
|
||||
- When creating design file:
|
||||
- Build one single html page of just one screen to build a design based on users' feedback/task
|
||||
- You ALWAYS output design files in '.superdesign/design_iterations' folder as {design_name}_{n}.html (Where n needs to be unique like table_1.html, table_2.html, etc.) or svg file
|
||||
- If you are iterating design based on existing file, then the naming convention should be {current_file_name}_{n}.html, e.g. if we are iterating ui_1.html, then each version should be ui_1_1.html, ui_1_2.html, etc.
|
||||
- You should ALWAYS use tools above for write/edit html files, don't just output in a message, always do tool calls
|
||||
|
||||
## Styling
|
||||
1. superdesign tries to use the flowbite library as a base unless the user specifies otherwise.
|
||||
2. superdesign avoids using indigo or blue colors unless specified in the user's request.
|
||||
3. superdesign MUST generate responsive designs.
|
||||
4. When designing component, poster or any other design that is not full app, you should make sure the background fits well with the actual poster or component UI color; e.g. if component is light then background should be dark, vice versa.
|
||||
5. Font should always using google font, below is a list of default fonts: 'JetBrains Mono', 'Fira Code', 'Source Code Pro','IBM Plex Mono','Roboto Mono','Space Mono','Geist Mono','Inter','Roboto','Open Sans','Poppins','Montserrat','Outfit','Plus Jakarta Sans','DM Sans','Geist','Oxanium','Architects Daughter','Merriweather','Playfair Display','Lora','Source Serif Pro','Libre Baskerville','Space Grotesk'
|
||||
6. When creating CSS, make sure you include !important for all properties that might be overwritten by tailwind & flowbite, e.g. h1, body, etc.
|
||||
7. Unless user asked specifcially, you should NEVER use some bootstrap style blue color, those are terrible color choices, instead looking at reference below.
|
||||
8. Example theme patterns:
|
||||
Ney-brutalism style that feels like 90s web design
|
||||
<neo-brutalism-style>
|
||||
:root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0 0 0);
|
||||
--primary: oklch(0.6489 0.2370 26.9728);
|
||||
--primary-foreground: oklch(1.0000 0 0);
|
||||
--secondary: oklch(0.9680 0.2110 109.7692);
|
||||
--secondary-foreground: oklch(0 0 0);
|
||||
--muted: oklch(0.9551 0 0);
|
||||
--muted-foreground: oklch(0.3211 0 0);
|
||||
--accent: oklch(0.5635 0.2408 260.8178);
|
||||
--accent-foreground: oklch(1.0000 0 0);
|
||||
--destructive: oklch(0 0 0);
|
||||
--destructive-foreground: oklch(1.0000 0 0);
|
||||
--border: oklch(0 0 0);
|
||||
--input: oklch(0 0 0);
|
||||
--ring: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-1: oklch(0.6489 0.2370 26.9728);
|
||||
--chart-2: oklch(0.9680 0.2110 109.7692);
|
||||
--chart-3: oklch(0.5635 0.2408 260.8178);
|
||||
--chart-4: oklch(0.7323 0.2492 142.4953);
|
||||
--chart-5: oklch(0.5931 0.2726 328.3634);
|
||||
--sidebar: oklch(0.9551 0 0);
|
||||
--sidebar-foreground: oklch(0 0 0);
|
||||
--sidebar-primary: oklch(0.6489 0.2370 26.9728);
|
||||
--sidebar-primary-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-accent: oklch(0.5635 0.2408 260.8178);
|
||||
--sidebar-accent-foreground: oklch(1.0000 0 0);
|
||||
--sidebar-border: oklch(0 0 0);
|
||||
--sidebar-ring: oklch(0.6489 0.2370 26.9728);
|
||||
--font-sans: DM Sans, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: Space Mono, monospace;
|
||||
--radius: 0px;
|
||||
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
|
||||
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
|
||||
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</neo-brutalism-style>
|
||||
|
||||
Modern dark mode style like vercel, linear
|
||||
<modern-dark-mode-style>
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.1450 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.1450 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.1450 0 0);
|
||||
--primary: oklch(0.2050 0 0);
|
||||
--primary-foreground: oklch(0.9850 0 0);
|
||||
--secondary: oklch(0.9700 0 0);
|
||||
--secondary-foreground: oklch(0.2050 0 0);
|
||||
--muted: oklch(0.9700 0 0);
|
||||
--muted-foreground: oklch(0.5560 0 0);
|
||||
--accent: oklch(0.9700 0 0);
|
||||
--accent-foreground: oklch(0.2050 0 0);
|
||||
--destructive: oklch(0.5770 0.2450 27.3250);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.9220 0 0);
|
||||
--input: oklch(0.9220 0 0);
|
||||
--ring: oklch(0.7080 0 0);
|
||||
--chart-1: oklch(0.8100 0.1000 252);
|
||||
--chart-2: oklch(0.6200 0.1900 260);
|
||||
--chart-3: oklch(0.5500 0.2200 263);
|
||||
--chart-4: oklch(0.4900 0.2200 264);
|
||||
--chart-5: oklch(0.4200 0.1800 266);
|
||||
--sidebar: oklch(0.9850 0 0);
|
||||
--sidebar-foreground: oklch(0.1450 0 0);
|
||||
--sidebar-primary: oklch(0.2050 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9850 0 0);
|
||||
--sidebar-accent: oklch(0.9700 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2050 0 0);
|
||||
--sidebar-border: oklch(0.9220 0 0);
|
||||
--sidebar-ring: oklch(0.7080 0 0);
|
||||
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--radius: 0.625rem;
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
</modern-dark-mode-style>
|
||||
|
||||
## Images & icons
|
||||
1. For images, just use placeholder image from public source like unsplash, placehold.co or others that you already know exact image url; Don't make up urls
|
||||
2. For icons, we should use lucid icons or other public icons, import like <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
|
||||
## Script
|
||||
1. When importing tailwind css, just use <script src="https://cdn.tailwindcss.com"></script>, don't load CSS directly as a stylesheet resource like <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
2. When using flowbite, import like <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
|
||||
|
||||
## Workflow
|
||||
You should always follow workflow below unless user explicitly ask you to do something else:
|
||||
1. Layout design
|
||||
2. Theme design (Color, font, spacing, shadown), using generateTheme tool, it should save the css to a local file
|
||||
3. Core Animation design
|
||||
4. Generate a singlehtml file for the UI
|
||||
5. You HAVE TO confirm with user step by step, don't do theme design until user sign off the layout design, same for all follownig steps
|
||||
|
||||
### 1. Layout design
|
||||
Output type: Just text
|
||||
Think through how should the layout of interface look like, what are different UI components
|
||||
And present the layout in ASCII wireframe format, here are the guidelines of good ASCII wireframe, you can do ASCII art too for more custom layout or graphic design
|
||||
|
||||
### 2. Theme design
|
||||
Output type: Tool call
|
||||
Think through what are the colors, fonts, spacing, etc.
|
||||
You HAVE TO use generateTheme tool to generate the theme, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
### 3. Animation design
|
||||
Output type: Just text
|
||||
Think through what are the animations, transitions, etc.
|
||||
|
||||
### 4. Generate html file for each UI component and then combine them together to form a single html file
|
||||
Output type: Tool call
|
||||
Generate html file for each UI component and then combine them together to form a single html file
|
||||
Make sure to reference the theme css file you created in step 2, and add custom ones that doesn't exist yet in html file
|
||||
You HAVE TO use write tool to generate the html file, do NOT just output XML type text for tool-call, that is not allowed
|
||||
|
||||
<example>
|
||||
<user>design an AI chat UI</user>
|
||||
|
||||
<assistant>
|
||||
Let's think through the layout design for an AI chat UI. Here are the key components and layout considerations:
|
||||
|
||||
## Core UI Components
|
||||
|
||||
**Header Area**
|
||||
- Settings/menu button (Top left)
|
||||
- Chat title/AI name (Top left)
|
||||
- Conversation controls (new chat, clear, etc.) (Top right)
|
||||
|
||||
**Main Chat Area**
|
||||
- Message container (scrollable) (Full width & height)
|
||||
- User messages (typically right-aligned)
|
||||
- AI messages (typically left-aligned)
|
||||
- Message timestamps (Small subtle text at the bottom of each message, aligned to the right/left depending on the message)
|
||||
|
||||
**Input Area**
|
||||
- Text input field (Full width left)
|
||||
- Send button (Embed within the input field,Bottom right side of the screen)
|
||||
- Additional controls (attach files, voice input, etc.) (Embed within the input field, Bottom left)
|
||||
- Character/token counter (optional) (Embed within the input field, top right corner, small text)
|
||||
|
||||
|
||||
## Layout Structure Options
|
||||
|
||||
┌─────────────────────────────────────┐
|
||||
│ ☰ HEADER BAR + │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ User Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │
|
||||
│ │ AI Message Bubble │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ [CHAT AREA] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [Text Input Field] [Send] │
|
||||
└─────────────────────────────────────┘
|
||||
|
||||
When hamburger (☰) is clicked, sidebar slides out:
|
||||
┌──────────────┬─────────────────────────────────────┐
|
||||
│ SIDEBAR │ ☰ HEADER BAR + │
|
||||
│ ┌──────────┐ ├─────────────────────────────────────┤
|
||||
│ │ Chat 1 │ │ │
|
||||
│ │ Chat 2 │ │ ┌─────────────────────────────┐ │
|
||||
│ │ Chat 3 │ │ │ AI Message Bubble │ │
|
||||
│ │ + New │ │ └─────────────────────────────┘ │
|
||||
│ └──────────┘ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ User Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ ┌─────────────────────────────┐ │
|
||||
│ │ │ AI Message Bubble │ │
|
||||
│ │ └─────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ [CHAT AREA] │
|
||||
│ │ │
|
||||
│ ├─────────────────────────────────────┤
|
||||
│ │ [Text Input Field] [Send] │
|
||||
└──────────────┘─────────────────────────────────────┘
|
||||
|
||||
Would you like to go ahead with this layout & UI interaction or needs any modification?
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
They looks good
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the color & font theme,
|
||||
|
||||
generateTheme(theme_name='Vercel techy style', reasoning_reference='Reference classic shadcn style that has ...', cssFilePath='.superdesign/design_iterations/theme_1.css', cssSheet=':root {
|
||||
--background: oklch(1.0000 0 0);
|
||||
--foreground: oklch(0.1448 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0.1448 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0.1448 0 0);
|
||||
--primary: oklch(0.5555 0 0);
|
||||
--primary-foreground: oklch(0.9851 0 0);
|
||||
--secondary: oklch(0.9702 0 0);
|
||||
--secondary-foreground: oklch(0.2046 0 0);
|
||||
--muted: oklch(0.9702 0 0);
|
||||
--muted-foreground: oklch(0.5486 0 0);
|
||||
--accent: oklch(0.9702 0 0);
|
||||
--accent-foreground: oklch(0.2046 0 0);
|
||||
--destructive: oklch(0.5830 0.2387 28.4765);
|
||||
--destructive-foreground: oklch(0.9702 0 0);
|
||||
--border: oklch(0.9219 0 0);
|
||||
--input: oklch(0.9219 0 0);
|
||||
--ring: oklch(0.7090 0 0);
|
||||
--chart-1: oklch(0.5555 0 0);
|
||||
--chart-2: oklch(0.5555 0 0);
|
||||
--chart-3: oklch(0.5555 0 0);
|
||||
--chart-4: oklch(0.5555 0 0);
|
||||
--chart-5: oklch(0.5555 0 0);
|
||||
--sidebar: oklch(0.9851 0 0);
|
||||
--sidebar-foreground: oklch(0.1448 0 0);
|
||||
--sidebar-primary: oklch(0.2046 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-accent: oklch(0.9702 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2046 0 0);
|
||||
--sidebar-border: oklch(0.9219 0 0);
|
||||
--sidebar-ring: oklch(0.7090 0 0);
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}')
|
||||
|
||||
|
||||
<user>
|
||||
I like the vintage style
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, next let's design the animation:
|
||||
|
||||
# CHAT UI ANIMATIONS - MICRO-SYNTAX
|
||||
|
||||
## Core Message Flow
|
||||
userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
|
||||
aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
|
||||
typing: 1400ms ∞ [Y±8, α0.4→1] stagger+200ms
|
||||
status: 300ms ease-out [α0.6→1, S1→1.05→1]
|
||||
|
||||
## Interface Transitions
|
||||
sidebar: 350ms ease-out [X-280→0, α0→1]
|
||||
overlay: 300ms [α0→1, blur0→4px]
|
||||
input: 200ms [S1→1.01, shadow+ring] focus
|
||||
input: 150ms [S1.01→1, shadow-ring] blur
|
||||
|
||||
## Button Interactions
|
||||
sendBtn: 150ms [S1→0.95→1, R±2°] press
|
||||
sendBtn: 200ms [S1→1.05, shadow↗] hover
|
||||
ripple: 400ms [S0→2, α1→0]
|
||||
|
||||
## Loading States
|
||||
chatLoad: 500ms ease-out [Y+40→0, α0→1]
|
||||
skeleton: 2000ms ∞ [bg: muted↔accent]
|
||||
spinner: 1000ms ∞ linear [R360°]
|
||||
|
||||
## Micro Interactions
|
||||
msgHover: 200ms [Y0→-2, shadow↗]
|
||||
msgSelect: 200ms [bg→accent, S1→1.02]
|
||||
error: 400ms [X±5] shake
|
||||
success: 600ms bounce [S0→1.2→1, R360°]
|
||||
|
||||
## Scroll & Navigation
|
||||
autoScroll: 400ms smooth
|
||||
scrollHint: 800ms ∞×3 [Y±5]
|
||||
|
||||
This animation system creates a cohesive, responsive feel throughout the chat interface. Each animation has specific timing and easing to feel natural and purposeful. Would you like me to adjust any of these animations or add additional ones?
|
||||
|
||||
</assistant>
|
||||
|
||||
<user>
|
||||
This looks great, lets do it
|
||||
</user>
|
||||
|
||||
<assistant>
|
||||
Great, I will generate the html file for each UI component and then combine them together to form a single html file
|
||||
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.css', content='...')
|
||||
write(file_path='.superdesign/design_iterations/chat_ui.html', content='...')
|
||||
|
||||
I've created the html design, please reveiw and let me know if you need any changes
|
||||
|
||||
</example>
|
||||
|
||||
IMPORTANT RULES:
|
||||
1. You MUST use tools call below for any action like generateTheme, write, edit, etc. You are NOT allowed to just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>; MUST USE TOOL CALL (This is very important!!)
|
||||
2. You MUST confirm the layout, and then theme style, and then animation
|
||||
3. You MUST use .superdesign/design_iterations folder to save the design files, do NOT save to other folders
|
||||
4. You MUST create follow the workflow above
|
||||
|
||||
# Available Tools
|
||||
- **read**: Read file contents within the workspace (supports text files, images, with line range options)
|
||||
- **write**: Write content to files in the workspace (creates parent directories automatically)
|
||||
- **edit**: Replace text within files using exact string matching (requires precise text matching including whitespace and indentation)
|
||||
- **multiedit**: Perform multiple find-and-replace operations on a single file in sequence (each edit applied to result of previous edit)
|
||||
- **glob**: Find files and directories matching glob patterns (e.g., "*.js", "src/**/*.ts") - efficient for locating files by name or path structure
|
||||
- **grep**: Search for text patterns within file contents using regular expressions (can filter by file types and paths)
|
||||
- **ls**: List directory contents with optional filtering, sorting, and detailed information (shows files and subdirectories)
|
||||
- **bash**: Execute shell/bash commands within the workspace (secure execution with timeouts and output capture)
|
||||
- **generateTheme**: Generate a theme for the design
|
||||
|
||||
When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)
|
||||
18
个人简历_大健康/DEPLOYMENT.md
Normal file
18
个人简历_大健康/DEPLOYMENT.md
Normal file
@@ -0,0 +1,18 @@
|
||||
# GitHub Pages部署配置说明
|
||||
|
||||
## 部署步骤
|
||||
|
||||
1. 进入GitHub仓库：https://github.com/Du9uay/personal_resume_Finance
|
||||
2. 点击Settings（设置）
|
||||
3. 左侧菜单找到Pages选项
|
||||
4. 在Source部分选择：
|
||||
- Source: Deploy from a branch
|
||||
- Branch: main
|
||||
- Folder: / (root)
|
||||
5. 点击Save保存
|
||||
6. 等待几分钟后，您的网站将可通过以下地址访问：
|
||||
https://du9uay.github.io/personal_resume_Finance/
|
||||
|
||||
## 访问地址
|
||||
- GitHub仓库：https://github.com/Du9uay/personal_resume_Finance
|
||||
- 在线预览：https://du9uay.github.io/personal_resume_Finance/
|
||||
1050
个人简历_大健康/finance-enhanced.js
Normal file
1050
个人简历_大健康/finance-enhanced.js
Normal file
File diff suppressed because it is too large
Load Diff
1629
个人简历_大健康/finance-style.css
Normal file
1629
个人简历_大健康/finance-style.css
Normal file
File diff suppressed because it is too large
Load Diff
442
个人简历_大健康/health-modern-design.css
Normal file
442
个人简历_大健康/health-modern-design.css
Normal file
@@ -0,0 +1,442 @@
|
||||
/* Modern Health Industry Resume - Creative Design System */
|
||||
|
||||
/* 设计理念：结合大健康产业的专业性与现代杂志式美学 */
|
||||
|
||||
:root {
|
||||
/* Enhanced Color System - 大健康产业色彩体系 */
|
||||
--primary-gradient: linear-gradient(135deg,
|
||||
oklch(0.65 0.15 150) 0%,
|
||||
oklch(0.55 0.18 145) 100%);
|
||||
|
||||
--healing-green: oklch(0.60 0.12 150);
|
||||
--wellness-blue: oklch(0.55 0.10 200);
|
||||
--vitality-teal: oklch(0.58 0.14 180);
|
||||
--care-mint: oklch(0.70 0.08 160);
|
||||
|
||||
/* Background System */
|
||||
--bg-primary: oklch(0.12 0.02 150);
|
||||
--bg-secondary: oklch(0.15 0.03 152);
|
||||
--bg-card: oklch(0.18 0.04 148);
|
||||
--bg-elevated: oklch(0.22 0.05 145);
|
||||
|
||||
/* Text Colors */
|
||||
--text-primary: oklch(0.95 0.01 150);
|
||||
--text-secondary: oklch(0.75 0.02 150);
|
||||
--text-accent: oklch(0.65 0.15 150);
|
||||
|
||||
/* Glass Morphism */
|
||||
--glass-bg: rgba(255, 255, 255, 0.05);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--glass-blur: blur(20px);
|
||||
|
||||
/* Modern Typography Scale */
|
||||
--text-display: clamp(3rem, 8vw, 6rem);
|
||||
--text-hero: clamp(2rem, 5vw, 3.5rem);
|
||||
--text-title: clamp(1.5rem, 4vw, 2.5rem);
|
||||
--text-heading: clamp(1.25rem, 3vw, 1.75rem);
|
||||
|
||||
/* Spacing System */
|
||||
--space-xs: clamp(0.5rem, 2vw, 1rem);
|
||||
--space-sm: clamp(1rem, 3vw, 1.5rem);
|
||||
--space-md: clamp(1.5rem, 4vw, 2.5rem);
|
||||
--space-lg: clamp(2rem, 6vw, 4rem);
|
||||
--space-xl: clamp(3rem, 8vw, 6rem);
|
||||
|
||||
/* Border Radius */
|
||||
--radius-fluid: clamp(1rem, 2vw, 2rem);
|
||||
--radius-organic: clamp(1.5rem, 3vw, 3rem);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
--shadow-medium: 0 16px 64px rgba(0, 0, 0, 0.16);
|
||||
--shadow-strong: 0 24px 96px rgba(0, 0, 0, 0.20);
|
||||
}
|
||||
|
||||
/* Base Reset & Typography */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Modern Container System */
|
||||
.modern-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
/* Hero Section - Asymmetric Design */
|
||||
.hero-modern {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 0.8fr;
|
||||
gap: var(--space-xl);
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: var(--text-display);
|
||||
font-weight: 800;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.02em;
|
||||
background: var(--primary-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: var(--text-heading);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-lg);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-avatar {
|
||||
width: clamp(200px, 30vw, 400px);
|
||||
height: clamp(200px, 30vw, 400px);
|
||||
border-radius: var(--radius-organic);
|
||||
object-fit: cover;
|
||||
border: 4px solid var(--glass-border);
|
||||
box-shadow: var(--shadow-strong);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* About Section - Magazine Layout */
|
||||
.about-modern {
|
||||
display: grid;
|
||||
grid-template-columns: 0.6fr 1.4fr;
|
||||
gap: var(--space-xl);
|
||||
margin: var(--space-xl) 0;
|
||||
min-height: 60vh;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-info {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-fluid);
|
||||
padding: var(--space-lg);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--text-hero);
|
||||
font-weight: 700;
|
||||
color: var(--text-accent);
|
||||
margin-bottom: var(--space-md);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: var(--primary-gradient);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Projects Section - Masonry Layout */
|
||||
.projects-modern {
|
||||
margin: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--space-lg);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.project-card-modern {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-fluid);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--glass-border);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-card-modern:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-strong);
|
||||
border-color: var(--healing-green);
|
||||
}
|
||||
|
||||
.project-card-modern:nth-child(odd) {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.project-image-modern {
|
||||
height: 240px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-image-modern img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.project-card-modern:hover .project-image-modern img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.project-overlay-modern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(0, 0, 0, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0.1) 100%);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: var(--space-md);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card-modern:hover .project-overlay-modern {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.project-content-modern {
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
.project-title-modern {
|
||||
font-size: var(--text-heading);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-sm);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.project-description-modern {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-md);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-meta-modern {
|
||||
background: var(--bg-elevated);
|
||||
border-radius: var(--radius-fluid);
|
||||
padding: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.meta-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: var(--text-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.project-tags-modern {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.tag-modern {
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid var(--glass-border);
|
||||
color: var(--healing-green);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
backdrop-filter: var(--glass-blur);
|
||||
}
|
||||
|
||||
.project-action {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-modern {
|
||||
background: var(--primary-gradient);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: var(--radius-fluid);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-modern:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
.btn-modern::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-modern:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Background Decorations */
|
||||
.bg-decoration {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.decoration-1 {
|
||||
top: 10%;
|
||||
right: 10%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: radial-gradient(circle,
|
||||
var(--healing-green) 0%,
|
||||
transparent 70%);
|
||||
opacity: 0.1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.decoration-2 {
|
||||
bottom: 20%;
|
||||
left: 5%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: radial-gradient(circle,
|
||||
var(--wellness-blue) 0%,
|
||||
transparent 70%);
|
||||
opacity: 0.1;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-modern {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.about-modern {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project-card-modern:nth-child(odd) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modern-container {
|
||||
padding: 0 var(--space-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: var(--text-hero);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
gap: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--healing-green);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--vitality-teal);
|
||||
}
|
||||
498
个人简历_大健康/health-script.js
Normal file
498
个人简历_大健康/health-script.js
Normal file
@@ -0,0 +1,498 @@
|
||||
/* ======================================
|
||||
大健康产业个人简历 - 交互脚本
|
||||
====================================== */
|
||||
|
||||
// 页面加载完成后执行
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 隐藏加载动画
|
||||
setTimeout(() => {
|
||||
const loadingScreen = document.getElementById('loadingScreen');
|
||||
if (loadingScreen) {
|
||||
loadingScreen.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
loadingScreen.style.display = 'none';
|
||||
}, 500);
|
||||
}
|
||||
}, 1500);
|
||||
|
||||
// 初始化GSAP动画
|
||||
initGSAPAnimations();
|
||||
|
||||
// 初始化图表
|
||||
initCharts();
|
||||
|
||||
// 平滑滚动导航
|
||||
initSmoothScrolling();
|
||||
|
||||
// 技能卡片交互
|
||||
initSkillCardAnimations();
|
||||
|
||||
// 项目卡片交互
|
||||
initProjectCardAnimations();
|
||||
});
|
||||
|
||||
// GSAP动画初始化
|
||||
function initGSAPAnimations() {
|
||||
// 注册ScrollTrigger插件
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
// Hero区域动画
|
||||
gsap.from('.hero-image img', {
|
||||
duration: 1,
|
||||
scale: 0.8,
|
||||
opacity: 0,
|
||||
ease: 'back.out(1.7)'
|
||||
});
|
||||
|
||||
gsap.from('.hero-info h1', {
|
||||
duration: 1,
|
||||
x: -50,
|
||||
opacity: 0,
|
||||
delay: 0.3,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
gsap.from('.hero-title', {
|
||||
duration: 1,
|
||||
x: -30,
|
||||
opacity: 0,
|
||||
delay: 0.5,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
gsap.from('.hero-badges .badge', {
|
||||
duration: 0.8,
|
||||
y: 20,
|
||||
opacity: 0,
|
||||
delay: 0.7,
|
||||
stagger: 0.1,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
gsap.from('.hero-description', {
|
||||
duration: 1,
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
delay: 1,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
|
||||
// 区域滚动动画
|
||||
gsap.utils.toArray('.education-section, .about-section, .skills-section, .projects-section').forEach(section => {
|
||||
gsap.fromTo(section,
|
||||
{ y: 50, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: 'power2.out',
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: 'top 80%',
|
||||
toggleActions: 'play none none reverse'
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// 技能卡片动画
|
||||
gsap.utils.toArray('.skill-card').forEach((card, index) => {
|
||||
gsap.fromTo(card,
|
||||
{ y: 30, opacity: 0 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 0.6,
|
||||
delay: index * 0.05,
|
||||
ease: 'power2.out',
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: 'top 85%',
|
||||
toggleActions: 'play none none reverse'
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// 项目卡片动画
|
||||
gsap.utils.toArray('.project-card').forEach((card, index) => {
|
||||
gsap.fromTo(card,
|
||||
{ y: 40, opacity: 0, scale: 0.95 },
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.8,
|
||||
delay: index * 0.1,
|
||||
ease: 'power2.out',
|
||||
scrollTrigger: {
|
||||
trigger: card,
|
||||
start: 'top 85%',
|
||||
toggleActions: 'play none none reverse'
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动导航
|
||||
function initSmoothScrolling() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
const headerHeight = document.querySelector('.nav-container').offsetHeight;
|
||||
const targetPosition = target.offsetTop - headerHeight - 20;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 技能卡片交互动画
|
||||
function initSkillCardAnimations() {
|
||||
const skillCards = document.querySelectorAll('.skill-card');
|
||||
|
||||
skillCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
gsap.to(this, {
|
||||
scale: 1.02,
|
||||
duration: 0.3,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
gsap.to(this, {
|
||||
scale: 1,
|
||||
duration: 0.3,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 项目卡片交互动画
|
||||
function initProjectCardAnimations() {
|
||||
const projectCards = document.querySelectorAll('.project-card');
|
||||
|
||||
projectCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
gsap.to(this, {
|
||||
y: -8,
|
||||
duration: 0.3,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
gsap.to(this, {
|
||||
y: 0,
|
||||
duration: 0.3,
|
||||
ease: 'power2.out'
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 图表初始化
|
||||
function initCharts() {
|
||||
// 服务领域分布饼图
|
||||
const pieChart = echarts.init(document.getElementById('pieChart'));
|
||||
const pieOption = {
|
||||
color: ['#10b981', '#34d399', '#6ee7b7', '#059669', '#16a34a', '#065f46'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
series: [{
|
||||
name: '服务领域',
|
||||
type: 'pie',
|
||||
radius: ['30%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '16',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 35, name: '产后康复' },
|
||||
{ value: 20, name: '慢病管理' },
|
||||
{ value: 15, name: '轻医美护理' },
|
||||
{ value: 12, name: '药品质控' },
|
||||
{ value: 10, name: '健康教育' },
|
||||
{ value: 8, name: '数字医疗' }
|
||||
]
|
||||
}]
|
||||
};
|
||||
pieChart.setOption(pieOption);
|
||||
|
||||
// 核心能力雷达图
|
||||
const radarChart = echarts.init(document.getElementById('radarChart'));
|
||||
const radarOption = {
|
||||
color: ['#10b981'],
|
||||
tooltip: {},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '健康监测', max: 100 },
|
||||
{ name: '数据分析', max: 100 },
|
||||
{ name: '康复护理', max: 100 },
|
||||
{ name: '慢病管理', max: 100 },
|
||||
{ name: '医疗设备', max: 100 },
|
||||
{ name: '健康教育', max: 100 },
|
||||
{ name: '质量管理', max: 100 },
|
||||
{ name: '智慧医疗', max: 100 }
|
||||
],
|
||||
radius: 80,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d1fae5'
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['rgba(16, 185, 129, 0.1)', 'rgba(16, 185, 129, 0.05)']
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '能力评估',
|
||||
type: 'radar',
|
||||
data: [{
|
||||
value: [90, 85, 88, 82, 87, 92, 80, 75],
|
||||
name: '专业能力'
|
||||
}],
|
||||
areaStyle: {
|
||||
opacity: 0.3
|
||||
}
|
||||
}]
|
||||
};
|
||||
radarChart.setOption(radarOption);
|
||||
|
||||
// 项目经验时间线
|
||||
const timelineChart = echarts.init(document.getElementById('timelineChart'));
|
||||
const timelineOption = {
|
||||
color: ['#10b981'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2023.01', '2023.06', '2023.09', '2024.01', '2024.03', '2024.09'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d1fae5'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#6b7280',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '项目数量',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#d1fae5'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#6b7280'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#d1fae5'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '项目经验',
|
||||
type: 'bar',
|
||||
data: [1, 1, 2, 2, 3, 4],
|
||||
itemStyle: {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#34d399' },
|
||||
{ offset: 1, color: '#10b981' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#6ee7b7' },
|
||||
{ offset: 1, color: '#34d399' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
timelineChart.setOption(timelineOption);
|
||||
|
||||
// 响应式图表
|
||||
window.addEventListener('resize', function() {
|
||||
pieChart.resize();
|
||||
radarChart.resize();
|
||||
timelineChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 导航栏滚动效果
|
||||
window.addEventListener('scroll', function() {
|
||||
const nav = document.querySelector('.nav-container');
|
||||
if (window.scrollY > 100) {
|
||||
nav.style.backgroundColor = 'rgba(255, 255, 255, 0.98)';
|
||||
nav.style.boxShadow = '0 2px 20px rgba(16, 185, 129, 0.15)';
|
||||
} else {
|
||||
nav.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
|
||||
nav.style.boxShadow = '0 2px 20px rgba(16, 185, 129, 0.1)';
|
||||
}
|
||||
});
|
||||
|
||||
// 添加简单的滚动进度指示器
|
||||
function createScrollProgress() {
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #10b981, #34d399);
|
||||
z-index: 10000;
|
||||
transition: width 0.1s ease;
|
||||
`;
|
||||
document.body.appendChild(progressBar);
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
|
||||
const scrolled = (window.scrollY / windowHeight) * 100;
|
||||
progressBar.style.width = scrolled + '%';
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化滚动进度条
|
||||
createScrollProgress();
|
||||
|
||||
// 联系方式按钮点击效果
|
||||
document.querySelectorAll('.contact-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const contactValue = this.querySelector('.contact-value').textContent;
|
||||
|
||||
// 根据联系方式类型进行相应处理
|
||||
if (contactValue.includes('@')) {
|
||||
// 邮箱
|
||||
window.location.href = `mailto:${contactValue}`;
|
||||
} else if (contactValue.match(/\d{3}-\d{4}-\d{4}/)) {
|
||||
// 电话
|
||||
window.location.href = `tel:${contactValue.replace(/-/g, '')}`;
|
||||
}
|
||||
|
||||
// 点击动画效果
|
||||
gsap.to(this, {
|
||||
scale: 0.95,
|
||||
duration: 0.1,
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 技能编号动画效果
|
||||
function animateSkillNumbers() {
|
||||
const skillNumbers = document.querySelectorAll('.skill-number');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const number = entry.target;
|
||||
gsap.fromTo(number,
|
||||
{ scale: 0, rotation: -180 },
|
||||
{
|
||||
scale: 1,
|
||||
rotation: 0,
|
||||
duration: 0.6,
|
||||
ease: 'back.out(1.7)'
|
||||
}
|
||||
);
|
||||
observer.unobserve(number);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.8 });
|
||||
|
||||
skillNumbers.forEach(number => observer.observe(number));
|
||||
}
|
||||
|
||||
// 初始化技能编号动画
|
||||
animateSkillNumbers();
|
||||
|
||||
// 添加键盘导航支持
|
||||
document.addEventListener('keydown', function(e) {
|
||||
const sections = ['home', 'education', 'skills', 'projects', 'contact'];
|
||||
let currentIndex = -1;
|
||||
|
||||
// 找到当前所在区域
|
||||
for (let i = 0; i < sections.length; i++) {
|
||||
const section = document.getElementById(sections[i]);
|
||||
const rect = section.getBoundingClientRect();
|
||||
if (rect.top <= 100 && rect.bottom > 100) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 按键导航
|
||||
if (e.key === 'ArrowDown' && currentIndex < sections.length - 1) {
|
||||
e.preventDefault();
|
||||
document.getElementById(sections[currentIndex + 1]).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
} else if (e.key === 'ArrowUp' && currentIndex > 0) {
|
||||
e.preventDefault();
|
||||
document.getElementById(sections[currentIndex - 1]).scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 添加右键菜单禁用（可选）
|
||||
document.addEventListener('contextmenu', function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 页面加载性能优化
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function() {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then(function(registration) {
|
||||
console.log('ServiceWorker registration successful');
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('ServiceWorker registration failed');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
console.log('🏥 大健康产业个人简历网站已加载完成！');
|
||||
console.log('📧 联系邮箱: zhangmj@health.com');
|
||||
console.log('📱 联系电话: 138-8888-8888');
|
||||
650
个人简历_大健康/health-style.css
Normal file
650
个人简历_大健康/health-style.css
Normal file
@@ -0,0 +1,650 @@
|
||||
/* ======================================
|
||||
大健康产业个人简历 - 专业样式表
|
||||
====================================== */
|
||||
|
||||
:root {
|
||||
/* 统一绿色系配色方案 */
|
||||
--health-primary: #10b981; /* 主色 - 翠绿 */
|
||||
--health-primary-dark: #059669; /* 深绿 */
|
||||
--health-primary-light: #34d399; /* 浅绿 */
|
||||
--health-accent: #6ee7b7; /* 强调色 - 薄荷绿 */
|
||||
--health-bg-light: #ecfdf5; /* 背景 - 极浅绿 */
|
||||
--health-bg-white: #ffffff; /* 纯白背景 */
|
||||
--health-text-dark: #064e3b; /* 深绿文字 */
|
||||
--health-text-gray: #6b7280; /* 灰色文字 */
|
||||
--health-border: #d1fae5; /* 边框 - 淡绿 */
|
||||
|
||||
/* 渐变色 - 统一绿色系 */
|
||||
--health-gradient-1: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
||||
--health-gradient-2: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
|
||||
--health-gradient-3: linear-gradient(135deg, #059669 0%, #10b981 100%);
|
||||
--health-gradient-soft: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
|
||||
|
||||
/* 字体系统 */
|
||||
--font-primary: 'Plus Jakarta Sans', 'PingFang SC', -apple-system, sans-serif;
|
||||
--font-medical: 'Inter', 'Microsoft YaHei', sans-serif;
|
||||
|
||||
/* 间距 */
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.25rem;
|
||||
|
||||
/* 阴影 - 柔和绿色系 */
|
||||
--shadow-sm: 0 1px 3px rgba(16, 185, 129, 0.08);
|
||||
--shadow-md: 0 4px 6px rgba(16, 185, 129, 0.1);
|
||||
--shadow-lg: 0 10px 15px rgba(16, 185, 129, 0.12);
|
||||
--shadow-xl: 0 20px 25px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
/* 全局样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
color: var(--health-text-dark);
|
||||
background: var(--health-bg-light);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
color: var(--health-primary);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--health-gradient-1);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
color: var(--health-text-gray);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-menu a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--health-primary);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
color: var(--health-primary);
|
||||
}
|
||||
|
||||
.nav-menu a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.main-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 5rem 2rem 2rem;
|
||||
}
|
||||
|
||||
/* Hero区域 - 个人介绍 */
|
||||
.hero-section {
|
||||
background: var(--health-bg-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid var(--health-accent);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.hero-info h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--health-primary-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 1.25rem;
|
||||
color: var(--health-primary);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-badges {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.4rem 1rem;
|
||||
background: var(--health-gradient-soft);
|
||||
border: 1px solid var(--health-border);
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--health-primary-dark);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: var(--health-text-gray);
|
||||
}
|
||||
|
||||
/* 教育背景区域 */
|
||||
.education-section {
|
||||
background: var(--health-bg-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--health-border);
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: var(--health-gradient-1);
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--health-text-dark);
|
||||
}
|
||||
|
||||
.education-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.education-item {
|
||||
padding: 1.5rem;
|
||||
background: var(--health-bg-light);
|
||||
border-radius: var(--radius-md);
|
||||
border-left: 4px solid var(--health-primary);
|
||||
}
|
||||
|
||||
.education-degree {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--health-primary-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.education-school {
|
||||
font-size: 1rem;
|
||||
color: var(--health-text-gray);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.education-period {
|
||||
font-size: 0.9rem;
|
||||
color: var(--health-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 个人简介区域 */
|
||||
.about-section {
|
||||
background: var(--health-bg-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.9;
|
||||
color: var(--health-text-gray);
|
||||
padding: 1rem;
|
||||
background: var(--health-gradient-soft);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* 技能区域 */
|
||||
.skills-section {
|
||||
background: var(--health-bg-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.skills-category {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: var(--health-primary-dark);
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--health-gradient-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.skill-card {
|
||||
padding: 1.25rem;
|
||||
background: var(--health-bg-light);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--health-border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.skill-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--health-primary);
|
||||
}
|
||||
|
||||
.skill-number {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: var(--health-primary);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-weight: 600;
|
||||
margin-right: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-weight: 600;
|
||||
color: var(--health-text-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-description {
|
||||
font-size: 0.9rem;
|
||||
color: var(--health-text-gray);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 项目经验卡片 */
|
||||
.projects-section {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: var(--health-bg-white);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
padding: 1.5rem;
|
||||
background: var(--health-gradient-1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.project-company {
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.95;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.project-date {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.project-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
color: var(--health-text-gray);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.project-highlights {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.project-highlights li {
|
||||
padding: 0.5rem 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--health-text-gray);
|
||||
}
|
||||
|
||||
.highlight-icon {
|
||||
color: var(--health-primary);
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.project-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--health-border);
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
background: var(--health-bg-light);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--health-primary);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--health-text-gray);
|
||||
}
|
||||
|
||||
/* 数据可视化区域 */
|
||||
.visualization-section {
|
||||
background: var(--health-bg-white);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
padding: 1.25rem;
|
||||
background: var(--health-bg-light);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--health-border);
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--health-text-dark);
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 联系方式 */
|
||||
.contact-section {
|
||||
background: var(--health-gradient-3);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.contact-subtitle {
|
||||
font-size: 1rem;
|
||||
opacity: 0.95;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.contact-items {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 25px;
|
||||
backdrop-filter: blur(5px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.contact-value {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading-screen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--health-gradient-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 3rem;
|
||||
animation: pulse 1.5s infinite;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--health-primary);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.1); opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-info h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.contact-items {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 滚动条美化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--health-bg-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--health-primary);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--health-primary-dark);
|
||||
}
|
||||
2685
个人简历_大健康/index.html
Normal file
2685
个人简历_大健康/index.html
Normal file
File diff suppressed because it is too large
Load Diff
2621
个人简历_大健康/index_backup_20250129.html
Normal file
2621
个人简历_大健康/index_backup_20250129.html
Normal file
File diff suppressed because it is too large
Load Diff
2651
个人简历_大健康/index_backup_20250929_153530.html
Normal file
2651
个人简历_大健康/index_backup_20250929_153530.html
Normal file
File diff suppressed because it is too large
Load Diff
2685
个人简历_大健康/index_backup_20251027_104739.html
Normal file
2685
个人简历_大健康/index_backup_20251027_104739.html
Normal file
File diff suppressed because it is too large
Load Diff
16
个人简历_大健康/package.json
Normal file
16
个人简历_大健康/package.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "财经商贸个人简历",
|
||||
"version": "1.0.0",
|
||||
"description": "财经商贸项目作品集展示",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"dev": "nodemon server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.1"
|
||||
}
|
||||
}
|
||||
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/东阿阿胶品牌运营与网络营销项目-主图.jpg
Normal file
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/东阿阿胶品牌运营与网络营销项目-主图.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程一：品牌定位调研.jpeg
Normal file
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程一：品牌定位调研.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程三：活动传播落地.png
Normal file
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程三：活动传播落地.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程二：内容矩阵搭建.jpeg
Normal file
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程二：内容矩阵搭建.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程五：社群与私域管理.jpeg
Normal file
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程五：社群与私域管理.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程四：数据分析优化.jpeg
Normal file
BIN
个人简历_大健康/public/东阿阿胶品牌运营与网络营销项目/流程四：数据分析优化.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/定制化职场女性轻医美美肤方案-主图.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/定制化职场女性轻医美美肤方案-主图.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程一：客户需求评估.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程一：客户需求评估.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程七：投诉处理.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程七：投诉处理.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程三：预约与确认.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程三：预约与确认.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程二：美肤方案制定.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程二：美肤方案制定.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 833 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程五：术后跟进服务.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程五：术后跟进服务.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程六：客户关系维护.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程六：客户关系维护.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 KiB |
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程四：医美服务执行.jpg
Normal file
BIN
个人简历_大健康/public/定制化职场女性轻医美美肤方案/流程四：医美服务执行.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 KiB |
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/某产妇产后康复全流程项目-总图.jpg
Normal file
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/某产妇产后康复全流程项目-总图.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程一：基线评估.jpg
Normal file
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程一：基线评估.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程三：电刺激实施.jpg
Normal file
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程三：电刺激实施.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程二：处方制定.jpg
Normal file
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程二：处方制定.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程五：核心稳定训练.jpg
Normal file
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程五：核心稳定训练.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程六：结案评估.png
Normal file
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程六：结案评估.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 528 KiB |
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程四：居家进阶.jpg
Normal file
BIN
个人简历_大健康/public/某产妇产后康复全流程项目/流程四：居家进阶.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程一：急性期评估.jpg
Normal file
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程一：急性期评估.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程三：力量构建.jpg
Normal file
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程三：力量构建.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程二：肌肉激活.jpg
Normal file
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程二：肌肉激活.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程五：功能强化.jpg
Normal file
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程五：功能强化.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程六：回归评估.jpg
Normal file
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程六：回归评估.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程四：走跑过渡.jpg
Normal file
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/流程四：走跑过渡.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目-总图.jpg
Normal file
BIN
个人简历_大健康/public/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目/腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目-总图.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程一：原料药粉碎控制.jpeg
Normal file
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程一：原料药粉碎控制.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程三：颗粒干燥处理.jpeg
Normal file
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程三：颗粒干燥处理.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程二：湿法制粒成型.jpeg
Normal file
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程二：湿法制粒成型.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程五：胶囊充填作业.jpeg
Normal file
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程五：胶囊充填作业.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程六：成品包装密封.jpeg
Normal file
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程六：成品包装密封.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程四：辅料均匀混合.jpeg
Normal file
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/流程四：辅料均匀混合.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/阿莫西林胶囊制剂生产工艺优化项目-主图.jpeg
Normal file
BIN
个人简历_大健康/public/阿莫西林胶囊制剂生产工艺优化项目/阿莫西林胶囊制剂生产工艺优化项目-主图.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
19
个人简历_大健康/server.js
Normal file
19
个人简历_大健康/server.js
Normal file
@@ -0,0 +1,19 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
|
||||
const app = express();
|
||||
const PORT = 4004;
|
||||
|
||||
// 设置静态文件目录
|
||||
app.use(express.static('.'));
|
||||
|
||||
// 主路由
|
||||
app.get('/', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, 'index.html'));
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
app.listen(PORT, '127.0.0.1', () => {
|
||||
console.log(`财经商贸项目服务器运行在 http://127.0.0.1:${PORT}/`);
|
||||
console.log('按 Ctrl+C 停止服务器');
|
||||
});
|
||||
15
个人简历_大健康/start.sh
Executable file
15
个人简历_大健康/start.sh
Executable file
@@ -0,0 +1,15 @@
|
||||
#!/bin/bash
|
||||
# 局域网部署启动脚本
|
||||
|
||||
echo "======================================"
|
||||
echo " 财经商贸个人简历 - 局域网部署"
|
||||
echo "======================================"
|
||||
|
||||
# 检查Python3是否安装
|
||||
if ! command -v python3 &> /dev/null; then
|
||||
echo "❌ 未找到Python3，请先安装Python3"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 启动服务器
|
||||
python3 start_server.py
|
||||
96
个人简历_大健康/start_server.py
Executable file
96
个人简历_大健康/start_server.py
Executable file
@@ -0,0 +1,96 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
局域网服务器启动脚本
|
||||
用于在局域网内部署个人简历网站
|
||||
"""
|
||||
|
||||
import http.server
|
||||
import socketserver
|
||||
import socket
|
||||
import os
|
||||
import webbrowser
|
||||
from pathlib import Path
|
||||
|
||||
# 设置端口
|
||||
PORT = 8888
|
||||
|
||||
# 获取本机IP地址
|
||||
def get_local_ip():
|
||||
try:
|
||||
# 创建一个UDP socket
|
||||
s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
|
||||
# 连接到一个公共DNS服务器
|
||||
s.connect(("8.8.8.8", 80))
|
||||
local_ip = s.getsockname()[0]
|
||||
s.close()
|
||||
return local_ip
|
||||
except:
|
||||
return "127.0.0.1"
|
||||
|
||||
# 自定义请求处理器
|
||||
class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
|
||||
def end_headers(self):
|
||||
# 添加CORS头，允许跨域访问
|
||||
self.send_header('Access-Control-Allow-Origin', '*')
|
||||
self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
|
||||
self.send_header('Access-Control-Allow-Headers', 'Content-Type')
|
||||
# 添加缓存控制
|
||||
self.send_header('Cache-Control', 'no-cache, no-store, must-revalidate')
|
||||
super().end_headers()
|
||||
|
||||
def log_message(self, format, *args):
|
||||
# 自定义日志格式
|
||||
print(f"[访问] {self.client_address[0]} - {format % args}")
|
||||
|
||||
def start_server():
|
||||
# 切换到网站根目录
|
||||
web_dir = Path(__file__).parent
|
||||
os.chdir(web_dir)
|
||||
|
||||
# 获取本地IP
|
||||
local_ip = get_local_ip()
|
||||
|
||||
print("=" * 60)
|
||||
print("🚀 财经商贸个人简历网站服务器")
|
||||
print("=" * 60)
|
||||
print(f"✅ 服务器正在启动...")
|
||||
print(f"📁 网站目录: {web_dir}")
|
||||
print("-" * 60)
|
||||
|
||||
# 创建服务器
|
||||
with socketserver.TCPServer(("", PORT), MyHTTPRequestHandler) as httpd:
|
||||
httpd.allow_reuse_address = True
|
||||
|
||||
print(f"✨ 服务器启动成功！")
|
||||
print("-" * 60)
|
||||
print(f"🌐 访问地址:")
|
||||
print(f" 本机访问: http://localhost:{PORT}")
|
||||
print(f" 局域网访问: http://{local_ip}:{PORT}")
|
||||
print("-" * 60)
|
||||
print(f"📱 手机扫码访问:")
|
||||
print(f" 请确保手机与电脑在同一WiFi网络")
|
||||
print(f" 在手机浏览器输入: http://{local_ip}:{PORT}")
|
||||
print("-" * 60)
|
||||
print(f"⌨️ 按 Ctrl+C 停止服务器")
|
||||
print("=" * 60)
|
||||
print("\n📝 访问日志:")
|
||||
|
||||
# 自动在浏览器中打开
|
||||
try:
|
||||
webbrowser.open(f'http://localhost:{PORT}')
|
||||
except:
|
||||
pass
|
||||
|
||||
try:
|
||||
# 启动服务器
|
||||
httpd.serve_forever()
|
||||
except KeyboardInterrupt:
|
||||
print("\n\n🛑 服务器已停止")
|
||||
httpd.shutdown()
|
||||
|
||||
if __name__ == "__main__":
|
||||
try:
|
||||
start_server()
|
||||
except Exception as e:
|
||||
print(f"❌ 启动失败: {e}")
|
||||
print("💡 提示: 请检查端口8888是否被占用")
|
||||
35
个人简历_大健康/个人简历.md
Normal file
35
个人简历_大健康/个人简历.md
Normal file
@@ -0,0 +1,35 @@
|
||||
何泽
|
||||
|
||||
南阳医学高等专科学校 - 药品生产技术
|
||||
|
||||
2018.9-2021.6
|
||||
|
||||
|
||||
# 二、专业技能
|
||||
|
||||
### （一）核心能力
|
||||
|
||||
1. 熟悉健康管理信息化工具与常用监测设备，能在居民电子健康档案/健康管理系统中完成评估表、干预方案与随访记录的规范录入与查询，配合Excel进行体重、腰围、血压等关键指标的趋势分析，并能正确使用血压计、血糖仪、体脂秤等家用设备实现数据留痕与可追溯。
|
||||
2. 具备“评估—干预—随访—再评估”的项目化实践思路，能依据首诊问诊与基础指标为客户设定阶段性健康目标，结合5A/5R等行为改变框架开展饮食、运动与睡眠等生活方式干预，按周月复盘依从性与结局指标，并在达不到目标时迭代计划以保证方案持续有效。
|
||||
3. 具备健康状况监测与动态评估能力，熟悉体重、BMI、腰围/臀围、血压、血糖等核心指标的判定口径，能够在随访中依据最新中国成人体重与肥胖诊疗标准识别超重/肥胖风险，及时调整能量摄入与活动量，形成“指标—措施—复测”的闭环管理。
|
||||
4. 具备可穿戴与家用医疗设备的数据对接经验，能完成蓝牙血压计、血糖仪、体脂秤与手环的绑定、时间同步与校准，按需设置采集频率与异常阈值；掌握CSV/Excel批量导入与异常日志核对方法，并将设备数据与个体档案关联用于趋势评估。
|
||||
5. 熟悉医疗影像/检验结果的系统化查阅流程，能在PACS/LIS中调取必要报告用于健康评估与转介参考（不做诊断），按规范摘录关键指标并同步到健康档案；对报告更新设置订阅/提醒，保证随访计划与最新结果保持一致。
|
||||
6. 具备知识沉淀与版本留痕的文档管理能力，能用 Notion/Confluence/石墨文档规范化沉淀评估模板、随访SOP与话术库；结合 OneDrive/企业网盘开启版本历史与权限分级，记录变更日志与责任人，建立“模板—使用—复盘—迭代”的持续改进闭环。
|
||||
7. 熟悉 CRM/工单与信息留痕工具，如 HubSpot/飞书CRM/企业微信SCRM 建立客户标签、回访任务与SLA时限，统一电话/IM沟通记录与附件归档；定期生成客户分层、触达响应与满意度报表，提高跟进效率与服务一致性。
|
||||
|
||||
### （二）复合能力
|
||||
|
||||
1. 医疗服务与健康管理常识：了解我我国医疗体系的基本结构与服务流程，了解常见疾病的诊断路径、健康指标的解读方式（如BMI、血压、体检指标等），具备慢病管理、健康干预及医患沟通的基础能力。
|
||||
2. 患者安全意识：了解生命体征监测、口服给药、基础感染控制、伤口处理等护理技能基础，理解护理伦理、患者沟通与人文关怀的基本原则。
|
||||
3. 药品生命周期与法规体系理解：熟悉药品从研发、注册到生产、上市后的全生命周期管理要求，了解GLP/GCP/GMP/GSP等法规核心要点，具备基础的法规合规意识与行业审慎思维。
|
||||
4. 质量控制认知与iso体系：了解药品、保健品等在研发、生产与流通全流程中的质量控制关键节点，掌握GMP、ISO9001、ISO22000等主流质量体系的基本要求与执行标准，具备样品留存、检测流程、偏差处理与验证方法等实务知识，具备生产端质量意识。
|
||||
5. 医药检测分析技能基础：具备分析天平、pH计、电导率仪、UV-Vis分光度计、TLC、HPLC等基础仪器操作知识，理解药品检验关键指标及其与质量控制的关系。
|
||||
6. 基础制药工艺：了解片剂、胶囊、注射剂等主要剂型生产工艺流程，掌握常见制粒、压片、灭菌、冻干等关键环节的基本原理与控制方法。
|
||||
7. 企业管理信息系统基础：了解MES、ERP、SCM等医药制造企业常用的智能系统架构与功能逻辑，掌握药品生产环节的信息追溯、质量管理与物料调度等数字化管理思路，具备从工艺流程到数据系统的跨环节理解能力。
|
||||
8. 药品流通与经营体系认知：了解药品从原料采购、研发注册到生产流通的完整产业链结构，掌握原料药（API）、辅料、中间体等基础概念及作用，熟悉MAH制度、GLP/GMP/GSP等关键监管要求，初步了解药品批发、零售、电商流通等经营路径，理解互联网销售相关法规，具备基本的医药商业意识。
|
||||
9. 医疗人工智能与数据技术基础认知：具备医疗人工智能的基础认知，了解AI在医学影像分析、药物筛选、临床问诊与智慧养老等典型场景中的实际应用，理解生成式AI和机器学习的基本原理，具备医疗行业的数据技术适应能力。
|
||||
10. 药品营销能力：掌握产品经理视角下的客户需求识别、药品推广策略、患者教育与沟通技巧，具备基本的医药产品营销素养。
|
||||
|
||||
# 三、个人评价
|
||||
|
||||
在健康管理实习中，我能够规范使用健康管理系统与监测设备，采集和分析体重、血压、血糖等核心指标，确保数据准确与可追溯。通过参与“评估—干预—随访—再评估”的闭环流程，我逐步掌握了基于5A/5R框架的行为干预方法，能够在饮食、运动与睡眠管理中形成实践经验。同时，我具备可穿戴设备与PACS/LIS系统的数据操作能力，能够对接健康档案并进行趋势监控。在知识沉淀与客户管理中，我熟练使用文档协作与CRM工具，提升服务一致性与客户跟进效率。具备责任心与改进意识，能够在健康管理与心血管风险干预场景中展现出较强的岗位潜力。
|
||||
BIN
个人简历_大健康/何泽.png
Normal file
BIN
个人简历_大健康/何泽.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 816 KiB |
78
个人简历_大健康/局域网访问说明.md
Normal file
78
个人简历_大健康/局域网访问说明.md
Normal file
@@ -0,0 +1,78 @@
|
||||
# 财经商贸个人简历 - 局域网访问指南
|
||||
|
||||
## 🚀 快速启动
|
||||
|
||||
### 方法一：使用Python启动脚本
|
||||
```bash
|
||||
python3 start_server.py
|
||||
```
|
||||
|
||||
### 方法二：使用Shell脚本
|
||||
```bash
|
||||
./start.sh
|
||||
```
|
||||
|
||||
### 方法三：直接使用Python HTTP服务器
|
||||
```bash
|
||||
python3 -m http.server 8888
|
||||
```
|
||||
|
||||
## 🌐 访问地址
|
||||
|
||||
服务器启动后，可通过以下方式访问：
|
||||
|
||||
- **本机访问**: http://localhost:8888
|
||||
- **局域网访问**: http://[你的IP地址]:8888
|
||||
|
||||
## 📱 手机访问
|
||||
|
||||
1. 确保手机和电脑连接同一个WiFi网络
|
||||
2. 在手机浏览器输入：http://[电脑IP地址]:8888
|
||||
3. 即可查看简历网站
|
||||
|
||||
## 🔍 查看本机IP地址
|
||||
|
||||
### macOS/Linux:
|
||||
```bash
|
||||
ifconfig | grep "inet " | grep -v 127.0.0.1
|
||||
```
|
||||
|
||||
### Windows:
|
||||
```cmd
|
||||
ipconfig
|
||||
```
|
||||
|
||||
## ⚙️ 端口配置
|
||||
|
||||
默认端口：8888
|
||||
|
||||
如需更改端口，修改命令中的端口号：
|
||||
```bash
|
||||
python3 -m http.server [新端口号]
|
||||
```
|
||||
|
||||
## 🛑 停止服务器
|
||||
|
||||
按 `Ctrl + C` 停止服务器
|
||||
|
||||
## 📌 注意事项
|
||||
|
||||
1. 确保防火墙允许8888端口的访问
|
||||
2. 仅限局域网内访问，不会暴露到公网
|
||||
3. 关闭终端窗口会停止服务器
|
||||
|
||||
## 🎯 功能特性
|
||||
|
||||
- ✨ 扑克牌式项目展示效果
|
||||
- 📱 响应式设计，支持移动端
|
||||
- 🎨 精美的视觉效果和动画
|
||||
- 📊 详细的项目案例展示
|
||||
- 💼 专业的财经商贸背景
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
如遇到问题，请检查：
|
||||
1. Python3是否已安装
|
||||
2. 端口是否被占用
|
||||
3. 防火墙设置
|
||||
4. 网络连接状态
|
||||
401
个人简历_大健康/项目案例.md
Normal file
401
个人简历_大健康/项目案例.md
Normal file
@@ -0,0 +1,401 @@
|
||||
项目名称：某产妇产后康复全流程项目
|
||||
|
||||
项目描述：本项目聚焦产后女性盆底功能恢复与腰骶痛缓解，依托“院内治疗—居家巩固—随访复评”的闭环路径，按肌激活、耐力构建、核心整合、巩固维持四阶段推进。以量化指标为牵引，结合电刺激、生物反馈、凯格尔进阶、核心稳定课程与情境压力测试，持续校正代偿，提升收缩质量与日常控制力。26周干预后，肌力、耐力、结构与症状同步改善，漏尿与疼痛清零，帮助产妇安全回归通勤、家务、轻运动等日常功能场景，形成可复制的标准化服务范式。
|
||||
|
||||
实习时间：2024.03~2024.12
|
||||
|
||||
实习岗位：产后康复师
|
||||
|
||||
实习企业：广州南大菲特医疗健康科技有限公司
|
||||
|
||||
### 岗位职责：
|
||||
|
||||
1. 参与产后随访节点的基线评估与风险分级，依据量表与体征完成初步评估记录，作为个性化处方制定依据；
|
||||
2. 在标准化路径下协助制定“门诊治疗＋居家训练＋团体课程”的阶段性康复计划，并维护调整记录；
|
||||
3. 在治疗师指导下实施电刺激、生物反馈与基础手法训练的入门操作，示教规范动作与呼吸配合；
|
||||
4. 指导居家训练要点与注意事项，定期回收训练日志与视频，按反馈对计划做小步迭代；
|
||||
5. 组织核心稳定与功能性训练的小组课与个训配合，关注体态与日常功能恢复；
|
||||
6. 协助巩固阶段与结案评估，整理阶段性评估对比与后续维持建议；
|
||||
7. 与产妇及家属保持沟通与健康宣教，提升依从性与训练安全；
|
||||
8. 维护电子病历、评估表、训练处方、随访与不良反应记录，完成资料归档。
|
||||
|
||||
### 流程一：基线评估
|
||||
|
||||
流程描述：以产后42天为首诊窗口，完成力量、耐力、结构、症状四维量化，统一量表与设备口径，建立可追溯基线并进行风险分级。结合漏尿频次、VAS与牛津分级确定训练上限与禁忌，明确8/12/26周目标与转段阈值。同步完成健康宣教与家庭作业布置，提供日志模板与复评时间表，确保从首周起形成“评估—处方—随访”的执行闭环。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 数据采集：在导师监督下按标准流程采集持续收缩压、持续时间、超声厚度、牛津分级与症状自评，排除屏气、夹臀等代偿，确保同口径记录进入EMR，作为处方依据与转段判定底稿。
|
||||
2. 风险分级：依据肌力等级与漏尿频次判定中高风险，列出禁忌动作与退出准则，设置疼痛与疲劳阈值，向患者解释原因与目的，降低早期过载或情绪焦虑导致的依从性波动。
|
||||
3. 目标设定：对齐日常角色需求，将8/12/26周目标写入随访单，区分“有效变化阈值”与“达标标准”，便于后续复评比对与路径回退或加速决策。
|
||||
4. 宣教布置：示教正确呼吸节律与体感辨识，发放居家要点清单与视频拍摄规范，明确每周提交频次，提升日志质量与远程抽查有效性。
|
||||
|
||||
### 流程二：处方制定
|
||||
|
||||
流程描述：基于标准化方案进行个体化微调，构建“门诊治疗—居家训练—团体课程”三轨路径，分为激活、耐力、整合、巩固四阶段。为每阶段定义频次、时长、强度与质量门槛，明确进退级规则与协作接口。通过周度对账核对日志与门诊记录，必要时开启1:1技术纠正，避免错误模式固化，保证处方既安全又具足够剂量。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 分期编排：将1–4周确定为激活阶段，5–12周为耐力阶段，13–20周为整合阶段，21–26周为巩固阶段；为每阶段匹配设备参数、组数与情境任务，写入处方卡便于患者执行与追踪。
|
||||
2. 参数微调：参考主观用力感与疲劳度，每次门诊后微调脉宽、频率、组间休息与收缩比值；对高敏感个体降低强度延长周期，平衡效果与舒适度。
|
||||
3. 协同落地：按周核对PT记录、医师意见与患者日志，发现代偿或疼痛即触发纠偏流程；必要时加开个训课次，确保质量先于数量。
|
||||
4. 过程留痕：将处方变更、异常事件与纠偏结果同步EMR，形成“决定—执行—复评”的链路证据，支撑后续回顾与方案优化。
|
||||
|
||||
### 流程三：电刺激实施
|
||||
|
||||
流程描述：在激活阶段以低强度电刺激提升纤维募集，配合生物反馈建立“感觉—动作—视觉”回路，统一用力节奏与呼吸策略，快速纠正错误模式。采用每周三次门诊频次，根据耐受逐次调强，确保舒适前提下达到有效阈值，为耐力构建与情境迁移奠定神经肌肉控制基础。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 处方执行：按设备规范设置脉宽200–400µs、频率15–50Hz、单次20min，结合10min反馈训练；记录即刻主观感受与疲劳级别，为下次参数调整提供依据。
|
||||
2. 代偿纠正：通过实时曲线提示识别夹臀、耸肩、腹压冲顶等问题，采用口令与触觉提示校正节律与幅度，确保形成可迁移的基础收缩模式。
|
||||
3. 依从管理：治疗后复盘动作质量与家庭作业完成度，标记常见错误并拍摄要点短视频回传，提升患者在家时的模仿准确度。
|
||||
4. 风险控制：设置不适报警阈值与停机标准，出现刺痛或延迟痛时及时降档或暂停，并向上汇报以评估是否延长激活周期。
|
||||
|
||||
### 流程四：居家进阶
|
||||
|
||||
流程描述：在耐力阶段采用“时间—强度—情境”三维进阶，先确保动作质量，再增加收缩持续时间与组数，随后引入轻量负荷及日常高腹压场景。通过App打卡、视频抽查与周度远程随访，及时发现代偿并回炉纠偏，确保从“床边能做”过渡到“生活能控”，兼顾训练剂量与安全边界。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 负荷渐进：结合阴道哑铃20g起步逐级至60g，在无疼痛、无漏尿、无代偿前提下进阶；慢缩与快缩交替，强调放松同等重要，避免高张疲劳。
|
||||
2. 情境融合：围绕提重物、咳嗽、抱婴等场景训练“预收缩”策略，使用情境提示卡帮助患者在关键瞬间先收缩再发力，降低突发腹压导致的渗漏。
|
||||
3. 质量抽查：每周抽查日志与短视频，按要点清单逐条反馈；发现问题即预约门诊纠偏，防止错误模式固化影响后续整合期。
|
||||
4. 异常处理：一旦出现不适或症状反跳，立即降低负荷或暂停负重，回到体感训练与反馈强化一周后再评估进阶条件。
|
||||
|
||||
### 流程五：核心稳定训练
|
||||
|
||||
流程描述：在整合阶段强调盆底—腹横肌—膈肌—多裂肌的压力管理协同，通过死虫式、桥式、侧桥及变式在不同体位与支撑面加载，训练抗伸展与抗旋转控制，恢复腰盆稳定与步态质量。以团体课为主、个训补强为辅，逐步加入动态负荷与多任务情境，提升在通勤、家务、轻运动中的稳定输出能力。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 动作处方：按低位到高位递进配置保持时间与重复次数，强调盆底先行收缩与呼吸节律配合；对进展慢者拆分动作阶段，保障质量优先。
|
||||
2. 负荷管理：通过弹力带与自重阻力微调强度，出现疼痛或疲劳即降级或延长休息；用RPE主观量表辅助控制训练剂量。
|
||||
3. 课堂纠偏：团体课中使用口令、触觉与镜像反馈统一动作语言；对问题集中学员安排1:1短时纠偏，避免集体节奏牵引下的错误放大。
|
||||
4. 中期复评：完成12周复查，记录持续收缩压、持续时间、牛津分级与症状转归；达标者进入巩固期，未达标者保留部分激活内容延长整合周期。
|
||||
|
||||
### 流程六：结案评估
|
||||
|
||||
流程描述：在巩固阶段完成力量与协调强化后，进入情境压力测试与复发预防；以客观指标、主观功能与情境测试三维判定疗效，未达标者安排2–4周专项补强。出院前发放12周维持处方与异常预警阈值，约定复查节点，确保长期稳定。通过EMR形成“指标—结果—建议”闭环，为后续同类个案提供可复用路径。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 巩固执行：每日完成巩固组（自重深蹲、弹力带抗阻等）并维持电刺激每周一次；记录体感与疲劳，防止强度过冲导致功能回退。
|
||||
2. 压力测试：在快走、上下楼、抱婴等情境下验证“先收缩再发力”策略，必要时提供友好替代动作清单，确保真实生活场景下的稳定性。
|
||||
3. 终末复评：对比基线与阶段数据，确认持续收缩压、持续时间、结构厚度与症状清零是否同步达标；不达标则出具补强方案与复评时间表。
|
||||
4. 维持计划：发放每周≥3次、每次10–15min的维持处方与自我监测表，设定异常预警条件（新发漏尿或疼痛），提示及时回院评估与调整。
|
||||
项目名称：腓肠肌（小腿肚）Ⅱ级拉伤运动康复项目
|
||||
|
||||
项目描述：本项目聚焦运动员及大众人群在腓肠肌Ⅱ级拉伤后的系统康复路径，覆盖急性期保护、亚急性激活、中期力量构建、走跑过渡、功能强化及回归评估全过程。通过循证的 PEACE & LOVE 原则进行早期控痛控肿，再逐步引入等长、离心与弹性训练，结合主观痛感、功能量表与影像学指标实现阶段性进阶。项目以“疼痛阈值—动作质量—翌日反应”为核心监控体系，确保负荷递增与组织修复同步，最终在客观指标（单腿提踵 ≥25 次@60 bpm、LSI ≥90%、步态/足底压力对称）与主观功能（5 km 慢跑耐受）达标后，完成运动回归与复发预防。
|
||||
|
||||
实习时间：2024.03~2024.12
|
||||
|
||||
实习岗位：康复训练师
|
||||
|
||||
实习企业：沈阳晟合健康咨询有限公司
|
||||
|
||||
岗位职责：
|
||||
|
||||
1. 在急性期（伤后24–72小时）协助评估疼痛、肌力与功能状态，完成红旗筛查与早期保护干预，确保患者在安全鞋氧范围开展踝泵等低强度血管性活动，促进无代偿步态恢复。
|
||||
2. 协助制定并监督进行等长与短弧肌激活训练方案，对训练剂量、疼痛阈值及翌日反应进行记录与调整，优化肌纤维启动与代谢耐受能力。
|
||||
3. 在中期康复中，根据训练日志协助指导患者开展跖屈力量与耐力训练（如弹力带跖屈、台阶提踵等），确保动作质量与左右对称性，并逐步引入离心控制练习。
|
||||
4. 按照“走—跑间歇＋低量弹性训练”策略协助执行走跑过渡训练，并完成单腿提踵 ≥25 次（60 bpm）、步态对称性等客观门槛检测，确保功能性回归质量。
|
||||
5. 支持功能整合训练阶段，协助开展跑步机慢跑、坡度冲刺及核心—髋—踝力链耦合练习，关注培训技术质量、心率响应与翌日疲劳反应，实现稳健逐步承载增强。
|
||||
6. 负责训练数据的系统性记录与跟踪，包括VAS评分、单腿提踵次数、肌围差等指标，确保训练进程与疗效的可追踪性与可评价性。
|
||||
7. 结合项目急性期管理与后期训练进展，协助进行患者教育，普及红旗体征、疼痛管理与负荷渐进原则，提升患者自我监控与防复发能力。
|
||||
8. 配合主治医师与运动康复专家，参与定期案例讨论，提供训练观察意见与患者反应反馈，参与方案微调提升康复质量。
|
||||
|
||||
### 流程一：急性期评估
|
||||
|
||||
流程描述：在受伤后 24–72 小时内进行初诊，完成疼痛、肌力、关节活动度与步态等系统评估，统一量表与检测口径建立三维基线。参照处理原则实施保护、加压、抬高和用户教育，排查红旗风险如血栓与严重撕裂，明确首周负荷边界。目标是“控痛控肿+无代偿步行”，为后续阶段设定进阶最低门槛。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 基线检测：完成疼痛评分（VAS 7/10）、单腿提踵次数（伤侧 0 次 vs 健侧 25 次）、小腿围差（-3.6 cm）、等长力矩差（-37 Nm），并采集影像学证据确诊腓肠肌Ⅱ级撕裂。
|
||||
2. 症状管理：采用保护、抬高、加压、患者教育等策略避免早期强牵拉与高负荷，允许在低痛范围内进行踝泵等血管性轻活动，保持循环与基础神经输入。
|
||||
3. 红旗筛查：结合临床表现排查“啪响伴大片瘀斑、进行性肿胀、静息痛加剧、DVT 征象”等情况，必要时立即转诊进一步影像和血液学检测。
|
||||
4. 阶段门槛：设定进入下一阶段标准：疼痛≤3/10、步态接近对称、可完成 10 分钟无痛步行；若不达标则延长保护期并复评。
|
||||
|
||||
### 流程二：肌肉激活
|
||||
|
||||
流程描述：当疼痛与肿胀控制后进入激活阶段，重点是恢复肌纤维募集与早期代谢耐受。训练以等长收缩、短弧跖屈、舒适拉伸为主，配合低频电刺激。所有训练遵循“剂量可视化+翌日反应校验”，确保负荷递增不超过组织修复速度。目标是在安全区间逐步恢复基础收缩与肌肉控制，为力量构建阶段做准备。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 电刺激与体感训练：采用低频电刺激（20 min/次）配合踝泵（约 100 次/日）与轻量跖屈收缩，帮助建立神经肌肉通路，改善循环并恢复早期感觉输入。
|
||||
2. 训练日志：指导患者记录每日训练次数、疼痛等级和疲劳度，用于下一次门诊时的参数微调，实现“数据—反应—调整”闭环。
|
||||
3. 动作质量把控：在门诊监督下检查是否存在耸肩、屏气或髋关节代偿，若发现立即纠正，保证每次训练动作的纯净度与有效性。
|
||||
4. 进阶判定：患者能在轻度辅助下完成单腿提踵 ≥5–8 次，且翌日无肿胀或反跳痛，方可进入下一阶段。
|
||||
|
||||
### 流程三：力量构建
|
||||
|
||||
流程描述：在中期以跖屈肌群的力量、耐力和离心控制提升为核心，逐渐引入弹力带抗阻、台阶提踵与单腿硬拉等动作。强调“质量先于数量”，通过每周 2 次门诊+2 次居家模式，稳步缩小双侧差异。所有负荷递增均需结合主观用力感与翌日反应判定，避免因过载导致组织再次受损。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 处方设计：安排弹力带跖屈/背屈 4×15、台阶提踵分膝伸/膝屈各 3×12、单腿硬拉 3×12，逐周微增阻力与容量，确保动作不代偿。
|
||||
2. 离心引入：在可耐受范围逐步加入低量离心训练（下放缓慢、上举可辅助），提高肌腱—肌腱交界区的变形容忍，减少再伤风险。
|
||||
3. 训练结构：采用“技术纠正—负荷巩固”周期模式，门诊强调技术质量，居家巩固强度，形成互补闭环。
|
||||
4. 通过标准：能稳定完成单腿提踵 ≥15–20 次、30 分钟快走无不适、疼痛 ≤3/10，即可进入走跑过渡阶段。
|
||||
|
||||
### 流程四：走跑过渡
|
||||
|
||||
流程描述：当力量与耐力达到初步标准后，进入走跑过渡期。此阶段以间歇走跑和低量弹性训练为核心，重建地面反作用力管理与快速收缩能力。所有训练都以“无痛—无跛行—翌日无反跳”为前提，逐步延长跑步时间并引入基础跳跃，帮助患者平稳过渡到慢跑。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 间歇设计：制定走跑交替方案，从 1:1 逐步增加到 3:1，重点控制步频与着地策略，避免技术质量下降。
|
||||
2. 弹性引入：安排低量跳跃、跳绳和小范围切步，观察落地对称性与节律稳定性，杜绝过早进入高强度弹跳。
|
||||
3. 监测反馈：利用训练日志与患者口述记录“跑后感受与翌日反应”，发现肿胀或疼痛立即降级，确保进程安全。
|
||||
4. 通过标准：单腿提踵 ≥25 次、单脚跳 ≥10 次无痛、力量差 <10%，满足条件方可进入功能强化阶段。
|
||||
|
||||
### 流程五：功能强化
|
||||
|
||||
流程描述：在具备基本慢跑与弹性能力后，重点转向髋膝踝力链整合与全身功能协调。训练形式包括坡度冲刺、核心抗旋与抗伸展练习、桥式与侧桥变式。目标是确保患者在多任务情境下保持动作质量，逐步过渡到持续慢跑和日常运动的稳定承载。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 动作整合：设计跑步机倒走、坡道冲刺与核心稳定练习，提升下肢与核心的协同发力，减少代偿与过度负荷集中。
|
||||
2. 强度控制：采用“容量先行、强度递增”的模式，按周微调坡度、距离与组数，保证训练节律稳定。
|
||||
3. 进度监控：结合心率曲线与主观负荷（RPE）进行评估，若出现夜间痛或疲劳感持续，则立即减量并复查。
|
||||
4. 阶段目标：达到无痛完成 5 km 慢跑，步态与足底压力保持对称，满足进入最终评估的条件。
|
||||
|
||||
### 流程六：回归评估
|
||||
|
||||
流程描述：在康复末期通过“力量对称性—步态/压力对称—影像复核”的三重验证，判断是否达到安全回归运动的门槛。结合功能量表与实际慢跑表现，确保组织修复与运动能力恢复保持一致。完成后给予维持处方与复发预防方案，支持长期稳定。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 客观复测：进行等速肌力测试，确认 LSI ≥90%，结合单腿提踵节律化（≥25 次@60 bpm）与步态分析保证对称性。
|
||||
2. 足底压力评估：利用压力垫测试足跟—跖骨压力差，确保峰值差 <5%，动作对称且无异常偏移。
|
||||
3. 影像确认：安排超声检查，验证腓肠肌纤维连续性与厚度对称，为最终康复结案提供影像学支撑。
|
||||
4. 维持方案：发放每周小腿力量训练≥2 次、低量弹性训练≥1 次的处方，并设定“疼痛、肿胀、跛行”三类预警条件，出现即暂停训练并复评。
|
||||
项目名称：东阿阿胶品牌运营与网络营销项目
|
||||
|
||||
项目描述：本项目聚焦大健康产业的品牌数字化运营，结合东阿阿胶“滋补养生”的传统文化属性与现代健康消费需求，构建覆盖抖音、小红书、微博和视频号的内容矩阵。通过数据驱动选题策划、用户行为分析与精准广告投放，提升目标人群的品牌认知度和好感度。项目特别关注65岁以上老年人及其子女群体，采用“价值内容+体验活动+私域转化”的全链路模式，形成品牌传播闭环。在此过程中，团队建立了标准化的内容复盘机制与用户画像库，实现了粉丝数稳步增长、互动率提升和用户复购率上升，增强了东阿阿胶在大健康赛道的品牌竞争力。
|
||||
|
||||
实习时间：2024.03~2024.12
|
||||
|
||||
实习岗位：品牌运营专员
|
||||
|
||||
实习企业：珠海麦香工坊食品有限公司
|
||||
|
||||
### 岗位职责：
|
||||
|
||||
1. 协助完成品牌数字化传播与素材制作，熟练使用PS/AI和剪映/CapCut完成视觉物料、短视频快剪与字幕配音，保障内容交付的时效性与一致性。
|
||||
2. 参与多平台内容运营，结合后台数据进行选题策划、脚本撰写与日常发布，跟进评论和私信互动，提升粉丝活跃度与留存率。
|
||||
3. 支持品牌传播闭环任务，执行从活动主题策划到素材准备、发布执行与复盘总结的全链路，输出可复用的标准化流程。
|
||||
4. 协助制定季度传播计划和内容栏目规划，结合品牌定位与竞品动态，沉淀内容库和监测表，为长期运营提供数据支撑。
|
||||
5. 进行社交媒体数据分析，基于Excel完成曝光、点击、完播等指标复盘，提出节奏与封面优化建议，提升内容投放效果。
|
||||
6. 协助达人/KOL合作与社群日历维护，跟进发布排期与效果追踪，推动公域曝光到私域转化的闭环。
|
||||
|
||||
### 流程一：品牌定位调研
|
||||
|
||||
流程描述：在项目初期，重点完成对目标人群的健康消费需求与品牌竞争力的系统调研。通过线上问卷、电话访谈和社交平台评论分析，获取一手用户行为与偏好数据，并结合《中国健康消费趋势白皮书》等行业报告，构建多维度用户画像。在此基础上，完成竞品的定性与定量对比，为东阿阿胶在健康滋补品赛道的差异化定位提供决策依据。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 消费需求收集：设计并发布线上问卷，回收超过500份有效样本；结合社交平台关键词抓取，提炼“免疫力提升”“慢性病调理”等高频需求点，形成需求分析报告。
|
||||
2. 竞品监测整理：通过巨量算数与新榜平台追踪竞品的广告投放与热搜话题，归纳核心打法并转化为竞品矩阵表，支持内部定位研讨。
|
||||
3. 用户画像建模：基于SPSS与Excel完成数据清洗与分层，建立“高消费能力中青年”“健康意识增强型老年人”“子女代购型”三类人群模型。
|
||||
4. 市场趋势分析：结合统计年鉴和第三方研究数据，输出老龄化率增长与健康品市场规模预测，绘制折线与柱状图，为品牌中长期战略提供参考。
|
||||
|
||||
### 流程二：内容矩阵搭建
|
||||
|
||||
流程描述：围绕多平台运营目标，构建覆盖抖音、小红书、微博和视频号的内容矩阵。不同平台采用差异化内容策略，如抖音偏向短视频快节奏表达，小红书偏向长图笔记与生活方式分享，微博注重话题热点带动。通过建立选题池和标签库，确保内容生产稳定高效，并结合平台反馈实时优化文案和视觉形式。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 选题策划执行：结合健康消费趋势和节气热点，每月形成20+选题库，涵盖健康知识科普、品牌文化故事和用户见证案例，保障内容多样化。
|
||||
2. 视觉物料制作：使用PS/AI完成长图、KV与静态海报设计，结合CapCut实现视频快剪和字幕标准化，保证输出符合平台视觉逻辑。
|
||||
3. 数据驱动优化：跟踪视频播放完播率与用户互动率，将低于行业均值的内容单独复盘，形成改进建议并优化后续选题。
|
||||
4. 互动维护：每日监控评论区与私信，输出用户FAQ清单，建立标准化回复模板，减少重复劳动并提升用户体验。
|
||||
|
||||
### 流程三：活动传播落地
|
||||
|
||||
流程描述：围绕“养生节”“健康中国日”等节点策划并执行整合传播活动。活动包括达人挑战赛、品牌直播和话题互动，覆盖公域与私域触点，形成从曝光到转化的完整路径。团队需在活动前明确物料需求、KOL合作范围和传播排期，活动后进行全面复盘，沉淀经验以优化下轮执行。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 传播方案执行：参与制定活动执行清单，涵盖主题确认、时间排期、物料审核和发布节奏，确保所有环节可控。
|
||||
2. 达人对接管理：筛选并对接10+健康养生类KOL，核对合作脚本与视频排期，保证内容符合品牌调性。
|
||||
3. 直播执行支持：在品牌直播中协助后台操作，包括商品上架、抽奖互动及留言收集，活动期间实时记录数据与问题点。
|
||||
4. 活动复盘分析：使用Excel完成曝光量、点击率与转化率数据对比，绘制图表并输出复盘PPT，供团队复盘与汇报使用。
|
||||
|
||||
### 流程四：数据分析优化
|
||||
|
||||
流程描述：项目进入稳定期后，重点通过数据指标分析实现持续优化。以曝光、点击、完播、转化为四个核心指标，建立监控看板，识别不同平台与不同题材的内容差异。结合用户反馈，迭代内容策略，沉淀长期可复用的内容库与标准化复盘模板，提高团队整体运营效率。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 多维度数据整理：定期导出平台后台数据，构建内容表现矩阵，标注“高效选题”和“低效题材”，为后续选题提供参考。
|
||||
2. 选题池建设：将高效题材沉淀为标签库，如“滋补日常”“节气养生”，逐步扩展为50+选题池，提高选题效率。
|
||||
3. 指标优化建议：针对低完播率视频，提出在前3秒加入强记忆点、在字幕中突出卖点的优化方案，形成标准化改进清单。
|
||||
4. 成果沉淀复盘：编制月度复盘报告，输出关键数据走势、问题清单与优化措施，支持季度传播计划与资源分配。
|
||||
|
||||
### 流程五：社群与私域管理
|
||||
|
||||
流程描述：为提升用户忠诚度与复购率，项目搭建社群与私域流量池，形成“公域种草—私域转化—复购维护”的闭环。通过社群活动、专属日历和KOL/KOC合作，增强用户互动粘性，并将高潜用户沉淀为长期会员群体。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 社群活动执行：协助制定社群运营日历，设计健康打卡、知识问答等活动，提升群成员活跃度。
|
||||
2. KOL/KOC合作：参与达人筛选与合作文案审核，确保内容合法合规且贴合品牌调性。
|
||||
3. 转化效果跟进：监控私域投放链接的点击和下单转化率，记录达成情况并进行复盘分析。
|
||||
项目名称：定制化职场女性轻医美美肤方案
|
||||
|
||||
项目描述：本项目聚焦职场女性在长期工作压力与环境影响下的肤质问题，目标是通过系统化的轻医美方案提升客户的皮肤健康与形象自信。项目涵盖需求收集、个性化治疗方案设计、预约与确认、治疗执行、术后跟进、关系维护与投诉处理等环节。通过应用Visia皮肤检测、M22超光子嫩肤与瑞蓝唯瑅水光注射等技术，确保方案科学、安全、有效。该项目在提升客户肤质的同时，也强化了医美咨询师与医生协同的服务模式，实现了客户满意度与机构口碑的双重提升。
|
||||
|
||||
实习时间：2024.03~2024.12
|
||||
|
||||
实习岗位：医美咨询师
|
||||
|
||||
实习企业：济南莎蔓莉莎管理咨询有限公司
|
||||
|
||||
### 岗位职责：
|
||||
|
||||
1. 负责接待到访客户并进行初步沟通，耐心记录客户的基础信息、需求与顾虑，确保医生能够获取完整资料用于治疗方案设计，同时通过礼貌和专业形象营造良好的初始体验。
|
||||
2. 在医生与咨询师进行面部评估及方案设计时，协助完成资料整理与档案录入，确保客户需求与方案内容在系统中完整存档，提升后续服务的准确性和可追溯性。
|
||||
3. 根据医生的治疗安排与咨询师的报价方案，协助客户完成费用解释、合同签署与治疗协议确认，确保每个步骤合规透明，增强客户对机构的信任感。
|
||||
4. 负责术前准备工作，包括协助客户签署知情同意书、告知术前注意事项与时间安排，并通过电话、短信或App进行提醒，帮助客户顺利进入治疗阶段。
|
||||
5. 治疗后负责为客户发放术后护理指南并进行注意事项解释，建立回访档案，协助医生与咨询师进行术后1天、3天、7天的回访工作，持续追踪客户反馈。
|
||||
|
||||
### 流程一：客户需求收集
|
||||
|
||||
流程描述：在客户初诊环节，通过问诊、面谈与皮肤检测工具收集数据，全面了解客户的皮肤问题与心理诉求，并结合生活习惯和预算进行初步分类，为医生设计个性化方案奠定基础。在此过程中，既要确保数据客观准确，又要缓解客户紧张情绪，建立信任关系。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 面谈记录：在首次面诊时，逐项记录客户的肤质问题、生活习惯及期望效果，并建立电子档案，确保信息完整可追溯。
|
||||
2. 工具检测：在导师指导下操作Visia皮肤检测仪，采集色素沉着、毛孔粗大、油脂分泌等关键指标，形成定量化数据支撑。
|
||||
3. 情绪疏导：在问诊过程中观察客户紧张情绪，使用案例讲解与轻度心理疏导帮助客户放松，提升信任感。
|
||||
4. 数据整理：将客户面谈结果与检测数据录入系统，生成初步分析报告，作为医生后续方案设计的重要依据。
|
||||
|
||||
### 流程二：治疗方案沟通
|
||||
|
||||
流程描述：在医生制定治疗大纲后，协助完成与客户的沟通解释工作，重点是让客户理解治疗原理、周期、风险和注意事项。需要在保持医学专业性的同时，使用客户能理解的语言进行转述，避免过度承诺，确保客户在知情同意的基础上做出决策。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 项目解读：结合客户的皮肤问题，逐一讲解超光子嫩肤、水光注射的作用机制和适应症，确保客户清楚每个项目的目标与效果边界。
|
||||
2. 风险提示：对治疗可能出现的短暂红肿、爆痘等副作用进行客观说明，强调术前停用维A酸类产品等注意事项，减少客户预期落差。
|
||||
3. 多方沟通：在医生、客户之间搭建桥梁，将医生的参数与操作要点转化为客户易懂的信息，促进方案达成共识。
|
||||
4. 方案确认：与客户反复确认预算、时间与疗程安排，最终生成治疗确认单，确保无信息遗漏。
|
||||
|
||||
### 流程三：预约确认
|
||||
|
||||
流程描述：在治疗方案确认后，完成治疗时间、费用和术前准备的确认，确保客户在充分知情的情况下顺利进入执行环节。该流程需要高度注重细节，防止信息偏差或遗漏导致的客户不满。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 知情同意：详细解读《治疗知情同意书》，逐条解释风险点和术后恢复建议，帮助客户安心签署。
|
||||
2. 时间安排：结合客户工作节奏和恢复期，协助合理安排治疗时间，避免与生理期、重要会议等冲突。
|
||||
3. 费用确认：与客户逐项确认费用明细，确保其对价格与支付方式清楚无误，并通过系统生成预约短信。
|
||||
4. 术前提醒：在治疗前一周和治疗当天分别推送注意事项提醒，如避免化妆、停用刺激性产品等，确保治疗条件最佳化。
|
||||
|
||||
### 流程四：治疗协助
|
||||
|
||||
流程描述：在医生主导治疗过程中，协助安抚客户情绪、实时记录治疗反馈，并在必要时协助处理护理事项。重点在于保障客户体验顺畅，确保治疗数据与客户感受完整记录，形成可复盘的资料。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 情绪陪伴：在客户接受超光子嫩肤时，持续与其沟通，缓解紧张感，确保治疗过程的配合度。
|
||||
2. 数据记录：同步记录医生操作的滤片选择、能量参数与治疗时间，整理为客户个人治疗日志，便于后续追踪。
|
||||
3. 反馈收集：在治疗间隙询问客户感受，并即时反馈给医生，用于动态调整治疗参数，提升安全性。
|
||||
4. 术后交接：协助护士完成冷敷与舒缓护理，提醒客户注意防晒和饮食禁忌，确保恢复过程顺畅。
|
||||
|
||||
### 流程五：术后随访
|
||||
|
||||
流程描述：在客户术后恢复阶段，通过多渠道随访、护理指导与效果跟踪，确保客户得到持续支持。既要保证治疗效果得到验证，也要及时发现并解决客户的不适或疑虑，维持客户满意度。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 即时回访：在治疗当天通过微信推送术后注意事项，并在1天、3天、7天节点主动回访客户，解答常见问题。
|
||||
2. 恢复跟踪：记录客户术后出现的干燥或轻微爆痘情况，指导护理措施，避免问题加重。
|
||||
3. 效果对比：在术后1个月邀请客户复诊，使用Visia进行效果对比，形成“术前—术后”数据，明确改善幅度。
|
||||
4. 数据归档：将随访内容录入系统，供团队复盘使用，并作为后续方案优化的依据。
|
||||
项目名称：阿莫西林胶囊制剂生产工艺优化项目
|
||||
|
||||
项目描述：本项目围绕阿莫西林胶囊的处方与工艺优化开展，聚焦解决溶出度不足、稳定性偏差和批间一致性差等问题。通过对粉碎、制粒、干燥、混合和充填等工序的改进，提升制剂的生物利用度和质量稳定性。项目在粉体粒径控制、湿材制备条件、颗粒干燥曲线和辅料比例等方面进行了系统优化，最终将溶出度提升至98%以上，符合《中国药典》相关标准，并通过长期稳定性试验证实货架期达到18–24个月。研究成果为小试工艺向中试和产业化放大提供了可靠依据，确保产品质量稳定、临床疗效可控和市场竞争力增强。
|
||||
|
||||
实习时间：2024.03~2024.12
|
||||
|
||||
实习岗位：制剂工程师
|
||||
|
||||
实习企业：陕西秦岭七药协同创新中心有限公司
|
||||
|
||||
### 岗位职责：
|
||||
|
||||
1. 在导师指导下参与阿莫西林胶囊的处方优化与小试实验，完成粉碎、制粒、干燥和混合等实验操作，详细记录工艺参数和实验现象。
|
||||
2. 负责湿法制粒机、沸腾干燥机、混合机等设备的准备、操作和清洁，确保实验过程符合SOP规范并安全可控。
|
||||
3. 协助制剂质量检测工作，包括样品前处理、外观检查和溶出度初测，学习药典方法并配合质量部门完成均匀度和稳定性检测。
|
||||
4. 参与工艺验证和中试放大研究，协助收集关键工艺参数和生产记录，掌握从小试到中试的衔接流程。
|
||||
5. 整理工艺资料与文献，参与实验报告及申报材料的撰写，确保研究过程可追溯。
|
||||
6. 积极参与小组讨论，提出实验中观察到的问题与改进建议，展现学习能力与团队合作精神。
|
||||
7. 严格遵守GMP规范，注重实验数据的真实性与完整性，保证实验室操作合规。
|
||||
|
||||
### 流程一：原料药粉碎控制
|
||||
|
||||
流程描述：在工艺初始阶段，对阿莫西林原料药进行粒径细化是确保溶出性能和后续工序稳定性的关键。通过超微粉碎机将粉体细化至900目，增加比表面积以改善溶出速率，并控制粉碎过程的压力与温度以避免药物降解。实验中需实时检测粒径分布，保证各批次粉末均匀一致，减少批间差异，确保符合药典粒径检测标准。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 粒径检测执行：在粉碎完成后，利用粒度分布仪和标准筛进行双重检测，确保粒径达到900目标准，同时将检测结果与历史数据对比，保证粉体性能稳定。
|
||||
2. 温度与压力监控：在粉碎过程中设置传感器记录腔体温度与进气压力，保持在35–40℃与0.1–0.3MPa范围，防止粉末因过热或超压导致药物降解或晶型转变。
|
||||
3. 批间一致性分析：将每批次粉体样品的粒径曲线进行比对，分析均匀性差异，若出现偏差立即追溯原因并采取纠正措施。
|
||||
4. 数据记录归档：将粉碎时间、温度、压力和粒径检测数据系统录入批生产记录，确保溯源完整，满足GMP审计要求。
|
||||
|
||||
### 流程二：湿法制粒成型
|
||||
|
||||
流程描述：湿材进入制粒机后需通过切刀和筛网的作用形成均匀颗粒。该过程对颗粒形貌、大小分布和含水量有严格要求，因为它直接影响胶囊的装量均匀性与溶出速率。需严格设定制粒参数，并在过程中进行抽样监控，保证颗粒外观一致性。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 制粒机参数调控：根据工艺方案调整刀速和筛网孔径，避免颗粒过大或过小，确保其形貌规则，便于后续干燥。
|
||||
2. 颗粒外观抽检：在制粒过程中定时取样，利用放大镜检查颗粒外观，要求呈规则球形或短柱状，不得出现明显长条或碎片。
|
||||
3. 含水量监控：在制粒完成后使用快速水分测定仪检测含水率，保证其处于合适范围，避免干燥难度过大或崩解性不足。
|
||||
4. 质量异常处理：若发现颗粒形貌或含水率不符合要求，立即中止工序并返工，确保批次不流入后续环节造成报废风险。
|
||||
|
||||
### 流程三：颗粒干燥处理
|
||||
|
||||
流程描述：湿颗粒需在沸腾干燥机中进行分段干燥，通过合理控制进风温度和干燥时间，使颗粒内外水分均匀蒸发。该环节既要保证终点含水率≤3%，也要避免因温度过高导致阿莫西林降解。过程数据需实时监控和记录，以验证工艺稳定性。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 干燥温度控制：前段维持在50–60℃促进表面水分快速蒸发，后段降至40–45℃延长50–60分钟，使内部水分逐步排出。
|
||||
2. 水分终点检测：在干燥过程中分时段采样，使用在线水分检测仪监控含水率，确保批次均在≤3%标准内。
|
||||
3. 干燥曲线比对：建立干燥曲线数据库，将不同批次曲线进行对比，分析差异并评估工艺一致性。
|
||||
4. GMP合规记录：将干燥时长、温度和水分数据逐条填写至工艺记录表，并由质控人员复核签字，保证工序可追溯。
|
||||
|
||||
### 流程四：辅料均匀混合
|
||||
|
||||
流程描述：干燥颗粒经筛分后需与崩解剂和润滑剂充分混合，以保证胶囊剂具有良好的崩解性和流动性。混合过程的均匀性是确保剂量分布与溶出一致性的关键，需通过均匀度检测进行验证。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 辅料称量执行：严格按照处方称量崩解剂和润滑剂，由两人交叉复核并签字，避免因称量错误导致比例失衡。
|
||||
2. 混合机操作：在多向运动混合机中运行15–20分钟，并每隔5分钟取不同点位样品检测，确保RSD＜5%。
|
||||
3. 均匀度检测：通过含量均匀度实验对样品进行验证，确认辅料分布均一，避免局部成分偏差。
|
||||
4. 记录与归档：将称量表、混合时间、检测数据录入批生产记录，并形成电子档案，满足审计追溯。
|
||||
|
||||
### 流程五：胶囊充填作业
|
||||
|
||||
流程描述：将合格颗粒装入胶囊壳，要求装量差异≤±5%，并通过在线检测剔除不合格胶囊。充填过程不仅考验设备稳定性，也需要操作人员实时监控并维护，确保产能和质量双重达标。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 装量均一抽检：每隔30分钟抽取样品进行重量检测，保证胶囊装量差异在药典允许范围内。
|
||||
2. 设备调试维护：在生产前完成清洁与润滑，确认充填速度≥50,000粒/小时，并记录产能表现。
|
||||
3. 在线剔除控制：设定自动剔除阈值，实时去除重量不合格胶囊，避免进入包装环节。
|
||||
4. 批次信息登记：将充填参数、抽检结果与剔除数量完整记录，提交质控部门复核。
|
||||
|
||||
### 流程六：成品包装密封
|
||||
|
||||
流程描述：充填完成的胶囊经抛光和外观检测后进入包装工序。采用PVC药用硬片与铝箔密封包装，确保避光、防潮、防污染。该环节需进行密封性检测并规范记录，保证产品符合储存与运输要求。
|
||||
|
||||
工作内容：
|
||||
|
||||
1. 包材质量确认：逐批核对供应商提供的检验证书，确认PVC和铝箔符合药包材规范。
|
||||
2. 密封性能测试：抽检成品进行真空泄漏和热封强度测试，保证包装完整性。
|
||||
3. 储存环境控制：记录库房温度25℃±2℃、湿度≤60%，并实时监测，确保产品在有效期内稳定。
|
||||
4. 生产批次归档：完成包装批次记录，包括日期、班次、检测结果和操作人员信息，确保追溯合规。
|
||||
Reference in New Issue
Block a user