kjao/homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated info, CSS properly scales to screen size and aspect ratio

Browse Source
This commit is contained in:
Kenneth Jao 2024-02-08 21:12:27 -06:00 committed by kjao
parent c658cb2019
commit 5d28727fb3
2 changed files with 178 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
resume/main.css
View File

@ -1,10 +1,39 @@
html, body {
width: 100%; @media (min-aspect-ratio: 8.5/11) { /* Aspect ratio larger than 1. */
html {
height: 100%; height: 100%;
margin: 0; width: 100%;
overflow: hidden; 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 { h1, h2, h3, h4 {
margin: 0; margin: 0;
} }
@ -17,7 +46,7 @@ h1 {
h2 { h2 {
font-family: 'Josefin Sans', sans-serif; font-family: 'Josefin Sans', sans-serif;
font-weight: 400; font-weight: 400;
letter-spacing: 4px; letter-spacing: 0.5rem;
} }
h3 { h3 {
@ -25,9 +54,24 @@ h3 {
font-weight: 300; 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 { #wrapper {
overflow-x: hidden;
overflow-y: auto;
display: grid; display: grid;
grid-template-columns: 3fr 7fr; grid-template-columns: 3fr 7fr;
height: 100%; height: 100%;
@ -41,6 +85,7 @@ h3 {
background-color: #1F1F1F; background-color: #1F1F1F;
} }
#mainCont { #mainCont {
height: 100%; height: 100%;
grid-column: 2; grid-column: 2;
@ -50,7 +95,7 @@ h3 {
.topCont { .topCont {
width: 100%; width: 100%;
height: 20vw; height: 20rem;
} }
.midCont { .midCont {
@ -58,35 +103,33 @@ h3 {
} }
#mainCont .topCont h1 { #mainCont .topCont h1 {
padding: 13% 0 0 10%; padding: 8rem 0 0 7rem;
font-size: 220%;
} }
#mainCont .topCont h2 { #mainCont .topCont h2 {
padding: 0 0 0 10%; padding: 0 0 0 7rem;
font-size: 75%;
color: #939393; color: #939393;
} }
#sidebar .midCont .subsection { #sidebar .midCont .subsection {
padding: 0 0 10% 10%; padding: 0 0 4rem 4rem;
} }
#sidebar .midCont .subsection h2 { #sidebar .midCont .subsection h2 {
color: #E5E5E5; color: #E5E5E5;
padding: 3%; padding: 1rem;
border-bottom: 4px solid #E5E5E5; border-bottom: 0.4rem solid #E5E5E5;
} }
#sidebar .midCont .subsection .subValue { #sidebar .midCont .subsection .subValue {
display: grid; display: grid;
padding: 2.5% 0 2.5% 0; padding: 1rem 0 1rem 0;
grid-template-columns: 15fr 75fr; grid-template-columns: 15fr 75fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
} }
#sidebar .midCont .subsection div:nth-child(2) { #sidebar .midCont .subsection div:nth-child(2) {
padding-top: 5%; padding-top: 2rem;
} }
#sidebar .midCont .subValue i { #sidebar .midCont .subValue i {
@ -94,34 +137,23 @@ h3 {
grid-row: 1/3; grid-row: 1/3;
color: #E5E5E5; color: #E5E5E5;
margin: auto; margin: auto;
font-size: 120%;
} }
#sidebar .midCont .subValue h3:nth-child(2) { #sidebar .midCont .subValue h3:nth-child(2) {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
color: #E5E5E5; color: #E5E5E5;
font-size: 90%; padding-left: 1rem;
padding-left: 5%;
} }
#sidebar .midCont .subValue h3:nth-child(n+3) { #sidebar .midCont .subValue h3:nth-child(n+3) {
grid-column: 2; grid-column: 2;
color: #939393; color: #939393;
font-size: 90%; padding-left: 1rem;
padding-left: 5%;
} }
#mainCont .midCont {
font-size: 50%;
}
#sidebar .midCont {
font-size: 80%;
}
#mainCont .midCont .subsection { #mainCont .midCont .subsection {
padding: 0 10% 2% 10%; padding: 0 6.5rem 1.3rem 6.5rem;
display: grid; display: grid;
grid-template-columns: 1fr 9fr; grid-template-columns: 1fr 9fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
@ -132,32 +164,34 @@ h3 {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
margin: auto; margin: auto;
width: 4vw; width: 80%;
height: 4vw; aspect-ratio: 1;
border: 3px solid #1F1F1F; border: 0.25rem solid #1F1F1F;
border-radius: 50px border-radius: 50%;
} }
.subCircle i { .subCircle i {margin: auto;
margin: auto; atcolor: #1F1F1F;
color: #1F1F1F;
font-size: 140%;
} }
#mainCont .midCont .subsection h2 { #mainCont .midCont .subsection h2 {
color: #1F1F1F; color: #1F1F1F;
padding: 3%; padding: 1.5rem;
border-bottom: 4px solid #1F1F1F; border-bottom: 0.4rem solid #1F1F1F;
} }
#mainCont .midCont .subValue { #mainCont .midCont .subValue {
padding: 2.5% 0 0 0; padding: 1.1rem 0 0 0;
display: grid; display: grid;
grid-column: 2; grid-column: 2;
grid-template-columns: 2fr 8fr; grid-template-columns: 2fr 9fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
} }
#mainCont .midCont .subsection div:nth-child(3) {
padding-top: 2rem;
}
#mainCont .midCont .subValue h3:nth-child(1) { #mainCont .midCont .subValue h3:nth-child(1) {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
@ -175,25 +209,11 @@ h3 {
font-style: italic; font-style: italic;
} }
#mainCont .midCont .subValue h3:nth-child(4) { #mainCont .midCont .subValue h3 {
grid-column: 2; grid-column: 2;
font-style: normal; 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 { @media print {
.subsection div{ page-break-before: always; } .subsection div{ page-break-before: always; }
} }

