<!DOCTYPE html>

<head>

<title>戚集贤 Juniper Qi | 作品集 Portfolio</title>

<style>

:root {

--bg-color: #FDFCF8;

--text-primary: #2C2C2C;

--text-secondary: #777;

--accent-green: rgba(168, 216, 185, 0.4);

--accent-blue: rgba(168, 198, 216, 0.4);

--accent-warm: rgba(226, 208, 194, 0.4);

--nav-height: 60px;

}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background-color: var(--bg-color); color: var(--text-primary); font-family: 'Noto Sans SC', sans-serif; line-height: 1.6; overflow-x: hidden; }

h1, h2, h3, h4, .serif { font-family: 'Noto Serif SC', serif; }

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }

img { width: 100%; display: block; object-fit: cover; }

/* --- 导航栏 --- */

nav {

position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);

display: flex; justify-content: space-between; align-items: center;

padding: 0 6%;

background: rgba(253, 252, 248, 0.85); /* 稍微增加不透明度 */

backdrop-filter: blur(12px);

z-index: 1000;

border-bottom: 1px solid rgba(0,0,0,0.03);

}

/* 修改：导航栏名字改为英文 */

.logo { font-size: 1.1rem; font-weight: 700; font-family: 'Noto Serif SC', serif; letter-spacing: 1px; color: #333; }

.nav-links { display: flex; gap: 2.5rem; }

.nav-links a { font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }

.nav-links a:hover, .nav-links a.active { color: #000; }

/* --- 首页 Hero --- */

.hero-section {

min-height: 100vh; /* 保证最小高度 */

position: relative;

display: flex;

flex-direction: column;

justify-content: center; /* 垂直居中 */

align-items: center;

text-align: center;

overflow: hidden;

background: var(--bg-color);

/* 修改：增加顶部内边距，防止遮挡，配合 margin-top 微调 */

padding-top: calc(var(--nav-height) + 40px);

}

/* 动态光斑背景 */

.ambient-light { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; }

.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.8; animation: floatOrb 10s infinite alternate ease-in-out; }

.orb-1 { width: 400px; height: 400px; background: var(--accent-green); top: 10%; left: 10%; animation-duration: 12s; }

.orb-2 { width: 500px; height: 500px; background: var(--accent-blue); bottom: 10%; right: 10%; animation-duration: 15s; animation-delay: -5s; }

.orb-3 { width: 300px; height: 300px; background: var(--accent-warm); top: 40%; left: 50%; transform: translate(-50%, -50%); animation-duration: 18s; animation-delay: -2s; }

@keyframes floatOrb { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, 40px) scale(1.1); } }

/* 居中核心内容区 */

.hero-center-content {

z-index: 10;

max-width: 520px;

padding: 40px;

background: rgba(255, 255, 255, 0.4);

backdrop-filter: blur(5px);

border-radius: 24px;

border: 1px solid rgba(255, 255, 255, 0.8);

box-shadow: 0 20px 40px rgba(0,0,0,0.02);

animation: fadeUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);

/* 修改：确保视觉上位于中心偏上一点点，避免头部贴顶 */

margin-bottom: 2rem;

}

.hero-avatar {

width: 90px;

height: 90px;

border-radius: 50%;

overflow: hidden;

margin: 0 auto 1.5rem auto;

border: 2px solid #fff;

box-shadow: 0 4px 12px rgba(0,0,0,0.05);

transition: transform 0.5s ease;

}

.hero-avatar:hover { transform: scale(1.05); }

.hero-title {

font-size: 2rem; margin-bottom: 0.8rem; color: #222; font-weight: 500; letter-spacing: 2px;

}

.hero-role {

font-size: 0.8rem; color: #666; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 2rem; position: relative; display: inline-block;

}

.hero-role::after {

content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: #ccc;

}

.hero-desc {

font-size: 1rem; line-height: 1.8; color: #555; font-family: 'Noto Serif SC', serif; margin-bottom: 2.5rem;

}

