-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathresume.html
6 lines (6 loc) · 23.6 KB
/
resume.html
1
2
3
4
5
6
<!DOCTYPE html><html lang="en"> <head><!-- Global Metadata --><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" type="image/webp" href="https://www.gravatar.com/avatar/0ec1384d1af2578b03a7543060bf3956.webp"><meta name="generator" content="Astro v5.1.2"><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/assets/ClientRouter.astro_astro_type_script_index_0_lang.BScVxmeO.js"></script><!-- Canonical URL --><link rel="canonical" href="https://s890081tonyhsu.github.io/resume.html"><!-- Primary Meta Tags --><title>OtomeSound Personal Page</title><meta name="title" content="OtomeSound Personal Page"><meta name="description" content="Build a website based on user experience, which makes users satisfied."><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://s890081tonyhsu.github.io/resume.html"><meta property="og:title" content="OtomeSound Personal Page"><meta property="og:description" content="Build a website based on user experience, which makes users satisfied."><meta property="og:image" content="https://www.gravatar.com/avatar/0ec1384d1af2578b03a7543060bf3956.webp"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://s890081tonyhsu.github.io/resume.html"><meta property="twitter:title" content="OtomeSound Personal Page"><meta property="twitter:description" content="Build a website based on user experience, which makes users satisfied."><meta property="twitter:image" content="https://www.gravatar.com/avatar/0ec1384d1af2578b03a7543060bf3956.webp"><style>@keyframes about_breakAnim{0%{height:0;top:50%}to{height:50%;top:25%}}@keyframes about_slideIn_directionLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes about_slideIn_directionRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes resume_slideIn_directionLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes resume_img_scale{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes resume_slideIn_directionTop{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes collection_slideIn_directionTop{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes collection_draw_border{0%{border-radius:0}to{border-radius:0 20%}}.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}*{box-sizing:border-box}body{background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:1.25rem}.container{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center}.menu-btn{display:none;position:fixed;top:.5em;left:.5em;background-color:#000;padding:.25em;cursor:pointer;z-index:99}#nav{position:fixed;bottom:0;display:flex;justify-content:center;align-items:center;width:100%;height:100px;background:linear-gradient(to bottom,#0000,#000 50%);z-index:99;pointer-events:none}#nav h2{display:flex;justify-content:space-around;align-items:center;pointer-events:auto}#nav h2 span{font-size:.8em;margin:0 20px}#nav a{color:#fff;text-decoration:none;display:flex;position:relative}#nav a:after{content:"";position:absolute;bottom:0;left:50%;width:0%;height:3px;background-color:#fff;transition:all .25s ease-in-out}#nav a.active:after{left:0%;width:100%}@media (max-width: 959px){.menu-btn{display:block;text-align:left;font-size:2em}#nav{bottom:0;top:0;width:100%;height:0%;opacity:0;overflow-y:hidden;background:#000000a6;flex-direction:column;transition:opacity .5s ease-in-out;pointer-events:auto}#nav.show{height:100%;opacity:1}#nav h2{width:100%;height:auto;flex-direction:column}#nav h2 a{margin:.5em 0}#nav h2 span{display:none}}h1 span{font-size:.75em;color:#aaa}.blank{height:100px}
[data-astro-image]{width:100%;height:auto;object-fit:var(--fit);object-position:var(--pos);aspect-ratio:var(--w) / var(--h)}[data-astro-image=responsive]{max-width:calc(var(--w) * 1px);max-height:calc(var(--h) * 1px)}[data-astro-image=fixed]{width:calc(var(--w) * 1px);height:calc(var(--h) * 1px)}
.content-item .description{margin:0}.content-item .time{color:#aaa;font-size:1em;font-weight:600;display:inline-flex;align-items:center}.content-item .time svg{padding-right:.5em}.content-item .suffix svg{padding-right:.5em}li>span{color:#aaa}li>ul{color:#aaa;font-size:.95em}.content-item{width:250px;float:left}.content-item.wide{width:100%}.content-item h3{line-height:1.8em;color:#ddd;text-transform:capitalize}.content-item h3 span{color:#aaa;font-size:.8em}.content-item .stick{margin-top:-.75em}.content-item p,.content-item a,.content-item ul{color:#888}.resume-header{display:flex;justify-content:center;align-items:center}.resume-header img{width:150px;margin:75px;border-radius:100%;transition:all .25s cubic-bezier(1,.5,.8,1);animation:.5s 1 normal resume_img_scale;animation-delay:.5s;animation-fill-mode:backwards}.resume-header h1{width:500px;transition:all .25s cubic-bezier(1,.5,.8,1);animation:.5s 1 normal resume_slideIn_directionLeft;animation-fill-mode:backwards}.resume-header h1 span{font-size:.65em}.row{display:flex;justify-content:center;align-content:center;margin-bottom:30px;transition:all .25s cubic-bezier(1,.5,.8,1);animation:1s 1 normal resume_slideIn_directionTop;animation-delay:calc(var(--i) * .125 + .25s);animation-fill-mode:backwards}.row .title{width:300px;text-align:right;padding-right:30px}.row .content-text,.content-items{width:600px;padding:0 30px;line-height:1.5em;display:flex;flex-wrap:wrap}@media (max-width: 959px){.resume-header{flex-direction:column}.resume-header img{margin:0}.resume-header h1{text-align:center;width:100%}.resume-container{padding-top:100px;width:100%}.resume-content{width:100%}.row{flex-direction:column;width:100%;border-bottom:1px solid #aaa}.row .title{width:95%;text-align:left;padding-right:0}.row .content-text,.row .content-items{width:95%;padding:0;line-height:1.5em}}
</style></head> <body> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="GbfVw" prefix="v33" component-url="/assets/Menu.B5bUpJ1O.js" component-export="default" renderer-url="/assets/client.5Yge2-TN.js" props="{"path":[0,"/resume"]}" ssr client="load" opts="{"name":"Menu","value":true}" await-children><!--[--><div class="menu-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon"><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></div><div id="nav" class="hide"><h2><a class="" href="/">About me</a><span>|</span><a class="active" href="/resume">Resume</a><span>|</span><a class="" href="/collections">Collections</a></h2></div><!--]--><!--astro:end--></astro-island> <div class="container"> <div class="resume-container"> <div class="resume-header"> <img src="https://www.gravatar.com/avatar/0ec1384d1af2578b03a7543060bf3956.webp?s=200" alt="header" width="150" height="150" loading="lazy" decoding="async"> <h1>
Hsu, Meng-Chieh<br> <span>Frontend Developer</span> </h1> </div> <div class="resume-content"> <div class="row" style="--i: 1s"> <h2 class="title">About</h2> <p class="content-text">Build a website based on user experience, which makes users satisfied.</p> </div> <div class="row" style="--i: 2s"> <h2 class="title">Contact</h2> <div class="content-items"> <div class="content-item"><h3>email</h3><p class="stick"><a href="mailto:otomesound.retry@gmail.com">otomesound.retry
@gmail.com</a></p></div><div class="content-item"><h3>facebook</h3><p class="stick"><a href="https://fb.me/davistonyhsu">davistonyhsu</a></p></div><div class="content-item"><h3>LINE</h3><p class="stick">davistonyhsu</p></div><div class="content-item"><h3>telegram</h3><p class="stick">otomesound</p></div> </div> </div> <div class="row" style="--i: 3s"> <h2 class="title">Profile</h2> <div class="content-items"> <div class="content-item"><h3>website</h3><p class="stick"><a href="https://s890081tonyhsu.github.io">s890081tonyhsu.github.io</a></p></div><div class="content-item"><h3>linkedin</h3><p class="stick"><a href="https://www.linkedin.com/in/otomesound">Hsu, Meng Chien</a></p></div><div class="content-item"><h3>github</h3><p class="stick"><a href="https://github.com/s890081tonyhsu">s890081tonyhsu</a></p></div><div class="content-item"><h3>wiki</h3><p class="stick"><a href="http://nairosora.lionfree.net">NanaIro no Sora</a></p></div> </div> </div> <div class="row" style="--i: 4s"> <h2 class="title">Works</h2> <div class="content-items"> <div class="content-item wide"><h3>Rayark Inc. <span class="suffix">as Frontend Developer</span></h3><p class="description">Game Admin Development and Internal Frontend Project.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2023-05 - now</h4></div><div class="content-item wide"><h3>NCHU Office of International Affairs <span class="suffix">as Servitor</span></h3><p class="description">Technical Support and Website Management.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2013-09 - 2014-01</h4></div> </div> </div> <div class="row" style="--i: 5s"> <h2 class="title">Skills</h2> <div class="content-items"> <div class="content-item wide"><h3>Front End</h3><ul><!--[--><li>JavaScript/TypeScript <ul><!--[--><li>Framework(React)</li><!--]--></ul></li><li>CSS <ul><!--[--><li>Preprocessor(Sass)</li><li>Framework(MUI)</li><li>TailwindCSS</li><!--]--></ul></li><li>Packing Tool <ul><!--[--><li>Webpack</li><li>Vite</li><!--]--></ul></li><li>HTML <!----></li><!--]--></ul></div><div class="content-item wide"><h3>DevOps</h3><ul><!--[--><li>Virtual Machine <ul><!--[--><li>Docker</li><!--]--></ul></li><li>Version Control <span> : Git</span></li><li>Shell Scripts <ul><!--[--><li>Linux(bash, zsh)</li><li>Windows(cmd, powershell)</li><!--]--></ul></li><!--]--></ul></div><div class="content-item wide"><h3>Programming</h3><ul><!--[--><li>Console <span> : C/C++, Rust</span></li><!--]--></ul></div> </div> </div> <div class="row" style="--i: 6s"> <h2 class="title">Volunteers</h2> <div class="content-items"> <div class="content-item wide"><h3>花蓮環保回收聯盟宣傳App, TW <span class="suffix">as Game Developer</span></h3><p class="description">Creating stage, Game Testing and Promotional Video Editing</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2019-09 - 2019-12</h4></div><div class="content-item wide"><h3>Paper: Efficient Fault-Tolerant Routing in IoT Wireless Sensor Networks Based on Bipartite-Flow Graph Modeling <span class="suffix">as Research Helper</span></h3><p class="description">Write Experiment Code and Collect Experiment Result.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2018-03 - 2019-01</h4></div><div class="content-item wide"><h3>Ayana Discord BOT <span class="suffix">as Translator</span></h3><p class="description">Translate commands' description of the BOT.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2017-10 - now</h4></div><div class="content-item wide"><h3>Nekowiz, Fandom Wiki, TW <span class="suffix">as Wiki Manager</span></h3><p class="description">Update wiki data, Research and Manage wiki inner-tools, Developing third-party tools for wiki.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2016-01 - now</h4></div><div class="content-item wide"><h3>G0V Community, TW <span class="suffix">as Developer</span></h3><p class="description">Update UI for 2 projects (council-voter-guide, itaigi).</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2014-11 - 2016-12</h4></div><div class="content-item wide"><h3>NCHU IT Club, TW <span class="suffix">as Tutor and Helper</span></h3><p class="description">Helping courses (HTML, CSS).</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2013-09 - 2015-06</h4></div><div class="content-item wide"><h3>NCHU Student Council, TW <span class="suffix">as Developer</span></h3><p class="description">Help Developing Official Website and Design UI of Activity Website.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2012-09 - 2014-06</h4></div> </div> </div> <div class="row" style="--i: 7s"> <h2 class="title">Education</h2> <div class="content-items"> <div class="content-item wide"><h3>National Taiwan University of Science and Technology <span class="suffix">as Master Student</span></h3><p class="description">Study in Computer Science and Information Engineering, received Master Degree.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2019-09 - 2022-08</h4></div><div class="content-item wide"><h3>Fu Jen Catholic University <span class="suffix">as Bachelor Student</span></h3><p class="description">Study in Computer Science and Information Engineering, received Bachelor Degree.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2015-09 - 2019-08</h4></div><div class="content-item wide"><h3>National Chung Hsing University <span class="suffix">as Bachelor Student</span></h3><p class="description">Study in Electronic Engineering, quit at senior.</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2012-09 - 2015-01</h4></div><div class="content-item wide"><h3>Taipei Private Tsai Hsing School <span class="suffix">as Senior High School Student</span></h3><p class="description">Study in Mathematical Gifted Class</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2009-09 - 2012-08</h4></div><div class="content-item wide"><h3>Taipei Private Tsai Hsing School <span class="suffix">as Junior High School Student</span></h3><p class="description">Study in Normal Class</p><h4 class="time"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>2006-09 - 2009-08</h4></div> </div> </div> <div class="row" style="--i: 8s"> <h2 class="title">Past Skills</h2> <div class="content-items"> <div class="content-item wide"><h3>Front End</h3><ul><!--[--><li>JavaScript <ul><!--[--><li>Framework(React, Vue)</li><li>Library(jQuery, Lodash)</li><!--]--></ul></li><li>CSS <ul><!--[--><li>Framework(Purecss, Bootstrap, Semantic UI, Carbon, Fluent)</li><!--]--></ul></li><li>HTML <!----></li><!--]--></ul></div><div class="content-item wide"><h3>Back End</h3><ul><!--[--><li>NodeJS <span> : Express, Koa</span></li><li>PHP <span> : Laravel</span></li><li>Ruby <span> : Rails</span></li><li>DBMS <span> : MySQL, MongoDB</span></li><li>.Net <span> : ASP.NET</span></li><!--]--></ul></div><div class="content-item wide"><h3>DevOps</h3><ul><!--[--><li>Virtual Machine <ul><!--[--><li>Vagrant</li><li>VMWare</li><li>VirtualBox</li><!--]--></ul></li><li>Server Configuration <span> : Nginx, Apache</span></li><li>DBMS <span> : MySQL, MongoDB</span></li><li>Operating System <ul><!--[--><li>Windows Based(Windows, Windows Server)</li><li>Debian Based(Ubuntu, Debian)</li><li>Red Hat Based(CentOS, Fedora)</li><li>Archlinux</li><!--]--></ul></li><!--]--></ul></div><div class="content-item wide"><h3>Programming</h3><ul><!--[--><li>Console <span> : Python 3, Ruby, C#</span></li><li>Graphical UI <ul><!--[--><li>C#(WPF, Unity)</li><li>C++(Qt)</li><li>JavaScript(Electron)</li><!--]--></ul></li><li>Automated Test <span> : Selenium</span></li><li>Hardware <ul><!--[--><li>C(Andes, Arduino, Xilinx)</li><li>Verilog(Xilinx)</li><!--]--></ul></li><li>Math <span> : Matlab, Lingo</span></li><!--]--></ul></div> </div> </div> <div class="row" style="--i: 9s"> <h2 class="title">Languages</h2> <div class="content-items"> <div class="content-item"><h3>Traditional Chinese</h3><p class="stick">native</p></div><div class="content-item"><h3>English</h3><p class="stick">middle</p></div><div class="content-item"><h3>Japanese</h3><p class="stick">still learning</p></div><div class="content-item"><h3>Korean</h3><p class="stick">still learning</p></div> </div> </div> </div> <div class="blank"></div> </div> </div> </body></html>