diff --git a/resume/main.css b/resume/main.css index 97e230a..0daa14b 100755 --- a/resume/main.css +++ b/resume/main.css @@ -1,10 +1,39 @@ -html, body { - width: 100%; - height: 100%; - margin: 0; - overflow: hidden; + +@media (min-aspect-ratio: 8.5/11) { /* Aspect ratio larger than 1. */ + html { + height: 100%; + width: 100%; + display: flex; + align-items: center; + background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%); + font-size: calc(1vh * 8.5/11); + } + + body { + height: 100%; + aspect-ratio: 8.5/11; + margin: auto; + } } +@media (max-aspect-ratio: 8.5/11) { /* Aspect ratio less than 1 */ + html { + height: 100%; + width: 100%; + display: flex; + align-items: center; + background: linear-gradient(0deg, #2a2a2a 0%, #4b4b4b 50%, #2a2a2a 100%); + font-size: 1vw; + } + + body { + width: 100%; + aspect-ratio: 8.5/11; + margin: auto; + } +} + +/** Fonts */ h1, h2, h3, h4 { margin: 0; } @@ -17,7 +46,7 @@ h1 { h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 400; - letter-spacing: 4px; + letter-spacing: 0.5rem; } h3 { @@ -25,9 +54,24 @@ h3 { font-weight: 300; } +h1 { + font-size: 4rem; +} + +h2 { + font-size: 1.5rem; +} + +#sidebar h3, #sidebar i, .subCircle i { + font-size: 1.5rem; +} + +#mainCont h3 { + font-size: 1.3rem; +} + +/** Placement */ #wrapper { - overflow-x: hidden; - overflow-y: auto; display: grid; grid-template-columns: 3fr 7fr; height: 100%; @@ -41,6 +85,7 @@ h3 { background-color: #1F1F1F; } + #mainCont { height: 100%; grid-column: 2; @@ -50,7 +95,7 @@ h3 { .topCont { width: 100%; - height: 20vw; + height: 20rem; } .midCont { @@ -58,35 +103,33 @@ h3 { } #mainCont .topCont h1 { - padding: 13% 0 0 10%; - font-size: 220%; + padding: 8rem 0 0 7rem; } #mainCont .topCont h2 { - padding: 0 0 0 10%; - font-size: 75%; + padding: 0 0 0 7rem; color: #939393; } #sidebar .midCont .subsection { - padding: 0 0 10% 10%; + padding: 0 0 4rem 4rem; } #sidebar .midCont .subsection h2 { color: #E5E5E5; - padding: 3%; - border-bottom: 4px solid #E5E5E5; + padding: 1rem; + border-bottom: 0.4rem solid #E5E5E5; } #sidebar .midCont .subsection .subValue { display: grid; - padding: 2.5% 0 2.5% 0; + padding: 1rem 0 1rem 0; grid-template-columns: 15fr 75fr; grid-template-rows: 1fr 1fr; } #sidebar .midCont .subsection div:nth-child(2) { - padding-top: 5%; + padding-top: 2rem; } #sidebar .midCont .subValue i { @@ -94,34 +137,23 @@ h3 { 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%; + padding-left: 1rem; } #sidebar .midCont .subValue h3:nth-child(n+3) { grid-column: 2; color: #939393; - font-size: 90%; - padding-left: 5%; + padding-left: 1rem; } -#mainCont .midCont { - font-size: 50%; -} - - #sidebar .midCont { - font-size: 80%; - } - #mainCont .midCont .subsection { - padding: 0 10% 2% 10%; + padding: 0 6.5rem 1.3rem 6.5rem; display: grid; grid-template-columns: 1fr 9fr; grid-template-rows: 1fr; @@ -132,32 +164,34 @@ h3 { grid-column: 1; grid-row: 1; margin: auto; - width: 4vw; - height: 4vw; - border: 3px solid #1F1F1F; - border-radius: 50px + width: 80%; + aspect-ratio: 1; + border: 0.25rem solid #1F1F1F; + border-radius: 50%; } -.subCircle i { - margin: auto; - color: #1F1F1F; - font-size: 140%; +.subCircle i {margin: auto; +atcolor: #1F1F1F; } #mainCont .midCont .subsection h2 { color: #1F1F1F; - padding: 3%; - border-bottom: 4px solid #1F1F1F; + padding: 1.5rem; + border-bottom: 0.4rem solid #1F1F1F; } #mainCont .midCont .subValue { - padding: 2.5% 0 0 0; + padding: 1.1rem 0 0 0; display: grid; grid-column: 2; - grid-template-columns: 2fr 8fr; + grid-template-columns: 2fr 9fr; grid-template-rows: 1fr; } +#mainCont .midCont .subsection div:nth-child(3) { + padding-top: 2rem; +} + #mainCont .midCont .subValue h3:nth-child(1) { grid-column: 1; grid-row: 1; @@ -175,25 +209,11 @@ h3 { font-style: italic; } -#mainCont .midCont .subValue h3:nth-child(4) { +#mainCont .midCont .subValue h3 { 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/resume/main.js b/resume/main.js index b83a50c..90b92ae 100755 --- a/resume/main.js +++ b/resume/main.js @@ -1,6 +1,6 @@ var titleInfo = { name: "Kenneth Jao", - caption: "Engineer and Developer", + caption: "Researcher, Engineer and Developer", image: null }; @@ -15,7 +15,7 @@ var sidebarInfo = [ }, { name: "Address", - value: ["Lansing", "Michigan USA"], + value: ["Champaign", "Illinois USA"], icon: "fas fa-map-marker-alt" }, { @@ -25,7 +25,7 @@ var sidebarInfo = [ }, { name: "Email", - value: ["kennethjao01 at gmail.com", "jaokenne at msu.edu"], + value: ["kennethjao01 at gmail.com", "ksjao2 at illinois.edu"], icon: "fas fa-envelope" } ] @@ -35,7 +35,7 @@ var sidebarInfo = [ subsections: [ { name: "GitHub", - value: "https://github.com/ksjdragon", + value: ["https://github.com/ksjdragon", "https://git.acem.illinois.edu"], icon: "fab fa-github" }, { @@ -52,17 +52,23 @@ var mainContInfo = [ name: "Education", icon: "fa-book-open", values: [ + { + name: "University of Illinois Urbana-Champaign (UIUC), Champaign", + caption: "MS in Electrical Engineering", + date: "2022-2024", + desc: "Cumulative GPA: 3.94" + }, + { + name: "Defects and frustration in the packing of soft balls", + caption: "Jao, Kenneth, et al. “Defects and frustration in the packing of Soft Balls.” Physica D: Nonlinear Phenomena, vol. 445, Mar. 2023, p. 133631, https://doi.org/10.1016/j.physd.2022.133631.", + date: "2022", + desc: "First author publication coauthored with Keith Promislow, creating modeling for star polymers, eliciting a complex energy landscape despite a simple model." + }, { name: "Michigan State University (MSU), East Lansing", - caption: "Majoring in Computational Mathematics, Mathematics.\nMinoring in Computer Science", + caption: "BS in Computational Mathematics. BS in Mathematics. Minor in Computer Science", date: "2018-2022", 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." } ] }, @@ -70,19 +76,30 @@ var mainContInfo = [ name: "Work Experience", icon: "fa-briefcase", values: [ + { + name: "Research Assistant in Electrical Engineering", + caption: "Researched with Zhen Peng, professor of Electrical Engineering at UIUC.", + date: "2022-2024", + desc: [ + "Researched topics in large-scale computational simulation, quantum computing applications, and surrogate model creation and optimization with Gaussian Processes and Machine Learning, primarily applied to EE.", + "Handled DevOps within the lab: automated dependency management, created build process and library for CPU/GPU targets for rapid testing, and managed local Git servers" + ] + }, + { + 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.", + "Wrote custom software for all of the numerical simulations and analysis, compile into a Python package. [https://github.com/ksjdragon/squish]" + ] + }, { 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 facilitating 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]" } - ] }, { @@ -93,58 +110,66 @@ var mainContInfo = [ name: "Programming", caption: "Software engineering", date: "Since 2014", - 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." + desc: [ + "Fluent in Python, C/C++, CUDA, HTML/CSS/JavaScript, JQuery, Git, Bash.", + "Full-stack web app developer, significant experience with large-scale GPU/HPCC software, complex build environments.", + "Experience with scripting web-crawlers, data (pre)processors, small server-side middleware between APIs." + ] }, { - name: "System Administrator", - caption: "Server setup and maintenance.", + name: "(Linux) System Administrator", + caption: "Server setup, maintenance, and application management", 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: "Projects", - icon: "fa-list-ol", - values: [ - { - 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." - }, - { - name: "Haptic Feedback Through Wave Interference", - caption: "Mathematical investigation of applications of wave interference", - date: "2017", - desc: "Investigated more complex haptic feedback through wave interference using linear resonant actuators." - }, - { - 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. [https://github.com/ksjdragon/binbin]" - }, - { - 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. [https://github.com/ksjdragon/hourglass]" + desc: [ + "Proficient in maintaining and configuring Linux servers, and organizing network systems. Can secure implementations of server applications with industry standard cybersecurity.", + "Utilized Docker/Podman, AWS, Git, and NGINX web servers, load balancing for production-level external-facing and internal-facing applications." + ] } - - ] + ] } + // { + // name: "Other", + // icon: "fa-list-ol", + // values: [ + // { + // name: "Google FooBar Challenge", + // caption: "Coding challenge hosted by Google for hiring", + // 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." + // }, + // { + // name: "Haptic Feedback Through Wave Interference", + // caption: "Mathematical investigation of applications of wave interference", + // date: "2017", + // desc: "Investigated more complex haptic feedback through wave interference using linear resonant actuators." + // }, + // { + // 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. [https:github.com/ksjdragon/binbin]" + // }, + // { + // 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. [https:github.com/ksjdragon/hourglass]" + // } + + // ] + // } ]; var sidebarTop = document.querySelectorAll("#sidebar .topCont")[0]; @@ -171,7 +196,14 @@ 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, "", "")); + + if(Array.isArray(item.desc)) { + item.desc.forEach(function(val, index) { + subValue.appendChild(el("h3", val, "", "")); + }); + } else { + subValue.appendChild(el("h3", item.desc, "", "")); + } subsection.appendChild(subValue); }); mainMid.appendChild(subsection);