<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="/img/favicon/favicon.ico">
    <link rel="icon" sizes="64x64" href="/img/favicon/favicon.ico">
    <link rel="icon" sizes="32x32" href="/img/favicon/favicon.ico">
    <link rel="icon" sizes="16x16" href="/img/favicon/favicon.ico">
    <link rel="icon" type="image/png" sizes="256x256" href="/img/favicon/256.png">
    <link rel="icon" type="image/png" sizes="196x196" href="/img/favicon/192.png">
    <link rel="icon" type="image/png" sizes="160x160" href="/img/favicon/160.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/96.png">
    <link rel="icon" type="image/png" sizes="64x64" href="/img/favicon/64.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/favicon/114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/favicon/72.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/favicon/144.png">
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/img/favicon/76.png">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/img/favicon/152.png">
    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/img/favicon/180.png">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--, maximum-scale=1.0, user-scalable=0-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="theme-color" content="#009900">
    <title>nxuweb.net - Personal website of NXU</title>
    <link href="/css/bootstrap.min.css?ver=4.1.1" type="text/css" rel="stylesheet">
    <link href="/css/devicon.min.css?ver=2.6" type="text/css" rel="stylesheet">
    <link href="/css/main.min.css?ver=1.3" type="text/css" rel="stylesheet">
    <!--<link href="/css/responsive.min.css?ver=0.1" type="text/css" rel="stylesheet">-->
    <script> <!-- type="text/javascript"-->
        var _paq = _paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
            var u="//analytics.nxu.biz/";
            _paq.push(['setTrackerUrl', u+'piwik.php']);
            _paq.push(['setSiteId', '5']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
        })();
    </script>
</head>
<body id="page-top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand js-scroll-trigger logo" href="/"><!--<img src="img/logo.png" alt="nxuweb.net LOGO" />--></a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger text-center mx-2" href="#about">About Me</a>
                </li>
                <!--<li class="nav-item">
                    <a class="nav-link js-scroll-trigger text-center mx-2" href="#projects"></a>
                </li>-->
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger text-center mx-2" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item text-center">
                                        <div href="?lang=en" title="ENGLISH" class="nav-link d-inline-block mr-1 ml-2 px-1 py-1 bg-primary text-white rounded">EN</div> | <a href="?lang=zh-hant" title="繁體中文" class="nav-link d-inline-block ml-1 mr-2 px-1 ">繁</a>
                    <!--<div class="dropdown">
                        <a class="nav-link btn p-1 pr-2 dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="">
                            <i class="icon ic-lang ic-small" title=""></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right text-center" aria-labelledby="dropdownMenuLink">
                            <a class="dropdown-item" href="?lang=en">ENGLISH</a>
                            <a class="dropdown-item" href="?lang=zh-hant">繁體中文</a>
                                                    </div>
                    </div>-->
                </li>
            </ul>
        </div>
    </div>
</nav><a id="top"></a>
<header class="masthead text-center text-white d-flex">
    <div class="container my-auto">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="headerMsg">
                    <span id="headerMsg"># I am a developer</span>
                </div>
                <hr>
            </div>
            <div class="col-lg-8 mx-auto">
                <p class="text-faded mb-5">Focus on Web Technologies, UX, UI, cross-platform application, multimedia, content creation...</p>
                <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find out more</a>
            </div>
        </div>
    </div>
