A Personal Website: My Experience with AI-Assisted Programming

Today I spent about two hours using AI-assisted programming to build a simple personal website, www.dahui.ai, and publish it. Below are the detailed steps, drawn from the working notes (domain, build, content, GitHub, editing, UI, and blog navigation).

1. Domain name: dahui.ai

.ai is Anguilla's country-code TLD, but many registrars sell it worldwide; the flow is like any other domain, with price and policy caveats.

How to get a name like xudahui.ai or dahui.ai

1. Choose a registrar that offers .ai (e.g. Namecheap, GoDaddy, Porkbun, Cloudflare Registrar, or local providers—verify .ai support).
2. Search availability for the full name. Available means you can register; Taken means negotiate with the owner or use a secondary market.
3. Register and renew with valid contact info; read first-year vs renewal pricing for .ai.
4. Point DNS at your host (registrar DNS or e.g. Cloudflare).

A domain is not a trademark; consider brand and conflict with others' marks if you build a public brand.

"Can't reach this page" / no IP (NXDOMAIN). If public DNS returns "domain does not exist," the name is not in the global tree: often it is not registered, expired, or has no valid NS/A records yet—not "just your network." Fix by registering (or renewing) and adding proper DNS.

Why pay a registrar? You are paying for the registry to record your lease in the global DNS and for the registrar to operate billing, transfer, and usually a DNS control panel. It is a recurring lease, not a one-time purchase of a string.

Paths vs subdomains. dahui.ai/resource is a path on the same host—no second domain to buy. resource.dahui.ai is a subdomain and needs its own DNS record (or a wildcard).

Publishing index.html to a domain on Cloudflare. Registering the domain is separate from hosting. Typical approach: use Cloudflare Pages (upload a zip, or npx wrangler pages deploy for a folder). Bind the custom domain dahui.ai in the Pages project; DNS is usually added automatically in the same account. Alternative: point A/CNAME to GitHub Pages, Netlify, Vercel, etc.

Static site + Git (recommended ongoing workflow). Connect the Git repo to Cloudflare Pages: Workers & Pages → Connect to Git → set Build command (empty for plain static) and Build output directory to the folder that contains index.html (often / or public/). Add Custom domains dahui.ai and optionally www. After that, every push to the tracked branch redeploys.

2. Build the personal website

Goal: an English one-page site—resume, photo, and social links (YouTube, Instagram, X, LinkedIn, GitHub, email).

What was included initially

• Resume-style sections: About, Experience, Education, Skills, Contact.
• Photo at images/photo.jpg with a safe fallback if the file is missing.
• Social icon row under the name; dark theme, serif display + sans body, responsive layout.

Bilingual switch (EN / 中文) in the header. The whole page (nav, sections, portrait alt, footers, social titles) toggles using inline i18n (data-i18n / data-i18n-attr) and a STR dictionary for en and zh, persisted in localStorage (e.g. dahui-site-lang) so the choice survives reloads.

How to keep content in sync. For bilingual copy, update both STR.en and STR.zh for the same keys; the visible HTML can hold placeholders that JS replaces on load.

3. Personal information: myinfo.md

A single source file was created to hold facts before wiring them into the page:

• Name and short tagline.
• About and experience (e.g. working at a Japanese company in Singapore, learning AI).
• Education (e.g. undergraduate, MBA) and skills (e.g. SAP FICO, project management).
• Email and social URLs (YouTube, LinkedIn, X, GitHub, Instagram) as full https:// links.

This file is the content reference; the site then mirrors it in index.html's i18n strings and links.

4. GitHub: new repo and push

Creating the repo for a static site already on disk:

• Name: either <username>.github.io for a user site root, or any name (e.g. dahui.ai) for a project site at https://<username>.github.io/<repo>/.
• Description: e.g. "Personal portfolio / resume site."
• Public if you want free public hosting patterns (check current GitHub rules for private Pages).
• Do not add README, .gitignore, or license in the web UI if you will push an existing tree—avoids a non-fast-forward first push.

