Fix empty resume panel (populate markdown) and mobile thank-section overlap (normal-flow stack)

Profile polish: both git links, tighter gutter, page-scroll thank section, 6x faster typing, reordered sequence, mobile thank panel
Rewrite profile content as generalist; fix scrollbars, footer padding & link colour
2026-09-20 07:59:53 +08:00 · 2026-09-20 07:45:15 +08:00 · 2026-09-20 06:29:34 +08:00 · 2026-08-10 08:15:00 +08:00 · 2026-08-10 08:10:46 +08:00 · 2026-08-10 08:03:46 +08:00
20 changed files with 961 additions and 773 deletions
@@ -54,3 +54,16 @@ package-backup.json
 package-modern.json
 package-updated-conservative.json
 package-vue2-working.json
+
+# Tooling (Hermes / OpenCode)
+.hermes/
+NUL
+
+# Generic caches
+.cache/
+.temp/
+.tmp/
+
+# Deployment platform state (uncomment if used)
+# .netlify/
+# .vercel/
@@ -0,0 +1,9 @@
+# Contributing
+
+1. Fork the repository.
+2. Customize `src/config/profile.js` with your profile details.
+3. Push your branch and open a pull request.
+
+Keep each pull request focused on one feature or fix. Use GitHub Issues to report bugs or propose features.
+
+For other questions, contact [[email protected]](mailto:[email protected]).
@@ -0,0 +1,201 @@
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2024 Hoelee (https://hoelee.com)
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
@@ -1,117 +1,97 @@
-# Mr. Hoelee Resume - Animated Resume
+# hoelee-profile

-This project is inspired by: [Animating Resume](https://github.com/jirengu-inc/animating-resume)
-Deep respect to the original author.
+Personal profile and animated resume for **Lee Teong Hoe (Mr Hoelee)** — Full Stack Engineer · AI & Automation · DevOps.

-An interactive animated resume built with Vue 3 and Vite that showcases your professional profile in a unique and engaging way. Features responsive design with separate mobile and desktop experiences.
+**Live:** https://me.hoelee.com

-## Prerequisites
+[![Live](https://img.shields.io/badge/live-me.hoelee.com-0b4a6f)](https://me.hoelee.com)
+[![License: Apache-2.0](https://img.shields.io/badge/License-Apache--2.0-blue.svg)](LICENSE)

- **Node.js**: >= 18.0.0 ([Download](https://nodejs.org/))
- **npm**: >= 9.0.0
- **Git**: [Download](https://git-scm.com/)
+## What this is

-## Usage
+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.

-1. Clone this repository:
+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.

-```bash
-git clone <your-repository-url>
-cd hoelee-profile2
-npm install
-npm run dev
-```
+## Tech stack

-2. The development server will automatically open in your browser at `http://localhost:8080`
+| 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 |

-## Build and Deployment
+## Project structure

-### Building for Production
+| 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) |

-1. Build the project:
+## Editing the content

-```bash
-npm run build
-```
+Everything you'd want to change is in `src/config/profile.js`:

-2. The built files will be generated in the `dist/` directory
+- `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

-### Deployment Options
-
-#### Option 1: Static Web Server
-
-Upload the contents of the `dist/` directory to any static web server (Netlify, Vercel, GitHub Pages, etc.)
-
-#### Option 2: Preview Locally
-
-Test the production build locally:
-
-```bash
-npm run preview
-```
+> **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 run dev` - Start development server with hot reload (opens at <http://localhost:8080>)
- `npm run build` - Build for production (outputs to `dist/` directory)
- `npm run preview` - Preview production build locally
-
-## Project Structure
-
-```text
-src/
-├── App.vue          # Desktop version of the resume
-├── Mobile.vue       # Mobile-optimized version
-├── main.js          # Entry point with responsive logic
-├── assets/          # Stylesheets and static assets
-│   └── reset.css    # CSS reset styles
-└── components/      # Resume components
-    ├── ResumeEditor.vue  # Resume content editor
-    ├── StyleEditor.vue   # Style/CSS editor
-    └── ThankEditor.vue   # Thank you section
+```bash
+npm install
+npm run dev      # http://localhost:8080
+npm run build    # outputs to dist/
+npm run preview  # serve the production build locally
 ```

-## Features
+Requires Node ≥ 18 (built and tested on Node 24).

- **Responsive Design**: Automatically switches between desktop and mobile versions based on screen width (500px breakpoint)
- **Interactive Animation**: Type-writer effect for resume content
- **Live Preview**: Real-time preview of resume as it's being "typed"
- **Modern Stack**: Built with Vue 3 composition API and Vite for fast development
- **Syntax Highlighting**: Integrated Prism.js for code highlighting
- **Markdown Support**: Uses marked.js for markdown parsing
+## Deployment

-## Customization
+Pushed to **Gitea only** — `git.hoelee.com/hoelee/hoelee-profile`. There is no GitHub mirror.

-### Personalizing Your Resume
+`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:

-1. **Content**: Edit the resume content in `src/components/ResumeEditor.vue`
-2. **Styling**: Modify CSS styles in `src/components/StyleEditor.vue`
-3. **Layout**: Adjust the main layout in `src/App.vue` (desktop) or `src/Mobile.vue` (mobile)
-4. **Title**: Update the page title in `index.html`
+| 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` |

-### Configuration
+To deploy a new build:

- **Port**: Development server port is set to 8080 in `vite.config.js`
- **Build Output**: Configured to output to `dist/` directory with organized asset structure
- **Aliases**: Path aliases are set up for easy imports (`@`, `src`, `assets`, `components`)
+```bash
+npm run build
+rsync -av --delete dist/ [email protected]:/docker/web/me.hoelee.com/public/
+```

-## Technologies Used
+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.

- **Vue 3** - Progressive JavaScript framework with Composition API
- **Vite** - Next-generation frontend build tool
- **Prism.js** - Syntax highlighting library
- **Marked** - Markdown parser and compiler
- **CSS3 Animations** - Smooth typing animations and transitions
- **PostCSS & Autoprefixer** - CSS processing and vendor prefixing
+## Credits

-## Browser Support
-
-This project uses modern JavaScript features and is compatible with:
-
- Chrome/Edge 88+
- Firefox 85+
- Safari 14+
+Adapted from [jirengu-inc/animating-resume](https://github.com/jirengu-inc/animating-resume) by
+jirengu-inc — the original animated resume project.

 ## License

-This project is for personal/educational use. Please respect the original author's work.
+[Apache-2.0](LICENSE).
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>Mr Hoelee Resume</title>
-    <link rel="icon" type="image/x-icon" href="./favicon.ico">
-    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
-    <script type="module" crossorigin src="/static/js/index-BF7mfwu9.js"></script>
-    <link rel="stylesheet" crossorigin href="/static/css/index-D2xCV1gI.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>
@@ -1,9 +1,21 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>Mr Hoelee Resume</title>
+    <meta name="description" content="Lee Teong Hoe (Mr Hoelee) — Full Stack Engineer with ~10 years building production web systems. PHP/CodeIgniter, Java/Spring Boot, AI & automation, DevOps. Based in Perak, Malaysia.">
+    <meta name="author" content="Lee Teong Hoe (Mr Hoelee)">
+    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="https://me.hoelee.com/">
+    <meta property="og:title" content="Mr Hoelee — Full Stack Engineer · AI & Automation · DevOps">
+    <meta property="og:description" content="Interactive animated resume — Full Stack Engineer with ~10 years building production web systems: PHP/CodeIgniter, Java/Spring Boot, AI automation and Docker infrastructure.">
+    <meta property="og:url" content="https://me.hoelee.com">
+    <meta property="og:type" content="profile">
+    <meta property="og:site_name" content="me.hoelee.com">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="Mr Hoelee — Full Stack Engineer · AI & Automation · DevOps">
+    <meta name="twitter:description" content="Interactive animated resume of Lee Teong Hoe — full stack engineering, AI automation and self-hosted infrastructure.">
+    <title>Mr Hoelee — Full Stack Engineer · AI & Automation · DevOps</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
  </head>
@@ -2,8 +2,11 @@
  "name": "hoelee-profile",
  "version": "2.0.0",
  "description": "Hoelee's animated resume - modernized",
-  "author": "Hoelee <>",
-  "private": true,
+  "author": "Hoelee <[email protected]>",
+  "private": false,
+  "license": "Apache-2.0",
+  "homepage": "https://me.hoelee.com",
+  "repository": "https://github.com/hoelee/hoelee-profile",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
@@ -24,4 +27,4 @@
    "node": ">= 18.0.0",
    "npm": ">= 9.0.0"
  }
-}
+}
@@ -1 +0,0 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>个人简历</title><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link href=/anires/public/static/css/app.97f24077373dbd5f86744ecd100255e7.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/anires/public/static/js/manifest.22a4ae013e2ceb48b7dd.js></script><script type=text/javascript src=/anires/public/static/js/vendor.045b08f12500b7884e7e.js></script><script type=text/javascript src=/anires/public/static/js/app.c4b2e14682ed119846b5.js></script></body></html>
@@ -0,0 +1,3 @@
+User-agent: *
+Allow: /
+Sitemap: https://me.hoelee.com/sitemap.xml
@@ -1,74 +0,0 @@
-
-#app[data-v-22ce9519] {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-html[data-v-22ce9519] {
-  min-height: 100vh;
-}
-*[data-v-22ce9519] {
-  box-sizing: border-box;
-}
-
-pre[data-v-35c047fd]{
-}
-@media (max-width:500px){
-pre[data-v-35c047fd]{
-}
-}
-.code[data-v-35c047fd] {
-  display: none;
-}
-
-@media (max-width:500px){
-.resumeEditor[data-v-647e008b]{
-}
-}
-.htmlMode[data-v-647e008b] {
-  animation: flip 2s;
-}
-@keyframes flip {
-from {
-    opacity: 0;
-}
-to {
-    opacity: 1;
-}
-}
-
-@media (max-width:500px){
-.thankEditor[data-v-29ad1df6]{
-}
-}
-.htmlMode[data-v-29ad1df6] {
-  animation: flip 2s;
-}
-@keyframes flip {
-from {
-    opacity: 0;
-}
-to {
-    opacity: 1;
-}
-}
-*{margin: 0; padding: 0;}
-*{box-sizing: border-box;}
-*::before{box-sizing: border-box;}
-*::after{box-sizing: border-box;}
-
-#app[data-v-53c8d54c] {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  min-height: 100vh; position: relative;
-}
-html[data-v-53c8d54c] {
-  min-height: 100vh;
-}
-*[data-v-53c8d54c]{
-  box-sizing: border-box;
-}
-
-
-/*# sourceMappingURL=app.97f24077373dbd5f86744ecd100255e7.css.map*/
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./src/App.vue","webpack:///./src/components/StyleEditor.vue","webpack:///./src/components/ResumeEditor.vue","webpack:///./src/components/ThankEditor.vue","webpack:///./src/assets/reset.css","webpack:///./src/Mobile.vue"],"names":[],"mappings":";AACA;EACE,oDAAoD;EACpD,oCAAoC;EACpC,mCAAmC;CACpC;AACD;EACE,kBAAkB;CACnB;AACD;EACE,uBAAuB;CACxB;;ACVD;CACC;AACD;AACA;CACC;CACA;AACD;EACE,cAAc;CACf;;ACRD;AACA;CACC;CACA;AACD;EACE,mBAAmB;CACpB;AACD;AACA;IACI,WAAW;CACd;AACD;IACI,WAAW;CACd;CACA;;ACdD;AACA;CACC;CACA;AACD;EACE,mBAAmB;CACpB;AACD;AACA;IACI,WAAW;CACd;AACD;IACI,WAAW;CACd;CACA;ACfD,EAAE,UAAU,CAAC,WAAW,CAAC;AACzB,EAAE,uBAAuB,CAAC;AAC1B,UAAU,uBAAuB,CAAC;AAClC,SAAS,uBAAuB,CAAC;;ACFjC;EACE,oDAAoD;EACpD,oCAAoC;EACpC,mCAAmC;EACnC,kBAAkB,CAAC,mBAAmB;CACvC;AACD;EACE,kBAAkB;CACnB;AACD;EACE,uBAAuB;CACxB","file":"static/css/app.97f24077373dbd5f86744ecd100255e7.css","sourcesContent":["\n#app[data-v-22ce9519] {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\nhtml[data-v-22ce9519] {\n  min-height: 100vh;\n}\n*[data-v-22ce9519] {\n  box-sizing: border-box;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.vue","\npre[data-v-35c047fd]{\n}\n@media (max-width:500px){\npre[data-v-35c047fd]{\n}\n}\n.code[data-v-35c047fd] {\n  display: none;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/StyleEditor.vue","\n@media (max-width:500px){\n.resumeEditor[data-v-647e008b]{\n}\n}\n.htmlMode[data-v-647e008b] {\n  animation: flip 2s;\n}\n@keyframes flip {\nfrom {\n    opacity: 0;\n}\nto {\n    opacity: 1;\n}\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/ResumeEditor.vue","\n@media (max-width:500px){\n.thankEditor[data-v-29ad1df6]{\n}\n}\n.htmlMode[data-v-29ad1df6] {\n  animation: flip 2s;\n}\n@keyframes flip {\nfrom {\n    opacity: 0;\n}\nto {\n    opacity: 1;\n}\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/ThankEditor.vue","*{margin: 0; padding: 0;}\n*{box-sizing: border-box;}\n*::before{box-sizing: border-box;}\n*::after{box-sizing: border-box;}\n\n\n\n// WEBPACK FOOTER //\n// ./src/assets/reset.css","\n#app[data-v-53c8d54c] {\n  font-family: 'Avenir', Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  min-height: 100vh; position: relative;\n}\nhtml[data-v-53c8d54c] {\n  min-height: 100vh;\n}\n*[data-v-53c8d54c]{\n  box-sizing: border-box;\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./src/Mobile.vue"],"sourceRoot":""}
@@ -1,2 +0,0 @@
-!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s<t.length;s++)a=t[s],o[a]&&l.push(o[a][0]),o[a]=0;for(u in c)Object.prototype.hasOwnProperty.call(c,u)&&(e[u]=c[u]);for(r&&r(t,c,i);l.length;)l.shift()();if(i)for(s=0;s<i.length;s++)f=n(n.s=i[s]);return f};var t={},o={2:0};n.e=function(e){function r(){u.onerror=u.onload=null,clearTimeout(a);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var c=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=c;var i=document.getElementsByTagName("head")[0],u=document.createElement("script");u.type="text/javascript",u.charset="utf-8",u.async=!0,u.timeout=12e4,n.nc&&u.setAttribute("nonce",n.nc),u.src=n.p+"static/js/"+e+"."+{0:"045b08f12500b7884e7e",1:"c4b2e14682ed119846b5"}[e]+".js";var a=setTimeout(r,12e4);return u.onerror=u.onload=r,i.appendChild(u),c},n.m=e,n.c=t,n.i=function(e){return e},n.d=function(e,r,t){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:t})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="/anires/public/",n.oe=function(e){throw console.error(e),e}}([]);
-//# sourceMappingURL=manifest.22a4ae013e2ceb48b7dd.js.map
@@ -11,6 +11,7 @@
 </template>

 <script>
+  import profile from './config/profile.js'
  import StyleEditor from './components/StyleEditor.vue'
  import ResumeEditor from './components/ResumeEditor.vue'
  import ThankEditor from './components/ThankEditor.vue'
@@ -18,339 +19,127 @@

  export default {
    name: 'app',
-    components: {
-      StyleEditor,
-      ResumeEditor,
-      ThankEditor
-    },
+    components: { StyleEditor, ResumeEditor, ThankEditor },
    data() {
      return {
-        interval: 1,
+        interval: profile.typingSpeed,
+        charsPerTick: profile.charsPerTick,
+        fullStyle: profile.desktopStyles,
+        fullMarkdown: profile.resumeMarkdown,
+        thanksMarkdown: profile.thanksMarkdown,
        currentStyle: '',
-        enableHtml: false,
-        fullStyle: [
-          `/*
-* GitHub: https://github.com/hoelee/
-* Hi, I'm Mr. Hoelee — Web3 Developer & Full Stack Engineer
-* Let me create an animated resume!
-*/
-
-/* Add transition effects to all elements */
-* {
-  transition: all .1s;
-}
-/* Set background color */
-html {
-  color: rgb(222,222,222); background: rgb(0,64,64);
-}
-#content{
-  height:70vh;
-  margin:0;
-}
-#foot{
-  height:29vh;
-  margin:0;
-}
-
-/* Set border */
-.styleEditor {
-  padding: .5em;
-  border: 1px solid;
-  margin: .5em;
-  overflow: auto;
-  width: 50vw; height: 70vh;
-  background: rgb(20,20,20);
-}
-/* Code highlighting */
-.token.selector{ color: rgb(130,150,0); }
-.token.property{ color: rgb(190,140,0); }
-.token.punctuation{ color: yellow; }
-.token.function{ color: rgb(40,160,150); }
-
-/* Add 3D effect */
-html{
-  perspective: 1000px;
-}
-.styleEditor {
-  position: fixed; left: 0; top: 0;
-  -webkit-transition: none;
-  transition: none;
-  -webkit-transform: rotateY(10deg) translateZ(-100px);
-          transform: rotateY(10deg) translateZ(-100px);
-}
-
-/* Prepare an editor */
-.resumeEditor{
-  position: fixed; right: 0; top: 0;
-  padding: .5em;  margin: .5em;
-  width: 50vw; height: 70vh;
-  border: 1px solid;
-  background: rgb(200,200,200); color: #222;
-  overflow: auto;
-  -webkit-transition: none;
-  transition: none;
-  -webkit-transform: rotateY(-10deg) translateZ(-100px);
-          transform: rotateY(-10deg) translateZ(-100px);
-}
-/* Start writing resume */
-`, `
-/* Convert Markdown to HTML
- * then add some styles to HTML
- */
-.resumeEditor{
-  padding: 0.5em;
-}
-.resumeEditor h1{
-  font-size: 1.3em;
-}
-.resumeEditor h2{
-  font-size: 1.2em;
-  display: inline-block;
-  border-bottom: 1px solid;
-  margin: 1em 0 .5em;
-}
-.resumeEditor ul,.resumeEditor ol{
-  list-style: none;
-}
-.resumeEditor ul> li::before{
-  content: '•';
-  margin-right: .5em;
-}
-.resumeEditor ol {
-  counter-reset: section;
-}
-.resumeEditor ol li::before {
-  counter-increment: section;
-  content: counters(section, ".") " ";
-  margin-right: .5em;
-}
-.resumeEditor blockquote {
-  margin: 1em;
-  padding: .5em;
-  background: #ddd;
-}
-`, `/* Write a thank you note.
- * Thanks for everyone's attention.
- */
-.styleEditor{
-    width:49vw;
-    height:70vh;
-    margin-left:1.2vw;
-}
-.resumeEditor{
-   width:49vw;
-   height:70vh;
-   margin-right:1.2em;
-}
-
-.thankEditor{
-  position: relative; left: 0; top: 0;
-  background: #E9D9BB;
-  color: #001C42;
-  overflow: auto;
-}
-
-.thankEditor {
-  width: 99vw; height: 45vh;
-  border: 1px solid #ccc;
-  font-size: .9em;
-}
-`,`
-.thankEditor{
-  padding: .5em;  margin: .5em; margin-top:1em;
-}
-
-.thankEditor ul,.thankEditor ol{
-  list-style: none;
-}
-.thankEditor ul> li::before{
-  content: '☞'; color: red;
-  margin-right: .5em;
-}
-.thankEditor ol {
-  counter-reset: section;
-}
-.thankEditor ol li::before {
-  counter-increment: section;
-  content: counters(section, "☞") " ";
-  margin-right: .5em;
-}
-
-.thankEditor{
-  width: 95vw; 
-  height: 45vh;
-  margin: 0 auto;
-  -webkit-transition: none;
-  transition: none;
-  -webkit-transform: rotateX(-10deg) translateZ(-200px);
-          transform: rotateX(-10deg) translateZ(-200px);
-}
-
-`],
        currentMarkdown: '',
        currentThankMarkdown: '',
-        fullMarkdown: `Mr. Hoelee
-====
-Hi, I'm Mr. Hoelee — a Web3 Developer & Experience Full Stack Engineer.
-I design and build bridges between Web2 and Web3 — crafting scalable backend systems, gas-optimized smart contracts, and immersive decentralized frontends.
-My passion lies at the intersection of blockchain innovation, AI automation, and full-stack engineering — shaping how the next internet will work.
-
-About Me
----
-I'm a passionate Web3 developer with hands-on experience creating secure, upgradeable, and gas-efficient ERC-20 / ERC-721 smart contracts using Solidity, Hardhat, and Foundry.
-Beyond the blockchain, I bring an enterprise-level backend mindset — leveraging Java Spring Boot, CodeIgniter, and Dockerized infrastructure to scale decentralized apps with the reliability of traditional systems.
-When I'm not building, I explore the evolving Web3 landscape — from Layer 2 protocols and DAO governance to DeFi innovation and on-chain analytics.
-My mission: to merge creativity, code, and cryptography into meaningful digital experiences.
-
-Web3 & Blockchain
----
-  - Solidity smart contracts (ERC-20 / ERC-721 / upgradeable patterns)
-  - Hardhat, Foundry testing, OpenZeppelin & Chainlink Oracles
-  - Alchemy SDK, Polygon, IPFS integration
-
-Frontend Development
----
-  - Web3.js / Ethers.js integration
-  - JavaScript, jQuery, HTML5, CSS3
-  - UI/UX prototyping with Photoshop, Illustrator, Canva
-
-Backend & DevOps
----
-  - PHP CodeIgniter (Web2↔Web3 bridge)
-  - Java Spring Boot + Hibernate for scalable data layers
-  - Databases: MySQL, MongoDB, Memcached, Elasticsearch
-  - Docker, Nginx, IIS, OpenLiteSpeed, Apache Tomcat, WordPress
-  - Server management (Windows, Ubuntu, unRaid, DSM)
-
-Work Ethic
----
-  - Effective Communicator: Strong written & verbal clarity in remote teams
-  - Problem-Solver: Adaptive mindset for complex, high-speed development
-  - Continuous Learner: Always exploring blockchain advancements
-  - AI-Driven: Using AI to accelerate workflows and creative tasks
-  - Client-Focused: Prioritizing real solutions and transparent delivery
-
-Education - Bachelor of Information System (Hons)
----
-  - Universiti Tunku Abdul Rahman (UTAR), Kampar, Malaysia
-  - March 2016 | CGPA: 3.06 / 4.00 - Degree In Merit
-  - Download Certificate → [hoelee.com/cert](https://hoelee.com/cert)
-
-Languages
----
-English | Malay | Mandarin | Cantonese | Hokkien
-
-Interests
----
-  - DeFi Innovation
-  - DAO Governance
-  - AI-assisted Development
-  - Cryptography
-  - On-Chain Analytics
-
-
-`, thanksMarkdown: `
-Thank you for reading!
----
-
-I'm open to remote collaborations and Web3-driven projects.
-
-Let's build something that connects the decentralized future with real-world impact.
-
-* WhatsApp Mr Hoelee Now  → [+6012-7972969](https://wa.me/60127972969)
-* Email Mr Hoelee Now  → [[email protected]](mailto:[email protected])
-* Passionate about bridging the gap between traditional systems and decentralized technologies
-* Ready to contribute to innovative Web3 projects that solve real-world problems
-* Available for remote collaboration with forward-thinking teams and startups
-* Let's discuss how we can leverage blockchain technology to create meaningful digital experiences
-
-Get in touch to explore opportunities in:
-* DeFi protocol development
-* Smart contract architecture and optimization
-* Web3 frontend integration
-* Scalable backend systems for dApps
-* Cross-chain solutions and Layer 2 implementations
-
-  `
+        enableHtml: false,
+        htmlShown: false,
+        thanksShown: false,
+        styleFull: profile.desktopStyles.join('')
      }
    },
    created() {
      this.makeResume()
    },
-
    methods: {
      makeResume: async function () {
-        await this.progressivelyShowStyle(0);
-        await this.progressivelyShowResume();
-        await this.progressivelyShowStyle(1);
-        await this.showHtml();
-        await this.progressivelyShowStyle(1);
-        await this.progressivelyShowThanks();
-        await this.progressivelyShowStyle(1)
+        // Both editors appear (background + borders), then the CSS types in the
+        // left pane. During this the right pane is NOT blank: the resume editor
+        // renders its content as it goes, so there is never a long empty wait.
+        await this.typeStyleUpToMarker('/* Start writing resume */')
+
+        // Render the resume right after the marker, before the remaining CSS.
+        await this.showHtml()
+
+        // Type the rest of the stylesheet, then show the bottom panel once it is
+        // fully styled so it never sits half-drawn for a long time.
+        await this.typeStyleRemaining()
+        await this.showThanks()
+        await this.progressivelyShowThanks()
+      },
+      typeStyleUpToMarker(marker) {
+        return new Promise((resolve) => {
+          const markerIdx = this.styleFull.indexOf(marker)
+          const target = markerIdx >= 0 ? markerIdx + marker.length : this.styleFull.length
+          this.progressivelyShowStylePartial(target, resolve)
+        })
+      },
+      typeStyleRemaining() {
+        return new Promise((resolve) => {
+          this.progressivelyShowStyleAll(resolve)
+        })
      },
      showHtml() {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
+          // The resume renders in full now (no more slow typing) — populate the
+          // full markdown so the HTML render has content.
+          this.currentMarkdown = this.fullMarkdown
          this.enableHtml = true
-          resolve()
+          this.$nextTick(() => {
+            if (this.$refs.resumeEditor) this.$refs.resumeEditor.goTop()
+            this.htmlShown = true
+            resolve()
+          })
        })
      },
-      progressivelyShowStyle(n) {
-        return new Promise((resolve, reject) => {
-          let interval = this.interval
-          let showStyle = (async function () {
-            let style = this.fullStyle[n]
-            if (!style) {
-              return
-            }
-            // Calculate total character count of first n styles
-            let length = this.fullStyle.filter((_, index) => index <= n).map((item) => item.length).reduce((p, c) => p + c, 0)
-            let prefixLength = length - style.length
-            if (this.currentStyle.length < length) {
-              let l = this.currentStyle.length - prefixLength
-              let char = style.substring(l, l + 1) || ' '
-              this.currentStyle += char
-              if (style.substring(l - 1, l) === '\n' && this.$refs.styleEditor) {
-                this.$nextTick(() => {
-                  this.$refs.styleEditor.goBottom()
-                })
-              }
-              setTimeout(showStyle, interval)
-            } else {
-              resolve()
-            }
-          }).bind(this)
-          showStyle()
+      showThanks() {
+        return new Promise((resolve) => {
+          this.thanksShown = true
+          this.$nextTick(() => {
+            if (this.$refs.thankEditor) this.$refs.thankEditor.goTop()
+            resolve()
+          })
        })
      },
-      progressivelyShowResume() {
-        return new Promise((resolve, reject) => {
-          let length = this.fullMarkdown.length
-          let interval = this.interval
-          let showResume = () => {
-            if (this.currentMarkdown.length < length) {
-              this.currentMarkdown = this.fullMarkdown.substring(0, this.currentMarkdown.length + 1)
-              let lastChar = this.currentMarkdown[this.currentMarkdown.length - 1]
-              let prevChar = this.currentMarkdown[this.currentMarkdown.length - 2]
-              if (prevChar === '\n' && this.$refs.resumeEditor) {
-                this.$nextTick(() => this.$refs.resumeEditor.goBottom())
-              }
-              setTimeout(showResume, interval)
-            } else {
-              resolve()
-            }
+      // Type the entire style array from whatever is already typed, writing
+      // charsPerTick characters per tick.
+      progressivelyShowStyleAll(resolve) {
+        const total = this.styleFull.length
+        const step = this.increment(total)
+        const tick = () => {
+          if (this.currentStyle.length < total) {
+            step()
+            setTimeout(tick, this.interval)
+          } else {
+            resolve()
          }
-          showResume()
-        })
+        }
+        tick()
+      },
+      progressivelyShowStylePartial(target, resolve) {
+        const step = this.increment(target)
+        const tick = () => {
+          if (this.currentStyle.length < target) {
+            step()
+            setTimeout(tick, this.interval)
+          } else {
+            resolve()
+          }
+        }
+        tick()
+      },
+      // Returns a function that writes `charsPerTick` characters per call and
+      // keeps the code pane scrolled to the newly typed line.
+      increment(total) {
+        const cpt = this.charsPerTick
+        return () => {
+          const cur = this.currentStyle.length
+          if (cur >= total) return
+          const end = Math.min(total, cur + cpt)
+          const slice = this.styleFull.substring(cur, end)
+          this.currentStyle += slice
+          if (slice.includes('\n') && this.$refs.styleEditor) {
+            this.$nextTick(() => this.$refs.styleEditor.goBottom())
+          }
+        }
      },
      progressivelyShowThanks() {
-        return new Promise((resolve, reject) => {
-          let length = this.thanksMarkdown.length
-          let interval = this.interval
-          let showThanks = () => {
+        return new Promise((resolve) => {
+          const length = this.thanksMarkdown.length
+          const interval = this.interval
+          const cpt = this.charsPerTick
+          const showThanks = () => {
            if (this.currentThankMarkdown.length < length) {
-              this.currentThankMarkdown = this.thanksMarkdown.substring(0, this.currentThankMarkdown.length + 1)
-              let lastChar = this.currentThankMarkdown[this.currentThankMarkdown.length - 1]
-              let prevChar = this.currentThankMarkdown[this.currentThankMarkdown.length - 2]
+              this.currentThankMarkdown = this.thanksMarkdown.substring(0, Math.min(length, this.currentThankMarkdown.length + cpt))
+              const prevChar = this.currentThankMarkdown[this.currentThankMarkdown.length - 2]
              if (prevChar === '\n' && this.$refs.thankEditor) {
                this.$nextTick(() => this.$refs.thankEditor.goBottom())
              }
@@ -364,7 +153,6 @@ Get in touch to explore opportunities in:
      }
    }
  }
-
 </script>

 <style scoped>
@@ -374,11 +162,7 @@ Get in touch to explore opportunities in:
    -moz-osx-font-smoothing: grayscale;
  }

-  html {
-    min-height: 100vh;
-  }
-
  * {
    box-sizing: border-box;
  }
-</style>
+</style>
@@ -2,302 +2,126 @@
  <div id="app">
    <StyleEditor ref="styleEditor" :code="currentStyle"></StyleEditor>
    <ResumeEditor ref="resumeEditor" :markdown="currentMarkdown" :enableHtml="enableHtml"></ResumeEditor>
+    <ThankEditor ref="thankEditor" :markdown="currentThankMarkdown" :enableHtml="enableHtml"></ThankEditor>
  </div>
 </template>

 <script>
+  import profile from './config/profile.js'
  import StyleEditor from './components/StyleEditor.vue'
  import ResumeEditor from './components/ResumeEditor.vue'
+  import ThankEditor from './components/ThankEditor.vue'
  import './assets/reset.css'

  export default {
    name: 'app',
-    components: {
-      StyleEditor,
-      ResumeEditor
-    },
+    components: { StyleEditor, ResumeEditor, ThankEditor },
    data() {
      return {
-        interval: 1,
+        interval: profile.typingSpeed,
+        charsPerTick: profile.charsPerTick,
+        fullStyle: profile.mobileStyles,
+        fullMarkdown: profile.resumeMarkdown,
+        thanksMarkdown: profile.thanksMarkdown,
        currentStyle: '',
-        enableHtml: false,
-        fullStyle: [
-          `/*
-* GitHub: https://github.com/hoelee/
-* Hi, I'm Mr. HoeleeWeb3 Developer & Full Stack Engineer
-* Let me create an animated resume!
-*/
-
-/* Add transition effects to all elements */
-* {
-  transition: all .2s;
-}
-/* Set background color */
-html {
-  color: rgb(222,222,222);
-  background: rgb(0,43,54);
-}
-/* Set border */
-.styleEditor {
-  padding: .5em;
-  border: 1px solid;
-  overflow: auto;
-  width: 96vw;
-  margin: 2.3vh 2vw;
-  height: 90vh;
-}
-/* Too short */
-.styleEditor {
-  height: 47vh;
-}
-/* Code highlighting */
-.token.selector{
-  color: rgb(133,153,0);
-}
-.token.property{
-  color: rgb(187,137,0);
-}
-.token.punctuation{
-  color: yellow;
-}
-.token.function{
-  color: rgb(42,161,152);
-}
-
-/* Add 3D effect */
-html{
-  perspective: 1000px;
-}
-.styleEditor {
-  position: fixed; left: 0; top: 0;
-  transform: rotateX(-10deg) translateZ(-50px) ;
-}
-
-/* Prepare an editor */
-.resumeEditor{
-  position: fixed;
-  top: 48%; left: 0;
-  padding: .5em;  margin: 1.5vh;
-  width: 94vw; height: 48.5vh;
-  border: 1px solid;
-  background: white; color: #222;
-  overflow: auto;
-}
-/* Start writing resume */
-
-
-`,
-          `
-/* Convert Markdown to HTML
- * then add some styles to HTML
- */
-.resumeEditor{
-  padding: 1em;
-}
-.resumeEditor h1{
-  font-size: 1.3em;
-}
-.resumeEditor h2{
-  font-size: 1.2em;
-  display: inline-block;
-  border-bottom: 1px solid;
-  margin: 1em 0 .5em;
-}
-.resumeEditor ul,.resumeEditor ol{
-  list-style: none;
-}
-.resumeEditor ul> li::before{
-  content: '•';
-  margin-right: .5em;
-}
-.resumeEditor ol {
-  counter-reset: section;
-}
-.resumeEditor ol li::before {
-  counter-increment: section;
-  content: counters(section, ".") " ";
-  margin-right: .5em;
-}
-.resumeEditor blockquote {
-  margin: 1em;
-  padding: .5em;
-  background: #ddd;
-}
-`, `
-/* Add mobile-optimized styles */
-.resumeEditor {
-  font-size: 14px;
-  line-height: 1.4;
-}
-.resumeEditor h1 {
-  color: #0066cc;
-  text-align: center;
-  margin-bottom: 0.5em;
-}
-.resumeEditor a {
-  color: #0066cc;
-  text-decoration: none;
-}
-.resumeEditor a:hover {
-  text-decoration: underline;
-}
-`],
        currentMarkdown: '',
-        fullMarkdown: `Mr. Hoelee
-====
-Hi, I'm Mr. Hoelee — a Web3 Developer & Experience Full Stack Engineer.
-
-I design and build bridges between Web2 and Web3 — crafting scalable backend systems, gas-optimized smart contracts, and immersive decentralized frontends.
-
-My passion lies at the intersection of blockchain innovation, AI automation, and full-stack engineering — shaping how the next internet will work.
-
-About Me
----
-I'm a passionate Web3 developer with hands-on experience creating secure, upgradeable, and gas-efficient ERC-20 / ERC-721 smart contracts using Solidity, Hardhat, and Foundry.
-
-Beyond the blockchain, I bring an enterprise-level backend mindset — leveraging Java Spring Boot, CodeIgniter, and Dockerized infrastructure to scale decentralized apps with the reliability of traditional systems.
-
-When I'm not building, I explore the evolving Web3 landscape — from Layer 2 protocols and DAO governance to DeFi innovation and on-chain analytics.
-
-My mission: to merge creativity, code, and cryptography into meaningful digital experiences.
-
-Web3 & Blockchain
----
-  - Solidity smart contracts (ERC-20 / ERC-721 / upgradeable patterns)
-  - Hardhat, Foundry testing, OpenZeppelin & Chainlink Oracles
-  - Alchemy SDK, Polygon, IPFS integration
-
-Frontend Development
----
-  - Web3.js / Ethers.js integration
-  - JavaScript, jQuery, HTML5, CSS3
-  - UI/UX prototyping with Photoshop, Illustrator, Canva
-
-Backend & DevOps
----
-  - PHP CodeIgniter (Web2↔Web3 bridge)
-  - Java Spring Boot + Hibernate for scalable data layers
-  - Databases: MySQL, MongoDB, Memcached, Elasticsearch
-  - Docker, Nginx, IIS, OpenLiteSpeed, Apache Tomcat, WordPress
-  - Server management (Windows, Ubuntu, unRaid, DSM)
-
-Work Ethic
----
-  - Effective Communicator: Strong written & verbal clarity in remote teams
-  - Problem-Solver: Adaptive mindset for complex, high-speed development
-  - Continuous Learner: Always exploring blockchain advancements
-  - AI-Driven: Using AI to accelerate workflows and creative tasks
-  - Client-Focused: Prioritizing real solutions and transparent delivery
-
-Education - Bachelor of Information System (Hons)
----
-  - Universiti Tunku Abdul Rahman (UTAR), Kampar, Malaysia
-  - March 2016 | CGPA: 3.06 / 4.00 - Degree In Merit
-  - Download Certificate → [hoelee.com/cert](https://hoelee.com/cert)
-
-Languages
----
-English | Malay | Mandarin | Cantonese | Hokkien
-
-Interests
----
-  - DeFi Innovation
-  - DAO Governance
-  - AI-assisted Development
-  - Cryptography
-  - On-Chain Analytics
-
-Contact Me
----
-I'm open to remote collaborations and Web3-driven projects.
-
-Let's build something that connects the decentralized future with real-world impact.
-
-* WhatsApp Mr Hoelee Now  → [+6012-7972969](https://wa.me/60127972969)
-* Email Mr Hoelee Now  → [[email protected]](mailto:[email protected])
-* Ready to contribute to innovative Web3 projects that solve real-world problems
-* Available for remote collaboration with forward-thinking teams and startups
-
-Get in touch to explore opportunities in:
-* DeFi protocol development
-* Smart contract architecture and optimization
-* Web3 frontend integration
-* Scalable backend systems for dApps
-* Cross-chain solutions and Layer 2 implementations
-
-`
+        currentThankMarkdown: '',
+        enableHtml: false,
+        styleFull: profile.mobileStyles.join('')
      }
    },
    created() {
      this.makeResume()
    },
-
    methods: {
      makeResume: async function () {
-        await this.progressivelyShowStyle(0)
-        await this.progressivelyShowResume()
-        await this.progressivelyShowStyle(1)
+        await this.typeStyleUpToMarker('/* Start writing resume */')
        await this.showHtml()
-        await this.progressivelyShowStyle(1)
+        await this.typeStyleRemaining()
+        await this.progressivelyShowThanks()
      },
-      showHtml: function () {
-        return new Promise((resolve, reject) => {
+      typeStyleUpToMarker(marker) {
+        return new Promise((resolve) => {
+          const markerIdx = this.styleFull.indexOf(marker)
+          const target = markerIdx >= 0 ? markerIdx + marker.length : this.styleFull.length
+          this.progressivelyShowStylePartial(target, resolve)
+        })
+      },
+      typeStyleRemaining() {
+        return new Promise((resolve) => {
+          this.progressivelyShowStyleAll(resolve)
+        })
+      },
+      showHtml() {
+        return new Promise((resolve) => {
+          this.currentMarkdown = this.fullMarkdown
          this.enableHtml = true
          this.$nextTick(() => {
-            this.$refs.resumeEditor.goTop()
+            if (this.$refs.resumeEditor) this.$refs.resumeEditor.goTop()
+            resolve()
          })
-          resolve()
        })
      },
-      progressivelyShowStyle(n) {
-        return new Promise((resolve, reject) => {
-          let interval = this.interval
-          let showStyle = (async function () {
-            let style = this.fullStyle[n]
-            if (!style) { return }
-            // Calculate total character count of first n styles
-            let length = this.fullStyle.filter((_, index) => index <= n).map((item) => item.length).reduce((p, c) => p + c, 0)
-            let prefixLength = length - style.length
-            if (this.currentStyle.length < length) {
-              let l = this.currentStyle.length - prefixLength
-              let char = style.substring(l, l + 1) || ' '
-              this.currentStyle += char
-              if (style.substring(l - 1, l) === '\n' && this.$refs.styleEditor) {
-                this.$nextTick(() => {
-                  this.$refs.styleEditor.goBottom()
-                })
-              }
-              setTimeout(showStyle, interval)
-            } else {
-              resolve()
-            }
-          }).bind(this)
-          showStyle()
-        })
+      progressivelyShowStyleAll(resolve) {
+        const total = this.styleFull.length
+        const step = this.increment(total)
+        const tick = () => {
+          if (this.currentStyle.length < total) {
+            step()
+            setTimeout(tick, this.interval)
+          } else {
+            resolve()
+          }
+        }
+        tick()
      },
-      progressivelyShowResume() {
-        return new Promise((resolve, reject) => {
-          let length = this.fullMarkdown.length
-          let interval = this.interval
-          let showResume = () => {
-            if (this.currentMarkdown.length < length) {
-              this.currentMarkdown = this.fullMarkdown.substring(0, this.currentMarkdown.length + 1)
-              let lastChar = this.currentMarkdown[this.currentMarkdown.length - 1]
-              let prevChar = this.currentMarkdown[this.currentMarkdown.length - 2]
-              if (prevChar === '\n' && this.$refs.resumeEditor) {
-                this.$nextTick(() => this.$refs.resumeEditor.goBottom())
-              }
-              setTimeout(showResume, interval)
+      progressivelyShowStylePartial(target, resolve) {
+        const step = this.increment(target)
+        const tick = () => {
+          if (this.currentStyle.length < target) {
+            step()
+            setTimeout(tick, this.interval)
+          } else {
+            resolve()
+          }
+        }
+        tick()
+      },
+      increment(total) {
+        const cpt = this.charsPerTick
+        return () => {
+          const cur = this.currentStyle.length
+          if (cur >= total) return
+          const end = Math.min(total, cur + cpt)
+          const slice = this.styleFull.substring(cur, end)
+          this.currentStyle += slice
+          if (slice.includes('\n') && this.$refs.styleEditor) {
+            this.$nextTick(() => this.$refs.styleEditor.goBottom())
+          }
+        }
+      },
+      progressivelyShowThanks() {
+        return new Promise((resolve) => {
+          const length = this.thanksMarkdown.length
+          const interval = this.interval
+          const cpt = this.charsPerTick
+          const showThanks = () => {
+            if (this.currentThankMarkdown.length < length) {
+              this.currentThankMarkdown = this.thanksMarkdown.substring(0, Math.min(length, this.currentThankMarkdown.length + cpt))
+              this.$nextTick(() => {
+                // Keep the newly revealed thanks section in view as it grows.
+                window.scrollTo(0, document.body.scrollHeight)
+              })
+              setTimeout(showThanks, interval)
            } else {
              resolve()
            }
          }
-          showResume()
+          showThanks()
        })
      }
    }
  }
-
 </script>

 <style scoped>
@@ -314,5 +138,4 @@ Get in touch to explore opportunities in:
  *{
    box-sizing: border-box;
  }
-
-</style>
+</style>
@@ -0,0 +1,465 @@
+export default {
+  // Personal info
+  name: 'Mr. Hoelee',
+  title: 'Full Stack Engineer · AI & Automation · DevOps',
+  githubUrl: 'https://github.com/hoelee/hoelee-profile',
+  giteaUrl: 'https://git.hoelee.com/hoelee',
+
+  // Animation speed — per-tick delay (ms) and characters written per tick.
+  // Effective speed = typingSpeed / charsPerTick. Lower delay = faster;
+  // higher charsPerTick = fewer setTimeout hops = much faster and smoother.
+  typingSpeed: 1,
+  charsPerTick: 5,
+
+  // Resume content in Markdown
+  resumeMarkdown: `Mr. Hoelee (Lee Teong Hoe)
+====
+Full Stack Engineer with ~10 years building production web systems — PHP/CodeIgniter and Java/Spring backends, relational data layers, and the Docker infrastructure that runs them.
+I work end to end: gather the requirements, design the schema and APIs, build the app, deploy it, and keep it running in production.
+Recent focus is AI and automation — LLM-backed assistants, OCR document verification, and workflow automation that removes manual work from real business processes.
+
+About Me
+----
+I'm a hands-on engineer who likes owning a system from the first requirement to production support.
+Day to day that means CodeIgniter and Spring Boot services, WordPress builds for clients, and a self-hosted Docker stack of 30+ services (reverse proxy, SSO, databases, monitoring, backups, automation) that I run and maintain myself.
+I'm comfortable being the only technical person on a project: talking to the client, making the architecture call, writing the code, and handling the production incident.
+I use AI as a working tool — coding assistants, local LLMs, and automation pipelines — to move faster without lowering the quality bar.
+
+Core Skills
+----
+  - Languages: PHP, Java, JavaScript, SQL, Python (scripting), Bash
+  - Backend & Frameworks: CodeIgniter 4, Spring Boot, Spring Data JPA / Hibernate, REST API design, WordPress plugin development
+  - Databases: MySQL, PostgreSQL, SQL Server, SQLite, Redis, Elasticsearch, Memcached
+  - Frontend: HTML5, CSS3, JavaScript, Vue 3, jQuery, Bootstrap, responsive UI
+  - DevOps & Infrastructure: Docker, Docker Compose, Portainer, Traefik, Nginx, IIS, Cloudflare, Linux (Ubuntu/Debian), Windows Server, Synology DSM, unRAID
+  - AI & Automation: OpenAI API, LLM integration, prompt engineering, OCR pipelines, IBM Watson Assistant, n8n, local LLM inference (LM Studio, llama.cpp)
+  - Tooling: Git (Gitea/GitHub/GitLab), VS Code, NetBeans, Postman, Chrome extension development
+
+Selected Projects
+----
+  - DigiKedai AI customer-support bot — multi-channel (Telegram + WhatsApp) support bot in TypeScript, LiteLLM + PostgreSQL, containerised on NAS behind a Cloudflare tunnel webhook.
+  - OCR invoice verification + AI customer service — replaces manual data entry by extracting and validating receipt fields, with an LLM layer drafting replies.
+  - Real-time GPS delivery tracking platform — live order and driver tracking with automated dispatch and scheduling; included the rider-side Android app.
+  - Self-hosted production infrastructure — 30+ Docker services across NAS and VPS: Traefik reverse proxy with custom bot-filter middleware, authentik SSO, PostgreSQL/MySQL, backups, monitoring and automation.
+  - Digital product catalogue + delivery system — NocoDB catalogue, n8n-backed single-use access links, and per-download logging for digital goods sales.
+  - Numerology report engine (CodeIgniter 4) — print-ready A4 report generation staged for token-gated PDF delivery.
+  - Client web builds — 30+ delivered SME, NGO and e-commerce sites on WordPress (Kadence, Elementor, JetEngine) plus custom PHP applications.
+
+Experience
+----
+  Full Stack Software Engineer — Joywood, Perak, Malaysia (2020 – Present)
+  - Delivered 30+ production websites and business systems for SME, NGO and e-commerce clients, owning each from requirements through deployment and support.
+  - Built AI features into client products: OpenAI-backed assistants, OCR data capture, chatbots and workflow automation.
+  - Developed and maintained PHP (CodeIgniter) applications, WordPress plugins and Java Spring Boot services.
+  - Designed and operated the self-hosted Docker infrastructure (30+ services) covering auth, monitoring, backup, databases, automation and reverse proxying.
+
+  Project Manager / Software Engineer — Edufly (2019 – 2020)
+  - Led development of an MLM e-commerce platform and integrated its payment gateway.
+  - Coordinated an external development team and managed delivery scope and timelines.
+  - Built Java Spring automation tools for Shopee bulk listing, product scraping and internal workflows.
+  - Integrated Telegram, WhatsApp, Facebook Messenger and web chat bots, plus email marketing automation.
+
+  Software Engineer — Superceed (M) Sdn. Bhd., Remote (2016 – 2019)
+  - Enterprise Java Spring Boot web applications and Android apps.
+  - Real-time GPS delivery tracking platform with live map and automated customer assignment.
+  - IBM Watson Assistant chatbot, speech synthesis/recognition and face-recognition customer verification.
+
+Education — Bachelor of Information System (Hons)
+----
+  - Universiti Tunku Abdul Rahman (UTAR), Kampar, Malaysia
+  - March 2016 | CGPA: 3.06 / 4.00 — Degree with Merit
+  - Certificate: [hoelee.com/cert](https://hoelee.com/cert)
+
+Languages
+----
+English | Malay | Mandarin | Cantonese | Hokkien
+
+Currently Learning
+----
+  - Solidity and smart-contract fundamentals (ERC-20 / ERC-721 with Foundry and Hardhat) — a side interest, not my day job.
+  - Local LLM inference and self-hosted AI tooling.
+
+
+`,
+
+  // Thank you section markdown
+  thanksMarkdown: `
+Thank you for reading!
+----
+
+I'm open to full-time, contract and remote engineering roles — building and running web systems end to end.
+
+The best fit is a team that needs one person who can own the whole stack: backend, frontend, deployment and production support.
+
+* WhatsApp  → [+6012-7972969](https://wa.me/60127972969)
+* Email  → [[email protected]](mailto:[email protected])
+* Gitea  → [git.hoelee.com/hoelee](https://git.hoelee.com/hoelee)
+* GitHub  → [github.com/hoelee](https://github.com/hoelee/)
+* Based in Perak, Malaysia — remote-friendly, open to hybrid in Malaysia
+
+Where I can contribute:
+* Full stack application development (PHP/CodeIgniter, Java/Spring Boot, JavaScript)
+* AI and automation features — LLM assistants, OCR pipelines, workflow automation
+* DevOps and self-hosted infrastructure — Docker, reverse proxy, CI/CD, monitoring, backups
+* Taking existing systems in hand: maintenance, upgrades, performance and reliability
+
+  `,
+
+  // CSS animation stages — array of CSS strings typed in sequence
+  desktopStyles: [
+    `/*
+ * Gitea: https://git.hoelee.com/hoelee
+ * GitHub: https://github.com/hoelee
+ * Hi, I'm Mr. Hoelee — Full Stack Engineer, AI & Automation, DevOps
+ * Let me create an animated resume!
+ */
+
+/* Add transition effects to all elements */
+* {
+  transition: all .1s;
+}
+/* Set background color */
+html {
+  color: rgb(222,222,222); background: rgb(0,64,64);
+}
+#content{
+  height:70vh;
+  margin:0;
+  overflow: hidden;
+}
+#foot{
+  min-height:30vh;
+  margin:0;
+}
+
+/* Set border */
+.styleEditor {
+  padding: .5em;
+  border: 1px solid;
+  margin: .5em;
+  overflow: auto;
+  width: calc(50vw - 1em); height: 70vh;
+  background: rgb(20,20,20);
+}
+/* Code highlighting */
+.token.selector{ color: rgb(130,150,0); }
+.token.property{ color: rgb(190,140,0); }
+.token.punctuation{ color: yellow; }
+.token.function{ color: rgb(40,160,150); }
+
+/* Add 3D effect */
+html{
+  perspective: 1000px;
+}
+.styleEditor {
+  position: fixed; left: .5em; top: 0;
+  -webkit-transition: none;
+  transition: none;
+  -webkit-transform: rotateY(10deg) translateZ(-100px);
+          transform: rotateY(10deg) translateZ(-100px);
+}
+
+/* Prepare an editor */
+.resumeEditor{
+  position: fixed; right: .5em; top: 0;
+  padding: .5em;  margin: .5em;
+  width: calc(50vw - 1em); height: 70vh;
+  border: 1px solid;
+  background: rgb(200,200,200); color: #222;
+  overflow: auto;
+  -webkit-transition: none;
+  transition: none;
+  -webkit-transform: rotateY(-10deg) translateZ(-100px);
+          transform: rotateY(-10deg) translateZ(-100px);
+}
+/* Start writing resume */
+`, `
+/* Convert Markdown to HTML
+ * then add some styles to HTML
+ */
+.resumeEditor{
+  padding: 1em;
+}
+.resumeEditor h1{
+  font-size: 1.3em;
+}
+.resumeEditor h2{
+  font-size: 1.2em;
+  display: inline-block;
+  border-bottom: 1px solid;
+  margin: 1em 0 .5em;
+}
+.resumeEditor ul,.resumeEditor ol{
+  list-style: none;
+}
+.resumeEditor ul> li::before{
+  content: '•';
+  margin-right: .5em;
+}
+.resumeEditor ol {
+  counter-reset: section;
+}
+.resumeEditor ol li::before {
+  counter-increment: section;
+  content: counters(section, ".") " ";
+  margin-right: .5em;
+}
+.resumeEditor blockquote {
+  margin: 1em;
+  padding: .5em;
+  background: #ddd;
+}
+`, `/* Write a thank you note.
+ * Thanks for everyone's attention.
+ */
+.styleEditor{
+    width: calc(50vw - 1em);
+    height:70vh;
+    margin-left:.5em;
+}
+.resumeEditor{
+   width: calc(50vw - 1em);
+   height:70vh;
+   margin-right:.5em;
+}
+
+.thankEditor{
+  position: relative; left: 0; top: 0;
+  background: #E9D9BB;
+  color: #001C42;
+  overflow: auto;
+  padding: 1.25em 1.75em;
+  margin: .75em auto;
+  box-sizing: border-box;
+}
+
+.thankEditor h2{
+  margin-top: 0;
+  padding-bottom: .35em;
+  border-bottom: 2px solid rgba(0,28,66,.35);
+}
+
+/* readable link colour on the light background */
+.thankEditor a{
+  color: #0b4a6f;
+  font-weight: 600;
+  text-decoration-color: rgba(11,74,111,.5);
+}
+.thankEditor a:hover{
+  color: #06304a;
+  text-decoration-color: #06304a;
+}
+
+.thankEditor li::before{
+  color: #0b4a6f !important;
+}
+
+.thankEditor {
+  width: 99vw; min-height: calc(30vh - 1.5em);
+  border: 1px solid #ccc;
+  font-size: .9em;
+  overflow: visible;
+}
+`,`
+.thankEditor{
+  padding: 1.25em 1.75em;  margin: .5em auto;
+}
+
+.thankEditor ul,.thankEditor ol{
+  list-style: none;
+}
+.thankEditor ul> li::before{
+  content: '☞'; color: #0b4a6f;
+  margin-right: .5em;
+}
+.thankEditor ol {
+  counter-reset: section;
+}
+.thankEditor ol li::before {
+  counter-increment: section;
+  content: counters(section, "☞") " ";
+  margin-right: .5em;
+}
+
+.thankEditor{
+  width: 95vw;
+  min-height: calc(30vh - 1.5em);
+  margin: .5em auto;
+  padding: 1.25em 1.75em;
+  box-sizing: border-box;
+  overflow: visible;
+  -webkit-transition: none;
+  transition: none;
+  -webkit-transform: rotateX(-10deg) translateZ(-200px);
+          transform: rotateX(-10deg) translateZ(-200px);
+}
+
+/* keep horizontal scrolling off; allow vertical scroll when short */
+body{
+  overflow-x: hidden;
+}
+
+`],
+
+  mobileStyles: [
+    `/*
+ * Gitea: https://git.hoelee.com/hoelee
+ * GitHub: https://github.com/hoelee
+ * Hi, I'm Mr. Hoelee — Full Stack Engineer, AI & Automation, DevOps
+ * Let me create an animated resume!
+ */
+
+/* Add transition effects to all elements */
+* {
+  transition: all .2s;
+}
+/* Set background color */
+html {
+  color: rgb(222,222,222);
+  background: rgb(0,43,54);
+}
+/* Set border */
+.styleEditor {
+  padding: .5em;
+  border: 1px solid;
+  overflow: auto;
+  width: 94vw;
+  margin: 2.3vh 2vw;
+  height: 90vh;
+  box-sizing: border-box;
+}
+/* Too short */
+.styleEditor {
+  height: 47vh;
+}
+/* Code highlighting */
+.token.selector{
+  color: rgb(133,153,0);
+}
+.token.property{
+  color: rgb(187,137,0);
+}
+.token.punctuation{
+  color: yellow;
+}
+.token.function{
+  color: rgb(42,161,152);
+}
+
+/* Add 3D effect */
+.styleEditor {
+  position: relative; left: 0; top: 0;
+  margin: 2.3vh 2vw;
+}
+
+/* Prepare an editor */
+.resumeEditor{
+  position: relative;
+  left: 0;
+  padding: .5em;
+  margin: 2.3vh 2vw;
+  width: 94vw; height: 48.5vh;
+  border: 1px solid;
+  background: white; color: #222;
+  overflow: auto;
+  box-sizing: border-box;
+}
+/* Start writing resume */
+
+
+`,
+    `
+/* Convert Markdown to HTML
+ * then add some styles to HTML
+ */
+.resumeEditor{
+  padding: 1em;
+}
+.resumeEditor h1{
+  font-size: 1.3em;
+}
+.resumeEditor h2{
+  font-size: 1.2em;
+  display: inline-block;
+  border-bottom: 1px solid;
+  margin: 1em 0 .5em;
+}
+.resumeEditor ul,.resumeEditor ol{
+  list-style: none;
+}
+.resumeEditor ul> li::before{
+  content: '•';
+  margin-right: .5em;
+}
+.resumeEditor ol {
+  counter-reset: section;
+}
+.resumeEditor ol li::before {
+  counter-increment: section;
+  content: counters(section, ".") " ";
+  margin-right: .5em;
+}
+.resumeEditor blockquote {
+  margin: 1em;
+  padding: .5em;
+  background: #ddd;
+}
+`, `
+/* Add mobile-optimized styles */
+.resumeEditor {
+  font-size: 14px;
+  line-height: 1.4;
+}
+.resumeEditor h1 {
+  color: #0066cc;
+  text-align: center;
+  margin-bottom: 0.5em;
+}
+.resumeEditor a {
+  color: #0066cc;
+  text-decoration: none;
+}
+.resumeEditor a:hover {
+  text-decoration: underline;
+}
+
+/* Thank-you panel below the resume, full width */
+.thankEditor {
+  position: relative;
+  width: 94vw;
+  margin: 2vh auto;
+  padding: 1.25em 1.25em;
+  box-sizing: border-box;
+  background: #E9D9BB;
+  color: #001C42;
+  overflow: auto;
+  border: 1px solid #ccc;
+  font-size: .9em;
+}
+.thankEditor h2 {
+  margin-top: 0;
+  padding-bottom: .35em;
+  border-bottom: 2px solid rgba(0,28,66,.35);
+}
+.thankEditor a {
+  color: #0b4a6f;
+  font-weight: 600;
+}
+.thankEditor ul, .thankEditor ol {
+  list-style: none;
+  padding-left: .25em;
+}
+.thankEditor ul > li::before {
+  content: '☞';
+  color: #0b4a6f;
+  margin-right: .5em;
+}
+
+/* allow vertical scroll, never horizontal */
+html, body {
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-width: 100%;
+}
+`]
+}
Author	SHA1	Message	Date
hoelee	86336ed86f	Fix empty resume panel (populate markdown) and mobile thank-section overlap (normal-flow stack)	2026-09-20 07:59:53 +08:00
hoelee	4c78e8efd4	Profile polish: both git links, tighter gutter, page-scroll thank section, 6x faster typing, reordered sequence, mobile thank panel	2026-09-20 07:45:15 +08:00
hoelee	de7c44b87d	Rewrite profile content as generalist; fix scrollbars, footer padding & link colour 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	2026-09-20 06:29:34 +08:00
hoelee	0bf4551f19	docs: add prominent Demo section at top, move credits to bottom Deploy to GitHub Pages / deploy (push) Has been cancelled Details	2026-08-10 08:15:00 +08:00
hoelee	d3e4882f49	docs: add GitHub Pages live demo link to README Deploy to GitHub Pages / deploy (push) Has been cancelled Details	2026-08-10 08:10:46 +08:00
hoelee	1feeaa6282	restore: GitHub Pages deploy workflow	2026-08-10 08:03:46 +08:00
hoelee	a5af12de7b	chore: remove GitHub Pages workflow (not using Pages)	2026-08-10 07:02:51 +08:00
hoelee	06d609ba94	feat: open-source template refactor Deploy to GitHub Pages / deploy (push) Has been cancelled Details - Extract content to src/config/profile.js (single-file customization) - Add Apache-2.0 LICENSE, CONTRIBUTING.md, robots.txt - Add GitHub Pages auto-deploy workflow - Update package.json: private=false, license, homepage - Add SEO/Open Graph meta tags to index.html - Rewrite README.md with Quick Start guide - Update .gitignore: AI tooling, caches, deployment state	2026-08-10 06:54:58 +08:00
hoelee	dbe18e51bd	Initial commit for Github	2025-10-16 04:59:04 +08:00
				`@@ -1 +0,0 @@`
				<!DOCTYPE html><html><head><meta charset=utf-8><title>个人简历</title><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link href=/anires/public/static/css/app.97f24077373dbd5f86744ecd100255e7.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/anires/public/static/js/manifest.22a4ae013e2ceb48b7dd.js></script><script type=text/javascript src=/anires/public/static/js/vendor.045b08f12500b7884e7e.js></script><script type=text/javascript src=/anires/public/static/js/app.c4b2e14682ed119846b5.js></script></body></html>
				`@@ -1 +0,0 @@`
				{"version":3,"sources":["webpack:///./src/App.vue","webpack:///./src/components/StyleEditor.vue","webpack:///./src/components/ResumeEditor.vue","webpack:///./src/components/ThankEditor.vue","webpack:///./src/assets/reset.css","webpack:///./src/Mobile.vue"],"names":[],"mappings":";AACA;EACE,oDAAoD;EACpD,oCAAoC;EACpC,mCAAmC;CACpC;AACD;EACE,kBAAkB;CACnB;AACD;EACE,uBAAuB;CACxB;;ACVD;CACC;AACD;AACA;CACC;CACA;AACD;EACE,cAAc;CACf;;ACRD;AACA;CACC;CACA;AACD;EACE,mBAAmB;CACpB;AACD;AACA;IACI,WAAW;CACd;AACD;IACI,WAAW;CACd;CACA;;ACdD;AACA;CACC;CACA;AACD;EACE,mBAAmB;CACpB;AACD;AACA;IACI,WAAW;CACd;AACD;IACI,WAAW;CACd;CACA;ACfD,EAAE,UAAU,CAAC,WAAW,CAAC;AACzB,EAAE,uBAAuB,CAAC;AAC1B,UAAU,uBAAuB,CAAC;AAClC,SAAS,uBAAuB,CAAC;;ACFjC;EACE,oDAAoD;EACpD,oCAAoC;EACpC,mCAAmC;EACnC,kBAAkB,CAAC,mBAAmB;CACvC;AACD;EACE,kBAAkB;CACnB;AACD;EACE,uBAAuB;CACxB","file":"static/css/app.97f24077373dbd5f86744ecd100255e7.css","sourcesContent":["\n#app[data-v-22ce9519] {\n font-family: 'Avenir', Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\nhtml[data-v-22ce9519] {\n min-height: 100vh;\n}\n[data-v-22ce9519] {\n box-sizing: border-box;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/App.vue","\npre[data-v-35c047fd]{\n}\n@media (max-width:500px){\npre[data-v-35c047fd]{\n}\n}\n.code[data-v-35c047fd] {\n display: none;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/StyleEditor.vue","\n@media (max-width:500px){\n.resumeEditor[data-v-647e008b]{\n}\n}\n.htmlMode[data-v-647e008b] {\n animation: flip 2s;\n}\n@keyframes flip {\nfrom {\n opacity: 0;\n}\nto {\n opacity: 1;\n}\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/ResumeEditor.vue","\n@media (max-width:500px){\n.thankEditor[data-v-29ad1df6]{\n}\n}\n.htmlMode[data-v-29ad1df6] {\n animation: flip 2s;\n}\n@keyframes flip {\nfrom {\n opacity: 0;\n}\nto {\n opacity: 1;\n}\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/components/ThankEditor.vue","{margin: 0; padding: 0;}\n{box-sizing: border-box;}\n::before{box-sizing: border-box;}\n::after{box-sizing: border-box;}\n\n\n\n// WEBPACK FOOTER //\n// ./src/assets/reset.css","\n#app[data-v-53c8d54c] {\n font-family: 'Avenir', Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n min-height: 100vh; position: relative;\n}\nhtml[data-v-53c8d54c] {\n min-height: 100vh;\n}\n[data-v-53c8d54c]{\n box-sizing: border-box;\n}\n\n\n\n\n// WEBPACK FOOTER //\n// ./src/Mobile.vue"],"sourceRoot":""}