</header><section class="bg-secondary" id="about">
    <div class="container">
        <div class="jumbotron py-4">
            <div class="row">
                <div class="col-12 col-lg-7">
                    <div class="row">
                        <div class="col-lg-3 text-center">
                            <img src="img/avatar.png" class="w-100" alt="avatar" />
                        </div>
                        <div class="col-lg-9">
                            <h2 class="h1">Jason Fok (NXU)<i class="icon ic-male" title="Male" data-toggle="tooltip"></i></h2>
                            <div class="icon-grp h4"><i class="icon ic-hk" title="Hong Kong" data-toggle="tooltip"></i>Hong Kong</div>


                        </div>
                    </div>
                    <hr class="my-4" />
                    <div class="px-3 h5"><p>Hi, I am Jason. I was graduated in computer science. I love Information Technology and interested in new technologies and gadgets since I was a child. I started programming when I am in primary school and always enojoy the time of developing software. As the admin of nxu.biz, I hope my projects can help the users to minimize the work difficulty in daily life.</p><p>In all my projects, I will focus on UX and UI to provide user-friendly experience for all users. Additional to enhance the usability, I am proficient in maintaining the balance between the use of new techs and compatibility such as creating cross-platform software to support various version of browsers and devices.</p></div>
                </div>
                <div class="col-12 col-lg-5">
                    <div class="h3">Contact</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item p-0"><div class="row no-gutters align-items-center m-0"><div class="col-2 text-center" title="Email" data-toggle="tooltip"><!--<i class="icon ic-email" title="" data-toggle="tooltip"></i>--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" class="d-flex align-items-center justify-content-center"><path d="M120 128H8c-4.4 0-8-5.2-8-11.6V11.6C0 5.2 3.6 0 8 0h112c4.4 0 8 5.2 8 11.6v104.7c0 6.5-3.6 11.7-8 11.7z" fill="#aaa"/><path d="M120 128H8c-4.5 0-8-5.1-8-11.6 0-1.9.6-3.6 1.6-4.7l60-58.2c.7-.8 1.5-1.1 2.4-1.1s1.7.4 2.4 1.1l60 58.2c1 1.1 1.6 2.8 1.6 4.7 0 6.5-3.5 11.6-8 11.6z" fill="#ccc"/><path d="M120 0H8C3.5 0 0 5.1 0 11.6c0 1.9.6 3.6 1.6 4.7l60 62.7c1.4 1.5 3.3 1.5 4.7 0l60-62.7c1-1.1 1.6-2.8 1.6-4.7C128 5.1 124.5 0 120 0z" fill="#ddd"/><path d="M78.5 92.8c-5.5 2.5-10.4 3.3-16.9 3.3-15.3 0-28.8-11-28.8-29.1 0-18.9 13.7-35.2 34.6-35.2 16.3 0 27.9 11.2 27.9 26.7 0 13.5-7.6 22-17.6 22-4.3 0-7.5-2.2-8-7.1h-.2c-2.9 4.7-7 7.1-11.9 7.1-6 0-10.4-4.4-10.4-12 0-11.3 8.3-21.5 21.6-21.5 4.1 0 8.7 1 11 2.3L77 66.4c-.9 5.5-.3 8 2.3 8 4 .1 9-5 9-15.6 0-12-7.8-21.4-22.1-21.4-14.1 0-26.5 11.1-26.5 28.8 0 15.4 9.9 24.2 23.7 24.2 4.7 0 9.7-1 13.4-3l1.7 5.4zm-8.2-38.1c-.7-.2-1.7-.4-2.9-.4-6.1 0-10.9 6-10.9 13.1 0 3.5 1.6 5.7 4.6 5.7 3.4 0 7-4.3 7.9-9.7l1.3-8.7z" fill="#06c"/></svg></div><div class="col-10 h4 px-3"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315f4944715f49441f53584b">[email&#160;protected]</a></div></div>
                        <li class="list-group-item p-0"><div class="row no-gutters align-items-center m-0"><div class="col-2 text-center" title="Google" data-toggle="tooltip"><!--<i class="devicon-google-plain colored" title="" data-toggle="tooltip"></i>--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" class="d-flex align-items-center justify-content-center"><path d="M44.59 4.21a63.28 63.28 0 004.33 120.9 67.6 67.6 0 0032.36.35 57.13 57.13 0 0025.9-13.46 57.44 57.44 0 0016-26.26 74.33 74.33 0 001.61-33.58H65.27v24.69h34.47a29.72 29.72 0 01-12.66 19.52 36.16 36.16 0 01-13.93 5.5 41.29 41.29 0 01-15.1 0A37.16 37.16 0 0144 95.74a39.3 39.3 0 01-14.5-19.42 38.31 38.31 0 010-24.63 39.25 39.25 0 019.18-14.91A37.17 37.17 0 0176.13 27a34.28 34.28 0 0113.64 8q5.83-5.8 11.64-11.63c2-2.09 4.18-4.08 6.15-6.22A61.22 61.22 0 0087.2 4.59a64 64 0 00-42.61-.38z" fill="#fff"/><path d="M44.59 4.21a64 64 0 0142.61.37 61.22 61.22 0 0120.35 12.62c-2 2.14-4.11 4.14-6.15 6.22Q95.58 29.23 89.77 35a34.28 34.28 0 00-13.64-8 37.17 37.17 0 00-37.46 9.74 39.25 39.25 0 00-9.18 14.91L8.76 35.6A63.53 63.53 0 0144.59 4.21z" fill="#e33629"/><path d="M3.26 51.5a62.93 62.93 0 015.5-15.9l20.73 16.09a38.31 38.31 0 000 24.63q-10.36 8-20.73 16.08a63.33 63.33 0 01-5.5-40.9z" fill="#f8bd00"/><path d="M65.27 52.15h59.52a74.33 74.33 0 01-1.61 33.58 57.44 57.44 0 01-16 26.26c-6.69-5.22-13.41-10.4-20.1-15.62a29.72 29.72 0 0012.66-19.54H65.27c-.01-8.22 0-16.45 0-24.68z" fill="#587dbd"/><path d="M8.75 92.4q10.37-8 20.73-16.08A39.3 39.3 0 0044 95.74a37.16 37.16 0 0014.08 6.08 41.29 41.29 0 0015.1 0 36.16 36.16 0 0013.93-5.5c6.69 5.22 13.41 10.4 20.1 15.62a57.13 57.13 0 01-25.9 13.47 67.6 67.6 0 01-32.36-.35 63 63 0 01-23-11.59A63.73 63.73 0 018.75 92.4z" fill="#319f43"/></svg></div><div class="col-10 h4 px-3"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f656e7c606169606461777a4f68626e6663216c6062">[email&#160;protected]</a></div></div>
                        <li class="list-group-item p-0"><div class="row no-gutters align-items-center m-0"><div class="col-2 text-center" title="Facebook" data-toggle="tooltip" style="background:#3d5a98"><!--<i class="icon ic-facebook" title="" data-toggle="tooltip"></i>--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" class="d-flex align-items-center justify-content-center"><rect width="128" height="128" rx="6.53" ry="6.53" fill="#3d5a98"/><path d="M86.48 123.17V77.34h15.38l2.3-17.86H86.48v-11.4c0-5.17 1.44-8.7 8.85-8.7h9.46v-16A126.56 126.56 0 0091 22.7c-13.62 0-23 8.3-23 23.61v13.17H52.62v17.86H68v45.83z" fill="#fff"/></svg></div><div class="col-10 h4 px-3"><a href="https://www.facebook.com/jasonfoknxu" target="_blank">Jasonfoknxu Fok</a></div></div>
                        <li class="list-group-item p-0"><div class="row no-gutters align-items-center m-0"><div class="col-2 text-center" title="Github" data-toggle="tooltip" style="background:#181616"><!--<i class="icon ic-github" title="" data-toggle="tooltip"></i>--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" class="d-flex align-items-center justify-content-center"><g fill="#fff"><path fill-rule="evenodd" clip-rule="evenodd" d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"/><path d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"/></g></svg></div><div class="col-10 h4 px-3"><a href="https://github.com/jasonfoknxu" target="_blank">jasonfoknxu</a></div></div>
                    </ul>
                    <!--<h3 class="h3"></h3>
                    <ul class="list-group list-group-flush">
                                            </ul>-->
                    <div class="h3 mt-3">Education</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item p-0"><div class="row no-gutters align-items-center m-0"><div class="col-2 text-center"><i class="icon ic-jc1"></i></div><div class="col-10 px-2"><div class="h5 mb-0">Computer Science <!--Student--></div><div class="text-muted">(Graduated from City University of Hong Kong)</div></div></div><li class="list-group-item p-0"><div class="row no-gutters align-items-center m-0"><div class="col-2 text-center"><i class="icon ic-jc2"></i></div><div class="col-10 px-2"><div class="h5 mb-0">Software Engineering <!--Student--></div><div class="text-muted">(Graduated from Hong Kong Institute of Vocational Education)</div></div></div>                    </ul>
                </div>

            </div>
        </div>
        <div class="row mx-0 py-4 skills">
            <!--jumbotron <h2 class="h2"></h2>-->
            <div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/php.png" alt="PHP" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">PHP</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/nodejs.png" alt="Node.js" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Node.js</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/javascript.png" alt="JavaScript" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">JavaScript</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/jquery.png" alt="jQuery" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">jQuery</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/html5.png" alt="HTML" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">HTML</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/css3.png" alt="CSS" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">CSS</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/sass.png" alt="SCSS/Sass" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">SCSS/Sass</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/bootstrap.png" alt="Bootstrap" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">Bootstrap</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/chartjs.png" alt="Chart.js" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Chart.js</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">AJAX</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/electron.png" alt="Electron" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Electron</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">WebSocket</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">JSP</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/wordpress.png" alt="WordPress" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">WordPress</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/mysql.png" alt="MySQL" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">MySQL</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/sqlite.png" alt="SQLite" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">SQLite</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">JSON</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">XML</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/android.png" alt="Android" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Android</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/unity.png" alt="Unity" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Unity</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/java.png" alt="Java" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Java</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/visualstudio.png" alt="Visual Basic" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">Visual Basic</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/csharp.png" alt="C#" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">C#</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">Batch Script</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">Shell Script</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">ActionScript</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Regex</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/apache.png" alt="Apache" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Apache</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/git.png" alt="Git" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Git</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/windows.png" alt="Windows" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Windows</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/linux.png" alt="Linux" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Linux</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/docker.png" alt="Docker" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Docker</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/premiere-pro.png" alt="Premiere Pro" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">Premiere Pro</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/davinci-resolve.png" alt="DaVinci Resolve" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h5" style="word-break:break-all">DaVinci Resolve</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/after-effects.png" alt="After Effects" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">After Effects</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/photoshop.png" alt="Photoshop" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">Photoshop</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/flash.png" alt="Flash" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Flash</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/audition.png" alt="Audition" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">Audition</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-3"><img src="img/icon/s/illustrator.png" alt="Illustrator" class="w-100" /></div><div class="col-9"><h3 class="d-inline-block align-middle ml-1 h4" style="word-break:break-all">Illustrator</h3></div></div></div></div></div><div class="col-6 col-md-4 col-xl-3 my-2"><div class="card"><div class="card-body py-2"><div class="row mx-0 no-gutters align-items-center"><div class="col-12"><h3 class="d-inline-block align-middle ml-1 h3" style="word-break:break-all">ASS</h3></div></div></div></div></div>        </div>

        <div class="bg-shape"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