162
resume/main.js
View File

@ -1,6 +1,6 @@
var titleInfo = { var titleInfo = {
name: "Kenneth Jao", name: "Kenneth Jao",
caption: "Engineer and Developer", caption: "Researcher, Engineer and Developer",
image: null image: null
}; };
@ -15,7 +15,7 @@ var sidebarInfo = [
}, },
{ {
name: "Address", name: "Address",
value: ["Lansing", "Michigan USA"], value: ["Champaign", "Illinois USA"],
icon: "fas fa-map-marker-alt" icon: "fas fa-map-marker-alt"
}, },
{ {
@ -25,7 +25,7 @@ var sidebarInfo = [
}, },
{ {
name: "Email", name: "Email",
value: ["kennethjao01 at gmail.com", "jaokenne at msu.edu"], value: ["kennethjao01 at gmail.com", "ksjao2 at illinois.edu"],
icon: "fas fa-envelope" icon: "fas fa-envelope"
} }
] ]
@ -35,7 +35,7 @@ var sidebarInfo = [
subsections: [ subsections: [
{ {
name: "GitHub", name: "GitHub",
value: "https://github.com/ksjdragon", value: ["https://github.com/ksjdragon", "https://git.acem.illinois.edu"],
icon: "fab fa-github" icon: "fab fa-github"
}, },
{ {
@ -53,16 +53,22 @@ var mainContInfo = [
icon: "fa-book-open", icon: "fa-book-open",
values: [ values: [
{ {
name: "Michigan State University (MSU), East Lansing", name: "University of Illinois Urbana-Champaign (UIUC), Champaign",
caption: "Majoring in Computational Mathematics, Mathematics.\nMinoring in Computer Science", caption: "MS in Electrical Engineering",
date: "2018-2022", date: "2022-2024",
desc: "Cumulative GPA: 3.9401" desc: "Cumulative GPA: 3.94"
}, },
{ {
name: "Dean's List", name: "Defects and frustration in the packing of soft balls",
caption: "Michigan State University", 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: "2018-2021", date: "2022",
desc: "Cumulative GPA higher than 3.5 for the year. Achieved for 3 years." 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: "BS in Computational Mathematics. BS in Mathematics. Minor in Computer Science",
date: "2018-2022",
desc: "Cumulative GPA: 3.9401"
} }
] ]
}, },
@ -71,18 +77,29 @@ var mainContInfo = [
icon: "fa-briefcase", icon: "fa-briefcase",
values: [ values: [
{ {
name: "Undergraduate Learning Assistant (ULA)", name: "Research Assistant in Electrical Engineering",
caption: "Assistant to the professor (10 hours per week)", caption: "Researched with Zhen Peng, professor of Electrical Engineering at UIUC.",
date: "Fall 2021", date: "2022-2024",
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." 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", name: "Undergraduate Researcher in Mathematics",
caption: "Researched with Keith Promislow, chairperson of the Mathematics Department at MSU.", caption: "Researched with Keith Promislow, chairperson of the Mathematics Department at MSU.",
date: "2021-2022", 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]" 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."
} }
] ]
}, },
{ {
@ -93,58 +110,66 @@ var mainContInfo = [
name: "Programming", name: "Programming",
caption: "Software engineering", caption: "Software engineering",
date: "Since 2014", 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", name: "(Linux) System Administrator",
caption: "Server setup and maintenance.", caption: "Server setup, maintenance, and application management",
date: "Since 2014", 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." 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: "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]"
}
] ]
} }
]
}
// {
// 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]; var sidebarTop = document.querySelectorAll("#sidebar .topCont")[0];
@ -171,7 +196,14 @@ function mainItems() {
subValue.appendChild(el("h3", item.date, "", "")); subValue.appendChild(el("h3", item.date, "", ""));
subValue.appendChild(el("h3", item.name, "", "")); subValue.appendChild(el("h3", item.name, "", ""));
subValue.appendChild(el("h3", item.caption, "", "")); subValue.appendChild(el("h3", item.caption, "", ""));
if(Array.isArray(item.desc)) {
item.desc.forEach(function(val, index) {
subValue.appendChild(el("h3", val, "", ""));
});
} else {
subValue.appendChild(el("h3", item.desc, "", "")); subValue.appendChild(el("h3", item.desc, "", ""));
}
subsection.appendChild(subValue); subsection.appendChild(subValue);
}); });
mainMid.appendChild(subsection); mainMid.appendChild(subsection);