Typical first push (after git init, add, commit):

git remote add origin https://github.com/<user>/<repo>.git
git branch -M main
git push -u origin main

If origin was wrong, use git remote set-url origin ... before pushing.

Custom domain dahui.ai vs github.io URLs. https://<user>.github.io/<repo>/ is only the default GitHub host URL. Once you set Settings → Pages → Custom domain to dahui.ai and point DNS (e.g. at Cloudflare) per GitHub's docs, visitors use https://dahui.ai. Relative links like styles.css keep working. The exact github.io path (with or without repo segment) mostly matters when you don't use a custom domain.

5. Editing content in index.html and going live

It is not Word: you edit HTML/attributes; WYSIWYG is optional (other tools) but easy to break structured data-i18n and CSS.

Resume text and photo

• Put the image at images/photo.jpg (watch double extensions on Windows, e.g. photo.jpg.jpg—the src must match the real filename).
• For bilingual body copy, change STR.en / STR.zh in the same index.html script, not only the visible default HTML, or the wrong language can appear after toggling.
• Social and mailto links in plain <a href>: update href (and display text) directly; align with myinfo.md if that is the source of truth.
• Optional: after updating STR, you can align placeholder text in the DOM with STR.en for "view source" consistency.

Why the AI couldn't "log in" to Cloudflare. Account access (password, 2FA) and browser sessions stay with the human owner. The safe automation pattern is your API tokens, CI, or Terraform—never sharing passwords in chat.

Automation to aim for. git push → Cloudflare Pages (or similar) builds/deploys. One-time: connect repo, set build output directory, bind dahui.ai. Optional: GitHub Actions + Wrangler with secrets, if you don't use Git integration.

If the site was on a *.workers.dev host. Add Custom domain dahui.ai (and www if needed) on that Worker in Domains & Routes; same Cloudflare account and correct NS for the zone. Content stays in sync with deploys; the custom domain is routing + TLS.

6. UI: pure-CSS motion and polish

Goals (implemented with CSS, no new framework required)

• Hero intro: title, tagline, and social bar animate in with opacity + translateY, staggered via animation-delay and a shared easing.
• Smooth scroll: scroll-behavior: smooth on html (and respect prefers-reduced-motion by falling back to auto and killing long animations for users who need it).
• Section anchors: scroll-margin-top so fixed headers don't cover titles; section:target for a subtle highlight when using hash links.
• Cards and skill pills: hover lift, shadow, slight scale, cubic-bezier transitions.
• Nav: ::after + transform: scaleX for underline; optional body:has(#section:target) to show which nav item matches the current hash (where :has is supported).

Accessibility: a global @media (prefers-reduced-motion: reduce) rule shortens animation/transition duration; for reduced motion, the hero may need explicit final opacity so content is not stuck hidden during animation-delay when durations are near zero.

Deeper "scroll spy" (nav tracks scroll without a hash) needs a small script; hash-based highlighting is enough for a static CV.

7. Blog: navigation and blog.html

Product ask: To the right of Contact, add a Blog link to a new page. The new page has a top heading "Blog" (and a Chinese label when the UI is in Chinese), with room below to add posts later.

What was done

• index.html: new nav item with data-i18n="navBlog" (Chinese: 博客), linking to blog.html.
• blog.html: same header/nav pattern as the home page; aria-current="page" on Blog; main area left open for future content. Nav links to sections on the home page use index.html#....
• i18n.js: shared script extracted from the home page so both pages use one translation system and the same localStorage key; blog-specific keys: navBlog, blogHeading, blogPageTitle, blogMetaDescription; body can use data-i18n-page="blog" where needed.
• styles.css: .nav a[aria-current="page"] for active link; .blog-main / .blog-page-heading for the blog page layout.
• Optional note in myinfo.md: document that the Chinese UI shows "博客" for the blog entry in the nav.

To add articles later, insert HTML (or a generator) under the main heading in blog.html or grow into a small static blog structure as needed.