</section>

<section id="portfolio" class="pt-5 pb-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Portfolio</h2>
                <hr class="my-4">
            </div>
        </div>
    </div>
    <div class="row mx-0 justify-content-center">
        <div class="col-lg-6 col-xl-4 my-3"><a href="https://xym.hk" target="_blank" class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">xym.hk URL Shortener system</h3><p class="card-text">The URL handling system of YUKARI FAN CLUB. Redirection will be conducted while the URL contains the specific keyword(s). In addition, redirect keywords and links can be added and managed in the backend of YUKARI FAN CLUB.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://xym.hk</span></span><span class="col-md-auto text-right"><span class="text-muted">(2021)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">Xiang AI TG chatbot</h3><p class="card-text">Same as Xiang AI chatbot, but changed the instant messaging software platform to Telegram.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="WebSocket">WebSocket</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2020)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://xiaoyuanmiao.com" target="_blank" class="card"><div class="card-header text-center py-1">Website</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/xiaoyuanmiao.com.png" alt="xiaoyuanmiao.com" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">xiaoyuanmiao.com</h3><p class="card-text">A introduction website of famous live streamer in China - Yukari. The content including profile of Yukari, information of original songs, milestone and events are organized and displayed on the website.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://xiaoyuanmiao.com</span></span><span class="col-md-auto text-right"><span class="text-muted">(2020 - 2021)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">YUKARI Live Notifier</h3><p class="card-text">A program to notify users when the live streaming of douyu is started. Phone call and SMS notification will be sent to users based on the settings of the YUKARI FAN CLUB website.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="WebSocket">WebSocket</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2020 - 2021)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/douyu-auth-system.png" alt="Douyu Auth System" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Douyu Auth System</h3><p class="card-text">A authentication system that linked to the douyu live streaming platform. The system will provide a code and users need to send out the code with danmu (barrage) on douyu. Then, the system will check the user's danmu (barrage) exactly match the code or not. If matched, it will pass the authentication. Regarding the usage, it is designed for the users login to the website of YUKARI FAN CLUB with douyu account.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="WebSocket">WebSocket</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2020)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">Xiang AI chatbot</h3><p class="card-text">A chatbot of YUKARI FAN CLUB on instant messaging software Tencent QQ. The chatbot is connected to the YUKARI API. Users can check the live streaming status, search songs, check songlists, get photos from YUKARI GALLERY, view news, get the information provided by YUKARI FAN CLUB etc. with the chatbot.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="WebSocket">WebSocket</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2020 - 2021)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/yukari-fan-club-backend.png" alt="YUKARI FAN CLUB backend" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">YUKARI FAN CLUB backend</h3><p class="card-text">The backend system of YUKARI FAN CLUB which combined data management and analysis. It displays the real-time status, like the danmu (barrage), gifts and viewers, of the douyu live streaming platform. The statistics will be analyzed automatically and can be viewed in the analysis page of the system. The data related to YUKARI FAN CLUB such as news, songlists, songs information, contents of the website can be managed in the system with CRUD style. There are also some functions for linked services like remote control the chatbot and manage the live notification of the Live Notifier.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="WebSocket">WebSocket</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Chart.js">Chart.js</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2019 - 2021)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/yukari-login.png" alt="YUKARI Login System" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">YUKARI Login System</h3><p class="card-text">The private login system designed for YUKARI FAN CLUB. Users are required to scan a QR code to get and store the Time-based One-time Password (TOTP) during registration. Then, users can login with username, password and the TOTP. The user account management is embedded in the backend system of YUKARI FAN CLUB.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2019 - 2021)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Others</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">Video timestamp to SRT</h3><p class="card-text">A Command-Line Interface (CLI) program to convert timestamp file to subtitle with SRT format. A tool to increase efficiency and productivity for video editing and adding subtitle.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="node.js">node.js</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2019 - 2020)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Game</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/yukari-top-2nd-anniversary-game.png" alt="YUKARI FAN CLUB 2nd anniversary game" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">YUKARI FAN CLUB 2nd anniversary game&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">An indie idle clicker mobile game to celebrate the 2nd anniversary of YUKARI FAN CLUB. A very simple game with just click and wait.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="Unity">Unity</span>&nbsp;<span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="C#">C#</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2019)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Others</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">Video Splitter</h3><p class="card-text">A Command-Line Interface (CLI) program to split video with start and end timestamp. Just input the video file name, start time and end time, the video will split into time range using FFmpeg.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2019 - 2020)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://www.douyu.com/5792753" target="_blank" class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/starlight-live-room_thumb.png" alt="Starlight Live Streaming System" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Starlight Live Streaming System</h3><p class="card-text">A system connected to YUKARI DATA SYSTEM to provide video player, radio, song requests and real-time control on live streaming China live streaming platform - douyu.com.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="WebSocket">WebSocket</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://www.douyu.com/5792753</span></span><span class="col-md-auto text-right"><span class="text-muted">(2018 - 2020)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/webpage-analysis-software.png" alt="Webpage Analysis Software" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Webpage Analysis Software&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">The Final Year Project in university. A software to analyze technologies, user experience (UX), usability, search engine optimization (SEO), performance and web standard of webpages. The software will identify the usage of technologies and check the code of the webpage. Performance and usability score will be calculated by Google and displayed after the analysis. Improvement and optimization recommendation will be provided in the analysis report.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="Electron">Electron</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Chart.js">Chart.js</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2018 - 2019)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://p.xym.hk/douyu-gift-monitor/" target="_blank" class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/douyu-gift-monitor_thumb.png" alt="Douyu Gift Monitor" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Douyu Gift Monitor&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A real-time gift monitor software of China live streaming platform - douyu.com for Windows and Mac.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://p.xym.hk/douyu-gift-monitor/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2018)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Web Application</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/yukari-dashboard_thumb.png" alt="YUKARI DASHBOARD" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">YUKARI DASHBOARD&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">The data analysis system of YUKARI FAN CLUB. Analyze the data related to YUKARI FAN CLUB especially the data such as danmu, gift and participant of douyu live streaming platform.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Chart.js">Chart.js</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2018 - 2019)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">Simple TOTP 2FA Login&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A simple login system secured with Two-factor Authentication. Time-based One-time Password (TOTP) is used for verification. The OTP will be generated after a smartphone or tablet computer scanned the QR code with application like Google Authenticator.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="SQLite">SQLite</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2018 - 2019)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://p.xym.hk/douyu-yuba-lucky-draw/" target="_blank" class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/douyu-yuba-lucky-draw_thumb.png" alt="Douyu Yuba Lucky Draw Tool" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Douyu Yuba Lucky Draw Tool&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A lucky draw tool of yuba (BBS of Douyu) of douyu.com for Windows, Mac and Linux.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="Electron">Electron</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://p.xym.hk/douyu-yuba-lucky-draw/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2018)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://p.xym.hk/douyu-danmu/" target="_blank" class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/douyu-danmu_thumb.png" alt="Douyu Danmu Viewer" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Douyu Danmu Viewer</h3><p class="card-text">A real-time danmu (barrage) viewer software of China live streaming platform - douyu.com for Windows, Mac and Linux. It may be the best douyu danmu (barrage) viewer with great UI and UX.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Node.js">Node.js</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="bottom" title="WebSocket">WebSocket</span>&nbsp;<span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="Electron">Electron</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://p.xym.hk/douyu-danmu/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2018 - 2019)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://pic.xiaoyuan.club" target="_blank" class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/yukari-gallery.jpg" alt="YUKARI GALLERY" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">YUKARI GALLERY</h3><p class="card-text">The gallery stores the photos, images and videos of the famous live streamer in China - Yukari. Images with different dimension will be generated and compressed automatically during the upload process. All the images are categorized with date, tags and albums.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://pic.xiaoyuan.club</span></span><span class="col-md-auto text-right"><span class="text-muted">(2017 - 2021)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/yukari-data_thumb.png" alt="YUKARI DATA SYSTEM" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">YUKARI DATA SYSTEM&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">The back-end system of YUKARI FAN CLUB. Data management and processing are conducted here with the connection of database.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2017 - 2020)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Others</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">YUKARI API</h3><p class="card-text">The API of YUKARI FAN CLUB, mainly used on the AJAX webpages and external services like Xiang AI chatbot.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2017 - 2021)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-12"><h3 class="card-title h4">Video+Audio Toolkit</h3><p class="card-text">A set of Command-Line Interface (CLI) tool to convert and extract video and audio with FFmpeg. Cureently support MP4, FLV, TS, MKV, MOV and AAC, M4A, WAV, MP3 format and codec.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-secondary" data-toggle="tooltip" data-placement="bottom" title="Windows Batch Scripting">Windows Batch Scripting</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2017 - 2020)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://yukari.top/" target="_blank" class="card"><div class="card-header text-center py-1">Website</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/yukari.top_thumb.png" alt="YUKARI FAN CLUB" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">YUKARI FAN CLUB</h3><p class="card-text">A fan club website designed for a famous live streamer in China - Yukari. The website is mainly provide lastest information related to her and interact with her fans to build up fans environment. The contents of each live streaming, news, song information and songlist etc. of the website will update every week. Fans can login to view their attendance record and credits. Standalone webpages will be created for events and special days.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Android">Android</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://yukari.top/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2017 - 2021)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/all-in-one_shop_management.png" alt="All-in-one Shop Management System" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">All-in-one Shop Management System&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A team product of Final Year Project. A shop management system combined point of sale (POS), product and inventory management, customer relationship management (CRM) and staff management. The system is focused on UI, UX and compatibility. Mobile application, API, front-end shop webpage are included with the system. In addition, the system allowed to remote manage the content to display, such as new product advertisement and promotions, into connected devices.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Android">Android</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2016 - 2017)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/uuc/" target="_blank" class="card"><div class="card-header text-center py-1">Web Application</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/uuc_thumb.png" alt="Ultimate Unit Converter" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Ultimate Unit Converter&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A high efficient unit converter which supported the most common units. Support length, weight, temperature, time, frequency, pressure, electric current.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/uuc/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2016)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/sie/" target="_blank" class="card"><div class="card-header text-center py-1">Web Application</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/sie_thumb.png" alt="Smart Intelligence Engine" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Smart Intelligence Engine&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">An intelligent problem-solving tool to increase daily work efficiency. It helps for calculation, conversion and getting the most updated information.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/sie/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2015 - 2016)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Game</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/super-people_thumb.png" alt="SUPER PEOPLE" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">SUPER PEOPLE&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">SUPER PEOPLE is a platform game of a team project at school. It is similar to the famous game "Super Mario". Players need to control the character to finish the adventure. There are 5 levels and 10 stages in the game. Every stages will have different types of enemies and traps.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="C#">C#</span>&nbsp;<span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="C++">C++</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2015)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/scc/" target="_blank" class="card"><div class="card-header text-center py-1">Web Application</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/scc_thumb.png" alt="Super Chinese Converter" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Super Chinese Converter</h3><p class="card-text">The next generation of Chinese conversion solution to convert Traditional Chinese and Simplified Chinese. Support special phrases and words of 4 regions (China, Taiwan, Hong Kong, Singapore).</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/scc/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2015 - 2020)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="http://shop.nxuweb.net/" target="_blank" class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxushop_thumb.png" alt="NXU Shop" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NXU Shop&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A personal file-based shop system. No database is required and clean design with AJAX, CSS animation and responsive web design.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">http://shop.nxuweb.net/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2015 - 2016)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.pw/" target="_blank" class="card"><div class="card-header text-center py-1">Website</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxu.pw_thumb.png" alt="nxu.pw" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">nxu.pw</h3><p class="card-text">A website to show and introduce the productions and projects of nxu.biz</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.pw/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2015 - 2020)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/search/" target="_blank" class="card"><div class="card-header text-center py-1">Web Application</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/search_thumb.png" alt="Search" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Search&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A simple searching tool with multiple search engine support.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/search/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2015)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/Reminder/" target="_blank" class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/reminder_thumb.png" alt="Reminder" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Reminder&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A simple and clear software for reminder. A notify window will pop up at specific time of the setting.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="Visual Basic">VB</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/Reminder/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2015)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/arc/" target="_blank" class="card"><div class="card-header text-center py-1">Web Application</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/arc_thumb.png" alt="AR Calculator" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">AR Calculator&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A simple aspect ratio, image ratio calculator.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/arc/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2014 - 2015)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/bxbc/" target="_blank" class="card"><div class="card-header text-center py-1">Web Application</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/bxbc_thumb.png" alt="Bit X Byte Converter" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Bit X Byte Converter&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A powerful converter for converting bit and Byte. It may be the most accurate bit and byte converter opened for public on the Internet. Useful for calculating file size and storage capacity.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Asynchronous JavaScript and XML">AJAX</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Android">Android</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/bxbc/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2014 - 2015)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/" target="_blank" class="card"><div class="card-header text-center py-1">Website</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxu.biz_thumb.png" alt="nxu.biz" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">nxu.biz</h3><p class="card-text">nxu.biz provide high quality software solution with great user experience to maximize the efficiency of users. </p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="jQuery">jQuery</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2014 - 2020)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Others</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/agkp_thumb.png" alt="AGKP" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">AGKP&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">Android Green Keyboard Project aims to make the UI and theme of IME (Input Method Editor) in green color for Android. The keyboard of Google, Samsung, Sony have already been themed.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Android">Android</span>&nbsp;</span><span class="col-md-auto text-right"></span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2014)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="http://tech.nxuweb.net/" target="_blank" class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxutech_thumb.png" alt="NXUTech." class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NXUTech.&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A personal blog of discussing technologies in Chinese. Mainly posting some reviews, testing, unboxing and analysis of IT gadgets. The back-end management system is remade, optimized and enhanced from NXUNews. Modern-styled UI and responsive web design is used in the front-end.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">http://tech.nxuweb.net/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2013 - 2016)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/php-no-db-login_thumb.png" alt="NoDataBase Login System" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NoDataBase Login System&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A SQL-free login system with simple configuration and user management. Only one line code is required to embed into a web page.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2013)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Others</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/greenwiz_thumb.png" alt="GreenWiz" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">GreenWiz&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A green color theme of the Samsung TouchWiz UI. Recolor and redesign the user interface for Samsung Android devices.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="Android">Android</span>&nbsp;</span><span class="col-md-auto text-right"></span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2013)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxunews_live_thumb.png" alt="NXUNews Live Broadcast System" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NXUNews Live Broadcast System&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">The system designed for broadcasting live event of NXUNews. It allows admin to add and edit new messages in the real time. Message supports plain text, BBCode, HTML tags and images.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2012 - 2013)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Game</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/computer_quiz_thumb.png" alt="Computer Quiz" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Computer Quiz&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A simple multiple choice quiz created with flash. Questions and answers are stored in a text file which support HTML and image. It is first designed with computer question for a school event, but it is suitable for any quiz.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Flash">Flash</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2012)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxu.biz/bye/" target="_blank" class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/bye_thumb.png" alt="bye HACKing Project" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">bye HACKing Project&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">bye HACKing Project is a joke program. It can display a realistic fake BSOD (bluescreen) with locking the mouse and keyboard, create alert bombs with customizable title, content and interval and generate a fake virus file.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="Visual Basic">VB</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Simplified Chinese">SC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxu.biz/bye/</span></span><span class="col-md-auto text-right"><span class="text-muted">(2011 - 2014)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Game</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxutdx_thumb.png" alt="Tower Defense X" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Tower Defense X&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A indie tower defense game for fun. Unique design with creative sound effects. Support 1440p resolution.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Flash">Flash</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2011 - 2014)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="http://news.nxuweb.net" target="_blank" class="card"><div class="card-header text-center py-1">System</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxunews_thumb.png" alt="NXUNews" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NXUNews&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A blog style website for technology news and reviews. A tailor made back-end management system is built for managing the posts. Afterwards, it was replaced by NXUTech.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-primary" data-toggle="tooltip" data-placement="bottom" title="Hypertext Preprocessor">PHP</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;<span class="badge badge-danger" data-toggle="tooltip" data-placement="bottom" title="MySQL">MySQL</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">http://news.nxuweb.net</span></span><span class="col-md-auto text-right"><span class="text-muted">(2011 - 2013)</span></span></span></div></a></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Game</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/android-yourself_thumb.png" alt="Android Yourself" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">Android Yourself&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A mini flash game allow players to create their own Android character. Player can select different clothes, hats and accessories for their Android avatar.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Flash">Flash</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2011)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Game</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxunewtd_thumb.png" alt="NXU New TD" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NXU New TD&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">The new flash tower defense game based on the old one. Optimized the game process and added more features.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Flash">Flash</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2011)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/hi-_-_thumb.png" alt="hi-_-" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">hi-_-&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">A prank program which display fake virus message. It was replaced by byeX_X.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="Visual Basic">VB6</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2010 - 2011)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">PC Software</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/rgb-color-mixer_thumb.png" alt="RGB color mixer" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">RGB color mixer&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">The first program I created based on the lesson in secondary school. A very simple Red-Green-Blue color combine software.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-extra2" data-toggle="tooltip" data-placement="bottom" title="Visual Basic">VB6</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2010)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><div class="card"><div class="card-header text-center py-1">Game</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxutd_thumb.png" alt="NXU TD" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NXU TD&nbsp;<span class="badge badge-dark" data-toggle="tooltip" data-placement="top" title="No longer update or support">Discontinued</span></h3><p class="card-text">The first flash game I created with ActionScript. A tower defense game with simple design.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Flash">Flash</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted"></span></span><span class="col-md-auto text-right"><span class="text-muted">(2009 - 2011)</span></span></span></div></div></div><div class="col-lg-6 col-xl-4 my-3"><a href="https://nxuweb.net" target="_blank" class="card"><div class="card-header text-center py-1">Website</div><div class="card-body pb-0"><div class="row"><div class="col-4"><img src="/img/portfolio/nxuweb_thumb.png" alt="NXUweb" class="w-100" /></div><div class="col-8"><h3 class="card-title h4">NXUweb</h3><p class="card-text">My personal website. Provided forum, flash animations, downloadable contents and browser information checking in the past. Now, it used to display my projects.</p></div></div></div><div class="card-bottom p-3"><span class="row"><span class="col"><span class="badge badge-info" data-toggle="tooltip" data-placement="bottom" title="Hypertext Markup Language">HTML</span>&nbsp;<span class="badge badge-extra" data-toggle="tooltip" data-placement="bottom" title="Cascading Style Sheets">CSS</span>&nbsp;<span class="badge badge-success" data-toggle="tooltip" data-placement="bottom" title="JavaScript">JS</span>&nbsp;</span><span class="col-md-auto text-right"><span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="English">EN</span>&nbsp;<span class="badge text-primary border border-primary" data-toggle="tooltip" data-placement="bottom" title="Traditional Chinese">TC</span>&nbsp;</span></span></div><div class="card-footer"><span class="row"><span class="col"><span class="text-muted">https://nxuweb.net</span></span><span class="col-md-auto text-right"><span class="text-muted">(2009 - 2021)</span></span></span></div></a></div>    </div>
</section><div id="footer" class="bg-dark text-white py-4">
    <div class="container">
        <div class="row">
            <div class="col-6">&copy; nxuweb.net</div>
            <div class="col-6 text-right"><a id="totop" href="#top" class="btn btn-secondary btn-lg rounded-circle" title="">&#9650;</a></div>
        </div>
    </div>
</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    var typingText = ['# Hello, I am Jason','# I love IT','# I am a developer']</script>
<script src="/js/jquery.min.js?ver=3.1.1"></script>
<script src="/js/bootstrap.bundle.min.js?ver=4.1.1"></script>
<script src="/js/typing.min.js?ver=1.0.0"></script>
<script src="/js/jquery.easing.min.js?ver=1.4.1"></script>
<script src="/js/scrollreveal.min.js?ver=3.4.0"></script>
<script src="/js/totop.min.js?ver=1.0.0"></script>
<script src="/js/main.min.js?ver=1.0.0"></script>

</body>
</html>