Wu Chenmu portfolio

This portfolio is a static Astro site deployed to GitHub Pages. Project content lives in Markdown so that copy, images, and common layouts can be updated without editing page templates. Homepage order and visibility are managed in one central list.

Routine editing workflow

The usual workflow is:

Edit Markdown → preview locally → validate and build → commit → push to main

1. Open the project

Open Terminal and enter the project directory:

cd /Users/chenmuwu/Documents/Websites/wcm.github.io

Check your Node.js version:

node --version

Use Node.js 22.12 or newer. Node.js 24 is recommended.

Install dependencies the first time you work on the project, or whenever package.json changes:

npm install

2. Preview changes locally

Start the development server:

npm run dev

Terminal will display a local address, normally http://localhost:4321. Open it in a browser. Saved changes normally appear automatically.

To stop the server, return to Terminal and press Control + C.

3. Validate and build

Check the Astro files and Markdown data:

npm run check

A successful check reports zero errors, warnings, and hints.

Create the production build:

npm run build

Validate the generated pages, links, routes, metadata, and image alt text:

npm run validate

Optionally preview the final production build locally:

npm run preview

4. Deploy to GitHub Pages

Review the files you changed:

git status

Stage and commit the changes:

git add .
git commit -m "Describe the portfolio update"

Push the commit to GitHub:

git push origin main

Pushing to main automatically starts the GitHub Pages deployment. It normally appears at https://wcm.github.io within a few minutes. Deployment progress is available in the repository's GitHub Actions tab.

Manage homepage projects

Edit src/data/homepage-projects.json to control which projects appear on the homepage and in what sequence:

{
  "filterOrder": ["Mobility", "AI", "2C", "Design System"],
  "projects": [
    {
      "slug": "lylo-ai-car-check",
      "projectName": "Lylo AI Car Check",
      "tags": ["Mobility", "AI", "2C"]
    },
    {
      "slug": "kinto-mobility-app",
      "projectName": "KINTO Mobility App",
      "tags": ["Mobility", "2C"]
    }
  ]
}

• Rearrange filterOrder to change the filter-chip sequence. All is always added first automatically.
• Move an entire project object inside projects to change its homepage position.
• Delete its object from this list to hide it from the homepage. Its case-study page and direct URL will still exist.
• slug must exactly match the slug in that project's Markdown file.
• projectName controls the project card's name and accessibility text.
• tags controls which filters include each project. Every tag used here must also appear in filterOrder.
• Leave tags as [] if a project should appear only when All is selected.

Visitors can select one filter at a time. All is selected by default, and filtering keeps the project sequence defined in this file.

The site build will fail with a clear message if this list contains a duplicate slug or refers to a project that does not exist.

Manage personal projects

Edit src/data/personal-projects.json to manage the cards under the Personal Projects homepage tab:

{
  "projectName": "Wireframe Designer",
  "description": "The fastest way to brainstorm, iterate, and evolve wireframes with AI.",
  "type": "Figma Plugin",
  "stats": ["550k users", "4.9k likes"],
  "logo": "https://mureal.io/product-logos/wireframe-designer.svg",
  "url": "https://mureal.io/products/wireframe-designer/"
}

• Move an object to change its display position.
• Delete an object to hide that personal project.
• url should point directly to the product landing page. No local case-study page is created.
• Use an empty stats array when a project has no public usage figures.

Edit a project

Each project is stored at src/content/projects/<project-slug>/index.md, with its media in the adjacent media folder.

The frontmatter controls the project card and shared introduction:

---
title: Project title
slug: project-slug
year: 2024–2025
role: Lead Designer
overviewLabel: Background & Objectives
summary: |-
  A short project overview.
responsibilities:
  - First responsibility
cover: ./media/cover.png
cardImage: ./media/card.png
description: Search and social description.
externalLinks: []
---

Write the rest of the case study with normal Markdown headings, paragraphs, lists, links, and images.

Add new images or GIFs to the project's media folder and reference them relative to the Markdown file:

![Project image 01](./media/image-01.png)

Layout blocks

Use a gallery for one or more images:

:::gallery{columns="2"}
![Project image 01](./media/image-01.png)

![Project image 02](./media/image-02.png)
:::

Add variant="phone-with-bg" for narrow screenshots or GIFs displayed on a padded background with rounded corners and shadows. Use variant="with-bg" for the same padded, responsive layout without image shadows or rounded corners. Supported column values are 1, 2, 3, and 4.

Use a split layout when text should appear on the left and its gallery on the right. The four-colon outer fence allows the three-colon gallery to be nested inside it:

::::split
## Section title

Section copy goes here.

:::gallery{columns="1"}
![Project image 01](./media/image-01.png)
:::
::::

The split stacks into one column on smaller screens. For a wider text column and narrower media column, use ::::split{ratio="wide-copy"}.

Use a result callout when a section contains key metrics:

:::metrics
- Conversion increased **15%**.
- Drop-off decreased **20%**.
:::

Use external-cards for linked project images:

:::external-cards{columns="3"}
[![Project image 01](./media/image-01.png)](https://example.com)
:::

Command reference

• npm run dev starts the local site.
• npm run check validates the project and Markdown data.
• npm run build creates the production site.
• npm run validate checks the generated pages after a production build.
• npm run preview previews the production build locally.

Caution

npm run migrate re-imports the original Webflow website and replaces the migrated project Markdown and media. Do not use it during normal editing. Run it only when you intentionally want to repeat the migration.

Quick checklist

For most updates, start with:

cd /Users/chenmuwu/Documents/Websites/wcm.github.io
npm run dev

After reviewing your changes:

npm run check
npm run build
npm run validate
git status
git add .
git commit -m "Describe the portfolio update"
git push origin main