Jinping HE: My Personal Website, Rebuilt from a Blog

Jinping HE: My Personal Website, Rebuilt from a Blog
Jinping He · Solo project · 2026 · https://blog.xw3q.nz
blog.xw3q.nz used to be my personal blog. In 2026 I rebuilt it into a personal website. The address stayed the same. The purpose of the site changed. Someone who opens it should be able to see who I am, what I have built, what I have written, and how to reach me.
What a visitor finds
The site has five sections.
Home is a short introduction. It gives my name, Jinping He, and the name people can call me, Peter. It says I am a senior full-stack developer based in Auckland, and that I am open to opportunities in New Zealand. Under that, the page shows up to three projects, three blog posts, and three updates, so a visitor can keep reading without searching through a long list.
Projects is where I introduce work I have done recently. Each project has a cover image, a title, my role, the time period, and a page that explains the work in everyday language.
Blogs holds the articles I publish. Posts from the old blog stayed on the site. They are grouped into three categories: Insights, Solutions, and TechNotes. Those names used to be top-level menu items. They are now filters inside Blogs.
Updates is a short log. I use it for personal notes: what I am working on, and what has changed.
My CV is my resume. The page shows my summary, skills, work history, education, and contact details. A visitor can also download a PDF. That file is generated from the resume on the page at the moment they click the button. I do not keep a separate PDF and try to remember to update both.
Editing the site from an admin area
I change the content in an admin area. I do not edit the website code to add a project, publish a post, or fix a line on my resume.
From the admin I can:
• Add and edit projects, blog posts, and updates, including a cover image where the page needs one.
• Group blog posts into categories.
• Rewrite my whole resume: name, role, summary, skills, jobs, education, and contact links. Each contact link has a switch. If the switch is on and the address is filled in, the link appears on My CV and is written into the PDF.
• Set the title and short description that search engines see, for the main pages and for an individual project, post, or update.
• Manage the links shown in the footer.
The public pages read this content and display it. The name I save on the resume is also the name in the site header and in the browser title. The admin screens are in Chinese, because that is the language I use while editing. The public site is in English.
How it is built
The site is one Next.js application. Next.js is the framework that builds the pages and serves them.
The public pages use Tailwind CSS for styling. The look is simple on purpose: a light grey page, white cards, dark text, and one purple accent, #8c57ff, used for buttons, the current menu item, and links.
The admin area uses MUI. MUI is a set of ready-made interface pieces, such as forms, tables, menus, and dialogs. Those pieces are loaded only for the admin. A visitor browsing the public site does not download them.
The content lives in Sanity. Sanity is the content database. Projects, posts, updates, the resume, categories, footer links, and page settings are documents stored there. When a page loads, the site asks Sanity for the latest published content and renders it. A Sanity Studio is still available at /studio for changes to the content structure.
Only an admin account can sign in to the admin area. Visitors cannot register, and there is no public login.
Why this stack
I chose this route mainly because of the cost. GitHub stores the code. Vercel hosts the site. Sanity stores the content. Each of these has a free plan that is enough for a personal site of this size. Apart from the subdomain, I do not pay a monthly fee to keep the site online.
The other reason is the way updates go live. The repository is connected to Vercel. When I push code to GitHub, Vercel builds the project and publishes it to https://blog.xw3q.nz. I do not sign in to a server, and I do not copy files across by hand. A code change and a content change stay separate: content is saved in the admin, and a code change is a push.
What I carried over from the blog
The old site let people register, comment, and keep a public profile. A personal website does not need that, so I removed those parts. The articles stayed.
Links that were already shared still open the right post. An old article address is sent to the new address under Blogs. An old category address opens Blogs with that category selected.
What I did
I decided the structure, designed the public pages, and built both the public site and the admin. I set up the content model in Sanity, including the resume that drives My CV and the downloaded PDF. I also kept the existing deploy path: GitHub to Vercel, on the same address, https://blog.xw3q.nz.