Initial commit: 12个专业个人简历作品集项目
58
个人简历_能源/.claude/settings.local.json
Normal file
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(npm init:*)",
|
||||
"Bash(npm install:*)",
|
||||
"Bash(npm search @lottielab)",
|
||||
"Bash(npm run dev:*)",
|
||||
"Bash(curl:*)",
|
||||
"WebFetch(domain:reactbits.dev)",
|
||||
"Bash(npm create:*)",
|
||||
"Bash(npx tailwindcss init:*)",
|
||||
"mcp__playwright__browser_navigate",
|
||||
"mcp__playwright__browser_take_screenshot",
|
||||
"mcp__playwright__browser_evaluate",
|
||||
"mcp__serena__read_memory",
|
||||
"mcp__serena__delete_memory",
|
||||
"mcp__playwright__browser_snapshot",
|
||||
"Bash(git add:*)",
|
||||
"mcp__playwright__browser_click",
|
||||
"Bash(git commit:*)",
|
||||
"Bash(npx eslint:*)",
|
||||
"mcp__serena__get_symbols_overview",
|
||||
"mcp__playwright__browser_wait_for",
|
||||
"mcp__playwright__browser_press_key",
|
||||
"mcp__playwright__browser_close",
|
||||
"Bash(open http://localhost:5555)",
|
||||
"mcp__browser-tools__takeScreenshot",
|
||||
"mcp__playwright__browser_resize",
|
||||
"mcp__serena__find_symbol",
|
||||
"Bash(find:*)",
|
||||
"WebFetch(domain:github.com)",
|
||||
"Bash(open energy_portfolio_5.html)",
|
||||
"mcp__playwright__browser_console_messages",
|
||||
"mcp__serena__read_file",
|
||||
"mcp__serena__activate_project",
|
||||
"Bash(open /Users/apple/Documents/cursor/作品集/个人简历_能源/.superdesign/design_iterations/energy_portfolio_5.html)",
|
||||
"Bash(grep:*)",
|
||||
"Bash(git init:*)",
|
||||
"Bash(git remote add:*)",
|
||||
"Bash(git branch:*)",
|
||||
"Bash(git push:*)",
|
||||
"Bash(node:*)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
},
|
||||
"enableAllProjectMcpServers": true,
|
||||
"enabledMcpjsonServers": [
|
||||
"context7",
|
||||
"browser-tools",
|
||||
"claude-code-mcp",
|
||||
"promptx",
|
||||
"playwright",
|
||||
"sequential-thinking",
|
||||
"feishu-api",
|
||||
"shadcn-ui-server"
|
||||
]
|
||||
}
|
||||
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)
|
||||
19
个人简历_能源/.gitignore
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
# macOS
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# Editor
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Misc
|
||||
*.log
|
||||
.env
|
||||
.env.local
|
||||
71
个人简历_能源/.mcp.json
Normal file
@@ -0,0 +1,71 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"context7": {
|
||||
"type": "stdio",
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"@upstash/context7-mcp"
|
||||
],
|
||||
"env": {}
|
||||
},
|
||||
"browser-tools": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"@agentdeskai/browser-tools-mcp@latest"
|
||||
],
|
||||
"enabled": true
|
||||
},
|
||||
"claude-code-mcp": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"@steipete/claude-code-mcp@latest"
|
||||
]
|
||||
},
|
||||
"promptx": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"-f",
|
||||
"--registry",
|
||||
"https://registry.npmjs.org",
|
||||
"dpml-prompt@beta",
|
||||
"mcp-server"
|
||||
]
|
||||
},
|
||||
"playwright": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"@playwright/mcp@latest"
|
||||
],
|
||||
"env": {}
|
||||
},
|
||||
"sequential-thinking": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"@modelcontextprotocol/server-sequential-thinking"
|
||||
]
|
||||
},
|
||||
"feishu-api": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"apifox-mcp-server@latest",
|
||||
"--project-id=6808546"
|
||||
],
|
||||
"env": {
|
||||
"APIFOX_ACCESS_TOKEN": "APS-unMJRsbd0NZeaqd99nAIhdN63mVPUkzX"
|
||||
}
|
||||
},
|
||||
"shadcn-ui-server": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"@heilgar/shadcn-ui-mcp-server"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
个人简历_能源/.playwright-mcp/energy-portfolio-v5-check.png
Normal file
|
After Width: | Height: | Size: 4.0 MiB |
BIN
个人简历_能源/.playwright-mcp/energy-portfolio-v5-with-timeline.png
Normal file
|
After Width: | Height: | Size: 2.0 MiB |
BIN
个人简历_能源/.playwright-mcp/pinterest-layout-check.png
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
BIN
个人简历_能源/.playwright-mcp/pinterest-layout-final.png
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
BIN
个人简历_能源/.playwright-mcp/two-column-layout-final.png
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
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;
|
||||
}
|
||||
}
|
||||
3760
个人简历_能源/.superdesign/design_iterations/energy_portfolio_5.html
Normal file
141
个人简历_能源/.superdesign/design_iterations/energy_theme_1.css
Normal file
@@ -0,0 +1,141 @@
|
||||
:root {
|
||||
/* 能源主题配色 - 绿色环保与科技蓝 */
|
||||
--background: oklch(0.1200 0.0100 200);
|
||||
--foreground: oklch(0.9800 0.0050 200);
|
||||
--card: oklch(0.1800 0.0150 200);
|
||||
--card-foreground: oklch(0.9500 0.0050 200);
|
||||
--popover: oklch(0.2000 0.0150 200);
|
||||
--popover-foreground: oklch(0.9800 0.0050 200);
|
||||
|
||||
/* 主色调 - 充满活力的绿色 */
|
||||
--primary: oklch(0.7200 0.1800 142);
|
||||
--primary-foreground: oklch(0.1200 0.0100 142);
|
||||
|
||||
/* 次要色调 - 科技蓝 */
|
||||
--secondary: oklch(0.6800 0.1600 230);
|
||||
--secondary-foreground: oklch(0.9800 0.0050 230);
|
||||
|
||||
/* 静音色 */
|
||||
--muted: oklch(0.2500 0.0100 200);
|
||||
--muted-foreground: oklch(0.7000 0.0050 200);
|
||||
|
||||
/* 强调色 - 太阳能金黄 */
|
||||
--accent: oklch(0.8500 0.1500 85);
|
||||
--accent-foreground: oklch(0.1500 0.0100 85);
|
||||
|
||||
/* 警告色 */
|
||||
--destructive: oklch(0.6500 0.2200 28);
|
||||
--destructive-foreground: oklch(0.9800 0.0050 28);
|
||||
|
||||
/* 边框和输入 */
|
||||
--border: oklch(0.3000 0.0100 200);
|
||||
--input: oklch(0.2200 0.0100 200);
|
||||
--ring: oklch(0.7200 0.1800 142);
|
||||
|
||||
/* 图表配色 - 能源数据可视化 */
|
||||
--chart-1: oklch(0.7200 0.1800 142); /* 绿色 - 可再生能源 */
|
||||
--chart-2: oklch(0.6800 0.1600 230); /* 蓝色 - 水电 */
|
||||
--chart-3: oklch(0.8500 0.1500 85); /* 金色 - 太阳能 */
|
||||
--chart-4: oklch(0.7500 0.1400 190); /* 青色 - 风能 */
|
||||
--chart-5: oklch(0.6000 0.1200 320); /* 紫色 - 核能 */
|
||||
|
||||
/* 字体设置 */
|
||||
--font-sans: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
|
||||
--font-serif: 'Merriweather', 'Georgia', serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* 圆角和间距 */
|
||||
--radius: 0.75rem;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
/* 阴影效果 - 柔和的光晕效果 */
|
||||
--shadow-2xs: 0 1px 2px 0px rgba(0, 255, 128, 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px rgba(0, 255, 128, 0.08);
|
||||
--shadow-sm: 0 2px 4px 0px rgba(0, 255, 128, 0.10), 0 1px 2px -1px rgba(0, 255, 128, 0.08);
|
||||
--shadow: 0 4px 6px -1px rgba(0, 255, 128, 0.10), 0 2px 4px -2px rgba(0, 255, 128, 0.08);
|
||||
--shadow-md: 0 8px 10px -2px rgba(0, 255, 128, 0.12), 0 4px 6px -2px rgba(0, 255, 128, 0.08);
|
||||
--shadow-lg: 0 12px 16px -4px rgba(0, 255, 128, 0.15), 0 6px 8px -2px rgba(0, 255, 128, 0.10);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 255, 128, 0.18), 0 8px 10px -3px rgba(0, 255, 128, 0.12);
|
||||
--shadow-2xl: 0 25px 50px -12px rgba(0, 255, 128, 0.25);
|
||||
|
||||
/* 动画时长 */
|
||||
--transition-fast: 150ms;
|
||||
--transition-base: 300ms;
|
||||
--transition-slow: 500ms;
|
||||
|
||||
/* 渐变色 */
|
||||
--gradient-primary: linear-gradient(135deg, oklch(0.7200 0.1800 142), oklch(0.6800 0.1600 230));
|
||||
--gradient-hero: linear-gradient(180deg, oklch(0.1200 0.0100 200), oklch(0.1800 0.0150 200));
|
||||
--gradient-card: linear-gradient(145deg, oklch(0.1800 0.0150 200), oklch(0.2200 0.0100 200));
|
||||
|
||||
/* 能源特色渐变 */
|
||||
--gradient-solar: linear-gradient(135deg, oklch(0.8500 0.1500 85), oklch(0.9200 0.1200 65));
|
||||
--gradient-wind: linear-gradient(135deg, oklch(0.7500 0.1400 190), oklch(0.8200 0.1200 180));
|
||||
--gradient-hydro: linear-gradient(135deg, oklch(0.6800 0.1600 230), oklch(0.7500 0.1400 220));
|
||||
|
||||
/* 圆角变体 */
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* 深色主题特有样式 */
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 毛玻璃效果 */
|
||||
.glassmorphism {
|
||||
background: rgba(24, 28, 38, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(0, 255, 128, 0.1);
|
||||
}
|
||||
|
||||
/* 发光效果 */
|
||||
.glow {
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 255, 128, 0.3),
|
||||
0 0 40px rgba(0, 255, 128, 0.2),
|
||||
0 0 60px rgba(0, 255, 128, 0.1);
|
||||
}
|
||||
|
||||
/* 能源数据展示特效 */
|
||||
.energy-card {
|
||||
background: var(--gradient-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all var(--transition-base) ease;
|
||||
}
|
||||
|
||||
.energy-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* 技能雷达图容器 */
|
||||
.radar-container {
|
||||
background: radial-gradient(circle at center,
|
||||
rgba(0, 255, 128, 0.05) 0%,
|
||||
transparent 70%);
|
||||
}
|
||||
|
||||
/* 项目卡片网格 */
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
|
||||
/* 打字机效果文字 */
|
||||
.typewriter {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 256 KiB |
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 921 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 686 KiB |
|
After Width: | Height: | Size: 692 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 482 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 340 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 474 KiB |
|
After Width: | Height: | Size: 246 KiB |
|
After Width: | Height: | Size: 291 KiB |
|
After Width: | Height: | Size: 204 KiB |
|
After Width: | Height: | Size: 158 KiB |
|
After Width: | Height: | Size: 350 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 605 KiB |
|
After Width: | Height: | Size: 984 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 729 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 693 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 878 KiB |
BIN
个人简历_能源/.superdesign/design_iterations/苏拓.png
Normal file
|
After Width: | Height: | Size: 792 KiB |
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
@@ -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)
|
||||
BIN
个人简历_能源/doc/能源/public/EHS管理体系建设与运行项目/EHS管理体系建设与运行项目-主图.jpg
Normal file
|
After Width: | Height: | Size: 154 KiB |
BIN
个人简历_能源/doc/能源/public/EHS管理体系建设与运行项目/流程一:管理层决策与资源承诺.jpeg
Normal file
|
After Width: | Height: | Size: 203 KiB |
BIN
个人简历_能源/doc/能源/public/EHS管理体系建设与运行项目/流程三:初始状态评审与风险识别.jpeg
Normal file
|
After Width: | Height: | Size: 96 KiB |
BIN
个人简历_能源/doc/能源/public/EHS管理体系建设与运行项目/流程二:成立跨部门工作组.jpeg
Normal file
|
After Width: | Height: | Size: 177 KiB |
BIN
个人简历_能源/doc/能源/public/EHS管理体系建设与运行项目/流程五:体系文件编制与发布.jpeg
Normal file
|
After Width: | Height: | Size: 108 KiB |
BIN
个人简历_能源/doc/能源/public/EHS管理体系建设与运行项目/流程六:体系试运行与问题改进.jpeg
Normal file
|
After Width: | Height: | Size: 178 KiB |
BIN
个人简历_能源/doc/能源/public/EHS管理体系建设与运行项目/流程四:方针目标制定与管理策划.jpg
Normal file
|
After Width: | Height: | Size: 149 KiB |
|
After Width: | Height: | Size: 94 KiB |
BIN
个人简历_能源/doc/能源/public/变电站供配电系统运维与应急处置全流程提升项目/流程一:应急预案编制与职责分配.jpg
Normal file
|
After Width: | Height: | Size: 256 KiB |
BIN
个人简历_能源/doc/能源/public/变电站供配电系统运维与应急处置全流程提升项目/流程三:电气设备检修与维护.jpg
Normal file
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 921 KiB |
BIN
个人简历_能源/doc/能源/public/变电站供配电系统运维与应急处置全流程提升项目/流程五:智能监控与数据化预警.jpg
Normal file
|
After Width: | Height: | Size: 119 KiB |
BIN
个人简历_能源/doc/能源/public/变电站供配电系统运维与应急处置全流程提升项目/流程四:应急演练与培训.jpeg
Normal file
|
After Width: | Height: | Size: 282 KiB |
|
After Width: | Height: | Size: 686 KiB |
BIN
个人简历_能源/doc/能源/public/某220kV变电站迎峰度夏站内外设备专项集中检查项目/流程一:航线制定.jpg
Normal file
|
After Width: | Height: | Size: 692 KiB |
BIN
个人简历_能源/doc/能源/public/某220kV变电站迎峰度夏站内外设备专项集中检查项目/流程三:线路巡检.jpg
Normal file
|
After Width: | Height: | Size: 204 KiB |
BIN
个人简历_能源/doc/能源/public/某220kV变电站迎峰度夏站内外设备专项集中检查项目/流程二:航前检查.jpg
Normal file
|
After Width: | Height: | Size: 482 KiB |
BIN
个人简历_能源/doc/能源/public/某220kV变电站迎峰度夏站内外设备专项集中检查项目/流程五:影像整理.jpg
Normal file
|
After Width: | Height: | Size: 104 KiB |
BIN
个人简历_能源/doc/能源/public/某220kV变电站迎峰度夏站内外设备专项集中检查项目/流程六:复盘总结.jpg
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
个人简历_能源/doc/能源/public/某220kV变电站迎峰度夏站内外设备专项集中检查项目/流程四:站内巡检.jpg
Normal file
|
After Width: | Height: | Size: 340 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/某工厂晶硅光伏电池片制备项目-主图.jpg
Normal file
|
After Width: | Height: | Size: 190 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程一:硅片切割与初步检测.jpg
Normal file
|
After Width: | Height: | Size: 474 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程七:丝网印刷与快速烧结.jpg
Normal file
|
After Width: | Height: | Size: 246 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程三:表面制绒处理.jpg
Normal file
|
After Width: | Height: | Size: 291 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程二:硅片表面清洗.jpg
Normal file
|
After Width: | Height: | Size: 204 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程五:边缘刻蚀与去磷硅玻璃.jpg
Normal file
|
After Width: | Height: | Size: 158 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程八:组件封装与终检.jpg
Normal file
|
After Width: | Height: | Size: 350 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程六:减反射膜沉积.jpg
Normal file
|
After Width: | Height: | Size: 200 KiB |
BIN
个人简历_能源/doc/能源/public/某工厂晶硅光伏电池片制备项目/流程四:扩散制结.jpg
Normal file
|
After Width: | Height: | Size: 605 KiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程一:原材料检验.jpg
Normal file
|
After Width: | Height: | Size: 984 KiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程七:缺陷修复.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程三:真空灌注.jpeg
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程二:铺层操作.jpg
Normal file
|
After Width: | Height: | Size: 284 KiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程五:修边处理.jpg
Normal file
|
After Width: | Height: | Size: 729 KiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程八:质量检验.jpeg
Normal file
|
After Width: | Height: | Size: 78 KiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程六:表面处理.png
Normal file
|
After Width: | Height: | Size: 693 KiB |
BIN
个人简历_能源/doc/能源/public/风机叶片生产质量控制与研发工艺优化项目/流程四:固化操作.jpg
Normal file
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 878 KiB |
45
个人简历_能源/doc/能源/个人简历.md
Normal file
@@ -0,0 +1,45 @@
|
||||
# 个人信息
|
||||
|
||||
1. 姓名:xxxxxx
|
||||
2. 性别:xxxxxx
|
||||
3. 现居地址:xxxxxx
|
||||
4. 求职意向:xxxxxx
|
||||
|
||||
# 教育背景
|
||||
1. 学校:xxxxxx
|
||||
2. 专业:xxxxxx
|
||||
|
||||
|
||||
# 联系方向
|
||||
1. 手机:xxxxxx
|
||||
2. 邮箱:xxxxxx@qq.com
|
||||
3. 微信:xxxxxx
|
||||
|
||||
|
||||
|
||||
# 专业技能
|
||||
|
||||
### (一)核心能力
|
||||
|
||||
1. 熟练掌握根据电气图纸进行电气设备及自动化控制设备的规范安装,包括精准定位、线路敷设与端子接线。具备系统调试能力,能通过检查设备运行状态、测量关键电气参数、设置控制程序参数等步骤,确保系统启动正常、运行稳定,符合设计要求。
|
||||
2. 初步掌握制定并执行电气自动化设备日常维护计划的方法,能够独立进行定期巡检。熟练通过观察设备外观、倾听运行声音等方法判断设备状态。具备执行标准维护操作的能力,如设备清洁、接线端子紧固、机械部件润滑等,有效识别潜在故障隐患,保障设备可靠运行与延长使用寿命。
|
||||
3. 初步掌握运用检测工具进行电气与自动化系统故障排查的方法。具备逻辑分析能力,能快速定位故障点并判断原因。熟悉常见故障的修复流程,如更换损坏元件、修复线路、调整程序参数等,并能规范记录处理过程与数据,快速恢复系统运行。
|
||||
4. 掌握基础PLC梯形图编程技能,能够根据简单的生产工艺要求理解、阅读、修改及编写基础控制逻辑程序。具备初步的程序优化意识,理解如何通过调整控制逻辑来提升系统效率、降低能耗或减少设备损耗。
|
||||
5. 深刻理解并严格遵守电工安全操作规程,确保作业安全。能够准确阅读和理解电气原理图、接线图、设备说明书等技术文档,并依据文档规范执行安装、维护和故障处理任务。
|
||||
6. 具备良好的团队协作精神,能在工程师指导下有效参与自动化项目实施。能够承担现场设备安装指导辅助、技术资料收集整理、测试数据记录、验收环节配合等支持性工作。执行力强,能按要求完成分配任务,并具备快速学习新技术、新设备操作规范的能力,保障项目顺利交付。
|
||||
|
||||
### (二)复合能力
|
||||
|
||||
1. 电气自动化控制系统基础: 了解可编程逻辑控制器(PLC)的硬件组成、工作循环及基础编程逻辑,例如梯形图;理解工业机器人在电力相关场景,如设备操作与巡检中的应用基础;了解常见传感器与执行器在自动化系统中的作用。
|
||||
2. 电工技术识图能力: 掌握电路分析基础理论;熟悉常用电工元器件,如电阻、电容、电感、继电器、接触器、断路器等特性、功能及选型原则;熟练识读电气一次系统图、二次系统图、控制原理图及接线图;了解电气安全规范与操作规程。
|
||||
3. 新能源材料制造工艺认知: 掌握光伏电池(晶硅/薄膜)、风力发电机叶片、锂电池的核心材料体系及关键制造工艺流程;理解材料特性与器件性能、成本、可靠性的关联。
|
||||
4. 电力系统保护与故障分析基础: 了解电力系统常见故障类型,如短路与接地及其危害;理解继电保护的基本功能,包括速断、过流与差动等及其配置原则;具备初步的故障信息识别与分析意识,例如保护动作信号。
|
||||
5. 电力系统全流程认知: 深入理解电力系统“发-输-变-配-用”全流程基本原理与核心环节;熟悉电网的基本架构,包括输电网与配电网,及主要电力设备功能。
|
||||
6. 新能源电站运行维护基础: 理解光伏电站、风电场、储能电站(以电化学储能为主)的基本构成、工作原理、并网流程及典型运行模式;掌握其基础运维内容,包括日常巡检、参数记录及简单故障识别与上报流程;了解新能源发电出力特性与影响因素。
|
||||
7. 电力设备巡检认知: 熟悉常规电力设备(如变压器、开关柜、线路)及新能源场站设备的标准化巡检流程、项目与规范;掌握基础巡检工具,包括万用表、钳形电流表、红外测温仪、接地电阻测试仪等的使用方法与安全注意事项;了解智能化运维技术,如无人机巡检、在线监测及智能诊断的发展与应用。
|
||||
8. 工业节能意识: 理解工业领域,涵盖电力、化工与机械制造等主要能耗环节与节能潜力;了解基础节能技术,例如电机变频、余热利用与照明改造,以及能效管理方法,如能源审计与能效对标;具备初步的节能降耗意识。
|
||||
9. 电力市场认知: 了解电力市场基本运行规则,涵盖电价形成与交易品种及参与主体;理解虚拟电厂(VPP)的概念、核心功能,包括聚合、调控与交易,及其在提升电网灵活性与消纳新能源中的作用;关注新型业态,如需求侧响应与分布式能源交易。
|
||||
|
||||
# 个人评价
|
||||
|
||||
我是一名刚完成实习、专科毕业的电气自动化控制技术员助理,具备良好的学习适应能力与团队协作意识。在实习项目中,我认真学习工程师的操作步骤,协助完成硬件安装、程序调试与故障诊断,能及时上报异常并配合技术支持完成修复。虽然尚处于职业起步阶段,但我对电气自动化领域充满热情并具备扎实基础。我注重实际操作与安全规范,愿意不断通过实践提升技能水平。希望能在贵公司担任电气自动化控制技术员,继续积累经验、承担更多责任,并与团队共同推动项目顺利实施。
|
||||
45
个人简历_能源/doc/能源/个人简历.md.backup_20251027_170720
Normal file
@@ -0,0 +1,45 @@
|
||||
# 个人信息
|
||||
|
||||
1. 姓名:苏拓
|
||||
2. 性别:男
|
||||
3. 现居地址:江苏省南京市
|
||||
4. 求职意向:电气自动化技术员
|
||||
|
||||
# 教育背景
|
||||
1. 学校:安徽电子信息职业技术学院
|
||||
2. 专业:人工智能技术应用
|
||||
|
||||
|
||||
# 联系方向
|
||||
1. 手机:17523115980
|
||||
2. 邮箱:298618825@qq.com
|
||||
3. 微信:summerremains2
|
||||
|
||||
|
||||
|
||||
# 专业技能
|
||||
|
||||
### (一)核心能力
|
||||
|
||||
1. 熟练掌握根据电气图纸进行电气设备及自动化控制设备的规范安装,包括精准定位、线路敷设与端子接线。具备系统调试能力,能通过检查设备运行状态、测量关键电气参数、设置控制程序参数等步骤,确保系统启动正常、运行稳定,符合设计要求。
|
||||
2. 初步掌握制定并执行电气自动化设备日常维护计划的方法,能够独立进行定期巡检。熟练通过观察设备外观、倾听运行声音等方法判断设备状态。具备执行标准维护操作的能力,如设备清洁、接线端子紧固、机械部件润滑等,有效识别潜在故障隐患,保障设备可靠运行与延长使用寿命。
|
||||
3. 初步掌握运用检测工具进行电气与自动化系统故障排查的方法。具备逻辑分析能力,能快速定位故障点并判断原因。熟悉常见故障的修复流程,如更换损坏元件、修复线路、调整程序参数等,并能规范记录处理过程与数据,快速恢复系统运行。
|
||||
4. 掌握基础PLC梯形图编程技能,能够根据简单的生产工艺要求理解、阅读、修改及编写基础控制逻辑程序。具备初步的程序优化意识,理解如何通过调整控制逻辑来提升系统效率、降低能耗或减少设备损耗。
|
||||
5. 深刻理解并严格遵守电工安全操作规程,确保作业安全。能够准确阅读和理解电气原理图、接线图、设备说明书等技术文档,并依据文档规范执行安装、维护和故障处理任务。
|
||||
6. 具备良好的团队协作精神,能在工程师指导下有效参与自动化项目实施。能够承担现场设备安装指导辅助、技术资料收集整理、测试数据记录、验收环节配合等支持性工作。执行力强,能按要求完成分配任务,并具备快速学习新技术、新设备操作规范的能力,保障项目顺利交付。
|
||||
|
||||
### (二)复合能力
|
||||
|
||||
1. 电气自动化控制系统基础: 了解可编程逻辑控制器(PLC)的硬件组成、工作循环及基础编程逻辑,例如梯形图;理解工业机器人在电力相关场景,如设备操作与巡检中的应用基础;了解常见传感器与执行器在自动化系统中的作用。
|
||||
2. 电工技术识图能力: 掌握电路分析基础理论;熟悉常用电工元器件,如电阻、电容、电感、继电器、接触器、断路器等特性、功能及选型原则;熟练识读电气一次系统图、二次系统图、控制原理图及接线图;了解电气安全规范与操作规程。
|
||||
3. 新能源材料制造工艺认知: 掌握光伏电池(晶硅/薄膜)、风力发电机叶片、锂电池的核心材料体系及关键制造工艺流程;理解材料特性与器件性能、成本、可靠性的关联。
|
||||
4. 电力系统保护与故障分析基础: 了解电力系统常见故障类型,如短路与接地及其危害;理解继电保护的基本功能,包括速断、过流与差动等及其配置原则;具备初步的故障信息识别与分析意识,例如保护动作信号。
|
||||
5. 电力系统全流程认知: 深入理解电力系统“发-输-变-配-用”全流程基本原理与核心环节;熟悉电网的基本架构,包括输电网与配电网,及主要电力设备功能。
|
||||
6. 新能源电站运行维护基础: 理解光伏电站、风电场、储能电站(以电化学储能为主)的基本构成、工作原理、并网流程及典型运行模式;掌握其基础运维内容,包括日常巡检、参数记录及简单故障识别与上报流程;了解新能源发电出力特性与影响因素。
|
||||
7. 电力设备巡检认知: 熟悉常规电力设备(如变压器、开关柜、线路)及新能源场站设备的标准化巡检流程、项目与规范;掌握基础巡检工具,包括万用表、钳形电流表、红外测温仪、接地电阻测试仪等的使用方法与安全注意事项;了解智能化运维技术,如无人机巡检、在线监测及智能诊断的发展与应用。
|
||||
8. 工业节能意识: 理解工业领域,涵盖电力、化工与机械制造等主要能耗环节与节能潜力;了解基础节能技术,例如电机变频、余热利用与照明改造,以及能效管理方法,如能源审计与能效对标;具备初步的节能降耗意识。
|
||||
9. 电力市场认知: 了解电力市场基本运行规则,涵盖电价形成与交易品种及参与主体;理解虚拟电厂(VPP)的概念、核心功能,包括聚合、调控与交易,及其在提升电网灵活性与消纳新能源中的作用;关注新型业态,如需求侧响应与分布式能源交易。
|
||||
|
||||
# 个人评价
|
||||
|
||||
我是一名刚完成实习、专科毕业的电气自动化控制技术员助理,具备良好的学习适应能力与团队协作意识。在实习项目中,我认真学习工程师的操作步骤,协助完成硬件安装、程序调试与故障诊断,能及时上报异常并配合技术支持完成修复。虽然尚处于职业起步阶段,但我对电气自动化领域充满热情并具备扎实基础。我注重实际操作与安全规范,愿意不断通过实践提升技能水平。希望能在贵公司担任电气自动化控制技术员,继续积累经验、承担更多责任,并与团队共同推动项目顺利实施。
|
||||
431
个人简历_能源/doc/能源/能源项目案例内容.md
Normal file
@@ -0,0 +1,431 @@
|
||||
项目名称:变电站供配电系统运维与应急处置全流程提升项目
|
||||
|
||||
项目描述:本项目以变电站运行阶段的供配电系统运维为核心,围绕“监控—诊断—处置—演练—改进”构建精细化运维体系。随着城市电网规模持续扩大,变电站运行安全、可靠和高效的要求不断提升。项目通过应急预案制定、故障识别与快速处置、电气设备预防性检修、系统化演练培训和智能化监控平台建设,形成全链路闭环。实施后,设备完好率稳定保持在98%以上,单次停电平均恢复时间缩短至30分钟以内,应急演练合格率提升至95%以上,显著增强了电网运行安全性和供电连续性。
|
||||
|
||||
实习时间:2024.03~2024.12
|
||||
|
||||
实习岗位:变电站运维工程师
|
||||
|
||||
实习企业:xxx能源运维有限公司
|
||||
|
||||
### 岗位职责:
|
||||
|
||||
1. 协助在SCADA与自动化平台完成点表映射与三遥校核,使用Wireshark和串口调试助手分析IEC 60870-5-104和Modbus报文,具备基础网络排障能力。
|
||||
2. 参与通讯故障排查,从物理链路、网络配置、协议层和业务数据逐层定位问题,并结合抓包结果提出整改方案。
|
||||
3. 协助一次与二次设备巡检与调试,完成点核对、比例校准与告警优化,确保设备运行稳定。
|
||||
4. 参与投运调试与试运行跟踪,编制设备清册和参数表,输出联调记录与整改闭环表。
|
||||
5. 协助应急处置与故障消缺,依据一次接线和拓扑分析影响范围,配合调度实施隔离与恢复。
|
||||
6. 协助数据库与报表管理,在MySQL和Excel中完成事件统计与日报/周报,保证数据一致与可追溯。
|
||||
|
||||
### 流程一:应急预案编制与职责分配
|
||||
|
||||
流程描述:在项目初期,针对变电站运行风险开展系统评估,梳理主电源失电、断路器故障、线路跳闸、过载及火灾灾害等典型场景,建立覆盖全面的应急预案。通过岗位职责分工、时间节点设定和流程图绘制,确保突发事件能快速响应和规范执行。预案每季度结合演练与真实处置复盘进行修订,保证实用性与前瞻性。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 风险场景梳理:查阅近三年运行日志和事故通报,结合Excel进行事件分类与频次统计,形成高频故障清单,并与SCADA平台实时告警类别对比,建立预案编制参考表。
|
||||
2. 职责体系绘制:协助导师使用Visio绘制应急责任矩阵,明确值班员、运维工程师、班组长与调度中心职责,形成流程节点责任表,保证应急链条无遗漏。
|
||||
3. 时间节点优化:参与模拟演练,验证“5分钟确认、10分钟启动、30分钟恢复”的时效性,将延迟原因如通信阻塞、操作迟滞记录入案,形成时间优化报告。
|
||||
4. 动态修订机制:整理季度演练和真实处置反馈,建立问题—整改对照表,协助编制预案修订文档,形成持续更新的应急预案体系。
|
||||
|
||||
### 流程二:故障识别与应急处置启动
|
||||
|
||||
流程描述:运行中通过SCADA监控、保护装置动作信号和人工巡检结合的方式,实现对故障类型与影响范围的快速识别,并按分级体系立即启动对应的应急响应措施。通过区域隔离、备用电源切换与负荷转移,缩短供电恢复时间,降低事故影响范围。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 多源识别应用:收集电流、电压、温度异常数据,结合保护动作记录和人工巡检信息,完成多维度故障判定,形成初步诊断报告。
|
||||
2. 故障分级实践:执行Ⅰ级主供电失电、Ⅱ级单台重要设备故障、Ⅲ级轻微异常的分级标准,将诊断结果与分级流程对应,保证资源合理调配。
|
||||
3. 处置流程执行:在导师指导下操作备用电源切换和负荷转移,严格按照操作票执行,并实时记录隔离步骤与切换时长,保证处置过程规范。
|
||||
4. 协同联动支持:负责与调度中心、设备厂家技术支持和后勤部门的沟通记录,建立联络表单,提升多部门协同效率。
|
||||
|
||||
### 流程三:电气设备检修与维护
|
||||
|
||||
流程描述:建立“日常巡检—计划检修—预防性维护”三层次体系,确保主变、断路器、电缆与母线的长期可靠运行。结合油样色谱分析、红外测温和绝缘测试等先进手段,提前发现潜在隐患,并配合台账与智能备件库管理,降低突发故障风险。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 日常巡检操作:在值班期间完成设备外观、接点温度和运行噪声检查,使用红外测温仪采集关键点温度,发现异常立即汇报,形成巡检日报。
|
||||
2. 周期检修配合:参与变压器绝缘电阻、断路器动作时间和母线导电率等检测,学习标准化检修流程,并协助录入检修台账系统,确保记录完整。
|
||||
3. 预防性维护执行:在导师指导下完成油样色谱与绝缘介质损耗测试,识别潜在热故障与绝缘劣化隐患,提出提前检修建议。
|
||||
4. 备件管理跟进:负责备件台账更新,定期盘点断路器触头和保护模块库存,确保2–3套安全库存,使用WMS系统完成出入库记录。
|
||||
|
||||
### 流程四:应急演练与培训
|
||||
|
||||
流程描述:定期开展桌面推演与实地操作相结合的演练,覆盖失电、开关柜故障和恢复等典型场景。通过系统化培训和跨部门协同演练,确保运维人员熟悉应急流程,提升快速响应和团队配合能力。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 演练计划落实:参与制定半年综合演练与季度专项演练表,明确演练目标、场景和步骤,确保演练覆盖典型风险。
|
||||
2. 演练执行记录:在实操演练中跟踪时间节点,记录处置环节偏差和人员表现,输出演练日志和问题清单,供后续整改使用。
|
||||
3. 培训材料整理:协助准备电气安全与事故处置培训课件,整理成PPT和考核题库,供新员工学习与技能考核。
|
||||
4. 跨部门协作复盘:演练后收集消防、安保等部门反馈,整理跨部门协同问题,形成改进建议,推动整体联动效率提升。
|
||||
|
||||
### 流程五:智能监控与数据化预警
|
||||
|
||||
流程描述:依托多参数传感器网络和大数据平台,对电气设备运行状态进行实时监测与趋势预测。通过多级报警与数据闭环机制,实现提前预警和快速处置,推动变电站运维向智能化转型。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 数据采集执行:维护电压、电流、功率因数、温湿度等传感器网络,检查数据采集的实时性和准确性,并输出日报校核结果。
|
||||
2. 趋势建模支持:协助整理历史运行数据,配合导师使用Python与机器学习模型分析设备寿命曲线,预测潜在故障点。
|
||||
3. 报警阈值应用:参与设定电气参数的预警和报警值,测试告警信号是否能通过值班终端和移动APP同步推送,确保信息传递畅通。
|
||||
4. 数据闭环复盘:在每次异常处置后,整理事件数据与处置措施,录入MySQL数据库,生成分析报告,为后续检修和运维优化提供数据支持。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
项目名称:某220kV变电站迎峰度夏站内外设备专项集中检查项目
|
||||
|
||||
项目描述:该项目面向迎峰度夏期间电网负荷大、风险高的运行场景,重点通过无人机对站外线路、杆塔及站内设备进行精细化巡检。夏季高温条件下,设备常见问题包括接点发热、绝缘老化与金具锈蚀,若未能及时发现,将可能引发设备故障或大范围停电。本人在导师指导下,主要参与航线制定、无人机操作、影像采集与缺陷初筛等工作。通过“航前准备—航线执行—影像整理—缺陷标注”的岗位流程,既提升了巡检效率,也为运维团队提供了可追溯的第一手巡检数据。
|
||||
|
||||
实习时间:2024.03~2024.12
|
||||
|
||||
实习岗位:电力巡检无人机飞手
|
||||
|
||||
实习企业:xxx电力科技有限公司
|
||||
|
||||
岗位职责:
|
||||
|
||||
1. 依据巡检计划与作业指导书协助制定航线与作业清单,完成起降点、安全区与飞行窗口的准备工作;
|
||||
2. 在导师指导下操控多旋翼无人机完成站外线路与站内设备的例行巡检,获取可见光与红外影像,并做好飞行与作业记录;
|
||||
3. 按照巡检规范对疑似异常点位进行复拍与加密取证,配合同步完成“空—地”交叉核验;
|
||||
4. 使用基础工具对影像进行初步筛查与标注,整理缺陷清单与示意截图,提交技术团队复核;
|
||||
5. 维护设备状态与电池健康,完成航前/航后检查与固件、载荷自检,并更新器材台账;
|
||||
6. 参与现场安全联络,遵守低空作业与电力现场管控要求,发现风险及时上报并协助处置;
|
||||
7. 参与巡检总结与航线复盘,记录障碍物/干扰源分布与改进建议,完善下一轮作业方案。
|
||||
|
||||
### 流程一:航线制定
|
||||
|
||||
流程描述:根据巡检计划与作业指导书,协助导师制定站外线路与站内设备的无人机航线。明确起降点位置、安全缓冲区与飞行窗口,并形成书面作业清单。通过风险预判标记高危点位,为后续的飞行执行奠定基础。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 任务解读:研读巡检任务单,标记站外杆塔编号与站内设备清单,形成航点草案。
|
||||
2. 航线规划:在导师监督下,利用地面站软件编制航线,控制航高、角度与覆盖范围,确保影像采集完整。
|
||||
3. 作业清单整理:将任务目标、设备编号、飞行窗口及影像要求汇总成检查清单,提交导师复核。
|
||||
4. 风险点标记:结合历史缺陷记录与环境因素,提前在航线中标注重点取证点,避免遗漏。
|
||||
|
||||
### 流程二:航前检查
|
||||
|
||||
流程描述:在执行任务前,完成无人机机体、电池与载荷设备的全面检查,确保飞行安全可靠。重点关注固件更新、电池电量健康、螺旋桨与云台状态,并做好器材台账更新。通过模拟起飞测试飞行稳定性,排除潜在隐患。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 设备检测:逐项检查无人机机体、电池、遥控器与云台相机,确保状态良好。
|
||||
2. 固件确认:完成固件与飞控系统更新,检查飞行模式是否正常,避免因版本不符引发故障。
|
||||
3. 电池管理:核对电池电量、循环次数与温度状态,提前配置备用电池,确保连续航拍任务可执行。
|
||||
4. 试飞演练:进行短距离试飞,观察姿态控制与图传信号,确认飞行系统稳定后方可执行主任务。
|
||||
|
||||
### 流程三:线路巡检
|
||||
|
||||
流程描述:操控无人机对220kV输电线路进行例行航拍巡检,获取杆塔、导线、绝缘子与金具的高清可见光与红外影像。重点排查导线发热、绝缘破损与异物搭挂,确保覆盖完整、画面清晰。地面记录同步完成,保证数据有据可依。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 航拍执行:按照既定航线操控无人机,保持稳定高度与角度,逐点完成影像采集。
|
||||
2. 红外检测:切换红外镜头,对导线与接点进行温度扫描,发现温差异常时立即复拍。
|
||||
3. 复拍取证:在发现疑似异常点位时,进行多角度、多距离复拍,确保后续分析有足够依据。
|
||||
4. 作业记录:在巡检日志中记录飞行时间、气象条件与拍摄点位,保障数据可追溯。
|
||||
|
||||
### 流程四:站内巡检
|
||||
|
||||
流程描述:在导师带领下,使用无人机完成变电站内设备的低空巡视,重点覆盖母线、刀闸、开关柜顶部及人工难以触及的部位。通过可见光与红外成像结合,快速识别发热、锈蚀、绝缘老化等隐患。现场同步落实安全边界布控,保证飞行与地面作业的互不干扰。站内巡检结果为后续继电保护校验与缺陷整治提供影像依据。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 飞行实施:根据站内安全区划设定航点,严格控制飞行高度与航速,避免靠近带电设备,确保巡航过程安全。
|
||||
2. 重点采集:对变压器顶盖、刀闸接点、开关柜母线槽等重点发热点位进行重点取景与红外复测。
|
||||
3. 影像对比:将本次影像与历史档案进行对比,若温度或外观差异显著,立即标记为疑似缺陷点。
|
||||
4. 日志记录:详细记录巡检时间、设备编号、影像编号与环境条件,形成完整台账,保证后续分析可追溯。
|
||||
|
||||
### 流程五:影像整理
|
||||
|
||||
流程描述:巡检结束后,及时导出无人机采集的可见光与红外影像,对图像进行初步筛查与标注。借助基础图像处理工具,将明显异常点进行截图、编号并整理入缺陷清单。与导师或技术团队交接时,提交完整的航线飞行记录与影像存档,确保信息流转规范。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 数据导出:将无人机存储卡中的影像分门别类导出,建立“站内/站外、可见光/红外”的文件夹结构。
|
||||
2. 初步筛查:在工具软件中快速浏览影像,挑选疑似异常部位(如绝缘子裂纹、接头过热、金具锈蚀)并加上标签。
|
||||
3. 缺陷清单:将标注结果整理成缺陷清单,包含截图、设备位置、时间戳及异常说明,便于复核。
|
||||
4. 资料交付:将影像文件、清单与飞行日志一并打包提交,形成正式交付资料,支持后续的专家复核与运维决策。
|
||||
|
||||
### 流程六:复盘总结
|
||||
|
||||
流程描述:在巡检任务完成后,参与航线复盘与总结会议。结合飞行日志、影像清单与现场反馈,记录障碍物分布、信号干扰源、飞行路径优化点等,为下一轮巡检提供改进建议。通过复盘实现“经验固化—问题追踪—流程优化”的闭环,逐步提升巡检的效率与安全性。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 航线回顾:逐段回放无人机航线,分析飞行高度、转弯半径与影像覆盖率,提出更优航点规划建议。
|
||||
2. 问题记录:记录飞行中遇到的风速波动、信号干扰、光照不足等问题,并附带改进措施。
|
||||
3. 安全复盘:复盘安全事件与潜在风险,如电池余量不足、人员误入飞行区等,形成警示案例。
|
||||
4. 经验沉淀:将改进意见写入团队共享文档,作为标准化巡检流程的一部分,提升后续作业的参考价值。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
项目名称:EHS管理体系建设与运行项目
|
||||
|
||||
项目描述:本项目聚焦能源企业的环境、健康与安全(EHS)体系建设与运行,目标是通过ISO14001与ISO45001的融合,建立覆盖生产全流程的合规与风险控制框架。体系建设遵循PDCA循环,逐步形成“决策承诺—跨部门协作—风险评估—目标策划—文件运行—试运行改进”的闭环模式,实现危险源和环境因素的系统识别与分级管控。通过风险数据库建设、隐患排查整改闭环、事故调查反馈与培训演练,企业的安全环保运行能力显著增强。实施后,职业伤害率下降12%,废水COD排放降低6%,隐患整改闭环率达98%以上,合规性与绿色竞争力得到显著提升。
|
||||
|
||||
实习时间:2024.03~2024.12
|
||||
|
||||
实习岗位:EHS工程师
|
||||
|
||||
实习企业:xxx能源科技有限公司
|
||||
|
||||
### 岗位职责:
|
||||
|
||||
1. 协助EHS信息化平台与隐患排查系统操作,完成隐患上报、整改闭环和台账分析,使用Excel完成统计与报表。
|
||||
2. 参与危险源辨识与风险评估,运用JSA、LEC和矩阵法完成工序拆解,提出管控措施与残余风险复评。
|
||||
3. 协助事故调查,利用5Why与鱼骨图完成根因分析,形成纠正与预防措施清单,并制作案例课件。
|
||||
4. 参与日常与专项检查,围绕动火、高处、受限空间、电气等作业开展票证合规核查,形成整改跟踪表。
|
||||
5. 协助环保运行,管理废水、废气、噪声与固废台账,分析在线监测数据并提出优化建议。
|
||||
6. 协助安全管理制度运行,参与ISO14001与ISO45001标准体系落地,支持目标分解、内部审核和应急演练。
|
||||
|
||||
### 流程一:管理层决策与资源承诺
|
||||
|
||||
流程描述:在体系建设初期,最高管理层的承诺与资源投入是成功运行的前提。通过签署EHS方针声明、设立专项预算、明确职责分工,企业将EHS管理纳入战略层面,确保体系具备合法性、资金保障与执行权威性。该环节为体系运行奠定顶层设计基础,使EHS成为全员参与的制度化行为,而非孤立部门的单一工作。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 方针声明协助:在导师指导下整理EHS方针文件,涵盖“预防为主、全员参与、持续改进”等核心内容,协助将方针公示至厂区公告栏和OA系统。通过收集员工签字确认和反馈问卷,形成宣贯效果统计表,作为体系外审时的宣传证明材料。
|
||||
2. 预算计划支持:协助财务与EHS部门核对年度费用,使用Excel透视表对培训、检测和应急物资费用进行分类汇总,保证EHS专项预算占营收比例≥0.5%。同时对比上年度投入与使用情况,形成差异分析表,提交给管理层作为决策参考。
|
||||
3. 职责分解执行:参与绘制EHS职责分解表,将各部门在隐患排查、事故上报、文件修订等职责落实到岗位层面,利用Visio绘制责任矩阵,形成“部门—岗位—任务”图谱,确保责任分工在制度和文件中均有明确呈现。
|
||||
4. 审阅记录管理:整理管理层会议纪要,将承诺、预算分配与职责分工内容汇总成电子档案,录入信息化平台的“承诺与资源配置”模块。这样在外部审核或政府检查时,能快速调取完整记录,证明体系合法性与合规性。
|
||||
|
||||
### 流程二:成立跨部门工作组
|
||||
|
||||
流程描述:EHS体系涉及生产、设备、环保、人事等多个部门,跨部门协作是体系运行的核心支撑。通过组建跨部门工作组,打破信息壁垒,实现全员参与和决策统一。该小组不仅是体系建设的执行力量,也是后续持续改进的重要骨干。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 成员选拔整理:协助EHS主管筛选工作组成员,确保一线员工比例≥40%,并建立成员档案表,记录岗位、工龄和EHS经验,保证方案与实际操作紧密结合。
|
||||
2. 培训落实记录:协助组织体系培训,内容涵盖风险识别、法律法规和应急操作,考试合格率≥90%。负责收集签到表、试卷和成绩汇总,形成培训档案,为外部审核提供依据。
|
||||
3. 会议协作记录:在月度跨部门会议中,记录讨论要点与分歧点,整理问题清单并形成任务分解表,上传至信息化平台,实现责任分工与追踪。
|
||||
4. 骨干培养支持:在导师指导下参与工作组日常任务,学习协调跨部门资源的方法,并撰写案例总结,为未来改进提供经验材料。
|
||||
|
||||
### 流程三:初始状态评审与风险识别
|
||||
|
||||
流程描述:在体系建立前,必须全面评估企业现状,包括法规合规性、事故记录、环境因素和岗位危险源。通过法规识别、风险评价与环境因素调查,形成风险清单和合规基线,为目标制定和措施设计提供数据支撑。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 法规清单编制:协助收集并整理适用的法律法规,不少于50项,包括《安全生产法》《环境保护法》等,录入法规数据库,并标注更新日期,确保法规库动态更新。
|
||||
2. 风险评估实践:在导师指导下参与风险识别,采用LEC法计算D值,将超过100的风险项归为重大风险,协助编写风险评估报告,并提出专项管控措施建议。
|
||||
3. 环境因素调查:参与现场走访与监测,记录废气、废水、噪声与固废等因素,建立环境因素台账,并协助设定削减目标,例如废水COD降低≥5%。
|
||||
4. 数据归档管理:将法规清单、历史事故案例和风险评估结果录入信息化平台,建立风险数据库,半年更新一次,确保可追溯性与完整性。
|
||||
|
||||
### 流程四:方针目标制定与管理策划
|
||||
|
||||
流程描述:在风险评审完成后,企业需制定EHS方针并分解为量化目标和部门行动计划,确保目标明确、可衡量和可落实。通过管理策划,将抽象的愿景转化为部门的具体行动。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 方针宣贯协助:协助制作EHS方针宣传册,分发至各部门,并张贴于生产现场显眼位置,确保方针深入人心。
|
||||
2. 目标设定支持:参与制定年度指标,如职业伤害率降低≥10%、能源消耗降低≥3%、废水COD降低≥5%,并协助分解至责任部门,形成部门指标表。
|
||||
3. 行动计划编制:配合设备部、环保部等,将目标转化为操作计划,如设备部负责防爆检查,环保部负责废水治理,整理成行动清单并跟踪执行进度。
|
||||
4. 监控指标表格:利用Excel制作监控表,按月收集实际完成数据,对比目标完成情况,使用条件格式标注偏差,形成月度EHS绩效通报。
|
||||
|
||||
### 流程五:体系文件编制与发布
|
||||
|
||||
流程描述:体系文件是EHS管理的操作指南,涵盖管理手册、程序文件和作业指导书,确保员工知道“做什么、怎么做、问题出现时怎么办”。通过文件化运行,避免管理依赖个人经验,提升制度一致性与可追溯性。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 文件框架编制:协助编制1本管理手册、20份程序文件和50份作业指导书,覆盖高风险环节。负责整理初稿并统一版式,保证体系文件结构清晰。
|
||||
2. 版本控制支持:在文件修订过程中,维护编号与修订记录,避免旧版被误用,并建立版本对照表,确保文件使用的唯一性和正确性。
|
||||
3. 档案管理执行:参与建立纸质和电子档案库,保存事故记录、培训签到表、检查报告≥3年,保证满足内外部审计追溯要求。
|
||||
4. 文件宣贯落实:协助组织文件培训,收集一线员工反馈,整理难点与改进建议,推动指导书更贴近实际操作。
|
||||
|
||||
### 流程六:体系试运行与问题改进
|
||||
|
||||
流程描述:试运行阶段持续三个月,用于检验体系适用性和执行力。通过收集运行情况、不符合项跟踪与持续改进,确保体系在正式认证前实现稳定运行。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 运行监督协助:每周收集运行日志、检查记录与异常事件,整理为EHS周报,提交管理层审阅,推动问题早发现早处理。
|
||||
2. 不符合项跟踪:在试运行中发现的不符合项建立台账,使用信息化系统追踪整改状态,确保关闭率≥95%,并形成复查记录。
|
||||
3. 改进措施建议:在导师指导下将问题分类为制度、培训或执行层面,提出针对性修订建议,保证PDCA循环闭环。
|
||||
4. 运行总结报告:协助撰写体系试运行总结,包含不符合项统计、整改率和改进措施,作为正式审核的基础材料。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
项目名称:风机叶片生产质量控制与研发工艺优化项目
|
||||
|
||||
项目描述:该项目面向风机叶片生产环节,目标是通过工艺优化与质量管控,确保叶片在极端风况下的稳定性和耐久性。本人在导师指导下主要参与原材料检验、工艺执行、过程监控和缺陷修复等一线工作,重点围绕树脂浸渍、纤维铺层、固化过程记录与小缺陷修复展开。通过全流程的操作配合与数据记录,保障叶片生产的可追溯性和一致性,提升了班组在生产效率、质量合格率和工艺稳定性上的整体水平。
|
||||
|
||||
实习时间:2024.03~2024.12
|
||||
|
||||
实习岗位:风机叶片生产技术员
|
||||
|
||||
实习企业:xxx新能源装备制造有限公司
|
||||
|
||||
岗位职责:
|
||||
|
||||
1. 按作业指导书参与叶片铺层、成型与固化等关键工序,配合完成切割、修边与表面处理的现场操作与自检;
|
||||
2. 协助复合材料(玻纤/碳纤、树脂等)领用与批次登记,核对来料外观与合格证明,保障物料可追溯;
|
||||
3. 维护生产环境与关键参数记录(如温湿度、真空状态、固化时间),发现异常及时上报并协助处置;
|
||||
4. 配合真空灌注、模具成型、喷涂等设备的日常点检与保养,保持设备洁净与工装完好;
|
||||
5. 参与质量检验配合工作,按要求完成尺寸测量、外观检查与协助无损检测取样,记录缺陷并跟进返修;
|
||||
6. 根据工艺标准在导师指导下开展小缺陷修复(如气泡、脱胶、边缘毛刺),并配合完成复测与确认;
|
||||
7. 汇总班组生产与质检数据,形成日报/周报,支撑工艺优化与问题复盘;
|
||||
8. 严格执行EHS要求,规范佩戴与使用劳防用品,配合班组开展5S与安全巡检。
|
||||
|
||||
### 流程一:原材料检验
|
||||
|
||||
流程描述:在生产前对树脂、玻纤、碳纤等材料进行批次核对与外观检查,确保入库物料符合工艺要求。通过对供应商合格证明、批次编码和物性指标的比对,结合现场取样检测,形成完整的入库记录,避免不合格材料流入生产线。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 批次核对:逐桶检查树脂桶号、逐卷扫描玻纤/碳纤卷号,与来料清单和供应商合格证一一对应;在系统中输入批次信息,并为每卷材料粘贴标签,方便生产追溯。
|
||||
2. 外观检查:对树脂进行目测流动性和杂质检查,观察纤维布表面是否存在折痕、掉丝、灰尘或受潮痕迹;用便携式湿度计测试纤维含水率,确保未超过工艺要求。
|
||||
3. 小样检测:在导师监督下取少量树脂样品进行固化试片,记录凝胶时间与固化完全时间;纤维材料抽取短段,进行拉伸强度快速检测,确认是否符合工艺基线。
|
||||
4. 记录归档:将检验结果逐项填入《原材料入库检验表》,并在系统端上传检测数据;同时将异常批次单独隔离并贴上红色标签,禁止上线,形成可追溯的入库档案。
|
||||
|
||||
### 流程二:铺层操作
|
||||
|
||||
流程描述:根据工艺指导书完成玻纤/碳纤布的裁剪与铺层,严格按照排布方向和层间顺序操作。过程强调尺寸精度、层间紧密性和避免气泡,确保后续灌注与固化环节的质量稳定。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 裁剪定位:使用专用裁剪台与模板,在导师指导下将纤维布按毫米精度裁剪,逐片编号,并叠放在防潮架上,避免交叉混放。
|
||||
2. 铺层执行:严格遵循工艺文件,从叶片根部到叶尖依次铺设,控制搭接宽度不超过工艺要求(一般 20–30 mm),并在转角区域加贴额外补强布,避免应力集中。
|
||||
3. 气泡处理:在每铺设 2–3 层后使用橡胶滚筒反复压实,排出层间空气,确保纤维与模具表面完全贴合;对局部顽固气泡区域,用针刺小孔再进行真空辅助排气。
|
||||
4. 自检复核:完成一段铺层后,用手电筒检查纤维方向是否偏移,用钢尺复核关键部位尺寸,记录在《工序自检单》,偏差超标立即停工并报告导师处理。
|
||||
|
||||
### 流程三:真空灌注
|
||||
|
||||
流程描述:在导师指导下参与树脂真空灌注操作,重点关注真空度、树脂流速与灌注均匀性。该环节要求保持模具密封性和树脂分布一致性,以防出现干斑、夹气等缺陷,直接影响固化后的力学性能。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 设备准备:提前检查真空泵油位与管路密封,确认树脂桶温度通过加热套稳定在 25–30℃,并进行树脂粘度测试,保证在可灌注范围内。
|
||||
2. 灌注执行:在模具边缘铺设导流介质并布置管路,开启真空泵逐步抽真空至 -0.09 MPa 后开始引入树脂;全过程用流量计观察树脂流速,确保在设定区间内。
|
||||
3. 过程监控:在灌注进行时,每隔 5 分钟记录一次真空度、环境温湿度和树脂流动距离;如发现真空度下降超过 0.01 MPa,立即检查密封条并用胶带加固。
|
||||
4. 结果检查:灌注完成后进行局部切片检查,确认纤维完全被树脂浸润;对未浸透区域立即补灌,并记录在《灌注过程监控表》中,作为后续固化质量分析的依据。
|
||||
|
||||
### 流程四:固化操作
|
||||
|
||||
流程描述:在树脂灌注完成后进入固化阶段,通过温度和时间的精确控制确保树脂完全交联,叶片达到预定的力学性能。固化环节要求对温度曲线、真空保持与环境湿度进行全程监控,并在结束后进行表面检查与记录,作为质量追溯的重要依据。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 设备检查:在固化前确认加热毯和控温系统正常运行,温控探头位置摆放到叶片根部、叶尖及中段,保证温度均匀。
|
||||
2. 固化执行:按照工艺曲线逐步升温至设定值(如 80–85℃),保持规定时间,并全程记录升温速率与恒温时间,避免因升温过快导致内应力过大。
|
||||
3. 真空保持:在固化过程中持续保持真空度,定时查看真空表,发现波动立即检查密封胶条和泵体状态。
|
||||
4. 结果确认:固化结束后使用硬度计或刮削测试检查表面树脂固化情况,确认无粘手感;将温度曲线、固化时间等数据存档。
|
||||
|
||||
### 流程五:修边处理
|
||||
|
||||
流程描述:固化完成后对叶片多余边料进行切割和修整,保证叶片尺寸精度和外观完整性。该流程不仅影响叶片装配精度,也直接决定气动性能的稳定性。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 切割操作:在导师指导下使用手持切割机或专用修边设备,沿设计线切除多余边料,保持刀具锋利并控制切割速度。
|
||||
2. 尺寸复核:修边后用钢卷尺、卡尺对叶片关键尺寸(根部直径、翼缘厚度)进行复核,结果记录在《修边尺寸检查表》。
|
||||
3. 边缘处理:用砂轮或打磨机将边缘倒角,去除毛刺,确保边缘平滑避免裂纹源。
|
||||
4. 现场清理:及时清扫边料碎屑和粉尘,保持工作环境整洁,减少杂质对后续喷涂和检测环节的影响。
|
||||
|
||||
### 流程六:表面处理
|
||||
|
||||
流程描述:修边完成后对叶片表面进行打磨、清洁和喷涂,为后续运行中的耐候性和防腐蚀性能提供保障。重点在于表面平整度、喷涂厚度和覆盖均匀性。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 表面打磨:使用电动打磨机对叶片表面进行全覆盖打磨,去除表层气泡、划痕和树脂突点,确保喷涂前的平整度。
|
||||
2. 清洁准备:使用无尘布和有机溶剂擦拭叶片表面,去除灰尘与油污,避免影响涂层附着力。
|
||||
3. 喷涂作业:在喷涂间按照工艺要求均匀喷涂底漆和面漆,控制喷枪移动速度和距离,保证涂层厚度在标准范围内。
|
||||
4. 涂层检查:喷涂完成后利用涂层测厚仪检测漆层厚度,确保均匀覆盖并达到防腐蚀要求。
|
||||
|
||||
### 流程七:缺陷修复
|
||||
|
||||
流程描述:在叶片表面或结构检测中发现气泡、裂纹或脱胶等小缺陷时,技术员需按工艺标准进行修复,确保叶片整体性能达标。修复过程要求材料匹配、操作精细,并在返工后进行复检确认。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 缺陷定位:在无损检测或外观检查中发现缺陷后,使用标记笔圈定缺陷区域并拍照存档。
|
||||
2. 修复操作:对气泡或裂纹进行打磨开口处理,清洁后填充匹配树脂或贴补纤维布,随后在真空袋下进行二次固化。
|
||||
3. 质量确认:修复完成后进行目视检查和超声波检测,确保缺陷消除且无二次裂纹。
|
||||
4. 记录归档:将缺陷部位、修复方法、使用材料和复检结果填入《缺陷修复记录表》,以便后续质量追踪。
|
||||
|
||||
### 流程八:质量检验
|
||||
|
||||
流程描述:在叶片出厂前进行全面质量检验,包括尺寸检测、外观检查、力学性能抽检等,确保符合设计标准和交付要求。检验合格后才能进入最终验收环节。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 尺寸检测:使用激光测距仪、钢卷尺对叶片长度、根部直径、翼型关键点尺寸进行检测,确保偏差在标准范围内。
|
||||
2. 外观检查:检查表面是否存在气泡、裂纹、涂层脱落等缺陷,并对重点部位拍照存档。
|
||||
3. 性能抽检:在样件叶片上进行弯曲强度和疲劳性能抽样试验,确认批次质量稳定性。
|
||||
4. 结果汇总:形成《出厂检验报告》,将检测数据和结论提交主管审核,作为后续交付的依据。
|
||||
|
||||
|
||||
|
||||
|
||||
项目名称:某工厂晶硅光伏电池片制备项目
|
||||
|
||||
项目描述:本项目致力于晶体硅光伏电池片的制备工艺优化与质量控制,涵盖硅片切割、化学清洗、表面制绒、PN结扩散、电极制备、减反射膜沉积、快速烧结及组件封装等全流程。项目目标是提高光伏电池片的光电转换效率(≥15%)、稳定性与寿命,降低材料损耗,确保生产过程符合GB/T11446.1-1997电子级水质、IEC61215光伏组件测试等标准,最终生产出高效、低损耗的光伏电池组件,满足地面电站和分布式能源应用需求。
|
||||
|
||||
实习时间:2024.03~2024.12
|
||||
|
||||
实习岗位:光伏电池生产技术员
|
||||
|
||||
实习企业:xxx新能源有限公司
|
||||
|
||||
### 岗位职责:
|
||||
|
||||
1. 负责丝网印刷工序的标准操作与质量把控,独立操作丝网印刷机完成电池片正背面电极印刷,精确执行浆料粘度调试、网版对位校准与印刷参数(压力、速度、间隙)设定,实时监测印刷图形完整性并及时识别处理断栅、虚印、漏浆等缺陷,确保电极印刷厚度均匀且符合工艺规格要求,每日产出合格片数达班组指标。
|
||||
2. 参与碱制绒槽体的工艺维护与监控,按标准操作流程完成制绒液的原液配制、日常补液与定期更换,持续跟踪槽液温度、浓度及IPA添加量等关键工艺参数,确保硅片表面形成均匀金字塔绒面结构,使平均反射率稳定控制在11%以下,有效提升电池片光捕获能力。
|
||||
3. 3. 开展设备日常点检与基础维护工作,按规定对丝网印刷机、IV测试仪等设备进行开机校准、运行状态监控与下班前清洁保养,及时发现传送带偏移、真空吸附异常或传感器报警等故障征兆,上报技术员并协助完成应急处理,保障设备综合利用率(OEE)达95%以上。
|
||||
4. 负责生产文档的规范填写与数据整理,准确记录工单进度、设备点检表、工艺参数日志与质量检验结果,确保所有生产数据实时、准确、可追溯,并协助班组汇总每日产量、良率与设备停机时间等基础数据,为生产例会提供决策支持。
|
||||
5. 融入班组团队协作体系,主动与制绒、扩散、PECVD等上下工序保持沟通,协调物料流转与异常信息反馈,参与班组班前会与简单质量分析会,配合团队解决现场工艺波动问题,共同维护高效、稳定、安全的生产运行环境。
|
||||
|
||||
### 流程一:硅片切割
|
||||
|
||||
流程描述:该环节通过多线切割设备将单晶硅棒切割成厚度约0.3mm的硅片,并进行自动化在线检测,确保硅片表面平整度、厚度公差及电学性能符合后续工艺要求。此过程对于保障后续制程的稳定性与产品良率至关重要。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 硅片切割操作:使用精密多线切割设备,确保硅片的厚度公差控制在±10μm内,并通过激光测厚仪实时监控;精确切割减少后续过程中的材料浪费,保障良品率。
|
||||
2. 微裂纹检测:使用红外成像仪对硅片表面进行微裂纹检测,剔除存在缺陷的硅片,避免进入后续工艺环节导致更大损失;此举有效降低生产报废率。
|
||||
3. 电阻率测试:根据GB/T1550标准对电阻率进行检测,确保硅片电学性能的一致性,减少成品之间的性能波动,提高组件整体效率。
|
||||
4. 表面平整度监控:结合自动化检测模块对硅片表面平整度进行监控,确保在切割过程中减少翘曲度,避免后续扩散工艺中产生不均匀性。
|
||||
|
||||
### 流程二:硅片表面清洗
|
||||
|
||||
流程描述:通过SC-1和SC-2溶液配合兆声波和超纯水清洗硅片,去除表面污染物,恢复表面纯净度,从而提升后续工艺的稳定性,特别是PN结形成及膜层沉积的均匀性。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 有机物去除:使用兆声波与SC-1溶液结合,确保去除表面≥0.2μm的有机物,避免残留影响后续膜层沉积质量。
|
||||
2. 金属离子去除:采用H2O2氧化与H+溶液去除金属离子,减少表面杂质,避免其在后续工艺中形成复合中心,保证光电性能。
|
||||
3. 超纯水冲洗:通过电阻率≥18MΩ·cm的超纯水彻底冲洗硅片,确保表面无离子残留,避免影响制绒及膜层沉积的稳定性。
|
||||
4. 清洗频率控制:每批次硅片严格执行全流程清洗,避免跳过步骤,确保表面清洁度,提升后续工艺的一致性和稳定性。
|
||||
|
||||
### 流程三:表面制绒处理
|
||||
|
||||
流程描述:利用碱性溶液在70–85℃的条件下进行各向异性腐蚀,形成金字塔状绒面结构,从而增强光吸收率并提高电池片的光电转换效率。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 溶液浓度调控:调配NaOH溶液浓度至1%±0.2%,确保制绒均匀,避免浓度过高造成表面粗糙,影响光电性能。
|
||||
2. 制绒深度控制:确保制绒深度控制在20–25μm内,避免腐蚀过深影响硅片机械强度,同时保证较高的光吸收效果。
|
||||
3. 添加剂控制:在溶液中加入0.5–1%乙醇,提高腐蚀均匀性,避免局部光学性能差异化,确保制绒效果一致。
|
||||
4. 温度与时间控制:保持反应温度在70–85℃,同时控制反应时间,确保制绒层的一致性,提升整体电池效率。
|
||||
|
||||
### 流程四:扩散制结
|
||||
|
||||
流程描述:通过管式扩散炉在850–900℃的条件下引入POCl₃,形成均匀的PN结,确保电池片的电学性能与光电转换效率符合标准。
|
||||
|
||||
工作内容:
|
||||
|
||||
1. 扩散深度与电阻控制:控制扩散深度在0.3–0.5μm,保持电阻均匀性在10%以内,避免电流失衡导致效率降低。
|
||||
2. 温度与时间管理:严格控制扩散温度与时间,确保工艺稳定,避免过高温度造成硅片表面损伤,影响电池性能。
|
||||
3. 氮气保护:保证扩散过程中氮气流量≥5L/min,避免氧气影响工艺,确保PN结的稳定性与均匀性。
|
||||
4. 扩散炉校准:定期对扩散炉进行校准,确保温度均匀性,避免工艺波动,提升批次一致性与可靠性。
|
||||
BIN
个人简历_能源/doc/能源/苏拓.png
Normal file
|
After Width: | Height: | Size: 792 KiB |
141
个人简历_能源/energy_theme_1.css
Normal file
@@ -0,0 +1,141 @@
|
||||
:root {
|
||||
/* 能源主题配色 - 绿色环保与科技蓝 */
|
||||
--background: oklch(0.1200 0.0100 200);
|
||||
--foreground: oklch(0.9800 0.0050 200);
|
||||
--card: oklch(0.1800 0.0150 200);
|
||||
--card-foreground: oklch(0.9500 0.0050 200);
|
||||
--popover: oklch(0.2000 0.0150 200);
|
||||
--popover-foreground: oklch(0.9800 0.0050 200);
|
||||
|
||||
/* 主色调 - 充满活力的绿色 */
|
||||
--primary: oklch(0.7200 0.1800 142);
|
||||
--primary-foreground: oklch(0.1200 0.0100 142);
|
||||
|
||||
/* 次要色调 - 科技蓝 */
|
||||
--secondary: oklch(0.6800 0.1600 230);
|
||||
--secondary-foreground: oklch(0.9800 0.0050 230);
|
||||
|
||||
/* 静音色 */
|
||||
--muted: oklch(0.2500 0.0100 200);
|
||||
--muted-foreground: oklch(0.7000 0.0050 200);
|
||||
|
||||
/* 强调色 - 太阳能金黄 */
|
||||
--accent: oklch(0.8500 0.1500 85);
|
||||
--accent-foreground: oklch(0.1500 0.0100 85);
|
||||
|
||||
/* 警告色 */
|
||||
--destructive: oklch(0.6500 0.2200 28);
|
||||
--destructive-foreground: oklch(0.9800 0.0050 28);
|
||||
|
||||
/* 边框和输入 */
|
||||
--border: oklch(0.3000 0.0100 200);
|
||||
--input: oklch(0.2200 0.0100 200);
|
||||
--ring: oklch(0.7200 0.1800 142);
|
||||
|
||||
/* 图表配色 - 能源数据可视化 */
|
||||
--chart-1: oklch(0.7200 0.1800 142); /* 绿色 - 可再生能源 */
|
||||
--chart-2: oklch(0.6800 0.1600 230); /* 蓝色 - 水电 */
|
||||
--chart-3: oklch(0.8500 0.1500 85); /* 金色 - 太阳能 */
|
||||
--chart-4: oklch(0.7500 0.1400 190); /* 青色 - 风能 */
|
||||
--chart-5: oklch(0.6000 0.1200 320); /* 紫色 - 核能 */
|
||||
|
||||
/* 字体设置 */
|
||||
--font-sans: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
|
||||
--font-serif: 'Merriweather', 'Georgia', serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
|
||||
/* 圆角和间距 */
|
||||
--radius: 0.75rem;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
/* 阴影效果 - 柔和的光晕效果 */
|
||||
--shadow-2xs: 0 1px 2px 0px rgba(0, 255, 128, 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px rgba(0, 255, 128, 0.08);
|
||||
--shadow-sm: 0 2px 4px 0px rgba(0, 255, 128, 0.10), 0 1px 2px -1px rgba(0, 255, 128, 0.08);
|
||||
--shadow: 0 4px 6px -1px rgba(0, 255, 128, 0.10), 0 2px 4px -2px rgba(0, 255, 128, 0.08);
|
||||
--shadow-md: 0 8px 10px -2px rgba(0, 255, 128, 0.12), 0 4px 6px -2px rgba(0, 255, 128, 0.08);
|
||||
--shadow-lg: 0 12px 16px -4px rgba(0, 255, 128, 0.15), 0 6px 8px -2px rgba(0, 255, 128, 0.10);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 255, 128, 0.18), 0 8px 10px -3px rgba(0, 255, 128, 0.12);
|
||||
--shadow-2xl: 0 25px 50px -12px rgba(0, 255, 128, 0.25);
|
||||
|
||||
/* 动画时长 */
|
||||
--transition-fast: 150ms;
|
||||
--transition-base: 300ms;
|
||||
--transition-slow: 500ms;
|
||||
|
||||
/* 渐变色 */
|
||||
--gradient-primary: linear-gradient(135deg, oklch(0.7200 0.1800 142), oklch(0.6800 0.1600 230));
|
||||
--gradient-hero: linear-gradient(180deg, oklch(0.1200 0.0100 200), oklch(0.1800 0.0150 200));
|
||||
--gradient-card: linear-gradient(145deg, oklch(0.1800 0.0150 200), oklch(0.2200 0.0100 200));
|
||||
|
||||
/* 能源特色渐变 */
|
||||
--gradient-solar: linear-gradient(135deg, oklch(0.8500 0.1500 85), oklch(0.9200 0.1200 65));
|
||||
--gradient-wind: linear-gradient(135deg, oklch(0.7500 0.1400 190), oklch(0.8200 0.1200 180));
|
||||
--gradient-hydro: linear-gradient(135deg, oklch(0.6800 0.1600 230), oklch(0.7500 0.1400 220));
|
||||
|
||||
/* 圆角变体 */
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-full: 9999px;
|
||||
}
|
||||
|
||||
/* 深色主题特有样式 */
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 毛玻璃效果 */
|
||||
.glassmorphism {
|
||||
background: rgba(24, 28, 38, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(0, 255, 128, 0.1);
|
||||
}
|
||||
|
||||
/* 发光效果 */
|
||||
.glow {
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 255, 128, 0.3),
|
||||
0 0 40px rgba(0, 255, 128, 0.2),
|
||||
0 0 60px rgba(0, 255, 128, 0.1);
|
||||
}
|
||||
|
||||
/* 能源数据展示特效 */
|
||||
.energy-card {
|
||||
background: var(--gradient-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all var(--transition-base) ease;
|
||||
}
|
||||
|
||||
.energy-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* 技能雷达图容器 */
|
||||
.radar-container {
|
||||
background: radial-gradient(circle at center,
|
||||
rgba(0, 255, 128, 0.05) 0%,
|
||||
transparent 70%);
|
||||
}
|
||||
|
||||
/* 项目卡片网格 */
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
|
||||
/* 打字机效果文字 */
|
||||
.typewriter {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--accent);
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
3760
个人简历_能源/index.html
Normal file
3760
个人简历_能源/index.html.backup_20251027_161848
Normal file
BIN
个人简历_能源/public/EHS管理体系建设与运行项目/EHS管理体系建设与运行项目-主图.jpg
Normal file
|
After Width: | Height: | Size: 154 KiB |