This repository has been archived by the owner on Nov 8, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 27.3 KB
/
index.html
1
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="application-name" content="HsuTing"><meta name="description" content="Hsuting personal website"><meta name="subject" content="HsuTing"><meta name="url" content="https://hsuting.github.io/"><meta name="generator" content="program"><meta name="rating" content="General"><meta http-equiv="x-dns-prefetch-control" content="off"><meta http-equiv="Window-Target" content="_value"><meta name="robots" content="index,follow,noodp"><meta name="googlebot" content="index,follow"><meta property="fb:app_id" content="1687681968184120"><meta property="og:url" content="https://hsuting.github.io/"><meta property="og:type" content="website"><meta property="og:title" content="HsuTing"><meta property="og:image" content="https://hsuting.github.io/public/favicon/ms-icon-310x310.png"><meta property="og:description" content="Hsuting personal website"><meta property="og:site_name" content="HsuTing"><title>HsuTing</title><link rel="author" href="http://hsuting.com/author/"><link rel="license" href="http://hsuting.com/copyright/"><link rel="me" href="http://hsuting.com" type="text/html"><link rel="me" href="mailto:hsuting0106@gmail.com"><link rel="apple-touch-icon" sizes="57x57" href="https://hsuting.github.io/public/favicon/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="https://hsuting.github.io/public/favicon/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="https://hsuting.github.io/public/favicon/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="https://hsuting.github.io/public/favicon/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="https://hsuting.github.io/public/favicon/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="https://hsuting.github.io/public/favicon/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="https://hsuting.github.io/public/favicon/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="https://hsuting.github.io/public/favicon/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="https://hsuting.github.io/public/favicon/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="https://hsuting.github.io/public/favicon/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="https://hsuting.github.io/public/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="https://hsuting.github.io/public/favicon/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="https://hsuting.github.io/public/favicon/favicon-16x16.png"><link rel="manifest" href="https://hsuting.github.io/public/favicon/manifest.json"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="https://hsuting.github.io/public/favicon/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"></head><body><main id="root"><div data-radium="true"><style data-radium="true">body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{-webkit-text-decoration-skip:objects;background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}</style><style>*{overflow-scrolling:touch}</style><style>a{color:inherit;text-decoration:initial}</style><div style="width:100vw;height:100vh;overflow-x:hidden;overflow-y:scroll" data-radium="true"><div style="-ms-grid-template-columns:100%;-ms-grid-template-rows:-webkit-calc(100vh - 60px / 2 - 20px),-moz-calc(100vh - 60px / 2 - 20px),calc(100vh - 60px / 2 - 20px);display:grid;grid-template-columns:100%;grid-template-rows:-webkit-calc(100vh - 60px / 2 - 20px),-moz-calc(100vh - 60px / 2 - 20px),calc(100vh - 60px / 2 - 20px);width:100%;height:-webkit-calc(100vh - 60px / 2 - 20px),-moz-calc(100vh - 60px / 2 - 20px),calc(100vh - 60px / 2 - 20px);background:#000" data-radium="true"><div style="-webkit-filter:invert(100%);display:block;margin:auto;width:100%;max-width:150px;filter:invert(100%)" data-radium="true"><style></style></div><div style="position:relative;left:-webkit-calc(50% - 60px / 2),-moz-calc(50% - 60px / 2),calc(50% - 60px / 2);top:-webkit-calc(-60px / 2),-moz-calc(-60px / 2),calc(-60px / 2);width:60px;height:60px;background:#000;border-radius:50%" data-radium="true"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;color:#fff;position:relative;top:calc(50% - 12px);display:block;margin:auto;width:35px;height:35px;background:#000"><g><path d="m12.3 13l7.7 7.7 7.7-7.7 2.3 2.4-10 10-10-10z"></path></g></svg></div></div><div style="padding:-webkit-calc(60px / 2 + 50px) 100px 50px,-moz-calc(60px / 2 + 50px) 100px 50px,calc(60px / 2 + 50px) 100px 50px;background:#eee" class="rmq-c3421caa rmq-ed59d26" data-radium="true"><div style="margin:0 auto;font-size:14px;font-weight:regular;line-height:25px;color:#757575;width:100%;max-width:600px" data-radium="true">Hi, I am Hsu Ting. I am a website engineer. I have a lot of experience for making websites. I use "React" to build the front end of websites, use "koa" to build the back end of websites. I am also familiar with "AWS", "heroku" and so on. As a result, Deploying websites to servers is not difficult to me. Besides website design, I use "jest" to check the coverage of code and test whether all events are right or not. "eslint" is used for checking my code style does not have any unnecessary code. However, "CI" is not familiar with me. I use "travis" to run my public projects and "circleci" to run my private projects.</div><div style="margin:20px auto 0;font-size:14px;font-weight:regular;line-height:25px;color:#757575;width:100%;max-width:600px" data-radium="true">As a engineer, keeping learning is the most important thing. As a result, I always focus on the newest technological advancements. "react", "relay" and "graphl" are fields where I have focused much attention. Coding has became one of my life, but my life is not just coding. Pencil drawing, cooking, bartending and so on are also my interest.</div><style>@media (max-width:839px){.rmq-c3421caa{padding:-webkit-calc(60px / 2 + 50px) 60px 50px !important,-moz-calc(60px / 2 + 50px) 60px 50px !important,calc(60px / 2 + 50px) 60px 50px!important}}@media (max-width:479px){.rmq-ed59d26{padding:-webkit-calc(60px / 2 + 50px) 20px 50px !important,-moz-calc(60px / 2 + 50px) 20px 50px !important,calc(60px / 2 + 50px) 20px 50px!important}}</style></div><div style="padding:50px 100px;background:#f5f5f5" class="rmq-674da44d rmq-e43a21c1" data-radium="true"><div style="-ms-grid-template-columns:-webkit-calc(100% / 2) -webkit-calc(100% / 2),-moz-calc(100% / 2) -moz-calc(100% / 2),calc(100% / 2) calc(100% / 2);display:grid;grid-template-columns:-webkit-calc(100% / 2) -webkit-calc(100% / 2),-moz-calc(100% / 2) -moz-calc(100% / 2),calc(100% / 2) calc(100% / 2);margin:auto;width:100%;max-width:800px" class="rmq-80ddde0d" data-radium="true"><div data-radium="true"><div style="margin:0 0 25px;font-size:20px;font-weight:medium" data-radium="true">FRONT-END</div><div style="margin:0 auto;font-size:14px;font-weight:regular;line-height:25px;color:#757575" data-radium="true">In the front end, I use "react" to build the base of websites. "react-redux" is used to handle the data in the front end. Use "react-router-dom" to build declarative routing. The module I use to connect to servers is "relay". I use "relay" to get data and mutation data to servers. Besides those popular modules, I also write a module, "cat-components", to help me build websites quickly. "cat-components" is a module which use "radium" to handle style.</div><div style="margin:20px auto 0;font-size:14px;font-weight:regular;line-height:25px;color:#757575" data-radium="true">For me, I does not think the way I use to build websites is the best way to building websites. However, this way is perfect for me. I can use those modules to build any website I want quickly. I also do my best to learn other newest modules to help me improve the way I use to build websites.</div></div><div style="display:grid" class="rmq-3b8421a5" data-radium="true"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;display:block;margin:auto;width:200px;height:200px"><g><path d="m19.9 15h5.1l-4.1 3 1.5 4.8-4-3-4.2 3 1.6-4.8-4.2-3h5.1l1.7-5z m13.5-11.6c1.8 0 3.2 1.4 3.2 3.2v8.4h-3.2v-8.4h-30v20h21.6v3.4h-3.4v3.4h3.4v3.2h-13.4v-3.2h3.4v-3.4h-11.6c-1.9 0-3.4-1.6-3.4-3.4v-20c0-1.8 1.5-3.2 3.4-3.2h30z m5 30v-11.8h-8.4v11.8h8.4z m0-15c0.9 0 1.6 0.7 1.6 1.6v15c0 0.9-0.7 1.6-1.6 1.6h-8.4c-0.9 0-1.6-0.7-1.6-1.6v-15c0-0.9 0.7-1.6 1.6-1.6h8.4z"></path></g></svg></div><style>@media (max-width:839px){.rmq-3b8421a5{padding:30px 0 0!important}}@media (max-width:839px){.rmq-80ddde0d{-ms-grid-template-columns:100%!important;grid-template-columns:100%!important}}</style></div><style>@media (max-width:839px){.rmq-674da44d{padding:50px 60px!important}}@media (max-width:479px){.rmq-e43a21c1{padding:50px 20px!important}}</style></div><div style="padding:50px 100px" class="rmq-674da44d rmq-e43a21c1" data-radium="true"><div style="-ms-grid-template-columns:-webkit-calc(100% / 2) -webkit-calc(100% / 2),-moz-calc(100% / 2) -moz-calc(100% / 2),calc(100% / 2) calc(100% / 2);display:grid;grid-template-columns:-webkit-calc(100% / 2) -webkit-calc(100% / 2),-moz-calc(100% / 2) -moz-calc(100% / 2),calc(100% / 2) calc(100% / 2);margin:auto;width:100%;max-width:800px" class="rmq-80ddde0d" data-radium="true"><div style="display:grid" class="rmq-3b8421a5" data-radium="true"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;display:block;margin:auto;width:200px;height:200px"><g><path d="m6.6 18.4v3.2h3.4v-3.2h-3.4z m-3.2 5v-6.8h33.2v6.8h-33.2z m6.6-11.8v-3.2h-3.4v3.2h3.4z m-6.6-5h33.2v6.8h-33.2v-6.8z m3.2 21.8v3.2h3.4v-3.2h-3.4z m-3.2 5v-6.8h33.2v6.8h-33.2z"></path></g></svg></div><div data-radium="true"><div style="margin:0 0 25px;font-size:20px;font-weight:medium" data-radium="true">BACK-END</div><div style="margin:0 auto;font-size:14px;font-weight:regular;line-height:25px;color:#757575" data-radium="true">In the back end, I use "koa" to build my servers. I does not write "RESTful API", right now. I write "graphql" to replace "RESTful API". "graphql" is not very popular, now. However, I think it will be a best way to handle data. It is very difficult to learn "graphql" but easy to maintain it. That is why I choose "graphql" instead of "RESTful API".</div><div style="margin:20px auto 0;font-size:14px;font-weight:regular;line-height:25px;color:#757575" data-radium="true">To deploy my project, I use "docker" to help me deploy my project to servers. Writing a "Dockerfile" is easy to me and I write "bash script" to deploy more easily. When I need to delpy to servers, I will choose to use "heroku" or "AWS". "heroku" is very easy, but it does not have database for free. As a result, I use "firebase" to be my database when I use "heroku".</div><div style="margin:20px auto 0;font-size:14px;font-weight:regular;line-height:25px;color:#757575" data-radium="true">I spend more time on learning the front end then the front end of websites. However, I still do my best to make my servers more prefect. As a result, I still learn more newset technological advancements and improve my skills.</div></div><style>@media (max-width:839px){.rmq-3b8421a5{padding:30px 0 0!important}}@media (max-width:839px){.rmq-80ddde0d{-ms-grid-template-columns:100%!important;grid-template-columns:100%!important}}</style></div><style>@media (max-width:839px){.rmq-674da44d{padding:50px 60px!important}}@media (max-width:479px){.rmq-e43a21c1{padding:50px 20px!important}}</style></div><div style="color:#fff;background:#000;padding:50px 100px" class="rmq-674da44d rmq-e43a21c1" data-radium="true"><div style="margin:auto;padding:50px;width:-webkit-calc(100% - 50px * 2),-moz-calc(100% - 50px * 2),calc(100% - 50px * 2);max-width:600px;text-align:center;border:.5px solid #fff" class="rmq-9d02c9c3" data-radium="true"><div style="margin:0 0 25px;font-size:20px;font-weight:medium" data-radium="true">NEWEST PROJECT</div><div data-radium="true"></div><style>@media (max-width:479px){.rmq-9d02c9c3{border:0!important}}</style></div><style>@media (max-width:839px){.rmq-674da44d{padding:50px 60px!important}}@media (max-width:479px){.rmq-e43a21c1{padding:50px 20px!important}}</style></div><div style="padding:50px 100px;color:#424242;background:#eee" class="rmq-674da44d rmq-e43a21c1" data-radium="true"><div style="-ms-grid-template-columns:-webkit-calc((100% - 30px * 2)/ 3) -webkit-calc((100% - 30px * 2)/ 3) -webkit-calc((100% - 30px * 2)/ 3),-moz-calc((100% - 30px * 2)/ 3) -moz-calc((100% - 30px * 2)/ 3) -moz-calc((100% - 30px * 2)/ 3),calc((100% - 30px * 2)/ 3) calc((100% - 30px * 2)/ 3) calc((100% - 30px * 2)/ 3);-ms-grid-gap:30px;display:grid;grid-template-columns:-webkit-calc((100% - 30px * 2)/ 3) -webkit-calc((100% - 30px * 2)/ 3) -webkit-calc((100% - 30px * 2)/ 3),-moz-calc((100% - 30px * 2)/ 3) -moz-calc((100% - 30px * 2)/ 3) -moz-calc((100% - 30px * 2)/ 3),calc((100% - 30px * 2)/ 3) calc((100% - 30px * 2)/ 3) calc((100% - 30px * 2)/ 3);grid-gap:30px;margin:auto;width:100%;max-width:800px;text-align:center" class="rmq-8fe60e85" data-radium="true"><div data-radium="true"><div style="margin:0 0 20px;font-size:16px" data-radium="true">Una timer</div><div style="-webkit-filter:grayscale(100%);width:100%;height:0;filter:grayscale(100%)" data-radium="true"><style></style></div><div style="-webkit-animation:x 1s ease-in-out infinite;-webkit-animation-name:radium-animation-41d1bafb;width:26px;height:26px;animation:x 1s ease-in-out infinite;animation-name:radium-animation-41d1bafb;display:inline-block" data-radium="true"><svg style="width:26px;height:26px" data-radium="true"><g style="-webkit-transform:translate(13px,13px);-ms-transform:translate(13px,13px);transform:translate(13px,13px)" data-radium="true"><path d="M7.960204194457795e-16,-13L6.123233995736766e-16,-10Z" style="fill:#2196f3" data-radium="true"></path></g></svg><style>@undefined radium-animation-41d1bafb{-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}</style></div></div><div data-radium="true"><div style="margin:0 0 20px;font-size:16px" data-radium="true">dehua</div><div style="-webkit-filter:grayscale(100%);width:100%;height:0;filter:grayscale(100%)" data-radium="true"><style></style></div><div style="-webkit-animation:x 1s ease-in-out infinite;-webkit-animation-name:radium-animation-41d1bafb;width:26px;height:26px;animation:x 1s ease-in-out infinite;animation-name:radium-animation-41d1bafb;display:inline-block" data-radium="true"><svg style="width:26px;height:26px" data-radium="true"><g style="-webkit-transform:translate(13px,13px);-ms-transform:translate(13px,13px);transform:translate(13px,13px)" data-radium="true"><path d="M7.960204194457795e-16,-13L6.123233995736766e-16,-10Z" style="fill:#2196f3" data-radium="true"></path></g></svg><style>@undefined radium-animation-41d1bafb{-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}</style></div></div><div data-radium="true"><div style="margin:0 0 20px;font-size:16px" data-radium="true">exedesign</div><div style="-webkit-filter:grayscale(100%);width:100%;height:0;filter:grayscale(100%)" data-radium="true"><style></style></div><div style="-webkit-animation:x 1s ease-in-out infinite;-webkit-animation-name:radium-animation-41d1bafb;width:26px;height:26px;animation:x 1s ease-in-out infinite;animation-name:radium-animation-41d1bafb;display:inline-block" data-radium="true"><svg style="width:26px;height:26px" data-radium="true"><g style="-webkit-transform:translate(13px,13px);-ms-transform:translate(13px,13px);transform:translate(13px,13px)" data-radium="true"><path d="M7.960204194457795e-16,-13L6.123233995736766e-16,-10Z" style="fill:#2196f3" data-radium="true"></path></g></svg><style>@undefined radium-animation-41d1bafb{-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}</style></div></div><style>@media (max-width:479px){.rmq-8fe60e85{-ms-grid-template-columns:100%!important;grid-template-columns:100%!important}}</style></div><button style="cursor:pointer;display:block;margin:40px auto 0;background:#bdbdbd;border-radius:0;border:0;padding:10px 0;outline:0;font-weight:medium;width:100%;max-width:300px;color:#fff;font-size:14px" data-radium="true">MORE WORKS</button><style>@media (max-width:839px){.rmq-674da44d{padding:50px 60px!important}}@media (max-width:479px){.rmq-e43a21c1{padding:50px 20px!important}}</style></div><footer style="padding:20px 0;width:100%;background:#000;color:#fff;text-align:center" data-radium="true"><div data-radium="true"><a href="https://github.com/HsuTing"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;margin:0 5px 20px;width:35px;height:35px"><g><path d="m14.6 26.8q0.1-0.1-0.1-0.3-0.2-0.2-0.3 0-0.1 0.1 0.1 0.2 0.2 0.2 0.3 0.1z m-0.6-0.9q-0.2-0.2-0.3-0.1-0.1 0.1 0 0.3 0.1 0.1 0.3 0.1 0.1-0.1 0-0.3z m-1-0.9q0.1-0.1-0.1-0.2-0.1 0-0.1 0-0.1 0.2 0 0.2 0.2 0.1 0.2 0z m0.5 0.5q0.1 0 0-0.1t0-0.1q-0.2-0.2-0.3-0.1t0.1 0.3q0.1 0.1 0.2 0z m1.9 1.7q0.1-0.2-0.2-0.3-0.2 0-0.3 0.1 0 0.2 0.2 0.3 0.2 0 0.3-0.1z m1 0q0-0.1-0.3-0.1-0.2 0-0.2 0.1t0.2 0.2 0.3-0.2z m0.8-0.1q0-0.2-0.2-0.1t-0.2 0.2q0 0.1 0.2 0.1t0.2-0.2z m14.4-7.1q0-4.7-3.4-8.1t-8.1-3.3-8 3.3-3.4 8.1q0 3.7 2.2 6.7t5.6 4.1q0.4 0.1 0.6-0.1t0.2-0.4q0-1.2 0-2.1-0.1 0-0.4 0t-0.8 0.1-1-0.1-1-0.5-0.7-0.9q-0.5-1.3-1.2-1.6-0.1-0.1-0.1-0.1l-0.2-0.2-0.2-0.2 0.1-0.2 0.5-0.1q0.1 0 0.3 0.1t0.7 0.3 0.7 0.8q0.4 0.7 0.8 1t1 0.3 0.9-0.1 0.6-0.2q0.2-1.1 0.8-1.6-1.1-0.1-1.9-0.4t-1.7-0.8-1.2-1.7-0.5-2.7q0-1.8 1.2-3.1-0.5-1.3 0.1-3 0.5-0.1 1.3 0.2t1.3 0.6l0.6 0.4q1.3-0.4 2.8-0.4t2.9 0.4q0.3-0.2 0.6-0.4t1.3-0.6 1.3-0.2q0.6 1.7 0.1 3 1.1 1.3 1.1 3.1 0 1.3-0.3 2.2t-0.8 1.6-1.2 1-1.3 0.6-1.6 0.2q0.8 0.7 0.8 2.2 0 0.9 0 2t0 1.1q0 0.3 0.2 0.4t0.6 0.1q3.4-1.1 5.6-4.1t2.2-6.7z m5.7-10.7v21.4q0 2.7-1.9 4.6t-4.5 1.8h-21.5q-2.6 0-4.5-1.8t-1.9-4.6v-21.4q0-2.7 1.9-4.6t4.5-1.8h21.5q2.6 0 4.5 1.8t1.9 4.6z"></path></g></svg></a><a href="https://www.linkedin.com/in/ting-hsu-b3a640b1/"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;margin:0 5px 20px;width:35px;height:35px"><g><path d="m8.3 31.6h5.1v-15.5h-5.1v15.5z m5.5-20.3q0-1.2-0.8-1.9t-2.1-0.8-2.1 0.8-0.8 1.9q0 1.1 0.8 1.9t2 0.8h0.1q1.3 0 2.1-0.8t0.8-1.9z m13 20.3h5.2v-8.9q0-3.5-1.6-5.2t-4.3-1.8q-3.1 0-4.7 2.6h0v-2.2h-5.1q0 1.4 0 15.5h5.1v-8.7q0-0.8 0.2-1.2 0.3-0.8 1-1.4t1.7-0.5q2.5 0 2.5 3.5v8.3z m10.5-22.3v21.4q0 2.7-1.9 4.6t-4.5 1.8h-21.5q-2.6 0-4.5-1.8t-1.9-4.6v-21.4q0-2.7 1.9-4.6t4.5-1.8h21.5q2.6 0 4.5 1.8t1.9 4.6z"></path></g></svg></a><a href="https://www.facebook.com/hsuting0106"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;margin:0 5px 20px;width:35px;height:35px"><g><path d="m30.9 2.9q2.6 0 4.5 1.8t1.9 4.6v21.4q0 2.7-1.9 4.6t-4.5 1.8h-4.2v-13.2h4.4l0.7-5.2h-5.1v-3.3q0-1.3 0.5-1.9t2-0.6l2.8 0v-4.7q-1.5-0.2-4-0.2-3.1 0-4.9 1.8t-1.8 5.1v3.8h-4.5v5.2h4.5v13.2h-11.9q-2.6 0-4.5-1.8t-1.9-4.6v-21.4q0-2.7 1.9-4.6t4.5-1.8h21.5z"></path></g></svg></a><a href="mailto:hsuting0106@gmail.com"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;margin:0 5px 20px;width:35px;height:35px"><g><path d="m30.9 2.9q2.6 0 4.5 1.8t1.9 4.6v21.4q0 2.7-1.9 4.6t-4.5 1.8h-21.5q-2.6 0-4.5-1.8t-1.9-4.6v-21.4q0-2.7 1.9-4.6t4.5-1.8h21.5z m0.7 23.5v-9.7q-0.7 0.8-1.5 1.2-0.7 0.5-2.9 1.9t-3.4 2.2q-2.2 1.6-3.7 1.6-1.4 0-3.6-1.6-1-0.7-3.2-2t-3.2-2.1q-0.2-0.2-0.7-0.6t-0.7-0.6v9.7q0 0.9 0.6 1.5t1.6 0.7h18.5q0.9 0 1.5-0.7t0.7-1.5z m0-12.8q0-0.9-0.6-1.5t-1.6-0.7h-18.5q-0.9 0-1.6 0.7t-0.6 1.5q0 0.8 0.7 1.7t1.5 1.4q1.1 0.7 3.1 2t2.9 1.9l0.3 0.2 0.5 0.3 0.5 0.3 0.5 0.3 0.5 0.2 0.5 0.2 0.4 0 0.5 0 0.5-0.2 0.5-0.2 0.5-0.3 0.5-0.3 0.4-0.3 0.4-0.2 6-3.9q0.8-0.5 1.5-1.4t0.7-1.7z"></path></g></svg></a><a href="tel:+886937931289"><svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="1em" width="1em" viewBox="0 0 40 40" style="vertical-align:middle;margin:0 5px 20px;width:35px;height:35px"><g><path d="m31.6 26.6q0-0.2-0.1-0.3 0-0.2-0.8-0.7t-2-1.1l-1.2-0.6q-0.1-0.1-0.4-0.3t-0.6-0.4-0.4-0.1q-0.4 0-1.1 0.7t-1.3 1.5-0.9 0.7q-0.2 0-0.4 0t-0.4-0.2-0.3-0.2-0.4-0.2q-2.2-1.2-3.8-2.8t-2.8-3.8q0-0.1-0.2-0.3t-0.2-0.4-0.1-0.3-0.1-0.4q0-0.3 0.4-0.8t1.1-0.8 1-0.9 0.4-0.8q0-0.2-0.1-0.5t-0.3-0.5-0.3-0.5q-0.1-0.1-0.4-0.6t-0.5-1-0.6-1.1-0.6-0.9-0.3-0.4-0.4 0q-1.1 0-2.2 0.5-1.1 0.4-1.8 2.1t-0.8 2.9q0 0.3 0.1 0.7t0.1 0.7 0.2 0.8 0.2 0.6 0.3 0.8 0.2 0.6q1.4 3.7 4.9 7.2t7.1 4.8q0.2 0.1 0.7 0.3t0.7 0.2 0.7 0.3 0.7 0.2 0.7 0.1 0.8 0q1.2 0 2.9-0.7t2.1-1.8q0.5-1.2 0.5-2.3z m5.7-17.3v21.4q0 2.7-1.9 4.6t-4.5 1.8h-21.5q-2.6 0-4.5-1.8t-1.9-4.6v-21.4q0-2.7 1.9-4.6t4.5-1.8h21.5q2.6 0 4.5 1.8t1.9 4.6z"></path></g></svg></a></div><div style="display:inline-block;font-size:14px;font-weight:medium" data-radium="true"><div style="display:inline-block;padding:0 10px;cursor:pointer" data-radium="true">English</div><div style="display:inline-block;height:15px;border:.5px solid #fff;vertical-align:middle" data-radium="true"></div><div style="display:inline-block;padding:0 10px;cursor:pointer" data-radium="true">中文</div></div></footer></div></div></main></body><script>var data=null,lang="en-us",langData={about:['Hi, I am Hsu Ting. I am a website engineer. I have a lot of experience for making websites. I use "React" to build the front end of websites, use "koa" to build the back end of websites. I am also familiar with "AWS", "heroku" and so on. As a result, Deploying websites to servers is not difficult to me. Besides website design, I use "jest" to check the coverage of code and test whether all events are right or not. "eslint" is used for checking my code style does not have any unnecessary code. However, "CI" is not familiar with me. I use "travis" to run my public projects and "circleci" to run my private projects.','As a engineer, keeping learning is the most important thing. As a result, I always focus on the newest technological advancements. "react", "relay" and "graphl" are fields where I have focused much attention. Coding has became one of my life, but my life is not just coding. Pencil drawing, cooking, bartending and so on are also my interest.'],frontEnd:{title:"FRONT-END",content:['In the front end, I use "react" to build the base of websites. "react-redux" is used to handle the data in the front end. Use "react-router-dom" to build declarative routing. The module I use to connect to servers is "relay". I use "relay" to get data and mutation data to servers. Besides those popular modules, I also write a module, "cat-components", to help me build websites quickly. "cat-components" is a module which use "radium" to handle style.',"For me, I does not think the way I use to build websites is the best way to building websites. However, this way is perfect for me. I can use those modules to build any website I want quickly. I also do my best to learn other newest modules to help me improve the way I use to build websites."]},backEnd:{title:"BACK-END",content:['In the back end, I use "koa" to build my servers. I does not write "RESTful API", right now. I write "graphql" to replace "RESTful API". "graphql" is not very popular, now. However, I think it will be a best way to handle data. It is very difficult to learn "graphql" but easy to maintain it. That is why I choose "graphql" instead of "RESTful API".','To deploy my project, I use "docker" to help me deploy my project to servers. Writing a "Dockerfile" is easy to me and I write "bash script" to deploy more easily. When I need to delpy to servers, I will choose to use "heroku" or "AWS". "heroku" is very easy, but it does not have database for free. As a result, I use "firebase" to be my database when I use "heroku".',"I spend more time on learning the front end then the front end of websites. However, I still do my best to make my servers more prefect. As a result, I still learn more newset technological advancements and improve my skills."]},github:"NEWEST PROJECT",works:[{title:"Una timer",img:"una-timer.png",link:"https://hsuting.github.io/Una-timer/"},{title:"dehua",img:"dehua.png",link:"http://www.22227070.com.tw/"},{title:"exedesign",img:"exedesign.png",link:"http://antervic.com/"},{title:"xunmihoney",img:"xunmihoney.png",link:"http://xunmihoney.com/"}],workButton:"MORE WORKS"}</script><script defer="defer" src="/public/js/common.min.js" type="text/javascript"></script><script defer="defer" src="/public/js/index.min.js" type="text/javascript"></script><script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src="https://www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga"),ga("create","UA-54088195-4","auto"),ga("send","pageview")</script></html>