Project 03 / 09 · Web development · Content · Interface design

Personal Portfolio Website

The website became a project of its own: deciding what to show, making it readable, and keeping the story accurate as my work changed.

Explore the CV3 portfolio

The current project archive and its linked demonstrations.

Original recordDeveloped; ongoing improvements
This presentationCV3 project archive

This is an evolving, AI-assisted web-development project. The CV3 archive is a separate presentation of the work; earlier CV and CV2 sites are separate versions.

Personal Portfolio Website — conceptual overview
An overview of the idea and its boundaries.Illustration — not an original project photograph

中文摘要

個人作品與學習網站

我用網站整理學習背景、項目、獎項及活動,也研究 HTML、CSS、JavaScript、Firebase 和 Cloudflare 的整合。部分程式曾由 AI 協助產生與修改;我的工作包括內容規劃、圖片整理、介面調整與測試。CV3 把原作與這次示範分開標示,避免把計劃寫成成果。

01

More than a list of achievements

I built the site to introduce my academic background, technical interests and activities for university applications and interviews. It needed to show a range of work while still feeling like one person's story.

The content covers projects, certificates, volunteering, internship experience and school life. Organising those materials required as much care as choosing a colour or writing a component.

02

What I worked on

I researched and used frontend technologies, Firebase, image-hosting services and Cloudflare-related features. I worked on the content structure, image selection, layout, animations and testing.

AI helped generate and revise some of the code. Describing this as AI-assisted development gives a more accurate account of the process than claiming every line was written independently.

03

Why the site keeps changing

The older version had bugs, awkward layouts and a visual style that felt too generic. Loading behaviour also made the first view feel slower than it needed to be. Those problems became concrete reasons to revisit the structure and presentation.

For this archive, each project has a clear status and a readable case study. A new browser reconstruction is labelled as such, and illustrations are distinguished from original photographs. The aim is to make the work easier to understand without overstating it.

04

What I learned to check

  • Can someone find a project without reading the whole site?
  • Does the image help explain the work?
  • Do the title, description and linked demo describe the same version?
  • Are completed work, experiments and plans clearly distinguished?
From personal material to a public page
A publishing workflow built around clarity and accurate context.Illustration — not an original project photograph
About this record

Source for project history: my supplied My Project Archive and the current portfolio work. The diagrams are explanatory layouts, not screenshots of an earlier website.

All diagrams on this page are newly made explanatory illustrations. They do not replace original photographs, test results or source files.