Personal profile and animated resume for Lee Teong Hoe (Mr Hoelee) — Full Stack Engineer · AI & Automation · DevOps.
Live: https://me.hoelee.com
An animated developer profile: the page types its own stylesheet in a code editor on the left while rendering the resume on the right, then finishes with a thank-you / contact panel.
It's a personal site — the content is my resume, not a reusable template. The technique is adapted from jirengu-inc/animating-resume (Apache-2.0); see Credits.
| Technology | Role |
|---|---|
| Vue 3 | UI framework |
| Vite 6 | Dev server and build tool |
| Prism.js | Syntax highlighting in the code panel |
| marked | Markdown → HTML rendering |
| Path | Purpose |
|---|---|
src/App.vue |
Desktop layout — orchestrates the typewriter sequence |
src/Mobile.vue |
Mobile layout (used when viewport ≤ 500px) |
src/config/profile.js |
All content lives here — details, Markdown, animation speed, typed CSS |
src/components/StyleEditor.vue |
Left panel: highlighted, self-typing CSS |
src/components/ResumeEditor.vue |
Right panel: resume markdown → HTML |
src/components/ThankEditor.vue |
Footer: thank-you / contact panel |
src/main.js |
Entry point, picks desktop vs mobile |
src/assets/reset.css |
Reset + border-box baseline |
public/robots.txt |
Crawler directives (copied into the build) |
Everything you'd want to change is in src/config/profile.js:
name,title— identity and headlinetypingSpeed— ms per character (1= near-instant,20= slow and dramatic)resumeMarkdown— the resume bodythanksMarkdown— the thank-you / contact paneldesktopStyles/mobileStyles— arrays of CSS strings, typed in sequence
Note on the CSS arrays. Each array is typed in order and every stage is appended to the same injected
<style>tag. Because they all end up in one stylesheet, a later stage's shorthand (e.g.margin: 0 auto) overrides an earlier stage's longhand (margin-top: 1em). Keep the final visual values in the last stage of each array — that is what wins.
npm install
npm run dev # http://localhost:8080
npm run build # outputs to dist/
npm run preview # serve the production build locallyRequires Node ≥ 18 (built and tested on Node 24).
Pushed to Gitea only — git.hoelee.com/hoelee/hoelee-profile. There is no GitHub mirror.
me.hoelee.com is served by an nginx:alpine container (nginx-me.hoelee.com) on the VPS at
41.216.187.102, behind Traefik. The container mounts the built site read-only:
| Host path | Container path |
|---|---|
/docker/web/me.hoelee.com/public |
/var/www/html |
/docker/web/me.hoelee.com/nginx/default.conf |
/etc/nginx/conf.d/default.conf |
To deploy a new build:
npm run build
rsync -av --delete dist/ root@41.216.187.102:/docker/web/me.hoelee.com/public/The site is static — no PHP or database is used. The php:9000 upstream in the nginx config is a
leftover from the shared web template and is not needed by this site.
Adapted from jirengu-inc/animating-resume by jirengu-inc — the original animated resume project.