Finished translated

src/App.vue

@@ -35,11 +35,11 @@
 * 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);
 }
@@ -52,7 +52,7 @@ html {
   margin:0;
 }
 
-/* 设置边框 */
+/* Set border */
 .styleEditor {
   padding: .5em;
   border: 1px solid;
@@ -61,13 +61,13 @@ html {
   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); }
 
-/* 加3D效果 */
+/* Add 3D effect */
 html{
   perspective: 1000px;
 }
@@ -79,7 +79,7 @@ html{
           transform: rotateY(10deg) translateZ(-100px);
 }
 
-/* 准备一个编辑器 */
+/* Prepare an editor */
 .resumeEditor{
   position: fixed; right: 0; top: 0;
   padding: .5em;  margin: .5em;
@@ -92,11 +92,11 @@ html{
   -webkit-transform: rotateY(-10deg) translateZ(-100px);
           transform: rotateY(-10deg) translateZ(-100px);
 }
-/* 开始写简历 */
+/* Start writing resume */
 `, `
-/*将Markdown格式翻译成HTML
- *再对HTML加点样式
-*/
+/* Convert Markdown to HTML
+ * then add some styles to HTML
+ */
 .resumeEditor{
   padding: 0.5em;
 }
@@ -129,8 +129,8 @@ html{
   padding: .5em;
   background: #ddd;
 }
-`, `/* 写封感谢信。
- * 感谢大家对我的关注。
+`, `/* Write a thank you note.
+ * Thanks for everyone's attention.
  */
 .styleEditor{
     width:49vw;
@@ -302,7 +302,7 @@ Get in touch to explore opportunities in:
             if (!style) {
               return
             }
-            // 计算前 n 个 style 的字符总数
+            // 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) {

src/Mobile.vue

@@ -28,16 +28,16 @@
 * 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;
@@ -46,11 +46,11 @@ html {
   margin: 2.3vh 2vw;
   height: 90vh;
 }
-/* 太矮了 */
+/* Too short */
 .styleEditor {
   height: 47vh;
 }
-/* 代码高亮 */
+/* Code highlighting */
 .token.selector{
   color: rgb(133,153,0);
 }
@@ -64,7 +64,7 @@ html {
   color: rgb(42,161,152);
 }
 
-/* 加3D效果 */
+/* Add 3D effect */
 html{
   perspective: 1000px;
 }
@@ -73,7 +73,7 @@ html{
   transform: rotateX(-10deg) translateZ(-50px) ;
 }
 
-/* 准备一个编辑器 */
+/* Prepare an editor */
 .resumeEditor{
   position: fixed;
   top: 48%; left: 0;
@@ -83,14 +83,14 @@ html{
   background: white; color: #222;
   overflow: auto;
 }
-/* 开始写简历 */
+/* Start writing resume */
 
 
 `,
           `
-/*将Markdown格式翻译成HTML
- *再对HTML加点样式
-*/
+/* Convert Markdown to HTML
+ * then add some styles to HTML
+ */
 .resumeEditor{
   padding: 1em;
 }
@@ -124,7 +124,7 @@ html{
   background: #ddd;
 }
 `, `
-/* 添加一些移动端优化的样式 */
+/* Add mobile-optimized styles */
 .resumeEditor {
   font-size: 14px;
   line-height: 1.4;
@@ -255,7 +255,7 @@ Get in touch to explore opportunities in:
           let showStyle = (async function () {
             let style = this.fullStyle[n]
             if (!style) { return }
-            // 计算前 n 个 style 的字符总数
+            // 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) {