diff --git a/cover/favicon.ico b/cover/favicon.ico new file mode 100755 index 0000000..0901557 Binary files /dev/null and b/cover/favicon.ico differ diff --git a/cover/index.html b/cover/index.html new file mode 100755 index 0000000..8854b3a --- /dev/null +++ b/cover/index.html @@ -0,0 +1,52 @@ + + + + + Kenneth Jao + + + + + + + +
+ +
+
+
+
+

+



+ To whom it may concern,

+ My name is Kenneth Jao. My interests and expertise lie in both software and hardware design, supported by all relevant underlying mathematics. With experience in both front-end user interface design, implementing optimized and secure back-end algorithms, as well as an understanding of Unix system administration, I believe I would be a valuable asset to your software development team. +

+ In my 6 years of programming experience, I have worked with several others on projects. We created a web application, Hourglass, to help students organize schoolwork collectively and more efficiently. Besides programming itself, I have taken the role of a project leader. I organize and structure the environment and requirements, to keep the workflow as smooth as possible. By having experienced the importance of standardization and documentation for projects, I believe I will easily adapt to far larger projects in the field, no matter what your team may be working on. +

+ With regards to programming, I also have the following skills: +

+
    +
  • Abstraction for object oriented programming
    • +
  • Developing algorithms for mathematical concepts
    • +
  • Understanding of network structures
    • +
  • Data analysis and aggregation through scripting and scraping
    • +
+
+

+ Most importantly, I am confident in my ability to work with others in a high-paced environment, and will be a positive impact in the work that is done. Thank you for your time for reviewing my application among hundreds of others. I look forward to your response. +

+ + Sincerely,
+ Kenneth Jao +

