# Case Study: AI-Assisted Portfolio Site

> **helenq.design — A human-AI co-creation experiment in portfolio design**

---

## Summary

**EN:** This portfolio website (helenq.design) is itself a case study in AI-augmented creative development. HelenQ conceived, directed, and content-authored the entire site, while AI (primarily Gemini) handled the bulk of front-end code generation. The result is a premium, interactive portfolio that would have required a senior developer and significant time budget if built traditionally — completed by a non-developer creative director using AI as the technical execution layer.

**ZH 摘要：** 这个作品集网站（helenq.design）本身就是一个 AI 辅助创意开发的案例研究。HelenQ 构思、导演并完成了整个网站的内容创作，而 AI（主要是 Gemini）负责前端代码的主要生成工作。结果是一个高品质的交互式作品集——如果用传统方式构建，需要一名高级开发者和大量时间预算，而现在由一位非开发者背景的创意总监借助 AI 作为技术执行层完成。

---

## Project Metadata

| Field | Detail |
|---|---|
| **Project Type** | Personal portfolio / Human-AI co-creation case |
| **Time** | Early 2026 (approximately 4–6 weeks of active development) |
| **My Role** | Creative Director · Product Owner · Content Author · AI Prompter |
| **AI Partner** | Gemini (Google DeepMind) via Antigravity IDE |
| **Tech Stack** | React, TypeScript, Vite, TailwindCSS, Framer Motion, Three.js |
| **Hosting** | Vercel + GitHub Releases (for large assets) |
| **Status** | Live and actively maintained |

---

## Problem

A senior creative professional needs a portfolio that:
1. Reflects premium visual quality (not template-based)
2. Communicates complex, multi-domain work in a scannable format
3. Demonstrates AI-native capability — not just talks about it
4. Is maintainable and updatable by a non-developer

Traditional options: hire a developer (expensive, slow, low creative control) or use a portfolio builder (template-constrained, not differentiated).

---

## Solution

Use AI as a technical execution partner. HelenQ provides:
- Creative direction (visual concept, layout logic, interaction design intent)
- Content authorship (all copy, project descriptions, narrative framing)
- Product decisions (what features exist, what flows make sense)
- Quality review (iterating on AI output until it matches intent)

AI (Gemini) provides:
- Component architecture and React code generation
- Complex interaction logic (parallax, 3D viewer, particle effects, audio)
- Debugging and iteration on technical issues
- This very AI-readable document system

---

## Tools

- **AI Development:** Gemini (via Antigravity IDE)
- **Framework:** React 18 + TypeScript + Vite
- **Styling:** TailwindCSS
- **Animation:** Framer Motion
- **3D/Interactive:** Three.js, WebGL, @google/model-viewer
- **Fonts:** Custom web fonts (jinshu, display, sans, serif)
- **Media hosting:** Vercel (code/assets) + GitHub Releases (large files: 3D model, video)
- **Version control:** Git / GitHub

---

## Deliverables

1. **Live portfolio website** at helenq.design — 6 project pages + About + Playground
2. **Password-protected access** — curated audience experience
3. **Interactive project features:**
   - Parallax + 3D tilt home screen with floating project images
   - 3D GLB model viewer (Project 06)
   - Particle image effect (Project 05)
   - Bilibili-embedded video timeline (Project 01)
   - Interactive mind map (Project 03 — Autopsy)
   - Stacked SOP card system (Project 03)
   - Virtual record player with audio (Project 05)
4. **AI-readable document system** (this directory — llms.txt, ai-index.md, etc.)
5. **Sitemap** (sitemap.xml)

---

## Result

- A portfolio site that reflects HelenQ's positioning as an AI-native creative practitioner — by actually being built that way
- Development cost: effectively zero (tool subscription only), versus potentially tens of thousands RMB for equivalent custom development
- Time from concept to live: approximately 4–6 weeks of non-full-time work
- Site demonstrates the exact capability it claims: AI-augmented creative production with human creative direction

*Note: Results are accurate to the creator's experience. No external user metrics are available at time of writing.*

---

## Reusable Value

This case demonstrates a replicable model for creative professionals who want to build AI-native digital presence:

1. **Human creative direction + AI technical execution** is viable for non-developers at senior creative level
2. **The creative brief is the core skill** — knowing what you want, why, and being able to evaluate AI output
3. **Iterative prompting replaces iterative development sprints** — but requires the same structured thinking
4. **AI code quality is sufficient for production** when the human layer maintains quality standards

---

## Keywords

portfolio design, human-AI co-creation, vibe coding, AI-assisted development, creative direction, React, TypeScript, Framer Motion, Three.js, Gemini, non-developer development, AI creative workflow

---

*HelenQ Case Study | June 2026*