add final README

Author: Xanonymous-GitHub

README.md

@@ -15,14 +15,31 @@ Works! is a Simple To-do list website.
 - Bootstrap 5.x
 - Firebase SDK 8.x
 
-### How to run this code
+### How to get source code and run it on own device
 
 1. Clone this repo from Github.
 2. Install node v14+ on your device.
-3. In the root of project, run `npm install`
+3. In the root of project folder, run `npm install`.
     - if you meet some error on this step, try to add `--legacy-peer-deps` after previous command and run again.
 
-4. run `npm run serve`, and you may see the website on http://localhost:8080 (port number may different).
+4. run `npm run serve`, and you may see the website serve on http://localhost:8080 (port number may different).
+
+### How to just download this website
+
+- [Click here for download.](https://github.com/Xanonymous-GitHub/me-xcc-tw/archive/gh-pages.zip)
+- After downloaded and unzipped, you need to use some server-like program to host all files and make `index.html` as the entrypoint.
+- [vscode live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) may be one of a nice choice for hosting.
+
+### Introduction
+Based on the original requirements, this webpage has added many features and details to make it more practical and gorgeous.
+
+First, I implemented the upload function of the thumbnails, and sent the thumbnails to imgur.com by calling the self-made backend api.
+
+Before uploading pictures, you can preview them in advance. When creating a job, the new picture links will be integrated into the data package.
+
+Furthermore, in order to improve the efficiency of web page loading, all the image formats on the homepage are webp and lazy-load.
+
+In addition, the work-view block on the homepage has the feature of real-time update, which can be synchronized to the latest information at any time.
 
 ### Author
 - Xanonymous™ TeU Lin 林天佑 108820003

src/components/Profile.vue

@@ -9,16 +9,17 @@
         <h5 class="card-title fw-bolder fs-3">About Me</h5>
         <hr/>
         <p class="card-text fw-bold mw-100 text-wrap">Xanonymous TeU Lin 林天佑 108820003</p>
-        <p class="card-text mw-100 text-wrap justify">
+        <p class="card-text mw-100 text-wrap text-start px-3">
           True mastery of any skill takes a lifetime, and if you are doing your best, you will not have to worry about
-          failure.
-          Jonah Creed is currently enrolled as a third-year student at Birmingham City University and he specializes in
-          Adult Nursing. Like many other adult students, he's required to arrange and meet specific criteria so he can
-          qualify to pursue his chosen healthcare career.
-          Structuring involves giving the right priorities to pathways that enable him to achieve the career path he has
-          chosen. For instance, Jonah has to reach an educational level of level 3 as a requirement and a level 2
-          minimum for Math and English proficiency. Jonah successfully finished his level 3 Business and Finance, but
-          the University didn't consider because he accomplished this eighteen years ago.
+          failure. <br/><br/>
+          Based on the original requirements, this webpage has added many features and details to make it more practical and gorgeous.<br/><br/>
+          First, I implemented the upload function of the thumbnails, and sent the thumbnails to imgur.com by calling the self-made backend api.<br/><br/>
+          Before uploading pictures, you can preview them in advance. When creating a job, the new picture links will be integrated into the data package.<br/><br/>
+          Furthermore, in order to improve the efficiency of web page loading, all the image formats on the homepage are webp and lazy-load.<br/><br/>
+          In addition, the work-view block on the homepage has the feature of real-time update, which can be synchronized to the latest information at any time.<br/><br/>
+          Although this is just homework at the end of the semester, I still try to do my best.<br/><br/>
+          Finally, if you haven't found it yet, this page uses the Vue framework, one of the three giants of front-end technology!<br/><br/>
+          If you want to know the source code of this page, please click the github link in the upper right corner.
         </p>
 
         <div class="contact d-flex flex-column flex-sm-row flex-wrap rounded-pill my-1 py-1">