-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 38.7 KB
/
index.html
1
<!DOCTYPE html><html lang="en" class="flex min-h-full bg-slate-800"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="I develop open source libraries, software, and extensions."> <title>katsute.dev - Home</title> <link rel="canonical" href="https://katsute.dev//"> <meta property="og:locale" content="en_US"> <meta property="og:type" content="website"> <meta name="og:title" content="Home"> <meta name="og:description" content="I develop open source libraries, software, and extensions."> <meta name="og:site_name" content="Katsute"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "url": "https://katsute.dev", "logo": "https://katsute.dev/favicon.png", "name": "Home", "description": "I develop open source libraries, software, and extensions." } </script> <link rel="icon" type="image/svg+xml" href="/favicon.ico"> <link rel="alternate icon" type="image/png" href="/favicon.png"> <link rel="stylesheet" href="/dependencies/node/fontawesome/css/all.min.css"> <script defer src="/dependencies/node/fontawesome/js/all.min.js"></script> <link rel="stylesheet" href="/dependencies/node/highlight.js/css/github-dark.css"> <link rel="stylesheet" href="/dependencies/katsute/css/style.css"> </head> <body class="flex flex-col min-h-full w-full overflow-auto"> <div class="container mx-auto max-w-screen-xl flex flex-col md:flex-row h-full"> <div class="relative bg-slate-900 md:before:absolute md:before:bg-slate-900 md:before:w-screen md:before:h-full md:before:left-[-99vw] md:before:-z-10 [&>*]:p-4"> <nav class="min-w-[250px] sticky top-0 space-y-2"> <div class="flex justify-center"> <a class="p-1.5 rounded-md hover:bg-slate-800 ease-in-out duration-300" href="/"> <img src="/favicon.png" alt="logo" class="w-[70px] md:w-[150px] aspect-square rounded-md select-none"> </a> </div> <div> <a href="/"> <h1 class="text-white text-center text-2xl md:text-lg font-semibold">Keith Chiu</h1> </a> </div> <ul class="space-y-2 text-slate-300"> <li> <a href="/"> <div class="p-2 hover:bg-slate-800 ease-in-out duration-300 rounded-md "> <p> <i class="fa-solid fa-house fa-fw mr-1"></i> Home </p> </div> </a> </li> <li> <a href="/products"> <div class="p-2 hover:bg-slate-800 ease-in-out duration-300 rounded-md "> <p> <i class="fa-solid fa-code fa-fw mr-1"></i> Products </p> </div> </a> </li> <li> <a href="/projects"> <div class="p-2 hover:bg-slate-800 ease-in-out duration-300 rounded-md "> <p> <i class="fa-solid fa-box-archive fa-fw mr-1"></i> Projects </p> </div> </a> </li> <li> <a href="/courses"> <div class="p-2 hover:bg-slate-800 ease-in-out duration-300 rounded-md "> <p> <i class="fa-solid fa-graduation-cap fa-fw mr-1"></i> Courses </p> </div> </a> </li> </ul> </nav> </div> <div class="flex flex-col grow [&>*]:px-4 py-4 space-y-4"> <div class="flex justify-end"> <ul class="text-white"> <li class="inline-block ml-2"> <a href="https://github.com/Katsute" rel="noopener noreferrer"> <div class="p-2 rounded-md hover:bg-slate-900 ease-in-out duration-300"> <i class="fa-brands fa-github fa-fw fa-lg"></i> </div> </a> </li> <li class="inline-block ml-2"> <a href="https://www.linkedin.com/in/keith-chiu" rel="noopener noreferrer"> <div class="p-2 rounded-md hover:bg-slate-900 ease-in-out duration-300"> <i class="fa-brands fa-linkedin fa-fw fa-lg"></i> </div> </a> </li> </ul> </div> <main class="grow"><div class="flex flex-row space-x-4"> <div class="space-y-10 w-full [&_h1]:text-white [&_h1:not(.text-3xl)]:text-xl [&_h1]:font-semibold [&_h1]:mb-4"> <section> <a href="https://github.com/Katsute" rel="noopener noreferrer"> <div class="rounded-md p-2 hover:bg-slate-900 ease-in-out duration-300 [text-shadow:0_0_0.5rem_black] [&_svg]:[filter:drop-shadow(0_0_0.5rem_black)]"> <div class="rounded-md p-4 md:p-8 flex flex-col w-full text-white space-y-6 from-sky-400 to-blue-400 bg-gradient-to-br"> <div> <h1 class="text-3xl">Hi, I'm Keith</h1> <p class="text-lg">I develop open source libraries, software, and extensions.</p> </div> <div class="flex justify-end"> <div class="rounded-md font-medium bg-[#181717]"> <div class="px-4 py-2 flex items-center"> <span class="flex justify-center items-center w-6 h-6 py-1"> <i class="fa-brands fa-github fa-lg"></i> </span> <p class="ml-2">View on GitHub</p> </div> </div> </div> </div> </div> </a> </section> <section> <h1>Technologies</h1> <ul class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2"> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Java </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/../../../katsute/assets/java.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Java</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/apachemaven.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Apache Maven</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/intellijidea.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">IntelliJ IDEA</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Web </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/html5.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">HTML5</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/css3.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">CSS3</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/bootstrap.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Bootstrap</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/sass.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Sass & SCSS</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/tailwindcss.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Tailwind CSS</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> JavaScript </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/javascript.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">JavaScript</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/typescript.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">TypeScript</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/nodedotjs.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Node.js</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/electron.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Electron</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/visualstudiocode.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Visual Studio Code</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> GitHub </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/git.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Git</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/github.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">GitHub</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/githubactions.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Actions & Workflows</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/githubpages.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">GitHub Pages</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Python </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/python.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Python</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/pycharm.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">PyCharm</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> C++ </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/cplusplus.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">C++</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/clion.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">CLion</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Google </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/googledocs.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Google Docs</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/googlesheets.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Google Sheets</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/googleslides.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Google Slides</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Microsoft </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/windows.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Windows</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftword.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft Word</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftexcel.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft Excel</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftpowerpoint.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft PowerPoint</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftonedrive.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft OneDrive</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftteams.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft Teams</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftoutlook.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft Outlook</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftsharepoint.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft SharePoint</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/powerbi.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Power BI</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Azure </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftazure.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft Azure</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/azurefunctions.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Azure Functions</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/azuredevops.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Azure DevOps</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Databases </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/../../../katsute/assets/sql.png" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">SQL</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/microsoftaccess.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Microsoft Access</h3> </li> </ul> </li> <li class="rounded-md bg-slate-900 p-4"> <h2 class="text-white font-semibold mb-2"> Services </h2> <ul class="space-y-2"> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/salesforce.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Salesforce</h3> </li> </ul> </li> </ul> </section> <section> <h1>Experience</h1> <ul class="relative border-l-2 border-slate-900 ml-2 pl-6 py-6 space-y-10"> <li class="space-y-2"> <span class="absolute -left-3 w-6 h-6 rounded-full ring-8 ring-slate-800 bg-green-400 flex justify-center items-center"> <i class="fa-solid fa-briefcase fa-fw fa-xs text-white p-2"></i> </span> <div class="mb-2 space-y-2"> <h2 class="font-semibold text-lg text-white">Software Developer, Business Analyst, End User Experience Agent</h2> <h3 class="font-normal text-lg text-white"> <a href="https://greenkeyllc.com/" class="border-b-[1px] border-b-transparent hover:border-b-white ease-in-out duration-300">Green Key Resources</a> <small class="ml-1 font-normal text-base text-slate-300">New York City, NY</small> </h3> <p class="text-slate-300">March 2023 - Present</p> </div> <div class="rounded-md bg-slate-900 [&>*]:px-4 py-4 space-y-2 divide-y divide-slate-700"> <div class="markdown"> <p>Various responsibilities over Green Key Resources' technical departments.</p> <h4 id="end-user-experience">End User Experience</h4> <ul> <li>Help Desk/IT Support Agent for Microsoft, Windows, Salesforce, and <a href="https://greenkeyllc.com/">Green Key Resources</a> proprietary services using <a href="https://www.freshworks.com/freshdesk/">Freshdesk</a>.</li> <li>Documentation and user acceptance testing for Salesforce.</li> <li>ETL on routine and one-time Salesforce operations.</li> </ul> <h4 id="business-and-data-analytics">Business and Data Analytics</h4> <ul> <li>ETL on Microsoft and Salesforce data using Azure, SOQL, SQL, NodeJS, and TypeScript.</li> <li>ETL on Excel data using SOQL, SQL, NodeJs, JavaScript, and TypeScript.</li> <li>Development of Salesforce and Power BI reports.</li> </ul> <h4 id="software-development">Software Development</h4> <ul> <li>Production and maintenance of GKR services using Azure, Microsoft, Salesforce, SOQL, SQL, Git, GitHub, NodeJS, JavaScript, and TypeScript.</li> <li>Development of routine and one-time ETL scripts using Salesforce, NodeJS, and JavaScript.</li> <li>Development and integration of Microsoft Copilots.</li> </ul> </div> </div> </li> <li class="space-y-2"> <span class="absolute -left-3 w-6 h-6 rounded-full ring-8 ring-slate-800 bg-green-400 flex justify-center items-center"> <i class="fa-solid fa-briefcase fa-fw fa-xs text-white p-2"></i> </span> <div class="mb-2 space-y-2"> <h2 class="font-semibold text-lg text-white">Software Developer, End User Experience Agent</h2> <h3 class="font-normal text-lg text-white"> <a href="https://greenkeyllc.com/" class="border-b-[1px] border-b-transparent hover:border-b-white ease-in-out duration-300">Green Key Resources</a> <small class="ml-1 font-normal text-base text-slate-300">New York City, NY</small> </h3> <p class="text-slate-300">December 2023 - March 2023</p> </div> <div class="rounded-md bg-slate-900 [&>*]:px-4 py-4 space-y-2 divide-y divide-slate-700"> <div class="markdown"> <h4 id="end-user-experience">End User Experience</h4> <ul> <li>Help Desk/IT Support Agent for Microsoft, Windows, Salesforce, and <a href="https://greenkeyllc.com/">Green Key Resources</a> proprietary services using <a href="https://www.freshworks.com/freshdesk/">Freshdesk</a>.</li> <li>Documentation and user acceptance testing for Salesforce.</li> <li>ETL on routine and one-time Salesforce operations.</li> </ul> <h4 id="data-analytics">Data Analytics</h4> <ul> <li>ETL on Salesforce data using Azure, SOQL, SQL, NodeJS, and TypeScript.</li> <li>ETL on Excel data using SOQL, SQL, NodeJs, JavaScript, and TypeScript.</li> </ul> <h4 id="software-development">Software Development</h4> <ul> <li>Production and maintenance of GKR services using Azure, Salesforce, SOQL, SQL, Git, GitHub, NodeJS, JavaScript, and TypeScript.</li> <li>Development of routine and one-time ETL scripts using Salesforce, NodeJS, and JavaScript.</li> </ul> </div> </div> </li> </ul> </section> <section class="!mt-4"> <h1>Education</h1> <ul class="relative border-l-2 border-slate-900 ml-2 pl-6 py-6 space-y-10"> <li class="space-y-2"> <span class="absolute -left-3 w-6 h-6 rounded-full ring-8 ring-slate-800 bg-blue-400 flex justify-center items-center"> <i class="fa-solid fa-graduation-cap fa-fw fa-xs text-white p-2"></i> </span> <div class="mb-2"> <h2 class="font-semibold text-lg text-white">Baruch College <small class="ml-1 font-normal text-base text-slate-300">Class of 2023</small> </h2> <p class="text-slate-300">(BBA) Bachelor of Business Administration<br /> Computer Information Systems<br /> Minor in Mathematics and Operations Management</p> </div> <div class="rounded-md bg-slate-900 [&>*]:px-4 py-4 space-y-2 divide-y divide-slate-700"> <div class="markdown"> <p>Business background in effective and ethical business operations. Includes accounting, business policy, information systems, law, management, and marketing.</p> <h4 id="computer-information-systems">Computer Information Systems</h4> <p><em>Foundation in technical and managerial issues related to the information technology (IT) sector of business. Specifically data analytics, databases, data warehousing, site development, software development, systems development, and IT strategy.</em></p> <ul> <li><a href="https://github.com/Katsute/Baruch-CIS-2300">Programming and Computational Thinking</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-3120">Programming for Analytics</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-3100">Object-Oriented Programming I</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-4170">Data Visualization</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-3400">Database Management Systems</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-4100">Object-Oriented Programming II</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-5800">Information Technology Development and Project Management</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-3630">Principles of Web Design</a></li> <li><a href="https://github.com/Katsute/Baruch-CIS-4400">Data Warehousing for Analytics</a></li> </ul> <h4 id="mathematics">Mathematics</h4> <p><em>Background in advanced mathematics.</em></p> <ul> <li>Calculus I</li> <li>Elementary Calculus II</li> <li>Elementary Probability</li> <li>Linear Algebra and Matrix Methods</li> </ul> <h4 id="operations-management">Operations Management</h4> <p><em>Background in logistics and project management.</em></p> <ul> <li>Business Decision Models</li> <li>Business Process Analysis</li> <li>Project Management</li> </ul> <h4 id="ascend-baruch">Ascend Baruch</h4> <ul> <li><em>Member of the Technology Committee (Fall 2020)</em></li> <li><em>Member of the Technology Committee (Fall 2021)</em></li> </ul> </div> <div> <h5 class="font-semibold text-lg text-slate-300 mt-2 mb-1">Projects</h5> <ul class="space-y-2"> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="/project/mta-information-site" > <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <h6 class="text-white">MTA Information Site <span class="text-sm text-slate-300">(Java)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="/project/solar-solutions" > <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#e34c26]"></span> <h6 class="text-white">Solar Solutions <span class="text-sm text-slate-300">(HTML)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> </ul> </div> <div> <h5 class="font-semibold text-lg text-slate-300 mt-2 mb-1">Courses</h5> <ul class="space-y-2"> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-2300" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3572A5]"></span> <h6 class="text-white">Programming and Computational Thinking <span class="text-sm text-slate-300">(Python)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-3120" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3572A5]"></span> <h6 class="text-white">Programming for Analytics <span class="text-sm text-slate-300">(Python)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-3100" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#f34b7d]"></span> <h6 class="text-white">Object-Oriented Programming I <span class="text-sm text-slate-300">(C++)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-4170" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3572A5]"></span> <h6 class="text-white">Data Visualization <span class="text-sm text-slate-300">(Python)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-3400" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#e38c00]"></span> <h6 class="text-white">Database Management Systems <span class="text-sm text-slate-300">(SQL)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-4100" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#f34b7d]"></span> <h6 class="text-white">Object-Oriented Programming II <span class="text-sm text-slate-300">(C++)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-5800" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <h6 class="text-white">Information Technology Development and Project Management <span class="text-sm text-slate-300">(Java)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-3630" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#e34c26]"></span> <h6 class="text-white">Principles of Web Design <span class="text-sm text-slate-300">(HTML)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Baruch-CIS-4400" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#e38c00]"></span> <h6 class="text-white">Data Warehousing for Analytics <span class="text-sm text-slate-300">(SQL)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> </ul> </div> </div> </li> <li class="space-y-2"> <span class="absolute -left-3 w-6 h-6 rounded-full ring-8 ring-slate-800 bg-orange-400 flex justify-center items-center"> <i class="fa-solid fa-graduation-cap fa-fw fa-xs text-white p-2"></i> </span> <div class="mb-2"> <h2 class="font-semibold text-lg text-white">Bayside High School <small class="ml-1 font-normal text-base text-slate-300">Class of 2019</small> </h2> <p class="text-slate-300">Advanced Regents Diploma<br /> Computer Programming & Web Design with CTE endorsement</p> </div> <div class="rounded-md bg-slate-900 [&>*]:px-4 py-4 space-y-2 divide-y divide-slate-700"> <div class="markdown"> <p>The Computer Programming & Web Design program involves using web-based technologies HTML, CSS, JavaScript, Bootstrap, REST APIs; and object-oriented-programming with Python and Java.</p> <p>This program also involved the completion of a <a href="/project/mr-flour">capstone project</a>, a full year team project involving all of the previously stated technologies and presented at Queens Community College.</p> <h4 id="relevant-assignments">Relevant Assignments</h4> <ul> <li>Created games in Python, such as Flappy Bird.</li> <li>Created a site to check weather using the OpenWeatherMap and Google Map APIs.</li> <li>Created a site featuring a quiz to help students learn about history using Firebase, Google Maps API, and Bootstrap.</li> <li>Created a bouncing ball game in Java.</li> </ul> <h4 id="awards-and-acknowledgements">Awards and Acknowledgements</h4> <ul> <li>AP Scholar Award</li> <li>Excellence in Advanced Placement Computer Science</li> <li>1st place team for capstone project</li> </ul> <h4 id="miscellaneous">Miscellaneous</h4> <ul> <li>Teaching Assistant (TA) for the Attendance Department (2019)</li> </ul> </div> <div> <h5 class="font-semibold text-lg text-slate-300 mt-2 mb-1">Projects</h5> <ul class="space-y-2"> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="/project/mr-flour" > <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <h6 class="text-white">Mr Flour <span class="text-sm text-slate-300">(Java)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> </ul> </div> <div> <h5 class="font-semibold text-lg text-slate-300 mt-2 mb-1">Courses</h5> <ul class="space-y-2"> <li class="rounded-md py-1 px-2 hover:bg-slate-800 ease-in-out duration-300"> <a href="https://github.com/Katsute/Bayside-High-School" rel="noopener noreferrer"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-row items-center space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#e34c26]"></span> <h6 class="text-white">Computer Programming and Web Design <span class="text-sm text-slate-300">(HTML)</span> </h6> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> </ul> </div> </div> </li> </ul> </section> <section> <h1>Products</h1> <ul class="space-y-2"> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/backgroundx"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">BackgroundX</h6> <p class="text-sm text-gray-400">Background image extension for VSCode web and GitHub Codespaces</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#563d7c]"></span> <p> CSS • Extension • March 2024 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/github-center"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">GitHub Center</h6> <p class="text-sm text-gray-400">Center GitHub navigation on large viewports.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#563d7c]"></span> <p> CSS • Extension • December 2023 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/language-board"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">Language Board</h6> <p class="text-sm text-gray-400">Use language keyboards from a mobile device as a desktop keyboard and mouse.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3178c6]"></span> <p> TypeScript • Software • July 2023 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/simplehttpserver5"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">SimpleHttpServer5</h6> <p class="text-sm text-gray-400">A simple and efficient HTTP server for Java.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <p> Java • Library • November 2022 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/settings-repository"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">Settings Repository</h6> <p class="text-sm text-gray-400">Sync VSCode settings to a repository.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3178c6]"></span> <p> TypeScript • Extension • July 2022 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/background"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">Background</h6> <p class="text-sm text-gray-400">The most advanced background image extension for VSCode.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3178c6]"></span> <p> TypeScript • Extension • July 2022 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/onemta"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">OneMTA</h6> <p class="text-sm text-gray-400">The MTA Bus and Subway APIs all in one Java library.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <p> Java • Library • February 2022 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/github-red-issues"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">GitHub Red Issues</h6> <p class="text-sm text-gray-400">Revert closed GitHub issues from purple back to red.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#563d7c]"></span> <p> CSS • Extension • December 2021 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/stop-chrome"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">Stop Chrome</h6> <p class="text-sm text-gray-400">Detect and stop chrome from running in the background.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3178c6]"></span> <p> TypeScript • Software • August 2021 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/desktop-flick"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">Desktop Flick</h6> <p class="text-sm text-gray-400">Use your mobile device as a localized desktop keyboard.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#3178c6]"></span> <p> TypeScript • Software • June 2021 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/mal4j"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">Mal4J</h6> <p class="text-sm text-gray-400">Java wrapper for the official MyAnimeList REST API.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <p> Java • Library • April 2021 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/rexedia"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">Rexedia</h6> <p class="text-sm text-gray-400">Metadata editing for bulk media files using regular expressions.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <p> Java • Software • December 2020 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> <li class="rounded-md py-1 px-2 hover:bg-slate-900 ease-in-out duration-300"> <a href="/product/simplehttpserver"> <div class="flex flex-row justify-between items-center"> <div class="flex flex-col"> <div class="flex flex-col md:flex-row md:items-center md:space-x-2"> <h6 class="font-semibold text-white">SimpleHttpServer</h6> <p class="text-sm text-gray-400">A simplified implementation of the Java sun http server.</p> </div> <div class="flex flex-row items-center text-slate-300 text-sm space-x-2"> <span class="shrink-0 w-3 h-3 rounded-full bg-[#b07219]"></span> <p> Java • Library • March 2020 </p> </div> </div> <i class="fa-solid fa-chevron-right fa-xs fa-fw text-white"></i> </div> </a> </li> </ul> </section> </div> <div class="shrink-0 w-[250px] hidden lg:block mt-2"> <div class="sticky top-4 space-y-4"> <div class="rounded-md font-medium bg-[#181717]/[.25] text-white border border-transparent hover:border-white ease-in-out duration-300"> <a href="https://github.com/Katsute" rel="noopener noreferrer"> <div class="px-4 py-2 flex items-center"> <span class="flex justify-center items-center w-6 h-6 py-1 text-white"> <i class="fa-brands fa-github fa-lg"></i> </span> <p class="ml-2">View on GitHub</p> </div> </a> </div> </div> </div> </div></main> <footer class="flex flex-end"> <p class="text-sm text-slate-500">Copyright © 2024 Keith Chiu</p> </footer> </div> </div> <script> </script> </body> </html>