.hero-actions { display: flex; gap: 1.5rem; justify-content: center; }

.btn { padding: 10px 24px; font-size: 0.85rem; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }

.btn-primary { background: #2C2C2C; color: #fff; border: 1px solid #2C2C2C; }

.btn-primary:hover { background: #444; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.btn-outline { background: transparent; color: #444; border: 1px solid #ccc; }

.btn-outline:hover { border-color: #444; background: #fff; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* --- 其他板块 --- */

.about-section { padding: 8rem 8%; display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; background-color: #fff; border-top: 1px solid rgba(0,0,0,0.03); }

.resume-list { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; }

.resume-item h4 { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600; color: #333; }

.resume-item span { font-size: 0.9rem; color: #777; line-height: 1.5; }

.work-section { padding: 8rem 8%; background-color: var(--bg-color); }

.section-header { margin-bottom: 4rem; text-align: center; }

.section-title { font-size: 1.8rem; font-weight: 400; margin-bottom: 0.5rem; }

.section-subtitle { font-size: 0.8rem; color: #999; text-transform: uppercase; letter-spacing: 2px; }

.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; }

.project-card { cursor: pointer; group: card; }

.card-thumbnail { width: 100%; aspect-ratio: 4/3; background: #eee; overflow: hidden; border-radius: 8px; margin-bottom: 1.5rem; transition: box-shadow 0.3s; }

.project-card:hover .card-thumbnail { box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

.card-thumbnail img { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }

.project-card:hover .card-thumbnail img { transform: scale(1.05); }

.card-info h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: 0.5rem; }

.card-info p { font-size: 0.85rem; color: #888; }

footer { padding: 6rem 8%; text-align: center; background: #fff; border-top: 1px solid rgba(0,0,0,0.03); }

.footer-content { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-bottom: 3rem; }

.contact-link { font-size: 1.5rem; font-family: 'Noto Serif SC', serif; color: #333; position: relative; }

.contact-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: #333; transition: width 0.3s; }

.contact-link:hover::after { width: 100%; }

/* --- 模态框通用样式 --- */

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #FDFCF8; z-index: 2000; overflow-y: auto; display: none; opacity: 0; transition: opacity 0.3s; }

.modal-overlay.active { display: block; opacity: 1; }

.modal-close-btn { position: fixed; top: 25px; right: 5%; padding: 8px 20px; border: 1px solid #ddd; border-radius: 30px; cursor: pointer; z-index: 2002; background: rgba(255,255,255,0.8); transition: 0.3s; }

.modal-close-btn:hover { background: #333; color: #fff; border-color: #333; }

/* 项目详情内容 */

.modal-content { padding: 8rem 15% 4rem 15%; max-width: 1000px; margin: 0 auto; }

.modal-header { text-align: center; margin-bottom: 4rem; }

.modal-title { font-size: 2.5rem; margin-bottom: 1rem; }

.modal-meta { color: #888; font-size: 0.9rem; letter-spacing: 1px; }

.modal-body { font-size: 1.1rem; line-height: 1.9; color: #444; margin-bottom: 4rem; }

.modal-gallery { display: flex; flex-direction: column; gap: 3rem; }

.video-link-btn { display: inline-block; padding: 14px 32px; background: #333; color: #fff; border-radius: 4px; margin-top: 3rem; font-size: 0.9rem; }

/* 简历预览特定样式 */

.resume-container {

width: 100%;

height: 80vh;

background: #eee;

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center;

color: #666;

margin-top: 2rem;

border: 1px solid #e0e0e0;

}

@media (max-width: 768px) {

.hero-section { height: auto; padding: 8rem 5% 5rem 5%; }

.hero-center-content { padding: 30px 20px; }

.orb { opacity: 0.6; }

.about-section, .work-section { padding: 4rem 5%; grid-template-columns: 1fr; }

.resume-list, .projects-grid { grid-template-columns: 1fr; gap: 2rem; }

.modal-content { padding: 6rem 5%; }

}

</style>

</head>

<body>

<nav>

<div class="logo">Juniper QI.</div>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</div>

</nav>

</div>

</div>

<div class="hero-role">Integrated Marketing · Content Creator</div>

连接品牌与文化，叙事驱动增长。<br>

从 oraimo 全球战役到独立纪录片创作，<br>

致力于在商业中注入人文视角。

</p>

</div>

</header>

<p style="color: #888;">About Me</p>

</div>

在香港城市大学攻读整合营销传播硕士期间，我不仅掌握了商业策略的宏观视角，更保留了新闻学本科带来的敏锐洞察力。

</p>

从广州到香港，从校园媒体到传音控股的全球市场部，我始终在探索如何通过内容连接人与品牌。我相信，好的营销不是单纯的叫卖，而是基于真实的人性洞察，讲述打动人心的故事。

</p>

<div class="resume-item"><h4>香港城市大学 CityU HK</h4><span>MA 整合营销传播<br>2024-2025</span></div>

<div class="resume-item"><h4>暨南大学 Jinan Univ.</h4><span>BA 新闻学<br>2020-2024</span></div>

<div class="resume-item"><h4>专业技能</h4><span>Campaign策划、英文文案<br>PR/剪映、SPSS数据分析</span></div>

<div class="resume-item"><h4>兴趣爱好</h4><span>徒步、壁球、城市观察<br>独立纪录片拍摄</span></div>

</div>

</section>

<div class="section-subtitle">Selected Works 2023 - 2025</div>

</div>

<div class="card-info"><h3>oraimo x FREE FIRE 联名营销</h3><p>整合营销 / 线下活动策划</p></div>

</div>

<div class="card-info"><h3>iPhone 17 借势营销战役</h3><p>社媒运营 / 增长策略</p></div>

</div>

<div class="card-info"><h3>oraimo 产品全案文案</h3><p>创意文案 / 卖点提炼</p></div>

</div>

</div>

</section>

<p style="color: #999; margin-bottom: 2rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px;">Get in Touch</p>

<a href="mailto:juniper.qi@outlook.com" class="contact-link">juniper.qi@outlook.com</a>

<span>💬 WeChat: QIQJQX</span>

</div>

</footer>

<button class="modal-close-btn" onclick="closeModal('projectModal')">关闭 Close</button>

</div>

</div>

<button class="modal-close-btn" onclick="closeModal('resumeModal')">关闭 Close</button>

<h2 class="section-title serif" style="text-align: center;">我的简历 Resume</h2>

<p style="font-size: 0.8rem; color: #999;">(请在代码中替换 PDF 文件链接)</p>

</div>

</div>

function scrollToSection(id) { document.getElementById(id).scrollIntoView({ behavior: 'smooth' }); }

// 背景光斑微交互

document.addEventListener('mousemove', (e) => {

const orbs = document.querySelectorAll('.orb');

const x = e.clientX / window.innerWidth;

const y = e.clientY / window.innerHeight;

orbs.forEach((orb, index) => {

const speed = (index + 1) * 20;

orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`;

});

// 通用模态框关闭

function closeModal(modalId) {

document.getElementById(modalId).classList.remove('active');

document.body.style.overflow = 'auto';

}

// 打开简历预览

function openResume() {

document.getElementById('resumeModal').classList.add('active');

document.body.style.overflow = 'hidden';

// 提示：实际使用时，请将下方链接替换为您的 PDF 真实 URL

// const iframe = document.querySelector('#resumeModal iframe');

// iframe.src = "assets/Juniper_Resume.pdf";

}

// 项目数据与逻辑

const projectsData = {

1: { title: "oraimo x FREE FIRE 全球联名营销", role: "整合营销 / 线下策划", date: "2024", desc: `<strong>项目背景：</strong> 为吸引新兴市场Z世代年轻用户，oraimo 与热门战术竞技手游 FREE FIRE 展开联名合作。\n\n<strong>我的角色：</strong> 负责市场调研、线下Roadshow大篷车活动策划及物料主视觉把控。\n\n<strong>策略与执行：</strong>\n1. 锁定“沉浸式游戏场景”，打造线下大篷车巡演。\n2. 设置游戏装备墙打卡点与互动挑战，激活UGC传播。\n\n<strong>成果：</strong>\nRoadshow 活动吸引超过 6000 人次参与体验。`, images: ["https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?q=80&w=1974&auto=format&fit=crop", "https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2070&auto=format&fit=crop"] },

2: { title: "iPhone 17 借势营销战役", role: "社媒运营 / 内容策略", date: "2024", desc: `<strong>挑战：</strong> 利用低预算为 oraimo 的磁吸充电宝获取高流量？\n\n<strong>策略：</strong>\n1. 视觉借势：制作符合 Apple 审美风格的 "iPhone 17" 概念海报。\n2. 话题运营：创建 #oready17 标签，直击用户“低电量焦虑”痛点。\n\n<strong>数据成果：</strong>\n覆盖肯尼亚、喀麦隆等四国，总曝光量达 1724万+，总互动量 2.3万+。`, images: ["https://images.unsplash.com/photo-1616348436168-de43ad0db179?q=80&w=1981&auto=format&fit=crop", "https://images.unsplash.com/photo-1557200130-4b2745a699eb?q=80&w=2070&auto=format&fit=crop"] },

3: { title: "oraimo 产品全案文案撰写", role: "创意文案", date: "2024", desc: `<strong>文案方法论：</strong>\n基于“用户痛点、差异化、品牌调性”三原则进行创作。\n\n<strong>执行细节：</strong>\n负责 Ultra Trim 理发器、Power Nova 充电宝等核心产品的详情页及包装文案。\n\n例如：将 "High Speed Motor" 转化为 "Fast, Focused. No Flyaways."`, images: ["https://images.unsplash.com/photo-1586717791821-3f44a5638d48?q=80&w=2070&auto=format&fit=crop", "https://images.unsplash.com/photo-1542435503-956c469947f6?q=80&w=1974&auto=format&fit=crop"] },

4: { title: "纪录片《城市猎人：飞哥》", role: "导演 / 剪辑", date: "2023", desc: `<strong>创作理念：</strong>\n记录一位“Bilibili知名灭鼠UP主”的真实生活切片。他既是退役运动员、健身教练，也是一位百发百中的弹弓手。\n\n我试图通过镜头，剥离网络红人的标签，展现其朴素的信念与反差魅力。`, images: ["https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?q=80&w=2070&auto=format&fit=crop"], videoLink: "https://www.bilibili.com/video/BV16h4y177Ug" }

};

function openProject(id) {

const data = projectsData[id]; if(!data) return;

document.getElementById('modalTitle').innerText = data.title;

document.getElementById('modalRole').innerText = data.role;

document.getElementById('modalDate').innerText = data.date;

document.getElementById('modalBody').innerHTML = data.desc;

const gallery = document.getElementById('modalGallery'); gallery.innerHTML = '';

data.images.forEach(src => { const img = document.createElement('img'); img.src = src; gallery.appendChild(img); });

const videoContainer = document.getElementById('modalVideoBtn'); videoContainer.innerHTML = '';

if(data.videoLink) { const btn = document.createElement('a'); btn.href = data.videoLink; btn.target = "_blank"; btn.className = "video-link-btn"; btn.innerText = "▶ 点击观看影片 (Bilibili)"; videoContainer.appendChild(btn); }

document.getElementById('projectModal').classList.add('active');

document.body.style.overflow = 'hidden';

}

document.querySelectorAll('a[href^="#"]').forEach(anchor => {

anchor.addEventListener('click', function (e) {

e.preventDefault();

closeModal('projectModal'); closeModal('resumeModal');

document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });

document.querySelectorAll('.nav-links a').forEach(a => a.classList.remove('active')); this.classList.add('active');

});

</script>

</body>

</html>