+
+
+
+ + + \ No newline at end of file diff --git a/cover/main.css b/cover/main.css new file mode 100755 index 0000000..69224bc --- /dev/null +++ b/cover/main.css @@ -0,0 +1,206 @@ +html, body { + width: 100%; + height: 100%; + margin: 0; + overflow: hidden; +} + +h1, h2, h3, h4 { + margin: 0; +} + +h1 { + font-family: 'Josefin Sans', sans-serif; + font-weight: 700; +} + +h2 { + font-family: 'Josefin Sans', sans-serif; + font-weight: 400; + letter-spacing: 4px; +} + +h3 { + font-family: 'Dosis', sans-serif; + font-weight: 300; +} + +p, li { + font-family: 'Dosis', sans-serif; + font-weight: 300; + font-size: 140%; + margin: 0 10% 0 10%; +} + +ul { + list-style-type: circle; +} + +#wrapper { + overflow-x: hidden; + overflow-y: auto; + display: grid; + grid-template-columns: 3fr 7fr; + height: 100%; + width: 100%; +} + +#sidebar { + height: 100%; + grid-column: 1; + grid-row: 1; + background-color: #1F1F1F; +} + +#mainCont { + height: 100%; + grid-column: 2; + grid-row: 1; + background-color: #E5E5E5; +} + +.topCont { + width: 100%; + height: 20vw; +} + +.midCont { + width: 100%; +} + +#mainCont .topCont h1 { + padding: 13% 0 0 10%; + font-size: 300%; +} + +#mainCont .topCont h2 { + padding: 0 0 0 10%; + font-size: 95%; + color: #939393; +} + +#sidebar .midCont .subsection { + padding: 0 0 10% 10%; +} + +#sidebar .midCont .subsection h2 { + color: #E5E5E5; + padding: 3%; + border-bottom: 4px solid #E5E5E5; +} + +#sidebar .midCont .subsection .subValue { + display: grid; + padding: 2.5% 0 2.5% 0; + grid-template-columns: 15fr 75fr; + grid-template-rows: 1fr 1fr; +} + +#sidebar .midCont .subsection div:nth-child(2) { + padding-top: 5%; +} + +#sidebar .midCont .subValue i { + grid-column: 1; + grid-row: 1/3; + color: #E5E5E5; + margin: auto; + font-size: 120%; +} + +#sidebar .midCont .subValue h3:nth-child(2) { + grid-column: 2; + grid-row: 1; + color: #E5E5E5; + font-size: 90%; + padding-left: 5%; +} + +#sidebar .midCont .subValue h3:nth-child(n+3) { + grid-column: 2; + color: #939393; + font-size: 90%; + padding-left: 5%; +} + +#mainCont .midCont { + font-size: 80%; +} + +#mainCont .midCont .subsection { + padding: 0 10% 2% 10%; + display: grid; + grid-template-columns: 1fr 9fr; + grid-template-rows: 1fr; +} + +#mainCont .midCont .subsection .subCircle { + display: grid; + grid-column: 1; + grid-row: 1; + margin: auto; + width: 4vw; + height: 4vw; + border: 3px solid #1F1F1F; + border-radius: 50px +} + +.subCircle i { + margin: auto; + color: #1F1F1F; + font-size: 120%; +} + +#mainCont .midCont .subsection h2 { + color: #1F1F1F; + padding: 3%; + border-bottom: 4px solid #1F1F1F; +} + +#mainCont .midCont .subValue { + padding: 2.5% 0 0 0; + display: grid; + grid-column: 2; + grid-template-columns: 2fr 8fr; + grid-template-rows: 1fr; +} + +#mainCont .midCont .subValue h3:nth-child(1) { + grid-column: 1; + grid-row: 1; + color: #939393; +} + +#mainCont .midCont .subValue h3:nth-child(2) { + grid-column: 2; + font-weight: 700; + font-style: bold; +} + +#mainCont .midCont .subValue h3:nth-child(3) { + grid-column: 2; + font-style: italic; +} + +#mainCont .midCont .subValue h3:nth-child(4) { + grid-column: 2; + font-style: normal; +} + +#mainCont .midCont .subLine { + background-color: #1F1F1F; + margin: auto; + height: 100%; + width: 4px; +} + +#mainCont .midCont .subLine i { + color: #1F1F1f; + margin: 0 auto 0 auto; + padding: 10%; +} + +@media print { + + .subsection div{ page-break-before: always; } +} \ No newline at end of file diff --git a/cover/main.js b/cover/main.js new file mode 100755 index 0000000..36d5d0d --- /dev/null +++ b/cover/main.js @@ -0,0 +1,110 @@ +var titleInfo = { + name: "Kenneth Jao", + caption: "Engineer and Developer", + image: null +}; + +var sidebarInfo = [ + { + name: "Info", + subsections: [ + { + name: "Name", + value: "Kenneth Jao", + icon: "fas fa-user" + }, + { + name: "Address", + value: ["Lansing", "Michigan USA"], + icon: "fas fa-map-marker-alt" + }, + { + name: "Phone", + value: "+1-(248)-749-3439", + icon: "fas fa-phone" + }, + { + name: "Email", + value: ["kennethjao01 at gmail.com", "jaokenne at msu.edu"], + icon: "fas fa-envelope" + } + ] + }, + { + name: "Social", + subsections: [ + { + name: "GitHub", + value: "https://github.com/ksjdragon", + icon: "fab fa-github" + } + ] + } +]; + +var sidebarTop = document.querySelectorAll("#sidebar .topCont")[0]; +var sidebarMid = document.querySelectorAll("#sidebar .midCont")[0]; +var mainTop = document.querySelectorAll("#mainCont .topCont")[0]; +var mainMid = document.querySelectorAll("#mainCont .midCont")[0]; + +function titleItems() { + var name = el("h1", titleInfo.name.toUpperCase()); + mainTop.appendChild(name); + var caption = el("h2", titleInfo.caption.toUpperCase()); + mainTop.appendChild(caption); +} + +function mainItems() { + mainContInfo.forEach(function(ele) { + var subsection = el("div", "", "", "subsection"); + var circle = el("div", "", "", "subCircle"); + circle.appendChild(el("i", "", "", "fas " + ele.icon)); + subsection.appendChild(circle); + subsection.appendChild(el("h2", ele.name.toUpperCase(), "", "subTitle")); + ele.values.forEach(function(item) { + var subValue = el("div", "", "", "subValue"); + subValue.appendChild(el("h3", item.date, "", "")); + subValue.appendChild(el("h3", item.name, "", "")); + subValue.appendChild(el("h3", item.caption, "", "")); + subValue.appendChild(el("h3", item.desc, "", "")); + subsection.appendChild(subValue); + }); + mainMid.appendChild(subsection); + }); +} + +function sidebarItems() { + sidebarInfo.forEach(function(ele) { + var subsection = el("div", "", "", "subsection"); + subsection.appendChild(el("h2", ele.name.toUpperCase(), "", "subTitle")); + ele.subsections.forEach(function(item) { + var subValue = el("div", "", "", "subValue"); + subValue.appendChild(el("i", "", "", item.icon)); + subValue.appendChild(el("h3", item.name, "", "")); + if(Array.isArray(item.value)) { + item.value.forEach(function(val, index) { + subValue.appendChild(el("h3", val, "", "")); + if(item.value.length != index+1) subValue.appendChild(el("br")); + }); + } else { + subValue.appendChild(el("h3", item.value, "", "")); + } + subsection.appendChild(subValue); + }); + sidebarMid.appendChild(subsection); + }); +} + +function el(DOM, textNode, id, className) { + id = id || ""; + className = className || ""; + textNode = textNode || ""; + var element = document.createElement(DOM); + if(id.length != 0) element.id = id; + if(className.length != 0) element.className = className; + if(textNode.length != 0) element.appendChild(document.createTextNode(textNode)); + return element; +} + +titleItems(); +sidebarItems(); diff --git a/resume/main.css b/resume/main.css index 76ed8cc..97e230a 100755 --- a/resume/main.css +++ b/resume/main.css @@ -59,12 +59,12 @@ h3 { #mainCont .topCont h1 { padding: 13% 0 0 10%; - font-size: 300%; + font-size: 220%; } #mainCont .topCont h2 { padding: 0 0 0 10%; - font-size: 95%; + font-size: 75%; color: #939393; } @@ -113,9 +113,13 @@ h3 { } #mainCont .midCont { - font-size: 80%; + font-size: 50%; } + #sidebar .midCont { + font-size: 80%; + } + #mainCont .midCont .subsection { padding: 0 10% 2% 10%; display: grid; @@ -137,7 +141,7 @@ h3 { .subCircle i { margin: auto; color: #1F1F1F; - font-size: 120%; + font-size: 140%; } #mainCont .midCont .subsection h2 { diff --git a/resume/main.js b/resume/main.js index 5af303e..4c76b90 100755 --- a/resume/main.js +++ b/resume/main.js @@ -37,6 +37,11 @@ var sidebarInfo = [ name: "GitHub", value: "https://github.com/ksjdragon", icon: "fab fa-github" + }, + { + name: "LinkedIn", + value: "https://linkedin.com/in/kjao", + icon: "fab fa-linkedin" } ] } @@ -48,13 +53,38 @@ var mainContInfo = [ icon: "fa-book-open", values: [ { - name: "Michigan State University, East Lansing", + name: "Michigan State University (MSU), East Lansing", caption: "Majoring in Computational Mathematics, Mathematics.\nMinoring in Computer Science", date: "2018-2022", - desc: "Cumulative GPA: 3.91" + desc: "Cumulative GPA: 3.9401" + }, + { + name: "Dean's List", + caption: "Michigan State University", + date: "2018-2021", + desc: "Cumulative GPA higher than 3.5 for the year. Achieved for 3 years." } ] }, + { + name: "Work Experience", + icon: "fa-briefcase", + values: [ + { + name: "Undergraduate Learning Assistant (ULA)", + caption: "Assistant to the professor (10 hours per week)", + date: "Fall 2021", + desc: "For the class 'CMSE/MTH 314 Matrix Algebra with Computational Applications', I aided in facilliating an interactive classroom, alongside grading assignments and hosting office hours." + }, + { + name: "Undergraduate Researcher in Mathematics", + caption: "Researched with Keith Promislow, chairperson of the Mathematics Department at MSU.", + date: "2021-2022", + desc: "Conducted theoretical mathematical research into soft packing problems, modeling with Partial Differential Equations.\n Wrote programs for all of the numerical simulations and analysis, along with a Python package. [https://github.com/ksjdragon/squish]" + } + + ] + }, { name: "Skills", icon: "fa-wrench", @@ -63,55 +93,54 @@ var mainContInfo = [ name: "Programming", caption: "Software engineering", date: "Since 2014", - desc: "Fluent in HTML, CSS, JavaScript, Python, C, C++. Can pick up languages and libraries with ease. Full-stack web app developer, experience in bash scripting, and deep learning." + desc: "Fluent in Python, C, C++, HTML, CSS, and JavaScript. Can pick up languages and libraries with ease. Full-stack web app developer, experience in bash scripting, and deep learning." }, { name: "System Administrator", caption: "Server setup and maintenance.", date: "Since 2014", desc: "Proficient in maintaining and configuring up servers, and organizing network systems. Can secure implementations of server applications with industry standard cybersecurity." - }, - { - name: "User Interface Design", - caption: "Interface, logo, and background design", - date: "Since 2012", - desc: "Proficient with GIMP and Blender for front-end web interfaces" - } - ] + } ] }, { name: "Projects", icon: "fa-list-ol", values: [ { - name: "Video Compression Research", - caption: "Compression through multi-dimensional transform analysis.", - date: "Since 2018", - desc: "Personal research into new compression techniques through extended applications of wave transforms, spatial and temporal data rearrangement, and component analysis." + name: "Google FooBar Challenge", + caption: "Coding challenge hosted by Google.", + date: "Summer 2020", + desc: "Completed all 5 levels of Google Foobar challenge." + }, + { + name: "Virtual Synthesizer", + caption: "Designed custom synthesizer programs for self-use in music production", + date: "Fall 2020", + desc: "Using signal processing concepts and studying historical circuits, recreated virtual synthesizers." }, { name: "VR Arm Tracking Device", caption: "Virtual reality hardware development", date: "2016", - desc: "Arm tracking done through gyroscope IMUs, with 9 degrees of freedom. A testing game was created to demonstrate tracking capabilities." + desc: "Arm tracking done through gyroscope IMUs, with 9 degrees of freedom. A testing game was created to demonstrate tracking capabilities." }, { name: "Haptic Feedback Through Wave Interference", caption: "Mathematical investigation of applications of wave interference", date: "2017", - desc: "A mathematical proof and experimentation of controllable wave interference to induce correct superposition. Explored multiple applications including a possibility of simulating highly accurate haptic feedback." + desc: "Investigated more complex haptic feedback through wave interference using linear resonant actuators." }, { - name: "BinBin", - caption: "Cloud storage web interface application", + name: "Cloud Storage Web Application", + caption: "Server side programming and account management with file security", date: "2016", - desc: "Cloud database web app created to ease file downloading and storage for servers, with accounts and sharing systems." + desc: "Cloud database web app created to ease file downloading and storage for servers, with accounts and sharing systems. [https://github.com/ksjdragon/binbin]" }, { - name: "Hourglass", - caption: "Collaborative school-wide online planner", + name: "Collaborative Online Planner", + caption: "Database management and responsive and reactive web design", date: "2017", - desc: "Online planning web app designed for academic use. Enabled users to have a collaborative planner specific to individual classes and teachers. " + desc: "Online planning web app designed for academic use. Enabled users to have a collaborative planner specific to individual classes and teachers. [https://github.com/ksjdragon/hourglass]" } ] @@ -142,7 +171,7 @@ function mainItems() { subValue.appendChild(el("h3", item.date, "", "")); subValue.appendChild(el("h3", item.name, "", "")); subValue.appendChild(el("h3", item.caption, "", "")); - subValue.appendChild(el("h3", item.desc, "", "")); + subValue.appendChild(el("h3", item.desc, "", "")); subsection.appendChild(subValue); }); mainMid.appendChild(subsection); @@ -164,7 +193,7 @@ function sidebarItems() { }); } else { subValue.appendChild(el("h3", item.value, "", "")); - } + } subsection.appendChild(subValue); }); sidebarMid.appendChild(subsection);