Joe

Web Development
I manage a webdev blog with over a hundred articles and explore various interesting topics through social media. Covers a wide range of fields, including design, UI, UX, Web Development, and testing

Experience

Frontend Engineer

  • Introduced Nx to establish Monorepo project architecture, eliminating redundant work and package upgrade management issues
  • Introduced and upgraded to Nuxt 3 with TypeScript type checking, improving overall developer experience
  • Introduced Shadcn Vue components to streamline development and avoid recreating common UI patterns
  • Introduced GitHub Actions CI process, automating package upgrades, typecheck, and testing workflows
  • Introduced BDD E2E testing, making testable documentation, ensuring test coverage for all major functions of the store's backstage
  • Observed and reported existing XSS vulnerabilities, providing root causes and fix suggestions
  • Developed and maintained new sales platform homepage, sales pages, and undisclosed features, wrote internal documents
  • Nx Monorepo
  • TypeScript
  • Nuxt 3
  • Pinia
  • Tailwind
  • Shadcn Vue
  • Cypress
  • Cucumber
  • Vitest
  • Git Flow
  • GitHub Actions

Frontend Teaching Assistant

  • Reviewed and resolved over 800 student assignments and questions in the course
  • Wrote JS introductory textbook for 9 consecutive weeks, solving Codewars JS exercises with students
  • Wrote and shared over 50 articles on frontend development to enhance learning for students.
  • React
  • Vue
  • jQuery
  • Bootstrap
  • Sass

Web Design and Development Freelancer

  • Develop and design 2 single-page event website
  • Sass
  • Bootstrap

Community

2023 iThome Ironman Competition Modern Web Category

網頁開發沒有這麼簡單過！實際案例帶你上手 Astro.js - 30 Series Articles

Education

National Taichung University of Science and Technology, Bachelor in Commercial Design

Leveraged my cross-disciplinary expertise to create a design studio as a freelancer. In final year, responsible for the visual design and the development of a psychological test website for the graduation exhibition.

Skill

  • UI: Figma, Illustrator, Photoshop
  • CSS: BEM CSS, Sass, Bootstrap 5, Tailwind, Shadcn
  • Frontend: Vue 3, Nuxt 3, React Hook, Astro, Alpine, jQuery
  • State Management: Pinia
  • Backend: Express
  • Code Quality: ESLint, Prettier and TypeScript
  • Code Testing: Vitest and Cypress
  • Code Management: Git, GitHub, Git Flow, GitHub Flow
  • CI/CD: GitHub Actions
  • Miscellaneous Packages: GSAP, Framer Motion, Swiper, Tanstack Table, Zod, vee-validate, TinyMCE, Editor.js...

Links

