isarvin.com

English (United Kingdom) | 中文（简体，中国）

I came to know myself better when I started to build my personal site. So this is Arvin. 😉

Arvin is my English name. I am an incompetent developer finally building the personal site with Vue.js 3 and Tailwind CSS. The site is deployed on Vercel. It is designed with the following primary principles.

Click to expand/collapse

• Accessibility: reduced motion when required.
• Dark mode support.
• I18n (Internationalisation). Supported languages as follows:
  • English (United Kingdom)
  • English (United States) - default if no matches
  • 中文（简体，中国）
• Performance: debouncing, throttling, etc.
• Responsive design.
• Unified styles.

❗ ATTENTION

May I have your attention pls? 🔥

1. By 25 September 2022, everything looks good with Visual Studio Code (Version: 1.71.2) + Node.js 16.16.0 + Vite 3.1.3. Additionally, I would like to thankfully acknowledge Tailwind for its rich and extensible CSS framework and resources, which save much development time.

2. Due to the use of Tailwind CSS, the site could support the latest stable versions of most popular modern browsers.

   In general, Tailwind CSS v3.0 is designed for and tested on the latest stable versions of Chrome, Firefox, Edge, and Safari. It does not support any version of IE, including IE 11.

3. The primary dependencies of the project are listed in the following table. For more info, please refer to package.json.

   Name	Version
   @headlessui/vue	1.7.2
   @heroicons/vue	2.0.11
   @intlify/vite-plugin-vue-i18n	6.0.1
   autoprefixer	10.4.12
   postcss	8.4.16
   smoothscroll-polyfill	0.4.4
   tailwindcss	3.1.8
   vue	3.2.39
   vue-i18n	9.2.2
   vue-meta	3.0.0-alpha.10
   vue-router	4.1.5

4. Assuming the terminal is opened in the project's root directory, the project could be run locally following the steps below using npm.

   • Install all the required dependencies.

     npm ci

   • Serve/Build the project.

     • To serve it for development,

       npm run dev
       # OR
       npx vite --host

     • To build it for production,

       npm run build
       # OR
       npx vite build
       
       npm run preview
       # OR
       npx vite preview --host --port 5050

     • (Recommended) If you fancy using the Run and Debug view of Visual Studio Code, you could add the following to .vscode/launch.json to configure the serving and building process.

       {
         "configurations": [
           {
             "name": "Dev",
             "request": "launch",
             "runtimeArgs": ["run", "dev"],
             "runtimeExecutable": "npm",
             "skipFiles": ["<node_internals>/**"],
             "type": "node"
           },
           {
             "name": "Build",
             "request": "launch",
             "runtimeArgs": ["run", "build"],
             "runtimeExecutable": "npm",
             "skipFiles": ["<node_internals>/**"],
             "type": "node"
           },
           {
             "name": "Preview",
             "request": "launch",
             "runtimeArgs": ["run", "preview"],
             "runtimeExecutable": "npm",
             "skipFiles": ["<node_internals>/**"],
             "type": "node"
           }
         ]
       }

Good luck! 💖