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
98 lines
3.6 KiB
Markdown
98 lines
3.6 KiB
Markdown
# hoelee-profile
|
|
|
|
Personal profile and animated resume for **Lee Teong Hoe (Mr Hoelee)** — Full Stack Engineer · AI & Automation · DevOps.
|
|
|
|
**Live:** https://me.hoelee.com
|
|
|
|
[](https://me.hoelee.com)
|
|
[](LICENSE)
|
|
|
|
## 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](https://github.com/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 headline
|
|
- `typingSpeed` — ms per character (`1` = near-instant, `20` = slow and dramatic)
|
|
- `resumeMarkdown` — the resume body
|
|
- `thanksMarkdown` — the thank-you / contact panel
|
|
- `desktopStyles` / `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
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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](https://github.com/jirengu-inc/animating-resume) by
|
|
jirengu-inc — the original animated resume project.
|
|
|
|
## License
|
|
|
|
[Apache-2.0](LICENSE).
|