-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 17.9 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"> 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> </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/cloudflare.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Cloudflare</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/cloudflareworkers.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Cloudflare Workers</h3> </li> <li class="flex flex-row items-center space-x-2"> <img src="/dependencies/node/simpleicons/assets/cloudflarepages.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Cloudflare Pages</h3> </li> <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> <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/powerbi.svg" alt="icon" class="w-4 h-4 select-none"> <h3 class="text-slate-300">Power BI</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">SharePoint</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"> 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> </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> </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>