If your device "does not support PDF embedded links" or is "interested in links in resumes", you can refer to the following link:

  • data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAklEQVR4AewaftIAAAOUSURBVO3B0YrcShYAwcyi//+Xcy3wASNkTXtq+u6LIgTiB1UMlTsVQ+VQMVRGxR2VUXFH5acsHlsWjy0v/lDxHSq7Ks4qrqgcKkbFUDmruFLxHSqHxWPL4rHlxV+o3Kl4V8VQGSqj4qAyKq5UHFRGxS6VOxVni8eWxWPLi/+AyqgYKmcVQ2VUDJVDxVC5UvFJi8eWxWPLiw+quFNxpnJFZVTcqRgqh4pPWDy2vPiLil0qh4orKu+qGCqHilExVEbFuyr+1eKxZfHY8uIPKp+mMiqGyqFiqLxLZVQMlUPFFZUdi8eWxWOL/cKHqYyKKyqHiqFypeKg8pWKT1o8tiweW14qVyquqNypOKu4ojIqDipXKu5UDJV3qYyKg8q7Fo8t9gu/qYyKoTIqDiqj4o7KlYqhcqi4onJW8S6VT1g8tiweWwTit4qhcqdiqNypuKLyHRVnKqNiqBwqhsqo+A6Vw+KxZfHY8qr4FxVnFUPljsqVioPKqBgqZyqj4l0Vd1RGxVA5Wzy2LB5bXiqjYlS8S2VUvKtiqOxQuaMyKu5UfKXisHhssV/4BypnFUNlVPwrlV0Vd1R+yuKxZfHY8uINKmcVQ+WKyqHiXRVXVEbFmcoVlUPFlYqhcqdiqBwWjy2Lx5YXb6gYKmcVd1RGxRWVQ8VQuaNyReU7Ku6onC0eWxaPLQLxW8W7VK5UDJWziqEyKg4qVyqGylnFULlTMVRGxR2VUXFYPLa8eIPKnYqhclYxVEbFUDlUXFE5qxgqo+KOyhWVs4orKofFY8viseVVcUVlVJypDJXvUDlT+UrFQeUrKncq7qiMiqFyWDy2LB5bXvxFxVC5UzFUvqPioDIqrqi8q+KgMireVTFUzhaPLYvHFoH4QsWZyq6KoXJWcUXlrGKo/JSKKyqHxWOL/cKHqBwq3qXyCRVfUTlUfEXlsHhsWTy2CMQPqjhTGRXfoTIqzlTuVAyVUTFU7lQMlcPisWXx2PLiDxXfoXJF5VAxVEbFUDlUDJU7KqNiqNypuFNxReVs8diyeGx58RcqdyrepTIqhsqoOKhcqbijckflXSqj4krFYfHY8uKDKs5URsVQOVRcUdlRsatiqBwWjy2Lx5YX/0cqZyrvqhgqo+JMZVTcUXnX4rFl8djy4i8qdqkcKr5ScVAZFVdUDipXVM4qvqJyVjFUzhaPLYvHlhd/UPm0iisqOyquqJyp3Kn4SsVh8djyP6PKCthpicnuAAAAAElFTkSuQmCC QRCode Online Resume
  • data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAklEQVR4AewaftIAAAOBSURBVO3BUW7kSBbAQFKo+1+ZOwL6AYaglstOe2Y/MkIgflDFUDlVDJVRMVTeVXGl8qRiqPyUg23JwbbkxQcV36Fyp+KkckflScUdlScVQ+VJxXeonA62JQfbkhd/ofKk4jMqTypWVPwklScVVwfbkoNtyYv/EyqniqFyp+KkMiqGyqj4TQfbkoNtyYt/QcUdlXdVDJV3qZwqfsPBtuTFX1SsqrhSuVNxUhkVQ+WqYqisqviqg23JwbbkxQcqP0nlVHGnYqicKobKqBgqTyqGyhOVFQfbkoNtyavit1SsqBgqVyp3VJ5U/JSDbcnBtkQgvqDiSmVUDJVTxVB5V8VQ+SkVd1SeVAyV08G25FUxVO5UDJVTxagYKu+qGCpXKncqnqhcVQyVJxXvOtiWHGxLBOKPis+onCqGym+ouKNyqhgqo+JKZVS8S+VOxelgW3KwLRGIPyqGyqj4DpUnFe9SGRVPVJ5UDJVR8S6V08G25GBbYv/gD5VRMVR+Q8VQOVUMlVFxpXKnYoXKnYqrg23Jiy+qeJfKVcVQeZfKqDhV3FEZFVcqo+KqYqgMlauDbcnBtuTFBxVDZVQ8UXlS8ZmKk8qoeKLyGZUnKlcV7zrYlhxsSwTij4o7KqPiicp3VFypjIp3qVxV3FG5qrijMipOB9uSg22JQHyiYqicKobKqBgqp4rPqJwqhsqdiiuVUTFUriruqFxVDJVRcTrYlrwqPqMyKk4qo+JOxZXKqBgVKyqeVNxRGRUnlaHy5GBbcrAteamMiqEyKobKqWKo/BSV36AyKu6onCqGyqi4OtiWHGxLXhV3KobKk4qhclVxR2VUfJXKnYqriqEyKlYcbEsOtiUvPlD5TMWVyp2Kk8qdindVvEvlSuWOyoqDbYn9g1+icqoYKqPiO1SeVAyVU8VnVL7qYFtysC15qfykilFxUvkOlVFxVTFUhsoTlVHxpGKojIrTwbbkYFvy4oOK71D5DpV3qYyKq4o7KlcV31FxdbAtOdiWvPgLlScV31ExVEbFV6ncqbhSeVfFULlTcTrYlrz4RSpfpTIqhspVxbsq7qhcqYyKOyqng23Jwbbkxb+g4k7FUDlVDJVRcaXymYp3VVypjIqrg23JwbbkxV9U/BdURsUdlVPFHZWhcqoYKk9URsVQGRWng23JwbbkxQcqv0FlVAyVUbFC5TsqVhxsS/4HEEgGvh2dqGoAAAAASUVORK5CYII= QRCode Online Portfolio
  • data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAAklEQVR4AewaftIAAALISURBVO3BQY7bShYAwcyC7n/lnL95AGFQFoWye7yoCIH4SyruqIyKJ1RGxTsqo2Ko/A2LY8vi2LI4trz4RcUOlTsqT6h8orKjYofKWBxbFseWF7+h8knFExVDZai8U/EtlW+oPFFxZ3FsWRxbXvwQlTsVVyp3VO5UXFX8pMWxZXFsefFDKu6oXFUMlVHxhMqo+NsWx5bFseXFb1T8KSqj4omKofJExTcqdiyOLYtjy+LY8uIXKv8KlVExVEbFlcqouKPypyyOLYtjy6viJ1Tcqdih8kTF37A4tiyOLQKxoeJKZUfFULlTMVSuKobKqBgqo+JKZVQMlVExFseWxbHlVfGOyp2KdyqGyicV71QMlTsVVyo7Kr6xOLYsji0CcVHxicqouFIZFXdURsWVyo6KobKjYqjcWRxbFseWxbFFIL5UMVSuKu6ofKtih8qoGCqj4lsqY3FsWRxb7D/8QSrfqLhSGRVD5YmKofKtiqHyyeLYsji2CMQbFUPliYqhMiruqFxVDJVR8YTKnYqhMiquVEbFUBkVY3FsWRxbBOKi4o7KqBgq71QMlVGxQ+UnVAyVO4tjy+LYIhAXFUPlk4onVJ6oGCqj4o7KExVD5Z2KT1TG4tiyOLYsji0vHqoYKu+o3KnYobJD5Vsqo2JUjMWxZXFssf/wA1SeqPiGyjsVn6i8U/HJ4tiyOLa8VP6Wik8qrlTuVAyVUXGlckdlVLxTMVQ+WRxbFseWF7+o2KFyp+JbFX9KxRMqo+KOylgcWxbHFoG4qBgqn1RcqYyKoTIqhsq/pGKojIo7i2PL4tiyOLa8+D9QeadiqIyKoTIqrlRGxVAZFUPlSuWOyp3FsWVxbHnxD6sYKk9U3Km4U3GlcqdiqIzFsWVxbHnxGxU/TWVUjIonVO5UDJUnKj5ZHFsWxxaB+EsqhsqoeEflk4odKn/K4tiyOLb8D+YTfJj0VcheAAAAAElFTkSuQmCC QRCode Technical blog
  • GitHub QRCode GitHub
  • Email QRCode Email
  • LinkedIn QRCode LinkedIn
  • Behance QRCode Behance
  • Threads QRCode Threads

Resume may evolve over time and adapt to different needs

Last updated: 2025-03-18