[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 300 94% 42%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 300 94% 42%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 300 94% 42%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 300 94% 42%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Pixel Font */ @font-face { font-family: "PixelFont"; src: url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); font-weight: normal; font-style: normal; } .font-pixel { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; letter-spacing: 0.5px; } /* Pixel Effects */ .pixel-shadow { box-shadow: 4px 4px 0px #657166; } .pixel-shadow-light { box-shadow: 4px 4px 0px rgba(101, 113, 102, 0.5); } .pixel-text { text-shadow: 2px 2px 0px #657166; } .pixel-button { position: relative; transition: all 0.1s ease; box-shadow: 4px 4px 0px #657166; } .pixel-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0px #657166; } .pixel-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: #daebe3; border: 2px solid #657166; border-radius: 8px; box-shadow: 2px 2px 0px #657166; transition: all 0.1s ease; } .pixel-icon-button:hover { background-color: #fde8d3; } .pixel-icon-button:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #657166; } .pixel-input { box-shadow: inset 2px 2px 0px rgba(101, 113, 102, 0.3); } .pixel-section-header { position: relative; text-align: center; margin-bottom: 2rem; } .pixel-divider { position: relative; height: 4px; background-color: #657166; margin-top: 1rem; width: 100px; margin-left: auto; margin-right: auto; } .pixel-divider::before, .pixel-divider::after { content: ""; position: absolute; top: 0; width: 4px; height: 4px; background-color: #657166; } .pixel-divider::before { left: -8px; } .pixel-divider::after { right: -8px; } .pixel-tag { display: inline-block; background-color: #99cdd8; color: #657166; font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid #657166; border-radius: 4px; margin-right: 0.5rem; margin-bottom: 0.5rem; } .pixel-progress { height: 16px !important; border: 2px solid #657166; background-color: #daebe3; overflow: hidden; } .pixel-progress > div { background-color: #cf06c4; height: 100%; } /* Timeline */ .timeline-container { position: relative; width: 100%; } .timeline-item { position: relative; margin-bottom: 2rem; width: 100%; } .timeline-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; background-color: #cf06c4; border: 2px solid #657166; border-radius: 50%; z-index: 2; } .timeline-content { position: relative; margin-left: 2rem; padding: 1rem; background-color: #fde8d3; border: 4px solid #657166; border-radius: 0.5rem; box-shadow: 4px 4px 0px #657166; } .timeline-date { display: inline-block; background-color: #99cdd8; color: #657166; font-size: 0.75rem; padding: 0.25rem 0.5rem; border: 1px solid #657166; border-radius: 4px; margin-bottom: 0.5rem; } .timeline-title { font-size: 1.25rem; font-weight: bold; color: #cf06c4; margin-bottom: 0.25rem; } .timeline-company { font-size: 0.875rem; color: #657166; margin-bottom: 0.5rem; } .timeline-description { list-style-type: disc; padding-left: 1.5rem; font-size: 0.875rem; } .timeline-description li { margin-bottom: 0.25rem; } @media (min-width: 768px) { .timeline-dot { left: 50%; transform: translateX(-50%); } .timeline-item.left { padding-right: calc(50% + 2rem); } .timeline-item.right { padding-left: calc(50% + 2rem); margin-left: auto; } .timeline-item.left .timeline-content { margin-left: 0; margin-right: 2rem; } .timeline-item.right .timeline-content { margin-left: 2rem; } } /* Typing indicator */ .typing-indicator { display: flex; align-items: center; justify-content: center; height: 20px; } .typing-indicator span { display: inline-block; width: 8px; height: 8px; background-color: #657166; border-radius: 50%; margin: 0 2px; animation: typing 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isTerminated="true" isMerged="true" const config = { darkMode: ["class"], content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}',\ [V0_FILE]png:file="public/images/profile-photo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250602041959.jpg-JkRIXR6KIBw91rgrOOb4wFJh5cNEhI.jpeg" isMerged="true" [V0_FILE]png:file="public/images/portfolio-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250531-224807.574-19.jpg-kk2qS0FpbnDOyyWiWT7C74bxX5e8zN.jpeg" isMerged="true" [V0_FILE]png:file="public/images/portfolio-contents.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250531-224807.574-7.jpg-fFTDBIZrX51xjn23z2QSmwJX6BpAGN.jpeg" isMerged="true" [V0_FILE]png:file="public/images/self-intro.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250531-224807.574-21.jpg-VVQTD98WiOGdVBPPqcIgUjiYk2kPXy.jpeg" isMerged="true" [V0_FILE]png:file="public/images/design-works.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/20250531-224807.574-2.jpg-wfeDVUEYd6SLcZqhvVda48Zjk99RTP.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import Link from "next/link" import { Download, Menu, X, Phone, Mail, Smartphone } from "lucide-react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { cn } from "@/lib/utils" import AIChat from "@/components/ai-chat" export default function Home() { const [activeSection, setActiveSection] = useState("home") const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const sections = ["home", "about", "experience", "skills", "ai"] const sectionRefs = { home: useRef(null), about: useRef(null), experience: useRef(null), skills: useRef(null), ai: useRef(null), } useEffect(() => { const handleScroll = () => { const scrollPosition = window.scrollY + 100 for (const section of sections) { const element = sectionRefs[section as keyof typeof sectionRefs].current if (!element) continue const offsetTop = element.offsetTop const offsetHeight = element.offsetHeight if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) { setActiveSection(section) break } } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const scrollToSection = (section: string) => { setMobileMenuOpen(false) const element = sectionRefs[section as keyof typeof sectionRefs].current if (element) { window.scrollTo({ top: element.offsetTop - 80, behavior: "smooth", }) } } return (

{/* Navigation */}

{/* Logo area - removed text */}

{/* Mobile menu button */} {/* Desktop navigation */}

{sections.map((section) => ( ))}

{/* Mobile menu */} {mobileMenuOpen && (

{sections.map((section) => ( ))}

)}

{/* Home Section */}

新媒体创作者
AI技术探索者

用创意和技术，构建数字世界的无限可能

{/* Contact Information */}

+86 173 0269 3054

magicabled@qq.com

{/* About Section */}

关于我

自我介绍

我是一名充满激情的网络与新媒体专业学生，专注于内容创作、社交媒体运营和AI技术应用。我善于将创意想法转化为引人入胜的数字内容，并利用数据分析优化传播效果。

我热爱探索新技术，尤其是AI在内容创作和媒体领域的应用。我相信技术与创意的结合将创造无限可能，并致力于成为连接这两个领域的桥梁。

学术背景

网络与新媒体专业学士学位

深圳大学 | 2020 - 2024

主修课程：新媒体内容创作、社交媒体运营、数据分析、用户体验设计、AI应用基础

AI内容创作专业证书

在线教育平台 | 2023

学习内容：AI辅助创作工具、提示工程、AI内容优化、伦理与版权

我的热爱

新媒体创作

热爱创作各类新媒体内容，包括短视频、图文、播客等多种形式

AI技术

对AI技术充满热情，尤其是AI在创意领域的应用与探索

用户体验

关注用户体验设计，致力于创造既美观又实用的数字产品

{/* Experience Section */}

工作经历

{/* Timeline line */}

{/* Timeline items */}

{/* Item 1 */}

2023年9月 - 现在

新媒体运营实习生

科技初创公司

负责公司官方社交媒体账号的日常运营与内容策划
使用AI工具辅助内容创作，提高创作效率30%
通过数据分析优化内容策略，粉丝增长率提升50%
参与品牌营销活动策划与执行，活动转化率达25%

{/* Item 2 */}

2023年3月 - 2023年8月

内容创作者

自媒体平台

创建并运营个人科技评测账号，累计粉丝10,000+
制作高质量短视频和图文内容，月均浏览量50万+
与多家科技品牌合作，执行商业推广项目
探索AI辅助创作流程，建立个人创作方法论

{/* Item 3 */}

2022年6月 - 2023年2月

社交媒体助理

数字营销机构

协助管理多个客户的社交媒体账号
参与内容日历规划与创意提案
负责社区互动与粉丝维护
编写社交媒体营销报告与数据分析

{/* Item 4 */}

2022年1月 - 2022年5月

校园媒体记者

大学新闻中心

采访报道校园重要活动与新闻
制作校园新闻短视频与图文
参与校园媒体平台的运营与管理
获得"优秀校园记者"称号

项目经验

{/* Project 1 */}

AI辅助内容创作平台

2023年 | 个人项目

设计并开发了一个AI辅助内容创作工具，帮助创作者快速生成内容框架、标题和素材建议。该工具结合了多种AI模型，针对不同内容类型提供定制化建议。

AI 内容创作工具开发

{/* Project 2 */}

品牌社交媒体改版

2023年 | 实习项目

主导某科技品牌社交媒体账号的内容改版，重新定位目标受众，设计新的内容矩阵和视觉风格。改版后一个月内，账号互动率提升120%，粉丝增长40%。

社交媒体内容策略品牌营销

{/* Project 3 */}

数字营销活动策划

2022年 | 团队项目

为某电商平台策划并执行了"科技生活节"营销活动，整合线上线下资源，设计了完整的传播方案。活动期间带动销售额增长35%，获得行业媒体报道。

营销活动策划执行数据分析

{/* Project 4 */}

校园新媒体平台搭建

2022年 | 校园项目

牵头组建校园新媒体团队，搭建多平台内容发布矩阵，建立内容生产流程和质量标准。平台上线三个月内覆盖校内80%学生，成为校园信息传播的重要渠道。

新媒体运营团队管理内容生产

{/* Skills Section */}

技能

新媒体技能

内容策划 9/10

短视频制作 8/10

社交媒体运营 9/10

数据分析 7/10

品牌营销 8/10

AI与技术技能

AI提示工程 9/10

AI内容生成 8/10

AI图像处理 7/10

前端开发基础 6/10

数据可视化 7/10

设计技能

平面设计 8/10

UI/UX设计 7/10

视觉传达 8/10

动画制作 6/10

排版设计 7/10

软件工具

Adobe Premiere 8/10

Adobe Photoshop 8/10

Figma 7/10

Canva 9/10

Midjourney 8/10

ChatGPT 9/10

Excel/数据分析 7/10

HTML/CSS基础 6/10

{/* AI Chat Section */}

AI问答

与AI助手对话

你可以向我的AI助手询问关于我的技能、经历、项目或者任何你感兴趣的问题。 AI助手会基于我的个人资料为你提供相关信息。

) } [V0_FILE]typescriptreact:file="app/api/chat/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { groq } from "@ai-sdk/groq" import { streamText } from "ai" // Allow streaming responses up to 30 seconds export const maxDuration = 30 export async function POST(req: Request) { // Extract the messages from the body of the request const { messages } = await req.json() // Call the language model const result = streamText({ model: groq("llama-3.1-8b-instant"), messages, system: ` 你是一位新媒体专业学生的AI面试助手，专门回答关于这位求职者的详细信息。请以专业、自信但谦逊的语气回答问题。 ## 基本信息 - 姓名：[求职者姓名] - 专业：网络与新媒体专业学士学位 - 学校：深圳大学 (2020-2024) - 联系方式：+86 173 0269 3054 | magicabled@qq.com ## 核心技能与专长 ### 新媒体运营 - 内容策划与创作：擅长短视频、图文、播客等多种内容形式 - 社交媒体运营：熟练运营微博、抖音、小红书、B站等平台 - 数据分析：能够通过数据洞察优化内容策略，曾将粉丝增长率提升50% - 品牌营销：具备完整的营销活动策划与执行能力 ### AI技术应用 - AI提示工程：精通各类AI工具的提示设计与优化 - AI辅助创作：使用AI工具提高内容创作效率30% - AI图像处理：熟练使用Midjourney、Stable Diffusion等工具 - 技术工具：ChatGPT、Claude、Midjourney、Canva、Adobe套件 ### 设计与技术 - 平面设计：Adobe Photoshop、Premiere、Figma - UI/UX设计基础：用户体验设计思维 - 前端开发基础：HTML/CSS基础知识 - 数据可视化：Excel数据分析与可视化 ## 工作经历亮点 ### 新媒体运营实习生 (2023.9-至今) - 负责公司官方社交媒体账号运营，粉丝增长率提升50% - 使用AI工具辅助内容创作，效率提升30% - 参与品牌营销活动策划，活动转化率达25% ### 自媒体内容创作者 (2023.3-2023.8) - 个人科技评测账号累计粉丝10,000+ - 月均浏览量50万+，与多家科技品牌合作 - 建立了完整的AI辅助创作方法论 ### 社交媒体助理 (2022.6-2023.2) - 管理多个客户社交媒体账号 - 参与内容日历规划与创意提案 - 编写营销报告与数据分析 ## 项目经验 1. **AI辅助内容创作平台** - 设计开发AI创作工具，提供定制化内容建议 2. **品牌社交媒体改版** - 主导品牌账号改版，互动率提升120%，粉丝增长40% 3. **数字营销活动策划** - 策划"科技生活节"，带动销售额增长35% 4. **校园新媒体平台搭建** - 组建团队，搭建多平台内容矩阵，覆盖校内80%学生 ## 个人特质与优势 - 学习能力强：快速掌握新技术和工具 - 创新思维：善于将AI技术与传统媒体结合 - 数据驱动：注重用数据指导决策和优化 - 团队协作：具备良好的沟通和团队管理能力 - 行业敏感度：对新媒体趋势和技术发展保持敏锐洞察 ## 职业规划短期目标：在新媒体运营领域深耕，成为AI+新媒体的复合型人才长期目标：成为新媒体行业的专家，推动AI技术在内容创作领域的应用回答要求： 1. 根据问题类型提供具体、量化的信息 2. 突出技能优势和实际成果 3. 保持专业但亲和的语调 4. 如果问题超出个人信息范围，礼貌地引导回到相关话题 5. 适当展现学习能力和成长潜力 `, }) // Respond with the stream return result.toDataStreamResponse() } [V0_FILE]typescriptreact:file="components/ai-chat.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Send, RotateCcw } from "lucide-react" import { useChat } from "ai/react" export default function AIChat() { const presetQuestions = [ "请介绍一下你的专业背景和技能", "你有哪些项目经验？", "你在新媒体运营方面有什么优势？", "你如何运用AI技术进行内容创作？", "你的职业规划是什么？", "你最擅长的技能是什么？", ] const { messages, input, handleInputChange, handleSubmit, isLoading, append, setMessages } = useChat({ api: "/api/chat", }) const handlePresetQuestion = (question: string) => { append({ role: "user", content: question, }) } const resetConversation = () => { setMessages([]) } return (

{/* Header with reset button */} {messages.length > 0 && (

AI助手对话

)}

{messages.length === 0 && (

常见问题：

{presetQuestions.map((question, index) => ( ))}

💡 提示：点击上方问题快速开始对话，或在下方输入框中输入您的问题。

)} {messages.map((message) => (

{message.content}

))} {isLoading && (

)}

) }

新媒体创作者 AI技术探索者

关于我