hoelee
de7c44b87d
Content (A/B):
- Headline no longer Web3-specific: "Full Stack Engineer · AI & Automation · DevOps"
- Resume restructured: summary, grouped core skills, selected projects,
three roles with outcomes, education, languages, "Currently learning"
- Web3 demoted from a top-level section to a single learning bullet
- Thanks panel rewritten to generalist; contact links updated to Gitea
- SEO/OG metadata rewritten for a personal profile (was template copy)
Bug fixes:
- App.vue: progressivelyShowStyle(1) was called three times but is a no-op
once its cumulative-length guard is satisfied, so stylesheet stages 2-3
were never typed and the entire .thankEditor stylesheet (padding, link
colours, box layout) was missing. Now every stage is typed in order.
- App.vue: enableHtml flipped before the text passes completed, rendering
both panels as empty markdown. HTML swap now happens after typing.
- App.vue: removed html{min-height:100vh} which added a phantom 7px of
vertical page scroll.
- profile.js: .styleEditor was fixed+left:0 with a left margin, pushing the
panel 4px off-screen and creating page-level horizontal scroll. Widths now
calc(50vw - 1em) with left/right offsets inside the viewport.
- profile.js: .thankEditor padding was being reset by a later margin:0 auto
shorthand; final stage now re-declares padding/margin so the footer has
real breathing room. Footer height fits inside #foot (no clipping).
- profile.js: footer links were UA-default blue (#0000EE) on a light panel;
now #0b4a6f, weight 600, with a hover state.
Repo hygiene (C):
- Removed GitHub remote and the GitHub Pages workflow; Gitea only
- README rewritten as a personal profile repo (was template marketing copy)
- Dropped force-tracked build artifacts (dist/index.html, public/static/*)
that were dead Vue2 leftovers and contradicted .gitignore
hoelee-profile
Personal profile and animated resume for Lee Teong Hoe (Mr Hoelee) — Full Stack Engineer · AI & Automation · DevOps.
Live: https://me.hoelee.com
What this is
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.
Tech stack
| 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 |
Project structure
| 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) |
Editing the content
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.
Development
npm install
npm run dev # http://localhost:8080
npm run build # outputs to dist/
npm run preview # serve the production build locally
Requires Node ≥ 18 (built and tested on Node 24).
Deployment
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/ [email protected]:/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.
Credits
Adapted from jirengu-inc/animating-resume by jirengu-inc — the original animated resume project.